@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

package/dist/module/lib/Components/Skeleton/Skeleton.mdx

@@ -4,11 +4,7 @@ import { Skeleton } from './Skeleton';
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Skeleton' of={SkeletonStories} />
 
@@ -128,73 +124,6 @@ import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
 </Box>
 ```
 
-## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use component prop for common patterns'
-      description='Use pre-built variants for consistent loading states'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton component='list-item' />
-<Skeleton component='tile' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't manually recreate common patterns"
-      description='Avoid recreating patterns that already exist as component variants'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
-
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
-  <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'full' }} />
-  <Box lx={{ flex: 1, flexDirection: 'column', gap: 's8' }}>
-    <Skeleton lx={{ height: 's12', width: 's176' }} />
-    <Skeleton lx={{ height: 's12', width: 's112' }} />
-  </Box>
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx prop for sizing'
-      description='Use design system size tokens for consistent sizing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton lx={{ height: 's16', width: 's256' }} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use arbitrary style values"
-      description='Avoid using the style prop or arbitrary values'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton style={{ height: 16, width: 200 }} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-</div>
-
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

package/dist/module/lib/Components/Spinner/Spinner.figma.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Spinner } from "./Spinner.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Spinner, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=9023-3681', {
+  imports: ["import { Spinner } from '@ledgerhq/lumen-ui-rnative'"],
+  // @ts-expect-error — placeholder value, replace with a valid IconSize
+  example: () => /*#__PURE__*/_jsx(Spinner, {
+    size: "<insert-size>"
+  })
+});
+//# sourceMappingURL=Spinner.figma.js.map

package/dist/module/lib/Components/Spinner/Spinner.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Spinner","jsx","_jsx","connect","imports","example","size"],"sourceRoot":"../../../../../src","sources":["lib/Components/Spinner/Spinner.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,OAAO,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpCH,KAAK,CAACI,OAAO,CACXH,OAAO,EACP,uEAAuE,EACvE;EACEI,OAAO,EAAE,CAAC,sDAAsD,CAAC;EACjE;EACAC,OAAO,EAAEA,CAAA,kBAAMH,IAAA,CAACF,OAAO;IAACM,IAAI,EAAC;EAAe,CAAE;AAChD,CACF,CAAC","ignoreList":[]}

package/dist/module/lib/Components/Spinner/Spinner.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import * as SpinnerStories from './Spinner.stories';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 
@@ -116,104 +114,6 @@ function MyComponent() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Match spinner size to context'
-      description='Use appropriate spinner sizes based on the context and prominence'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// Small inline loading
-<Spinner size={12} />
-
-// Prominent loading state
-<Spinner size={40} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't override spinner size"
-      description='Avoid using style or additional props to override spinner dimensions'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// Small inline loading
-<Spinner size={12} style={{ width: 6, height: 6 }} />
-
-// Prominent loading state
-<Spinner size={40} width={32} height={32} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide context with descriptive text'
-      description='Pair spinners with text to give users context about what is loading'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
-  <Spinner size={16} />
-  <Text>Syncing wallet...</Text>
-</Box>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't show spinners without context"
-      description='Avoid showing spinners alone without descriptive text'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
-  <Spinner size={16} />
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use standard sizes from the design system'
-      description='Stick to predefined size values like 12, 16, 20, 24, 40'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spinner size={16} />
-<Spinner size={24} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use non-standard sizes"
-      description='Avoid arbitrary size values that are not part of the design system'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spinner size={22} />
-<Spinner size={35} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/dist/module/lib/Components/Spot/Spot.figma.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Placeholder } from "../../Symbols/index.js";
+import { Spot } from "./Spot.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Spot, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6786%3A4738', {
+  imports: ["import { Spot } from '@ledgerhq/lumen-ui-rnative'", "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'"],
+  props: {
+    disabled: figma.enum('state', {
+      disabled: true
+    }),
+    appearance: figma.enum('appearance', {
+      'interface-icon': 'icon',
+      loader: 'loader',
+      number: 'number',
+      'info-muted': 'info',
+      warning: 'warning',
+      error: 'error',
+      check: 'check',
+      bluetooth: 'bluetooth'
+    }),
+    icon: figma.enum('appearance', {
+      'interface-icon': Placeholder
+    }),
+    number: figma.enum('appearance', {
+      number: 1
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Spot, {
+    appearance: props.appearance,
+    icon: props.icon,
+    number: props.number,
+    disabled: props.disabled
+  })
+});
+//# sourceMappingURL=Spot.figma.js.map

package/dist/module/lib/Components/Spot/Spot.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Placeholder","Spot","jsx","_jsx","connect","imports","props","disabled","enum","appearance","loader","number","warning","error","check","bluetooth","icon","example"],"sourceRoot":"../../../../../src","sources":["lib/Components/Spot/Spot.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,WAAW,QAAQ,wBAAe;AAC3C,SAASC,IAAI,QAAQ,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9BJ,KAAK,CAACK,OAAO,CACXH,IAAI,EACJ,yEAAyE,EACzE;EACEI,OAAO,EAAE,CACP,mDAAmD,EACnD,kEAAkE,CACnE;EACDC,KAAK,EAAE;IACLC,QAAQ,EAAER,KAAK,CAACS,IAAI,CAAC,OAAO,EAAE;MAC5BD,QAAQ,EAAE;IACZ,CAAC,CAAC;IACFE,UAAU,EAAEV,KAAK,CAACS,IAAI,CAAC,YAAY,EAAE;MACnC,gBAAgB,EAAE,MAAM;MACxBE,MAAM,EAAE,QAAQ;MAChBC,MAAM,EAAE,QAAQ;MAChB,YAAY,EAAE,MAAM;MACpBC,OAAO,EAAE,SAAS;MAClBC,KAAK,EAAE,OAAO;MACdC,KAAK,EAAE,OAAO;MACdC,SAAS,EAAE;IACb,CAAC,CAAC;IACFC,IAAI,EAAEjB,KAAK,CAACS,IAAI,CAAC,YAAY,EAAE;MAC7B,gBAAgB,EAAER;IACpB,CAAC,CAAC;IACFW,MAAM,EAAEZ,KAAK,CAACS,IAAI,CAAC,YAAY,EAAE;MAC/BG,MAAM,EAAE;IACV,CAAC;EACH,CAAC;EACDM,OAAO,EAAGX,KAMT,iBACCH,IAAA,CAACF,IAAI;IACHQ,UAAU,EAAEH,KAAK,CAACG,UAAW;IAC7BO,IAAI,EAAEV,KAAK,CAACU,IAAK;IACjBL,MAAM,EAAEL,KAAK,CAACK,MAAO;IACrBJ,QAAQ,EAAED,KAAK,CAACC;EAAS,CAC1B;AAEL,CACF,CAAC","ignoreList":[]}

package/dist/module/lib/Components/Spot/Spot.mdx

@@ -3,8 +3,6 @@ import * as SpotStories from './Spot.stories';
 import { Spot } from './Spot';
 import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Spot' of={SpotStories} />
 
@@ -171,98 +169,6 @@ function StatusIndicators() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use required props for discriminated types'
-      description='Icon appearance requires icon prop, number appearance requires number prop'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Spot appearance='icon' icon={Settings} />
-<Spot appearance='number' number={5} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit required props"
-      description='Discriminated union types require their specific props'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Spot appearance='icon' /> // Missing required 'icon' prop
-<Spot appearance='number' /> // Missing required 'number' prop
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use valid number values'
-      description='Number appearance only accepts values from 0 to 9'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='number' number={5} />
-<Spot appearance='number' number={0} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't pass invalid number values"
-      description='Only values 0-9 are allowed for number appearance'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='number' number={10} />
-<Spot appearance='number' number={-1} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use Spot for status indication only'
-      description='Spots are designed to display status, not to be interactive elements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='check' />
-<Spot appearance='error' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't make spots interactive"
-      description='Avoid adding press handlers or making spots clickable'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='check' onPress={handlePress} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/dist/module/lib/Components/Stepper/Stepper.figma.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Stepper } from "./Stepper.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Stepper, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11439-7755', {
+  imports: ["import { Stepper } from '@ledgerhq/lumen-ui-rnative'"],
+  example: () => /*#__PURE__*/_jsx(Stepper, {
+    currentStep: 2,
+    totalSteps: 4
+  })
+});
+//# sourceMappingURL=Stepper.figma.js.map

package/dist/module/lib/Components/Stepper/Stepper.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Stepper","jsx","_jsx","connect","imports","example","currentStep","totalSteps"],"sourceRoot":"../../../../../src","sources":["lib/Components/Stepper/Stepper.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,OAAO,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpCH,KAAK,CAACI,OAAO,CACXH,OAAO,EACP,8FAA8F,EAC9F;EACEI,OAAO,EAAE,CAAC,sDAAsD,CAAC;EACjEC,OAAO,EAAEA,CAAA,kBAAMH,IAAA,CAACF,OAAO;IAACM,WAAW,EAAE,CAAE;IAACC,UAAU,EAAE;EAAE,CAAE;AAC1D,CACF,CAAC","ignoreList":[]}

package/dist/module/lib/Components/Stepper/Stepper.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import * as StepperStories from './Stepper.stories';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 
@@ -143,71 +141,6 @@ function LocalizedStepper() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide meaningful step counts'
-      description='Use realistic total steps that match your flow'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper currentStep={3} totalSteps={5} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use for single-step processes"
-      description='Steppers are for multi-step workflows only'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper currentStep={1} totalSteps={1} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use disabled for paused steppers'
-      description='Reserve disabled for steppers that are not actively progressing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper 
-  currentStep={2} 
-  totalSteps={4} 
-  disabled 
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't disable active steps"
-      description='Active steps in progress should not be disabled'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper 
-  currentStep={2} 
-  totalSteps={4} 
-  disabled // Wrong for active step
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/dist/module/lib/Components/Subheader/Subheader.figma.js

@@ -0,0 +1,67 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Subheader, SubheaderDescription, SubheaderRow, SubheaderShowMore, SubheaderTitle, SubheaderCount } from "./Subheader.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(Subheader, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16477-1522', {
+  imports: ["import { Subheader, SubheaderRow, SubheaderTitle, SubheaderDescription, SubheaderCount } from '@ledgerhq/lumen-ui-rnative'"],
+  variant: {
+    'leading-action': 'none'
+  },
+  props: {
+    title: figma.string('title'),
+    descriptionBlock: figma.boolean('show-description', {
+      true: /*#__PURE__*/_jsx(SubheaderDescription, {
+        children: "Description"
+      }),
+      false: undefined
+    }),
+    count: figma.boolean('show-number', {
+      true: /*#__PURE__*/_jsx(SubheaderCount, {
+        value: 5
+      }),
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsxs(Subheader, {
+    children: [/*#__PURE__*/_jsxs(SubheaderRow, {
+      children: [/*#__PURE__*/_jsx(SubheaderTitle, {
+        children: props.title
+      }), props.count]
+    }), props.descriptionBlock]
+  })
+});
+figma.connect(Subheader, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16477-1522', {
+  imports: ["import { Subheader, SubheaderRow, SubheaderTitle, SubheaderShowMore, SubheaderDescription } from '@ledgerhq/lumen-ui-rnative'"],
+  variant: {
+    'leading-action': 'show-more'
+  },
+  props: {
+    title: figma.string('title'),
+    descriptionBlock: figma.boolean('show-description', {
+      true: /*#__PURE__*/_jsx(SubheaderDescription, {
+        children: "Description"
+      }),
+      false: undefined
+    }),
+    count: figma.boolean('show-number', {
+      true: /*#__PURE__*/_jsx(SubheaderCount, {
+        value: 5
+      }),
+      false: undefined
+    })
+  },
+  example: ({
+    title,
+    descriptionBlock,
+    count
+  }) => /*#__PURE__*/_jsxs(Subheader, {
+    children: [/*#__PURE__*/_jsxs(SubheaderRow, {
+      onPress: () => {},
+      children: [/*#__PURE__*/_jsx(SubheaderTitle, {
+        children: title
+      }), count, /*#__PURE__*/_jsx(SubheaderShowMore, {})]
+    }), descriptionBlock]
+  })
+});
+//# sourceMappingURL=Subheader.figma.js.map

package/dist/module/lib/Components/Subheader/Subheader.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Subheader","SubheaderDescription","SubheaderRow","SubheaderShowMore","SubheaderTitle","SubheaderCount","jsx","_jsx","jsxs","_jsxs","connect","imports","variant","props","title","string","descriptionBlock","boolean","true","children","false","undefined","count","value","example","onPress"],"sourceRoot":"../../../../../src","sources":["lib/Components/Subheader/Subheader.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SACEC,SAAS,EACTC,oBAAoB,EACpBC,YAAY,EACZC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,QACT,gBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErBV,KAAK,CAACW,OAAO,CACXV,SAAS,EACT,wEAAwE,EACxE;EACEW,OAAO,EAAE,CACP,4HAA4H,CAC7H;EACDC,OAAO,EAAE;IAAE,gBAAgB,EAAE;EAAO,CAAC;EACrCC,KAAK,EAAE;IACLC,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAAC,OAAO,CAAC;IAC5BC,gBAAgB,EAAEjB,KAAK,CAACkB,OAAO,CAAC,kBAAkB,EAAE;MAClDC,IAAI,eAAEX,IAAA,CAACN,oBAAoB;QAAAkB,QAAA,EAAC;MAAW,CAAsB,CAAC;MAC9DC,KAAK,EAAEC;IACT,CAAC,CAAC;IACFC,KAAK,EAAEvB,KAAK,CAACkB,OAAO,CAAC,aAAa,EAAE;MAClCC,IAAI,eAAEX,IAAA,CAACF,cAAc;QAACkB,KAAK,EAAE;MAAE,CAAE,CAAC;MAClCH,KAAK,EAAEC;IACT,CAAC;EACH,CAAC;EACDG,OAAO,EAAGX,KAAK,iBACbJ,KAAA,CAACT,SAAS;IAAAmB,QAAA,gBACRV,KAAA,CAACP,YAAY;MAAAiB,QAAA,gBACXZ,IAAA,CAACH,cAAc;QAAAe,QAAA,EAAEN,KAAK,CAACC;MAAK,CAAiB,CAAC,EAC7CD,KAAK,CAACS,KAAK;IAAA,CACA,CAAC,EACdT,KAAK,CAACG,gBAAgB;EAAA,CACd;AAEf,CACF,CAAC;AAEDjB,KAAK,CAACW,OAAO,CACXV,SAAS,EACT,wEAAwE,EACxE;EACEW,OAAO,EAAE,CACP,+HAA+H,CAChI;EACDC,OAAO,EAAE;IAAE,gBAAgB,EAAE;EAAY,CAAC;EAC1CC,KAAK,EAAE;IACLC,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAAC,OAAO,CAAC;IAC5BC,gBAAgB,EAAEjB,KAAK,CAACkB,OAAO,CAAC,kBAAkB,EAAE;MAClDC,IAAI,eAAEX,IAAA,CAACN,oBAAoB;QAAAkB,QAAA,EAAC;MAAW,CAAsB,CAAC;MAC9DC,KAAK,EAAEC;IACT,CAAC,CAAC;IACFC,KAAK,EAAEvB,KAAK,CAACkB,OAAO,CAAC,aAAa,EAAE;MAClCC,IAAI,eAAEX,IAAA,CAACF,cAAc;QAACkB,KAAK,EAAE;MAAE,CAAE,CAAC;MAClCH,KAAK,EAAEC;IACT,CAAC;EACH,CAAC;EACDG,OAAO,EAAEA,CAAC;IAAEV,KAAK;IAAEE,gBAAgB;IAAEM;EAAM,CAAC,kBAC1Cb,KAAA,CAACT,SAAS;IAAAmB,QAAA,gBACRV,KAAA,CAACP,YAAY;MAACuB,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAE;MAAAN,QAAA,gBAC9BZ,IAAA,CAACH,cAAc;QAAAe,QAAA,EAAEL;MAAK,CAAiB,CAAC,EACvCQ,KAAK,eACNf,IAAA,CAACJ,iBAAiB,IAAE,CAAC;IAAA,CACT,CAAC,EACda,gBAAgB;EAAA,CACR;AAEf,CACF,CAAC","ignoreList":[]}

package/dist/module/lib/Components/Subheader/Subheader.mdx

@@ -13,11 +13,7 @@ import {
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Subheader' of={SubheaderStories} />
 
@@ -364,118 +360,6 @@ Use the `lx` prop for layout adjustments like margins or positioning:
 </Subheader>
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Subheader component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's16' }}>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use Count for numeric values'
-      description='Pass numbers using the value prop'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Accounts</SubheaderTitle>
-    <SubheaderCount value={30} />
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't add parentheses manually"
-      description='Count component automatically formats the value'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Accounts (30)</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the composite pattern'
-      description='Compose sub-components for flexibility'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-    <SubheaderCount value={5} />
-  </SubheaderRow>
-  <SubheaderDescription>Description</SubheaderDescription>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use non-composite children"
-      description='Only use the provided sub-components'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <Text>Title (5)</Text>
-  <Text>Description</Text>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx for layout adjustments only'
-      description='Use the lx prop for margins, positioning, and other layout adjustments'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader lx={{ marginTop: 's16' }}>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use lx for appearance changes"
-      description='Avoid using lx to modify colors, padding, or other core appearance styles'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader lx={{ backgroundColor: 'accent', padding: 's24' }}>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>