fix: heading ** removed

example/storybook/src/advanced/Fonts/index.stories.mdx

@@ -23,7 +23,7 @@ When you want to use a specific font in your application, you have to follow two
 
 For this section, we will focus on loading fonts from [Google](https://fonts.google.com/)
 
-### **For Expo projects**
+### For Expo projects
 
 To load **Google fonts** in Expo, we have to install `expo-font` & follow following steps:
 
@@ -55,8 +55,7 @@ import {
   Inter_500Medium,
   Inter_600SemiBold,
   Inter_700Bold,
-  Inter_900Black,
-} from "@expo-google-fonts/inter";
+  Inter_900Black, } from "@expo-google-fonts/inter";
 ```
 
 5. Load the font in your application.
@@ -94,7 +93,7 @@ import { useFonts } from 'expo-font';
   });
 ```
 
-### **For Next.js projects**
+### For Next.js projects
 
 To load **google-fonts** in Next.js application, we have to follow following steps:
 
@@ -112,15 +111,15 @@ To load **local-fonts** in Next.js application, we have to follow following step
 1. Download the font files and add them to the `public/assets` folder.
 2. Add the css to attach font files to the font family in the `global.css` file in the `styles` folder.
 
-```bash
+```css
 @font-face {
-  font-family: "inter";
+  font-family: 'inter';
   src: url('/assets/inter/Inter-Regular.ttf');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
-  font-family: "inter";
+  font-family: 'inter';
   src: url('/asset/inter/Inter-Bold.ttf');
   font-weight: bold;
   font-style: normal;
@@ -132,7 +131,7 @@ To load **local-fonts** in Next.js application, we have to follow following step
 You already have the font loaded in your application, now you can apply the font in your application.
 Add the font name in the `gluestack.config.js` file in the `fonts` object. If you are confused where to find the fonts config object? Please go through [this](https://gluestack.io/ui/docs/theme-configuration/theme/default-tokens) documentation (specifically the typography section).
 
-```bash
+```js
 fonts: {
   heading: "inter", // Heading component uses this by default
   body: "inter", // Text component uses this by default
@@ -145,7 +144,7 @@ fonts: {
 In gluestack-ui, components are styled using `styled` provided by `@gluestack-style/react` package, [check here](/style)
 This package provides a simple way to use fonts using the FontResolver plugin.
 
-```bash
+```js
 import { FontResolver } from '@gluestack-style/react';
 
 // const fontMapper = (style: any) => {
@@ -154,9 +153,11 @@ import { FontResolver } from '@gluestack-style/react';
 export const config = {
   aliases: {},
   tokens: {},
-  plugins: [new FontResolver({
-    // mapFonts: fontMapper,
-  })],
+  plugins: [
+    new FontResolver({
+      // mapFonts: fontMapper,
+    }),
+  ],
 };
 
 const StyledText = styled(Text, {
@@ -165,7 +166,6 @@ const StyledText = styled(Text, {
   fontStyle: 'regular',
   fontSize: '$xl',
 });
-
 ```
 
 You can use the `styled` function to style your components. For gluestack-ui components, we have used this styled function to style the components.

example/storybook/src/more/Figma/index.stories.mdx

@@ -15,13 +15,13 @@ Auto-generating Figma Kit for gluestack-ui Design System from Storybook
 
 ### Approach:
 
-**Step 1: Storybook to Next**
+1. Storybook to Next
 
 - Create individual pages for each component in Next.js.
 - Render all components with their various combinations, including variants and other properties.
 - Implement server-side rendering (SSR) to capture the styling and layout in the page source.
 
-**Step 2: Next to Figma**
+2. Next to Figma
 
 - Fetch the Document Object Model (DOM) for each component from the Next.js pages.
 - Generate Figma layers by traversing the DOM structure.

example/storybook/src/production-optimizations/babel-plugin/index.stories.mdx

@@ -52,9 +52,9 @@ import { AppProvider, Box } from '@gluestack/design-system';
 
 4. Just make sure your `babel.config.js` and `gluestack-ui.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase. If you can't, then use the `configPath` option to specify the path of the `gluestack-ui.config.js/ts` file.
 
-> **Note:** We already provide you with the plugin config for `@gluestack-ui/themed`. So you have to do minimal configuration to get it working.
+> Note: We already provide you with the plugin config for `@gluestack-ui/themed`. So you have to do minimal configuration to get it working.
 
-### **Let us see how this Babel plugin works.**
+### Let us see how this Babel plugin works.
 
 - First, it traverses your files and tries to find your `component` imported from `@gluestack-ui/themed`.
 - Once it finds the component, it fetches the component props.
@@ -212,7 +212,7 @@ module.exports = function (api) {
 
 - `components`: The `components` option allows you to specify the library/import_path name & file path of components created using `@gluestack-style/react`. This option is useful in scenarios where you are creating a custom component with the styled function and using it with inline styles. If you want to resolve those inline styles on build time just define this option with the library name and file path of the components folder or library.
 
-> **Note**: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime.
+> Note: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime.
 
 ```js
 // babel.config.js