jfs-components 0.0.5 → 0.0.7

package/lib/commonjs/components/CardFeedback/CardFeedback.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 CardFeedbackStories from './CardFeedback.stories';
 import CardFeedback from './CardFeedback';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -21,6 +21,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
 ### Appearance.Brand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary

package/lib/commonjs/components/ChipGroup/ChipGroup.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ChipGroup component that handles layout and spacing for ChipSelect components.
+ * Based on Figma Node 1905-5123.
+ */
+function ChipGroup({
+  children,
+  modes = {},
+  style,
+  testID
+}) {
+  // --- Token Resolution ---
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipGroup/gap', modes), 10) || 8;
+
+  // --- Styles ---
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    gap: gap
+  };
+
+  // Clone children to pass `modes` prop
+  const childrenWithModes = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/_react.default.isValidElement(child)) {
+      // Pass merged modes (parent modes + child modes)
+      // Note: We don't have access to child's existing props here to merge modes perfectly if they were passed directly to child
+      // But usually we want parent modes to override or augment.
+      // For now, simpler approach: just pass the parent modes, assuming child will handle merging if it needs to.
+      // Actually, based on previous ButtonGroup example, we just pass { modes: modes }.
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        modes: modes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: childrenWithModes
+  });
+}
+var _default = exports.default = ChipGroup;
+//# sourceMappingURL=ChipGroup.js.map

package/lib/commonjs/components/ChipGroup/ChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","ChipGroup","children","modes","style","testID","gap","parseInt","getVariableByName","containerStyle","flexDirection","alignItems","flexWrap","childrenWithModes","React","Children","map","child","isValidElement","cloneElement","jsx","View","_default","exports"],"sourceRoot":"../../../../src","sources":["components/ChipGroup/ChipGroup.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAAiF,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAuBjF;AACA;AACA;AACA;AACA,SAASG,SAASA,CAAC;EACfC,QAAQ;EACRC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC;AACY,CAAC,EAAE;EACf;EACA,MAAMC,GAAG,GAAGC,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,eAAe,EAAEL,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC;;EAExE;EACA,MAAMM,cAAyB,GAAG;IAC9BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,YAAY;IACxBC,QAAQ,EAAE,MAAM;IAChBN,GAAG,EAAEA;EACT,CAAC;;EAED;EACA,MAAMO,iBAAiB,GAAGC,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACd,QAAQ,EAAGe,KAAK,IAAK;IAC9D,iBAAIH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,EAAE;MAC7B;MACA;MACA;MACA;MACA;MACA,oBAAOH,cAAK,CAACK,YAAY,CAACF,KAAK,EAAE;QAAEd,KAAK,EAAEA;MAAM,CAAQ,CAAC;IAC7D;IACA,OAAOc,KAAK;EAChB,CAAC,CAAC;EAEF,oBACI,IAAApB,WAAA,CAAAuB,GAAA,EAACzB,YAAA,CAAA0B,IAAI;IAACjB,KAAK,EAAE,CAACK,cAAc,EAAEL,KAAK,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAChDW;EAAiB,CAChB,CAAC;AAEf;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAvB,OAAA,GAEcC,SAAS","ignoreList":[]}

package/lib/commonjs/components/ChipGroup/ChipGroup.mdx

@@ -0,0 +1,40 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Story } from '@storybook/addon-docs';
+import * as ChipGroupStories from './ChipGroup.stories';
+
+<Meta of={ChipGroupStories} />
+
+<Title />
+<Subtitle />
+<Description />
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { ChipGroup } from 'jfs-components';
+import { ChipSelect } from 'jfs-components';
+
+const MyComponent = () => (
+  <ChipGroup>
+    <ChipSelect label="Option 1" />
+    <ChipSelect label="Option 2" />
+    <ChipSelect label="Option 3" />
+  </ChipGroup>
+);
+```
+
+<Primary />
+<Controls />
+<Stories />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`chipGroup/gap`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/ChipSelect/ChipSelect.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ChipSelect component for selecting options (e.g. Date selection).
+ * Based on Figma Node 1901-4727.
+ */
+function ChipSelect({
+  label = 'Date',
+  active = false,
+  icon = 'ic_calendar_week',
+  close = true,
+  modes = {},
+  style,
+  labelSlot,
+  onPress
+}) {
+  // Force control of the 'ChipSelect State' mode based on the active prop
+  // This overrides any 'ChipSelect State' passed from outside, but preserves other modes
+  const resolvedModes = {
+    ...modes,
+    'ChipSelect State': active ? 'Active' : 'Idle'
+  };
+
+  // --- Token Resolution ---
+  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/gap', resolvedModes), 10) || 4;
+  const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
+  const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/padding/vertical', resolvedModes), 10) || 0;
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/radius', resolvedModes), 10) || 999;
+
+  // Background
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/background', resolvedModes) || '#f5f5f5';
+
+  // Text Styles
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/foreground', resolvedModes) || '#0d0d0f';
+  const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontSize', resolvedModes), 10) || 14;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
+  const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/lineHeight', resolvedModes), 10) || 32;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('chipSelect/fontWeight', resolvedModes) || '700';
+
+  // Icon Styles
+  const iconSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('chipSelect/icon/size', resolvedModes), 10) || 16;
+
+  // --- Styles ---
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    gap: gap
+  };
+  const textStyle = {
+    color: textColor,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    fontWeight: fontWeight,
+    textAlign: 'center'
+  };
+  const renderLabel = () => {
+    if (labelSlot) {
+      if (/*#__PURE__*/_react.default.isValidElement(labelSlot)) {
+        // Pass resolved modes to slot
+        return /*#__PURE__*/_react.default.cloneElement(labelSlot, {
+          modes: resolvedModes
+        });
+      }
+      return labelSlot;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: textStyle,
+      children: label
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [containerStyle, style],
+    onPress: onPress,
+    activeOpacity: 0.8,
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: icon,
+      size: iconSize,
+      color: textColor
+    }), renderLabel(), active && close && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: "ic_close",
+      size: iconSize,
+      color: textColor
+    })]
+  });
+}
+var _default = exports.default = ChipSelect;
+//# sourceMappingURL=ChipSelect.js.map

package/lib/commonjs/components/ChipSelect/ChipSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_Icon","_jsxRuntime","e","__esModule","default","ChipSelect","label","active","icon","close","modes","style","labelSlot","onPress","resolvedModes","gap","parseInt","getVariableByName","paddingHorizontal","paddingVertical","radius","backgroundColor","textColor","fontSize","fontFamily","lineHeight","fontWeight","iconSize","containerStyle","flexDirection","alignItems","justifyContent","borderRadius","textStyle","color","textAlign","renderLabel","React","isValidElement","cloneElement","jsx","Text","children","jsxs","TouchableOpacity","activeOpacity","name","size","_default","exports"],"sourceRoot":"../../../../src","sources":["components/ChipSelect/ChipSelect.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAoC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAyCpC;AACA;AACA;AACA;AACA,SAASG,UAAUA,CAAC;EAChBC,KAAK,GAAG,MAAM;EACdC,MAAM,GAAG,KAAK;EACdC,IAAI,GAAG,kBAAkB;EACzBC,KAAK,GAAG,IAAI;EACZC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,SAAS;EACTC;AACa,CAAC,EAAE;EAChB;EACA;EACA,MAAMC,aAAa,GAAG;IAClB,GAAGJ,KAAK;IACR,kBAAkB,EAAEH,MAAM,GAAG,QAAQ,GAAG;EAC5C,CAAC;;EAED;EACA,MAAMQ,GAAG,GAAGC,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,gBAAgB,EAAEH,aAAa,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC;EACjF,MAAMI,iBAAiB,GAAGF,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,+BAA+B,EAAEH,aAAa,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE;EAC/G,MAAMK,eAAe,GAAGH,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,6BAA6B,EAAEH,aAAa,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC;EAC1G,MAAMM,MAAM,GAAGJ,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,mBAAmB,EAAEH,aAAa,CAAC,EAAE,EAAE,CAAC,IAAI,GAAG;;EAEzF;EACA,MAAMO,eAAe,GAAG,IAAAJ,yCAAiB,EAAC,uBAAuB,EAAEH,aAAa,CAAC,IAAI,SAAS;;EAE9F;EACA,MAAMQ,SAAS,GAAG,IAAAL,yCAAiB,EAAC,uBAAuB,EAAEH,aAAa,CAAC,IAAI,SAAS;EACxF,MAAMS,QAAQ,GAAGP,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,qBAAqB,EAAEH,aAAa,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE;EAC5F,MAAMU,UAAU,GAAG,IAAAP,yCAAiB,EAAC,uBAAuB,EAAEH,aAAa,CAAC,IAAI,aAAa;EAC7F,MAAMW,UAAU,GAAGT,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,uBAAuB,EAAEH,aAAa,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE;EAChG,MAAMY,UAAU,GAAG,IAAAT,yCAAiB,EAAC,uBAAuB,EAAEH,aAAa,CAAC,IAAI,KAAK;;EAErF;EACA,MAAMa,QAAQ,GAAGX,QAAQ,CAAC,IAAAC,yCAAiB,EAAC,sBAAsB,EAAEH,aAAa,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE;;EAE7F;EACA,MAAMc,cAAyB,GAAG;IAC9BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBV,eAAe,EAAEA,eAAe;IAChCW,YAAY,EAAEZ,MAAM;IACpBF,iBAAiB,EAAEA,iBAAiB;IACpCC,eAAe,EAAEA,eAAe;IAChCJ,GAAG,EAAEA;EACT,CAAC;EAED,MAAMkB,SAAoB,GAAG;IACzBC,KAAK,EAAEZ,SAAS;IAChBE,UAAU,EAAEA,UAAU;IACtBD,QAAQ,EAAEA,QAAQ;IAClBE,UAAU,EAAEA,UAAU;IACtBC,UAAU,EAAEA,UAAiB;IAC7BS,SAAS,EAAE;EACf,CAAC;EAED,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAIxB,SAAS,EAAE;MACX,iBAAIyB,cAAK,CAACC,cAAc,CAAC1B,SAAS,CAAC,EAAE;QACjC;QACA,oBAAOyB,cAAK,CAACE,YAAY,CAAC3B,SAAS,EAA6B;UAAEF,KAAK,EAAEI;QAAc,CAAC,CAAC;MAC7F;MACA,OAAOF,SAAS;IACpB;IACA,oBAAO,IAAAX,WAAA,CAAAuC,GAAA,EAAC1C,YAAA,CAAA2C,IAAI;MAAC9B,KAAK,EAAEsB,SAAU;MAAAS,QAAA,EAAEpC;IAAK,CAAO,CAAC;EACjD,CAAC;EAED,oBACI,IAAAL,WAAA,CAAA0C,IAAA,EAAC7C,YAAA,CAAA8C,gBAAgB;IACbjC,KAAK,EAAE,CAACiB,cAAc,EAAEjB,KAAK,CAAE;IAC/BE,OAAO,EAAEA,OAAQ;IACjBgC,aAAa,EAAE,GAAI;IAAAH,QAAA,GAGlBlC,IAAI,iBACD,IAAAP,WAAA,CAAAuC,GAAA,EAACxC,KAAA,CAAAI,OAAI;MAAC0C,IAAI,EAAEtC,IAAK;MAACuC,IAAI,EAAEpB,QAAS;MAACO,KAAK,EAAEZ;IAAU,CAAE,CACxD,EAEAc,WAAW,CAAC,CAAC,EAGb7B,MAAM,IAAIE,KAAK,iBACZ,IAAAR,WAAA,CAAAuC,GAAA,EAACxC,KAAA,CAAAI,OAAI;MAAC0C,IAAI,EAAC,UAAU;MAACC,IAAI,EAAEpB,QAAS;MAACO,KAAK,EAAEZ;IAAU,CAAE,CAC5D;EAAA,CACa,CAAC;AAE3B;AAAC,IAAA0B,QAAA,GAAAC,OAAA,CAAA7C,OAAA,GAEcC,UAAU","ignoreList":[]}

package/lib/commonjs/components/ChipSelect/ChipSelect.mdx

@@ -0,0 +1,80 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as ChipSelectStories from './ChipSelect.stories';
+
+<Meta of={ChipSelectStories} />
+
+<Title />
+<Subtitle>
+  A selection chip component that toggles between Idle and Active states.
+</Subtitle>
+
+<Description>
+  The `ChipSelect` component is used for making selections, such as dates or filters. 
+  It supports two states driven by the `active` prop:
+  - **Idle (`active={false}`)**: Customize with an icon and label.
+  - **Active (`active={true}`)**: Displays the label and a close icon. The start icon remains visible if provided.
+  
+  Styling is driven by Figma tokens via `getVariableByName`.
+</Description>
+
+<Primary />
+
+<Controls />
+
+
+## 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.
+
+### ChipSelect State
+- **Modes:** Idle | Active
+- **Default:** Idle
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import ChipSelect from './ChipSelect';
+
+// Idle State (Icon + Label)
+<ChipSelect 
+  label="Select Date" 
+  active={false} 
+  icon="ic_calendar_week" 
+/>
+
+// Active State (Icon + Label + Close Icon)
+<ChipSelect 
+  label="12 Oct 2023" 
+  active={true}
+  icon="ic_calendar_week"
+  close={true}
+/>
+```
+
+<Stories />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`chipSelect/background`**
+- **`chipSelect/fontFamily`**
+- **`chipSelect/fontSize`**
+- **`chipSelect/fontWeight`**
+- **`chipSelect/foreground`**
+- **`chipSelect/gap`**
+- **`chipSelect/icon/size`**
+- **`chipSelect/lineHeight`**
+- **`chipSelect/padding/horizontal`**
+- **`chipSelect/padding/vertical`**
+- **`chipSelect/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/CtaCard/CtaCard.js

@@ -7,8 +7,10 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -22,13 +24,20 @@ function CtaCard({
   iconName = "ic_upi_number",
   buttonLabel = "Get started",
   onPressButton,
-  modes = {},
+  modes: propModes = {},
   iconSlot,
   titleSlot,
   bodySlot,
   buttonSlot,
   style
 }) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   // --- Token Resolution ---
   // Container
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/background', modes) || '#0078ad';
@@ -83,37 +92,23 @@ function CtaCard({
     lineHeight: bodyLineHeight,
     fontWeight: '400' // Regular
   };
-
-  // --- Slot Helper ---
-  // Helper to clone element with modes if no modes are already present on it (standard in this library)
-  const renderSlot = slot => {
-    if (/*#__PURE__*/_react.default.isValidElement(slot)) {
-      return /*#__PURE__*/_react.default.cloneElement(slot, {
-        modes: {
-          ...modes,
-          ...slot.props.modes
-        }
-      });
-    }
-    return slot;
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: contentWrapStyle,
-      children: [iconSlot ? renderSlot(iconSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+      children: [iconSlot ? (0, _reactUtils.cloneChildrenWithModes)(iconSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
         iconName: iconName,
         modes: modes
-      }), titleSlot ? renderSlot(titleSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }), titleSlot ? (0, _reactUtils.cloneChildrenWithModes)(titleSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: titleStyle,
         children: title
-      }), bodySlot ? renderSlot(bodySlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }), bodySlot ? (0, _reactUtils.cloneChildrenWithModes)(bodySlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: bodyStyle,
         children: body
       })]
-    }), buttonSlot ? renderSlot(buttonSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    }), buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       label: buttonLabel,
-      onPress: onPressButton,
+      onPress: onPressButton || (() => {}),
       modes: modes
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_IconCapsule","_Button","_jsxRuntime","e","__esModule","default","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","iconSlot","titleSlot","bodySlot","buttonSlot","style","backgroundColor","getVariableByName","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","React","isValidElement","cloneElement","props","jsxs","View","children","jsx","Text","label","onPress","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_IconCapsule","_Button","_reactUtils","_jsxRuntime","e","__esModule","default","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","propModes","iconSlot","titleSlot","bodySlot","buttonSlot","style","globalModes","useTokens","backgroundColor","getVariableByName","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","jsxs","View","children","cloneChildrenWithModes","jsx","Text","label","onPress","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/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/commonjs/components/Disclaimer/Disclaimer.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -32,13 +33,20 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function Disclaimer({
   disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
-  modes = {},
+  modes: propModes = {},
   style,
   textStyle,
   accessibilityLabel,
   accessibilityHint,
   ...rest
 }) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
   // Resolve typography and color from Figma variables
   const color = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/color', modes) || '#24262b';
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('disclaimer/label/fontSize', modes) || 10;

package/lib/commonjs/components/Disclaimer/Disclaimer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","Disclaimer","disclaimer","modes","style","textStyle","accessibilityLabel","accessibilityHint","rest","color","getVariableByName","fontSize","lineHeight","fontFamily","fontWeightRaw","fontWeight","toString","baseTextStyle","textAlign","containerStyle","alignItems","justifyContent","maxWidth","width","defaultAccessibilityLabel","jsx","View","accessibilityRole","children","jsxs","Text","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Disclaimer/Disclaimer.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAAgF,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAWhF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,UAAUA,CAAC;EAClBC,UAAU,GAAG,oEAAoE;EACjFC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,SAAS;EACTC,kBAAkB;EAClBC,iBAAiB;EACjB,GAAGC;AACY,CAAC,EAAE;EAClB;EACA,MAAMC,KAAK,GAAG,IAAAC,yCAAiB,EAAC,kBAAkB,EAAEP,KAAK,CAAC,IAAI,SAAS;EACvE,MAAMQ,QAAQ,GACZ,IAAAD,yCAAiB,EAAC,2BAA2B,EAAEP,KAAK,CAAC,IAAI,EAAE;EAC7D,MAAMS,UAAU,GACd,IAAAF,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMU,UAAU,GACd,IAAAH,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,QAAQ;EACrE,MAAMW,aAAa,GACjB,IAAAJ,yCAAiB,EAAC,6BAA6B,EAAEP,KAAK,CAAC,IAAI,GAAG;EAChE,MAAMY,UAAU,GACd,OAAOD,aAAa,KAAK,QAAQ,GAC7BA,aAAa,CAACE,QAAQ,CAAC,CAAC,GACxBF,aAAa;EAEnB,MAAMG,aAAwB,GAAG;IAC/BR,KAAK;IACLE,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVE,UAAU;IACVG,SAAS,EAAE;EACb,CAAC;EAED,MAAMC,cAAyB,GAAG;IAChCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB;IACAC,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE;EACT,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGlB,kBAAkB,IAAIJ,UAAU;EAElE,oBACE,IAAAL,WAAA,CAAA4B,GAAA,EAAC9B,YAAA,CAAA+B,IAAI;IACHtB,KAAK,EAAE,CAACe,cAAc,EAAEf,KAAK,CAAE;IAC/BuB,iBAAiB,EAAC,MAAM;IACxBrB,kBAAkB,EAAEkB,yBAA0B;IAC9CjB,iBAAiB,EAAEA,iBAAkB;IAAA,GACjCC,IAAI;IAAAoB,QAAA,eAER,IAAA/B,WAAA,CAAAgC,IAAA,EAAClC,YAAA,CAAAmC,IAAI;MACH1B,KAAK,EAAE,CAACa,aAAa,EAAEZ,SAAS,CAAE;MAClC0B,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC,IAAI;MAAAJ,QAAA,GAE7B1B,UAAU,EACV,IAAI;IAAA,CACD;EAAC,CACH,CAAC;AAEX;AAAC,IAAA+B,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAEcC,UAAU","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_jsxRuntime","e","__esModule","default","Disclaimer","disclaimer","modes","propModes","style","textStyle","accessibilityLabel","accessibilityHint","rest","globalModes","useTokens","color","getVariableByName","fontSize","lineHeight","fontFamily","fontWeightRaw","fontWeight","toString","baseTextStyle","textAlign","containerStyle","alignItems","justifyContent","maxWidth","width","defaultAccessibilityLabel","jsx","View","accessibilityRole","children","jsxs","Text","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Disclaimer/Disclaimer.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAAgE,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAWhE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,UAAUA,CAAC;EAClBC,UAAU,GAAG,oEAAoE;EACjFC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,KAAK;EACLC,SAAS;EACTC,kBAAkB;EAClBC,iBAAiB;EACjB,GAAGC;AACY,CAAC,EAAE;EAClB,MAAM;IAAEN,KAAK,EAAEO;EAAY,CAAC,GAAG,IAAAC,2BAAS,EAAC,CAAC;EAC1C,MAAMR,KAAK,GAAG;IAAE,GAAGO,WAAW;IAAE,GAAGN;EAAU,CAAC;EAC9C;EACA,MAAMQ,KAAK,GAAG,IAAAC,yCAAiB,EAAC,kBAAkB,EAAEV,KAAK,CAAC,IAAI,SAAS;EACvE,MAAMW,QAAQ,GACZ,IAAAD,yCAAiB,EAAC,2BAA2B,EAAEV,KAAK,CAAC,IAAI,EAAE;EAC7D,MAAMY,UAAU,GACd,IAAAF,yCAAiB,EAAC,6BAA6B,EAAEV,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMa,UAAU,GACd,IAAAH,yCAAiB,EAAC,6BAA6B,EAAEV,KAAK,CAAC,IAAI,QAAQ;EACrE,MAAMc,aAAa,GACjB,IAAAJ,yCAAiB,EAAC,6BAA6B,EAAEV,KAAK,CAAC,IAAI,GAAG;EAChE,MAAMe,UAAU,GACd,OAAOD,aAAa,KAAK,QAAQ,GAC7BA,aAAa,CAACE,QAAQ,CAAC,CAAC,GACxBF,aAAa;EAEnB,MAAMG,aAAwB,GAAG;IAC/BR,KAAK;IACLE,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVE,UAAU;IACVG,SAAS,EAAE;EACb,CAAC;EAED,MAAMC,cAAyB,GAAG;IAChCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB;IACAC,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE;EACT,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGpB,kBAAkB,IAAIL,UAAU;EAElE,oBACE,IAAAL,WAAA,CAAA+B,GAAA,EAAClC,YAAA,CAAAmC,IAAI;IACHxB,KAAK,EAAE,CAACiB,cAAc,EAAEjB,KAAK,CAAE;IAC/ByB,iBAAiB,EAAC,MAAM;IACxBvB,kBAAkB,EAAEoB,yBAA0B;IAC9CnB,iBAAiB,EAAEA,iBAAkB;IAAA,GACjCC,IAAI;IAAAsB,QAAA,eAER,IAAAlC,WAAA,CAAAmC,IAAA,EAACtC,YAAA,CAAAuC,IAAI;MACH5B,KAAK,EAAE,CAACe,aAAa,EAAEd,SAAS,CAAE;MAClC4B,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC,IAAI;MAAAJ,QAAA,GAE7B7B,UAAU,EACV,IAAI;IAAA,CACD;EAAC,CACH,CAAC;AAEX;AAAC,IAAAkC,QAAA,GAAAC,OAAA,CAAArC,OAAA,GAEcC,UAAU","ignoreList":[]}

package/lib/commonjs/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/commonjs/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/commonjs/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>