jfs-components 0.0.6 → 0.0.7

package/lib/module/components/CtaCard/CtaCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","getVariableByName","useTokens","IconCapsule","Button","jsx","_jsx","jsxs","_jsxs","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","propModes","iconSlot","titleSlot","bodySlot","buttonSlot","style","globalModes","backgroundColor","radius","paddingHorizontal","paddingVertical","gap","contentGap","titleColor","titleFontFamily","titleFontSize","titleLineHeight","bodyColor","bodyFontFamily","bodyFontSize","bodyLineHeight","containerStyle","borderRadius","alignItems","width","overflow","contentWrapStyle","titleStyle","color","fontFamily","fontSize","lineHeight","fontWeight","bodyStyle","renderSlot","slot","isValidElement","cloneElement","props","children","label","onPress"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Text","getVariableByName","useTokens","IconCapsule","Button","cloneChildrenWithModes","jsx","_jsx","jsxs","_jsxs","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","propModes","iconSlot","titleSlot","bodySlot","buttonSlot","style","globalModes","backgroundColor","radius","paddingHorizontal","paddingVertical","gap","contentGap","titleColor","titleFontFamily","titleFontSize","titleLineHeight","bodyColor","bodyFontFamily","bodyFontSize","bodyLineHeight","containerStyle","borderRadius","alignItems","width","overflow","contentWrapStyle","titleStyle","color","fontFamily","fontSize","lineHeight","fontWeight","bodyStyle","children","label","onPress"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CtaCard/CtaCard.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as CtaCardStories from './CtaCard.stories';
 import CtaCard from './CtaCard';
 

package/lib/module/components/Disclaimer/Disclaimer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DisclaimerStories from './Disclaimer.stories';
 import Disclaimer from './Disclaimer';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/module/components/Divider/Divider.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DividerStories from './Divider.stories';
 import Divider from './Divider';
 
@@ -19,6 +19,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 ### Horizontal Divider

package/lib/module/components/Drawer/Drawer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DrawerStories from './Drawer.stories';
 import Drawer from './Drawer';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,9 +13,17 @@ Lightweight bottom drawer/sheet with a draggable handle.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Page type
+- **Modes:** MainPage | SubPage
+- **Default:** MainPage
+
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/module/components/EmptyState/EmptyState.js

@@ -0,0 +1,132 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import IconCapsule from '../IconCapsule/IconCapsule';
+import Button from '../Button/Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * EmptyState component that displays an icon, title, description and an action button.
+ *
+ * @component
+ */
+function EmptyState({
+  title = "No payments to show",
+  description = "Start by paying bills, recharge or your friends",
+  iconSlot,
+  buttonSlot,
+  modes: propModes = {},
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
+  // Container Tokens
+  const gap = getVariableByName('emptyState/gap', modes) || 24;
+  const padding = getVariableByName('emptyState/padding', modes) || 4;
+  const radius = getVariableByName('emptyState/radius', modes) || 16;
+
+  // Content Wrap Tokens
+  const contentGap = getVariableByName('emptyState/content/gap', modes) || 16;
+
+  // Title Tokens
+  const titleColor = getVariableByName('emptyState/title/color', modes) || '#0d0d0f';
+  const titleFontSize = getVariableByName('emptyState/title/fontSize', modes) || 16;
+  const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes) || 'System';
+  const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes) || 18;
+  const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes) || 700;
+
+  // Body Tokens
+  const bodyColor = getVariableByName('emptyState/body/color', modes) || '#1a1c1f';
+  const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes) || 12;
+  const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes) || 'System';
+  const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes) || 16;
+  const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes) || 400;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap,
+    padding: padding,
+    borderRadius: radius
+    // Width is set in Figma as fixed 236, but typical practice is to let it be flexible or controlled by parent
+    // However, for strict adherence to "Maximize existing component usage" and specific styles, we can leave width 
+    // to parent or default to auto. 
+  };
+  const contentWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: contentGap,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight),
+    textAlign: 'center'
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    fontFamily: bodyFontFamily,
+    lineHeight: bodyLineHeight,
+    fontWeight: String(bodyFontWeight),
+    textAlign: 'center'
+  };
+  const defaultIconSlot = useMemo(() => /*#__PURE__*/_jsx(IconCapsule, {
+    modes: modes
+  }), [modes]);
+
+  // Checking if iconSlot is passed; if not use default. 
+  // If it is passed, we assume the user handles everything or we inject props if it's a valid element? 
+  // User instructions say: "whenever there is a slot, that's should be implemented as real react slot... manual passing down modes"
+  // So we just render what is passed, but for defaults we pass modes.
+  // Ideally, if iconSlot is a function we could pass modes, but ReactNode is static.
+  // The instruction "make sure modes are always passed to all slot children" implies we might need to cloneElement if possible, 
+  // AND/OR user needs to pass it manually in usage. 
+  // But for the DEFAULT slots we render, we definitely pass modes.
+
+  const iconContent = iconSlot || defaultIconSlot;
+  const defaultButtonSlot = useMemo(() => /*#__PURE__*/_jsx(Button, {
+    label: "Button",
+    modes: modes
+  }), [modes]);
+  const buttonContent = buttonSlot || defaultButtonSlot;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: contentWrapStyle,
+      children: [iconContent, /*#__PURE__*/_jsx(View, {
+        style: {
+          alignItems: 'center',
+          gap: 0
+        },
+        children: /*#__PURE__*/_jsxs(View, {
+          style: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: titleStyle,
+            children: title
+          }), description ? /*#__PURE__*/_jsx(Text, {
+            style: bodyStyle,
+            children: description
+          }) : null]
+        })
+      })]
+    }), buttonContent]
+  });
+}
+export default EmptyState;
+//# sourceMappingURL=EmptyState.js.map

package/lib/module/components/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","Text","getVariableByName","useTokens","IconCapsule","Button","jsx","_jsx","jsxs","_jsxs","EmptyState","title","description","iconSlot","buttonSlot","modes","propModes","style","testID","globalModes","gap","padding","radius","contentGap","titleColor","titleFontSize","titleFontFamily","titleLineHeight","titleFontWeight","bodyColor","bodyFontSize","bodyFontFamily","bodyLineHeight","bodyFontWeight","containerStyle","flexDirection","alignItems","justifyContent","borderRadius","contentWrapStyle","width","titleStyle","color","fontSize","fontFamily","lineHeight","fontWeight","String","textAlign","bodyStyle","defaultIconSlot","iconContent","defaultButtonSlot","label","buttonContent","children"],"sourceRoot":"../../../../src","sources":["components/EmptyState/EmptyState.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/EmptyState/EmptyState.mdx

@@ -0,0 +1,73 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as EmptyStateStories from './EmptyState.stories';
+import EmptyState from './EmptyState';
+
+<Meta of={EmptyStateStories} />
+
+# EmptyState
+
+The `EmptyState` component is used to display messages when there is no content to show, typically with an icon, title, description, and an action button.
+
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import { EmptyState } from 'jfs-components';
+
+<EmptyState
+  title="No payments to show"
+  description="Start by paying bills, recharge or your friends"
+  modes={{}}
+/>
+```
+
+## Props
+
+<Controls />
+
+## Examples
+
+### Default
+
+<Canvas of={EmptyStateStories.Default} />
+
+### Custom Text
+
+<Canvas of={EmptyStateStories.WithCustomText} />
+
+### Custom Slots
+
+<Canvas of={EmptyStateStories.CustomSlots} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`emptyState/body/color`**
+- **`emptyState/body/fontFamily`**
+- **`emptyState/body/fontSize`**
+- **`emptyState/body/fontWeight`**
+- **`emptyState/body/lineHeight`**
+- **`emptyState/content/gap`**
+- **`emptyState/gap`**
+- **`emptyState/padding`**
+- **`emptyState/radius`**
+- **`emptyState/title/color`**
+- **`emptyState/title/fontFamily`**
+- **`emptyState/title/fontSize`**
+- **`emptyState/title/fontWeight`**
+- **`emptyState/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/FilterBar/FilterBar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as FilterBarStories from './FilterBar.stories';
 import FilterBar from './FilterBar';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/lib/module/components/HStack/HStack.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * HStack component for horizontal layout using design token spacing.
+ */
+export const HStack = ({
+  children,
+  alignVertical,
+  justifyHorizontal,
+  wrap,
+  reverse = false,
+  as,
+  modes: propModes = {},
+  style,
+  ...rest
+}) => {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const paddingTop = getVariableByName('hstack/padding/top', modes);
+  const paddingBottom = getVariableByName('hstack/padding/bottom', modes);
+  const paddingLeft = getVariableByName('hstack/padding/left', modes);
+  const paddingRight = getVariableByName('hstack/padding/right', modes);
+  const gap = getVariableByName('hstack/gap', modes);
+  const flexWrap = typeof wrap === 'boolean' ? wrap ? 'wrap' : 'nowrap' : wrap;
+  const containerStyle = {
+    flexDirection: reverse ? 'row-reverse' : 'row',
+    alignItems: alignVertical,
+    justifyContent: justifyHorizontal,
+    flexWrap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    gap
+  };
+
+  // Pass modes down to children
+  const processedChildren = children ? cloneChildrenWithModes(children, modes) : null;
+  const viewProps = {
+    ...rest,
+    as
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    ...viewProps,
+    children: processedChildren
+  });
+};
+export default HStack;
+//# sourceMappingURL=HStack.js.map

package/lib/module/components/HStack/HStack.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","getVariableByName","useTokens","cloneChildrenWithModes","jsx","_jsx","HStack","children","alignVertical","justifyHorizontal","wrap","reverse","as","modes","propModes","style","rest","globalModes","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","flexWrap","containerStyle","flexDirection","alignItems","justifyContent","processedChildren","viewProps"],"sourceRoot":"../../../../src","sources":["components/HStack/HStack.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAyC,cAAc;AACpE,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,SAAS,QAAQ,sCAAsC;AAChE,SAASC,sBAAsB,QAAQ,yBAAyB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoChE;AACA;AACA;AACA,OAAO,MAAMC,MAAM,GAAGA,CAAC;EACnBC,QAAQ;EACRC,aAAa;EACbC,iBAAiB;EACjBC,IAAI;EACJC,OAAO,GAAG,KAAK;EACfC,EAAE;EACFC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,KAAK;EACL,GAAGC;AACM,CAAC,KAAK;EACf,MAAM;IAAEH,KAAK,EAAEI;EAAY,CAAC,GAAGf,SAAS,CAAC,CAAC;EAC1C,MAAMW,KAAK,GAAG;IAAE,GAAGI,WAAW;IAAE,GAAGH;EAAU,CAAC;EAE9C,MAAMI,UAAU,GAAGjB,iBAAiB,CAAC,oBAAoB,EAAEY,KAAK,CAAC;EACjE,MAAMM,aAAa,GAAGlB,iBAAiB,CAAC,uBAAuB,EAAEY,KAAK,CAAC;EACvE,MAAMO,WAAW,GAAGnB,iBAAiB,CAAC,qBAAqB,EAAEY,KAAK,CAAC;EACnE,MAAMQ,YAAY,GAAGpB,iBAAiB,CAAC,sBAAsB,EAAEY,KAAK,CAAC;EACrE,MAAMS,GAAG,GAAGrB,iBAAiB,CAAC,YAAY,EAAEY,KAAK,CAAC;EAElD,MAAMU,QAAQ,GAAG,OAAOb,IAAI,KAAK,SAAS,GAAIA,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAIA,IAAI;EAE9E,MAAMc,cAAyB,GAAG;IAC9BC,aAAa,EAAEd,OAAO,GAAG,aAAa,GAAG,KAAK;IAC9Ce,UAAU,EAAElB,aAAa;IACzBmB,cAAc,EAAElB,iBAAiB;IACjCc,QAAQ;IACRL,UAAU;IACVC,aAAa;IACbC,WAAW;IACXC,YAAY;IACZC;EACJ,CAAC;;EAED;EACA,MAAMM,iBAAiB,GAAGrB,QAAQ,GAC5BJ,sBAAsB,CAACI,QAAQ,EAAEM,KAAK,CAAC,GACvC,IAAI;EAEV,MAAMgB,SAAS,GAAG;IACd,GAAGb,IAAI;IACPJ;EACJ,CAAC;EAED,oBACIP,IAAA,CAACL,IAAI;IAACe,KAAK,EAAE,CAACS,cAAc,EAAET,KAAK,CAAE;IAAA,GAAKc,SAAS;IAAAtB,QAAA,EAC9CqB;EAAiB,CAChB,CAAC;AAEf,CAAC;AAED,eAAetB,MAAM","ignoreList":[]}

package/lib/module/components/HStack/HStack.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as HStackStories from './HStack.stories';
+import HStack from './HStack';
+
+<Meta of={HStackStories} />
+
+# HStack
+
+`HStack` arranges its children in a horizontal line. It uses design tokens for spacing and gap.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { HStack } from 'jfs-components';
+
+<HStack justifyHorizontal="space-between" modes={{ 'hstack/gap': 16 }}>
+  <View>Left</View>
+  <View>Right</View>
+</HStack>
+```
+
+<Canvas>
+  <Story of={HStackStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls of={HStackStories.Default} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`hstack/gap`**
+- **`hstack/padding/bottom`**
+- **`hstack/padding/left`**
+- **`hstack/padding/right`**
+- **`hstack/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/IconButton/IconButton.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as IconButtonStories from './IconButton.stories';
 import IconButton from './IconButton';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -28,6 +28,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/lib/module/components/IconCapsule/IconCapsule.js

@@ -52,9 +52,9 @@ function IconCapsule({
   const size = getVariableByName('iconCapsule/size', modes) || 42;
   const radius = getVariableByName('iconCapsule/radius', modes) || 9999;
   const backgroundColor = getVariableByName('iconCapsule/background', modes) || '#cfa159';
-  const borderColor = getVariableByName('iconCapsuleborder/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = getVariableByName('iconCapsuleborder/size', modes) || 1;
-  const iconColor = getVariableByName('iconCapsuleicon/color', modes) || '#0f0d0a';
+  const borderColor = getVariableByName('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = getVariableByName('iconCapsule/border/size', modes) || 1;
+  const iconColor = getVariableByName('iconCapsule/icon/color', modes) || '#0f0d0a';
   const iconSize = getVariableByName('iconCapsule/icon/size', modes) || 18;
 
   // Convert radius to React Native format (if 9999, use size/2 for perfect circle)

package/lib/module/components/IconCapsule/IconCapsule.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","getVariableByName","useTokens","Icon","jsx","_jsx","IconCapsule","iconName","modes","propModes","accessibilityLabel","accessibilityRole","rest","globalModes","size","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","style","children","name","color","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,SAAS,QAAQ,sCAAsC;AAChE,OAAOC,IAAI,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAAC;EACnBC,QAAQ,GAAG,SAAS;EACpBC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,kBAAkB;EAClBC,iBAAiB,GAAG,OAAO;EAC3B,GAAGC;AACa,CAAC,EAAE;EACnB,MAAM;IAAEJ,KAAK,EAAEK;EAAY,CAAC,GAAGX,SAAS,CAAC,CAAC;EAC1C,MAAMM,KAAK,GAAG;IAAE,GAAGK,WAAW;IAAE,GAAGJ;EAAU,CAAC;EAC9C;EACA,MAAMK,IAAI,GAAGb,iBAAiB,CAAC,kBAAkB,EAAEO,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMO,MAAM,GAAGd,iBAAiB,CAAC,oBAAoB,EAAEO,KAAK,CAAC,IAAI,IAAI;EACrE,MAAMQ,eAAe,GAAGf,iBAAiB,CAAC,wBAAwB,EAAEO,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMS,WAAW,GAAGhB,iBAAiB,CAAC,yBAAyB,EAAEO,KAAK,CAAC,IAAI,qBAAqB;EAChG,MAAMU,UAAU,GAAGjB,iBAAiB,CAAC,wBAAwB,EAAEO,KAAK,CAAC,IAAI,CAAC;EAC1E,MAAMW,SAAS,GAAGlB,iBAAiB,CAAC,uBAAuB,EAAEO,KAAK,CAAC,IAAI,SAAS;EAChF,MAAMY,QAAQ,GAAGnB,iBAAiB,CAAC,uBAAuB,EAAEO,KAAK,CAAC,IAAI,EAAE;;EAExE;EACA,MAAMa,YAAY,GAAGN,MAAM,KAAK,IAAI,GAAGD,IAAI,GAAG,CAAC,GAAGC,MAAM;;EAExD;EACA,MAAMO,cAAyB,GAAG;IAChCC,KAAK,EAAET,IAAI;IACXU,MAAM,EAAEV,IAAI;IACZO,YAAY,EAAEA,YAAY;IAC1BI,WAAW,EAAEP,UAAU;IACvBD,WAAW,EAAEA,WAAW;IACxBD,eAAe,EAAEA,eAAe;IAChCU,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGnB,kBAAkB,IAAIH,QAAQ,CAACuB,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAE9I,oBACE3B,IAAA,CAACL,IAAI;IACHiC,KAAK,EAAEX,cAAe;IACtBX,iBAAiB,EAAEA,iBAAkB;IACrCD,kBAAkB,EAAEmB,yBAA0B;IAAA,GAC1CjB,IAAI;IAAAsB,QAAA,eAER7B,IAAA,CAACF,IAAI;MACHgC,IAAI,EAAE5B,QAAS;MACfO,IAAI,EAAEM,QAAS;MACfgB,KAAK,EAAEjB,SAAU;MACjBkB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC;IAAI,CAC/B;EAAC,CACE,CAAC;AAEX;AAEA,eAAehC,WAAW","ignoreList":[]}
+{"version":3,"names":["React","View","getVariableByName","useTokens","Icon","jsx","_jsx","IconCapsule","iconName","modes","propModes","accessibilityLabel","accessibilityRole","rest","globalModes","size","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","style","children","name","color","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,SAAS,QAAQ,sCAAsC;AAChE,OAAOC,IAAI,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAAC;EACnBC,QAAQ,GAAG,SAAS;EACpBC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,kBAAkB;EAClBC,iBAAiB,GAAG,OAAO;EAC3B,GAAGC;AACa,CAAC,EAAE;EACnB,MAAM;IAAEJ,KAAK,EAAEK;EAAY,CAAC,GAAGX,SAAS,CAAC,CAAC;EAC1C,MAAMM,KAAK,GAAG;IAAE,GAAGK,WAAW;IAAE,GAAGJ;EAAU,CAAC;EAC9C;EACA,MAAMK,IAAI,GAAGb,iBAAiB,CAAC,kBAAkB,EAAEO,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMO,MAAM,GAAGd,iBAAiB,CAAC,oBAAoB,EAAEO,KAAK,CAAC,IAAI,IAAI;EACrE,MAAMQ,eAAe,GAAGf,iBAAiB,CAAC,wBAAwB,EAAEO,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMS,WAAW,GAAGhB,iBAAiB,CAAC,0BAA0B,EAAEO,KAAK,CAAC,IAAI,qBAAqB;EACjG,MAAMU,UAAU,GAAGjB,iBAAiB,CAAC,yBAAyB,EAAEO,KAAK,CAAC,IAAI,CAAC;EAC3E,MAAMW,SAAS,GAAGlB,iBAAiB,CAAC,wBAAwB,EAAEO,KAAK,CAAC,IAAI,SAAS;EACjF,MAAMY,QAAQ,GAAGnB,iBAAiB,CAAC,uBAAuB,EAAEO,KAAK,CAAC,IAAI,EAAE;;EAExE;EACA,MAAMa,YAAY,GAAGN,MAAM,KAAK,IAAI,GAAGD,IAAI,GAAG,CAAC,GAAGC,MAAM;;EAExD;EACA,MAAMO,cAAyB,GAAG;IAChCC,KAAK,EAAET,IAAI;IACXU,MAAM,EAAEV,IAAI;IACZO,YAAY,EAAEA,YAAY;IAC1BI,WAAW,EAAEP,UAAU;IACvBD,WAAW,EAAEA,WAAW;IACxBD,eAAe,EAAEA,eAAe;IAChCU,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGnB,kBAAkB,IAAIH,QAAQ,CAACuB,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAE9I,oBACE3B,IAAA,CAACL,IAAI;IACHiC,KAAK,EAAEX,cAAe;IACtBX,iBAAiB,EAAEA,iBAAkB;IACrCD,kBAAkB,EAAEmB,yBAA0B;IAAA,GAC1CjB,IAAI;IAAAsB,QAAA,eAER7B,IAAA,CAACF,IAAI;MACHgC,IAAI,EAAE5B,QAAS;MACfO,IAAI,EAAEM,QAAS;MACfgB,KAAK,EAAEjB,SAAU;MACjBkB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC;IAAI,CAC/B;EAAC,CACE,CAAC;AAEX;AAEA,eAAehC,WAAW","ignoreList":[]}

package/lib/module/components/IconCapsule/IconCapsule.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as IconCapsuleStories from './IconCapsule.stories';
 import IconCapsule from './IconCapsule';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -17,6 +17,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** M | L | S
 - **Default:** M
 
+### Emphasis
+- **Modes:** High | Medium | Low
+- **Default:** High
+
 ### Appearance.Brand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary
@@ -24,6 +28,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>
@@ -62,11 +70,11 @@ This component uses the following design token collections. Each collection supp
 This component uses the following design tokens, resolved through `getVariableByName`:
 
 - **`iconCapsule/background`**
+- **`iconCapsule/border/color`**
+- **`iconCapsule/border/size`**
+- **`iconCapsule/icon/color`**
 - **`iconCapsule/icon/size`**
 - **`iconCapsule/radius`**
 - **`iconCapsule/size`**
-- **`iconCapsuleborder/color`**
-- **`iconCapsuleborder/size`**
-- **`iconCapsuleicon/color`**
 
 All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/Introduction.mdx

@@ -1,102 +1,7 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Introduction" />
 
-# Welcome to React Native Storybook
-
-Welcome to the component library documentation for this React Native project. This Storybook instance provides comprehensive documentation and interactive examples of all components in the application.
-
-## What is Storybook?
-
-Storybook is a tool for building UI components in isolation. It makes development, testing, and documentation easier by providing a sandbox environment where you can:
-
-- **Develop components in isolation** - Build components without worrying about app-specific dependencies
-- **Test edge cases** - Easily test components with different props and states
-- **Document components** - Create living documentation that stays in sync with your code
-- **Share with your team** - Provide a visual reference for designers and developers
-
-## Documentation Contract
-
-Every component page now follows a consistent template:
-
-- **Accessibility** — how to label, hint, and expose roles/states so assistive tech users get the right cues.
-- **Anatomy** — key slots/parts you can compose or override (leading/trailing, slots, tokens).
-- **Usage Constraints** — safe overrides, layout expectations, and behaviors to avoid.
-
-Use these sections as a checklist when creating or reviewing stories so guidance stays close to the API.
-
-## Performance Panel
-
-A lightweight performance panel is enabled for all stories. Open the **Performance** addon in the Storybook toolbar to inspect mount/remount timings and interaction costs. Use it to:
-
-- Compare render timing between variants without creating extra stories.
-- Spot regressions when props or modes change.
-- Validate that heavy children (lists, drawers, sheets) still mount within budget.
-
-## Getting Started
-
-### Running Storybook
-
-#### For Web (Development)
-```bash
-yarn storybook-web
-```
-This will start Storybook on `http://localhost:6006`
-
-#### For React Native (iOS/Android)
-```bash
-# iOS
-yarn ios
-
-# Android
-yarn android
-```
-
-### Building Storybook for Production
-```bash
-yarn build:storybook-web
-```
-
-## Component Organization
-
-Components are organized in the `src/components` directory. Each component typically includes:
-
-- **Component file** - The main component implementation
-- **Story file** - Interactive examples and test cases
-- **Documentation** - Comprehensive documentation with usage examples
-
-## Available Components
-
-### Avatar
-- **Avatar** - A flexible avatar component that displays user profile pictures or monogram initials. Supports multiple size modes and is fully integrated with Figma design tokens.
-
-### IconCapsule
-- **IconCapsule** - A flexible icon capsule component that displays an icon within a styled circular or rounded container. Supports different icons and appearance modes, fully integrated with Figma design tokens.
-
-## Documentation Features
-
-This Storybook instance includes:
-
-- ✅ **Automatic documentation** - Generated from JSDoc comments and component metadata
-- ✅ **Interactive examples** - Live, editable component examples
-- ✅ **Props documentation** - Automatic props table generation
-- ✅ **MDX support** - Rich documentation with Markdown and JSX
-
-## Best Practices
-
-When creating new components:
-
-1. **Add JSDoc comments** - Document your components with JSDoc for automatic documentation
-2. **Create stories** - Add multiple stories showing different states and use cases
-3. **Use TypeScript/PropTypes** - Define prop types for better documentation
-4. **Write MDX docs** - Create comprehensive documentation pages when needed
-
-## Resources
-
-- [Storybook Documentation](https://storybook.js.org/)
-- [React Native Storybook](https://github.com/storybookjs/react-native)
-
----
-
-Happy coding! 🚀
+# Introduction
 
+Welcome to the JFS Components Library.

package/lib/module/components/LazyList/LazyList.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as LazyListStories from './LazyList.stories';
 import LazyList from './LazyList';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';