jfs-components 0.0.3 → 0.0.5

package/lib/commonjs/components/TransactionDetails/TransactionDetails.js

@@ -0,0 +1,177 @@
+"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 }; }
+/**
+ * Helper function to recursively clone children and pass modes prop to components that accept it.
+ */function cloneChildrenWithModes(children, modes) {
+  const result = _react.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+    const childChildren = child.props?.children;
+    const hasChildren = childChildren !== undefined && childChildren !== null;
+    const existingModes = child.props?.modes;
+    const mergedModes = existingModes ? {
+      ...modes,
+      ...existingModes
+    } : modes;
+    const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes) : undefined;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      ...child.props,
+      modes: mergedModes
+    }, processedChildren);
+  });
+  return result || [];
+}
+
+// ===== Item Subcomponent =====
+
+/**
+ * Item component that displays a label-value pair, used within TransactionDetails.
+ * Access via `TransactionDetails.Item`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.label='Label'] - The label text displayed above the value.
+ * @param {string} [props.value='Value'] - The value text displayed below the label.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.labelStyle] - Optional label text style overrides.
+ * @param {Object} [props.valueStyle] - Optional value text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers.
+ */
+function Item({
+  label = 'Label',
+  value = 'Value',
+  modes = {},
+  style,
+  labelStyle,
+  valueStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  // Resolve design tokens for Item
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('detailItem/gap', modes) ?? 4;
+
+  // Label typography tokens
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/color', modes) || '#0c0d10';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontSize', modes) || 14;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontFamily', modes) || 'System';
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/lineHeight', modes) || 17;
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('detailItem/label/fontWeight', modes) || 500;
+  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+
+  // Value typography tokens
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/color', modes) || '#24262b';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontSize', modes) || 14;
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontFamily', modes) || 'System';
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/lineHeight', modes) || 17;
+  const valueFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('detailItem/value/fontWeight', modes) || 'Medium';
+  const valueFontWeight = typeof valueFontWeightRaw === 'number' ? valueFontWeightRaw.toString() : valueFontWeightRaw === 'Medium' ? '500' : valueFontWeightRaw;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap
+  };
+  const labelTextStyle = {
+    color: labelColor,
+    fontSize: labelFontSize,
+    fontFamily: labelFontFamily,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight
+  };
+  const valueTextStyle = {
+    color: valueColor,
+    fontSize: valueFontSize,
+    fontFamily: valueFontFamily,
+    lineHeight: valueLineHeight,
+    fontWeight: valueFontWeight
+  };
+  const defaultAccessibilityLabel = accessibilityLabel || `${label}: ${value}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: defaultAccessibilityLabel,
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [labelTextStyle, labelStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [valueTextStyle, valueStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: value
+    })]
+  });
+}
+
+// ===== TransactionDetails Component =====
+
+/**
+ * TransactionDetails component that displays a list of transaction detail items.
+ *
+ * This component serves as a container for TransactionDetails.Item children, applying consistent
+ * spacing and padding as defined by Figma design tokens.
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} [props.children] - TransactionDetails.Item children to render.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers.
+ *
+ * @example
+ * ```tsx
+ * <TransactionDetails modes={{ 'Color Mode': 'Light' }}>
+ *   <TransactionDetails.Item label="UPI transaction ID" value="101674916166" />
+ *   <TransactionDetails.Item label="From" value="JioFinance • shivashankar@okjio" />
+ *   <TransactionDetails.Item label="To" value="JioFinance • shivashankar@okjio" />
+ *   <TransactionDetails.Item label="Payment method" value="UPI" />
+ * </TransactionDetails>
+ * ```
+ */
+function TransactionDetails({
+  children,
+  modes = {},
+  style,
+  accessibilityLabel,
+  ...rest
+}) {
+  // Resolve design tokens for TransactionDetails
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('transationDetails/gap', modes) ?? 16;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('transationDetails/padding/horizontal', modes) ?? 0;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('transationDetails/padding/vertical', modes) ?? 0;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap,
+    paddingHorizontal,
+    paddingVertical
+  };
+
+  // Process children to pass modes prop
+  const processedChildren = children ? cloneChildrenWithModes(_react.default.Children.toArray(children), modes) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "summary",
+    accessibilityLabel: accessibilityLabel || 'Transaction details',
+    ...rest,
+    children: processedChildren
+  });
+}
+
+// Attach Item as a static property for compound component pattern
+TransactionDetails.Item = Item;
+var _default = exports.default = TransactionDetails;
+//# sourceMappingURL=TransactionDetails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","cloneChildrenWithModes","children","modes","result","React","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","Item","label","value","style","labelStyle","valueStyle","accessibilityLabel","rest","gap","getVariableByName","labelColor","labelFontSize","labelFontFamily","labelLineHeight","labelFontWeightRaw","labelFontWeight","toString","valueColor","valueFontSize","valueFontFamily","valueLineHeight","valueFontWeightRaw","valueFontWeight","containerStyle","flexDirection","alignItems","justifyContent","labelTextStyle","color","fontSize","fontFamily","lineHeight","fontWeight","valueTextStyle","defaultAccessibilityLabel","jsxs","View","accessibilityRole","jsx","Text","accessibilityElementsHidden","importantForAccessibility","TransactionDetails","paddingHorizontal","paddingVertical","_default","exports"],"sourceRoot":"../../../../src","sources":["components/TransactionDetails/TransactionDetails.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/TransactionDetails/TransactionDetails.mdx

@@ -0,0 +1,98 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TransactionDetailsStories from './TransactionDetails.stories';
+import TransactionDetails from './TransactionDetails';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={TransactionDetailsStories} />
+
+# TransactionDetails
+
+TransactionDetails is a container component that displays a list of transaction detail items, each showing a label-value pair. It uses design tokens from Figma for consistent styling.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={TransactionDetailsStories.Default} />
+</Canvas>
+
+## Usage Example
+
+```tsx
+import TransactionDetails from 'jfs-components';
+
+function PaymentConfirmation() {
+  return (
+    <TransactionDetails>
+      <TransactionDetails.Item label="UPI transaction ID" value="101674916166" />
+      <TransactionDetails.Item label="From: 5678 XXXX XXXX 1234" value="JioFinance • shivashankar@okjio" />
+      <TransactionDetails.Item label="To: SHIVASHANKAR RAJAN" value="JioFinance • shivashankar@okjio" />
+      <TransactionDetails.Item label="Payment method" value="UPI" />
+    </TransactionDetails>
+  );
+}
+```
+
+## Single Item
+
+<Canvas>
+  <Story of={TransactionDetailsStories.SingleItem} />
+</Canvas>
+
+<AccessibilitySection
+  items={[
+    'TransactionDetails has role "summary" for screen readers to announce it as a summary section.',
+    'Each DetailItem has role "text" with a combined label and value for clear reading.',
+    'Use descriptive labels that clearly indicate what the value represents.',
+    'Ensure sufficient color contrast between label and value text.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>TransactionDetails (Container)</strong> — Wraps all Item children with consistent gap and padding.</li>
+    <li><strong>TransactionDetails.Item</strong> — Individual label-value pair component.</li>
+    <li><strong>Label</strong> — Descriptive text above the value, using token typography.</li>
+    <li><strong>Value</strong> — The actual data/content text, using token typography.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Always use TransactionDetails.Item as direct children of TransactionDetails for proper mode propagation.',
+    'Keep label text concise and descriptive.',
+    'Values can be longer but consider text wrapping on smaller screens.',
+    'Use consistent date/time and number formatting across all detail items.',
+  ]}
+/>
+
+## TransactionDetails Props
+
+<ArgsTable of={TransactionDetails} />
+
+## TransactionDetails.Item Props
+
+<ArgsTable of={TransactionDetails.Item} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`detailItem/gap`**
+- **`detailItem/label/color`**
+- **`detailItem/label/fontFamily`**
+- **`detailItem/label/fontSize`**
+- **`detailItem/label/fontWeight`**
+- **`detailItem/label/lineHeight`**
+- **`detailItem/value/color`**
+- **`detailItem/value/fontFamily`**
+- **`detailItem/value/fontSize`**
+- **`detailItem/value/fontWeight`**
+- **`detailItem/value/lineHeight`**
+- **`transationDetails/gap`**
+- **`transationDetails/padding/horizontal`**
+- **`transationDetails/padding/vertical`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/TransactionStatus/TransactionStatus.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TransactionStatus;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = require("react-native-svg");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// --- Internal Icon Component ---
+
+const StatusIcon = ({
+  modes = {},
+  width = 15,
+  height = 15,
+  color
+}) => {
+  const resolvedColor = color || (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/icon/color', modes) || '#F06D0F';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Svg, {
+    width: width,
+    height: height,
+    viewBox: "0 0 15 15",
+    fill: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: "M7.5 0C6.01664 0 4.5666 0.439867 3.33323 1.26398C2.09986 2.08809 1.13856 3.25943 0.570907 4.62987C0.00324963 6.00032 -0.145275 7.50832 0.144114 8.96318C0.433503 10.418 1.14781 11.7544 2.1967 12.8033C3.2456 13.8522 4.58197 14.5665 6.03683 14.8559C7.49168 15.1453 8.99968 14.9968 10.3701 14.4291C11.7406 13.8614 12.9119 12.9001 13.736 11.6668C14.5601 10.4334 15 8.98336 15 7.5C15 6.51509 14.806 5.53982 14.4291 4.62987C14.0522 3.71993 13.4997 2.89314 12.8033 2.1967C12.1069 1.50026 11.2801 0.947814 10.3701 0.570904C9.46019 0.193993 8.48492 0 7.5 0V0ZM6.75 3.375C6.75 3.17609 6.82902 2.98532 6.96967 2.84467C7.11033 2.70402 7.30109 2.625 7.5 2.625C7.69892 2.625 7.88968 2.70402 8.03033 2.84467C8.17099 2.98532 8.25 3.17609 8.25 3.375V7.875C8.25 8.07391 8.17099 8.26468 8.03033 8.40533C7.88968 8.54598 7.69892 8.625 7.5 8.625C7.30109 8.625 7.11033 8.54598 6.96967 8.40533C6.82902 8.26468 6.75 8.07391 6.75 7.875V3.375ZM7.5 12.375C7.2775 12.375 7.05999 12.309 6.87499 12.1854C6.68998 12.0618 6.54579 11.8861 6.46064 11.6805C6.37549 11.475 6.35321 11.2488 6.39662 11.0305C6.44003 10.8123 6.54717 10.6118 6.70451 10.4545C6.86184 10.2972 7.0623 10.19 7.28053 10.1466C7.49876 10.1032 7.72496 10.1255 7.93052 10.2106C8.13609 10.2958 8.31179 10.44 8.43541 10.625C8.55902 10.81 8.625 11.0275 8.625 11.25C8.625 11.5484 8.50648 11.8345 8.2955 12.0455C8.08452 12.2565 7.79837 12.375 7.5 12.375Z",
+      fill: resolvedColor,
+      fillRule: "evenodd" // Added based on typical icon behavior, though Figma output said 'nonzero' default. SVG data usually needs checking.
+    })
+  });
+};
+
+// --- Main Component ---
+
+/**
+ * TransactionStatus component displaying status icon, label, and date.
+ */
+function TransactionStatus({
+  status = 'Expired',
+  date = '20 Mar 2025',
+  modes = {},
+  style
+}) {
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', modes)) || 4;
+  // Using 'transactionStatus' tokens for text
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/color', modes) || '#191b1e';
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontSize', modes)) || 12;
+  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/lineHeight', modes)) || 16;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontFamily', modes) || 'System';
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontWeight2', modes) || '500';
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/icon/color', modes) || '#f06d0f';
+  const iconSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/iconSize', modes)) || 18;
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+    ...style
+  };
+  const textStyle = {
+    color: textColor,
+    fontSize,
+    lineHeight,
+    fontFamily,
+    fontWeight: fontWeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor,
+      modes: modes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: textStyle,
+      numberOfLines: 1,
+      children: [status, " \xB7 ", date]
+    })]
+  });
+}
+//# sourceMappingURL=TransactionStatus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeSvg","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","StatusIcon","modes","width","height","color","resolvedColor","getVariableByName","jsx","Svg","viewBox","fill","children","Path","d","fillRule","TransactionStatus","status","date","style","gap","Number","textColor","fontSize","lineHeight","fontFamily","fontWeight","iconColor","iconSize","containerStyle","flexDirection","alignItems","textStyle","jsxs","View","Text","numberOfLines"],"sourceRoot":"../../../../src","sources":["components/TransactionStatus/TransactionStatus.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAAgF,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhF;;AAQA,MAAMG,UAAU,GAAGA,CAAC;EAChBC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,EAAE;EACVC,MAAM,GAAG,EAAE;EACXC;AACa,CAAC,KAAK;EACnB,MAAMC,aAAa,GAAGD,KAAK,IAAI,IAAAE,yCAAiB,EAAC,8BAA8B,EAAEL,KAAK,CAAC,IAAI,SAAS;EAEpG,oBACI,IAAAL,WAAA,CAAAW,GAAA,EAACb,eAAA,CAAAc,GAAG;IACAN,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfM,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,MAAM;IAAAC,QAAA,eAEX,IAAAf,WAAA,CAAAW,GAAA,EAACb,eAAA,CAAAkB,IAAI;MACDC,CAAC,EAAC,s2CAAs2C;MACx2CH,IAAI,EAAEL,aAAc;MACpBS,QAAQ,EAAC,SAAS,CAAC;IAAA,CACtB;EAAC,CACD,CAAC;AAEd,CAAC;;AAED;;AAaA;AACA;AACA;AACe,SAASC,iBAAiBA,CAAC;EACtCC,MAAM,GAAG,SAAS;EAClBC,IAAI,GAAG,aAAa;EACpBhB,KAAK,GAAG,CAAC,CAAC;EACViB;AACoB,CAAC,EAAE;EACvB,MAAMC,GAAG,GAAGC,MAAM,CAAC,IAAAd,yCAAiB,EAAC,kCAAkC,EAAEL,KAAK,CAAC,CAAC,IAAI,CAAC;EACrF;EACA,MAAMoB,SAAS,GAAG,IAAAf,yCAAiB,EAAC,yBAAyB,EAAEL,KAAK,CAAC,IAAI,SAAS;EAClF,MAAMqB,QAAQ,GAAGF,MAAM,CAAC,IAAAd,yCAAiB,EAAC,4BAA4B,EAAEL,KAAK,CAAC,CAAC,IAAI,EAAE;EACrF,MAAMsB,UAAU,GAAGH,MAAM,CAAC,IAAAd,yCAAiB,EAAC,8BAA8B,EAAEL,KAAK,CAAC,CAAC,IAAI,EAAE;EACzF,MAAMuB,UAAU,GAAG,IAAAlB,yCAAiB,EAAC,8BAA8B,EAAEL,KAAK,CAAC,IAAI,QAAQ;EACvF,MAAMwB,UAAU,GAAG,IAAAnB,yCAAiB,EAAC,+BAA+B,EAAEL,KAAK,CAAC,IAAI,KAAK;EAErF,MAAMyB,SAAS,GAAG,IAAApB,yCAAiB,EAAC,8BAA8B,EAAEL,KAAK,CAAC,IAAI,SAAS;EACvF,MAAM0B,QAAQ,GAAGP,MAAM,CAAC,IAAAd,yCAAiB,EAAC,4BAA4B,EAAEL,KAAK,CAAC,CAAC,IAAI,EAAE;EAErF,MAAM2B,cAAyB,GAAG;IAC9BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBX,GAAG;IACH,GAAGD;EACP,CAAC;EAED,MAAMa,SAAoB,GAAG;IACzB3B,KAAK,EAAEiB,SAAS;IAChBC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,UAAU,EAAEA;EAChB,CAAC;EAED,oBACI,IAAA7B,WAAA,CAAAoC,IAAA,EAACvC,YAAA,CAAAwC,IAAI;IAACf,KAAK,EAAEU,cAAe;IAAAjB,QAAA,gBACxB,IAAAf,WAAA,CAAAW,GAAA,EAACP,UAAU;MAACE,KAAK,EAAEyB,QAAS;MAACxB,MAAM,EAAEwB,QAAS;MAACvB,KAAK,EAAEsB,SAAU;MAACzB,KAAK,EAAEA;IAAM,CAAE,CAAC,eACjF,IAAAL,WAAA,CAAAoC,IAAA,EAACvC,YAAA,CAAAyC,IAAI;MAAChB,KAAK,EAAEa,SAAU;MAACI,aAAa,EAAE,CAAE;MAAAxB,QAAA,GACpCK,MAAM,EAAC,QAAG,EAACC,IAAI;IAAA,CACd,CAAC;EAAA,CACL,CAAC;AAEf","ignoreList":[]}

package/lib/commonjs/components/TransactionStatus/TransactionStatus.mdx

@@ -0,0 +1,41 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TransactionStatusStories from './TransactionStatus.stories';
+import TransactionStatus from './TransactionStatus';
+
+<Meta of={TransactionStatusStories} />
+
+# TransactionStatus
+
+TransactionStatus component with design-token-driven styling.
+
+## 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.
+
+### Transaction Status
+- **Modes:** Request | Paid | Declined | Expired
+- **Default:** Request
+## Usage
+
+<Canvas>
+  <Story of={TransactionStatusStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={TransactionStatus} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`transactionBubble/statusWrap/gap`**
+- **`transactionStatus/color`**
+- **`transactionStatus/fontFamily`**
+- **`transactionStatus/fontSize`**
+- **`transactionStatus/fontWeight2`**
+- **`transactionStatus/icon/color`**
+- **`transactionStatus/iconSize`**
+- **`transactionStatus/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "CardFeedback", {
     return _CardFeedback.default;
   }
 });
+Object.defineProperty(exports, "CtaCard", {
+  enumerable: true,
+  get: function () {
+    return _CtaCard.default;
+  }
+});
 Object.defineProperty(exports, "Disclaimer", {
   enumerable: true,
   get: function () {
@@ -177,12 +183,36 @@ Object.defineProperty(exports, "TextInput", {
     return _TextInput.default;
   }
 });
+Object.defineProperty(exports, "ThreadHero", {
+  enumerable: true,
+  get: function () {
+    return _ThreadHero.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
     return _Tooltip.Tooltip;
   }
 });
+Object.defineProperty(exports, "TransactionBubble", {
+  enumerable: true,
+  get: function () {
+    return _TransactionBubble.default;
+  }
+});
+Object.defineProperty(exports, "TransactionDetails", {
+  enumerable: true,
+  get: function () {
+    return _TransactionDetails.default;
+  }
+});
+Object.defineProperty(exports, "TransactionStatus", {
+  enumerable: true,
+  get: function () {
+    return _TransactionStatus.default;
+  }
+});
 Object.defineProperty(exports, "UpiHandle", {
   enumerable: true,
   get: function () {
@@ -202,6 +232,7 @@ var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"
 var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
+var _CtaCard = _interopRequireDefault(require("./CtaCard/CtaCard"));
 var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
 var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
 var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
@@ -218,7 +249,11 @@ var _Stepper = _interopRequireDefault(require("./Stepper/Stepper"));
 var _Step = require("./Stepper/Step");
 var _StepLabel = require("./Stepper/StepLabel");
 var _TextInput = _interopRequireDefault(require("./TextInput/TextInput"));
+var _ThreadHero = _interopRequireDefault(require("./ThreadHero/ThreadHero"));
 var _Tooltip = require("./Tooltip/Tooltip");
+var _TransactionBubble = _interopRequireDefault(require("./TransactionBubble/TransactionBubble"));
+var _TransactionDetails = _interopRequireDefault(require("./TransactionDetails/TransactionDetails"));
+var _TransactionStatus = _interopRequireDefault(require("./TransactionStatus/TransactionStatus"));
 var _UpiHandle = _interopRequireDefault(require("./UpiHandle/UpiHandle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_ActionFooter","_interopRequireDefault","require","_AppBar","_Avatar","_AvatarGroup","_Badge","_BottomNav","_BottomNavItem","_Button","_Card","_CardFeedback","_Disclaimer","_Divider","_Drawer","_FilterBar","_IconButton","_IconCapsule","_LazyList","_ListGroup","_ListItem","_MediaCard","_MerchantProfile","_MoneyValue","_NavArrow","_PageTitle","_Section","_Stepper","_Step","_StepLabel","_TextInput","_Tooltip","_UpiHandle","e","__esModule","default"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,KAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,aAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,WAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,QAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,OAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,UAAA,GAAAd,sBAAA,CAAAC,OAAA;AACA,IAAAc,WAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,YAAA,GAAAhB,sBAAA,CAAAC,OAAA;AACA,IAAAgB,SAAA,GAAAjB,sBAAA,CAAAC,OAAA;AACA,IAAAiB,UAAA,GAAAlB,sBAAA,CAAAC,OAAA;AACA,IAAAkB,SAAA,GAAAnB,sBAAA,CAAAC,OAAA;AACA,IAAAmB,UAAA,GAAApB,sBAAA,CAAAC,OAAA;AACA,IAAAoB,gBAAA,GAAArB,sBAAA,CAAAC,OAAA;AACA,IAAAqB,WAAA,GAAAtB,sBAAA,CAAAC,OAAA;AACA,IAAAsB,SAAA,GAAAvB,sBAAA,CAAAC,OAAA;AACA,IAAAuB,UAAA,GAAAxB,sBAAA,CAAAC,OAAA;AACA,IAAAwB,QAAA,GAAAzB,sBAAA,CAAAC,OAAA;AACA,IAAAyB,QAAA,GAAA1B,sBAAA,CAAAC,OAAA;AACA,IAAA0B,KAAA,GAAA1B,OAAA;AACA,IAAA2B,UAAA,GAAA3B,OAAA;AACA,IAAA4B,UAAA,GAAA7B,sBAAA,CAAAC,OAAA;AACA,IAAA6B,QAAA,GAAA7B,OAAA;AACA,IAAA8B,UAAA,GAAA/B,sBAAA,CAAAC,OAAA;AAA6D,SAAAD,uBAAAgC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
+{"version":3,"names":["_ActionFooter","_interopRequireDefault","require","_AppBar","_Avatar","_AvatarGroup","_Badge","_BottomNav","_BottomNavItem","_Button","_Card","_CardFeedback","_Disclaimer","_Divider","_Drawer","_CtaCard","_FilterBar","_IconButton","_IconCapsule","_LazyList","_ListGroup","_ListItem","_MediaCard","_MerchantProfile","_MoneyValue","_NavArrow","_PageTitle","_Section","_Stepper","_Step","_StepLabel","_TextInput","_ThreadHero","_Tooltip","_TransactionBubble","_TransactionDetails","_TransactionStatus","_UpiHandle","e","__esModule","default"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,KAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,aAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,WAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,QAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,OAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,QAAA,GAAAd,sBAAA,CAAAC,OAAA;AACA,IAAAc,UAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,WAAA,GAAAhB,sBAAA,CAAAC,OAAA;AACA,IAAAgB,YAAA,GAAAjB,sBAAA,CAAAC,OAAA;AACA,IAAAiB,SAAA,GAAAlB,sBAAA,CAAAC,OAAA;AACA,IAAAkB,UAAA,GAAAnB,sBAAA,CAAAC,OAAA;AACA,IAAAmB,SAAA,GAAApB,sBAAA,CAAAC,OAAA;AACA,IAAAoB,UAAA,GAAArB,sBAAA,CAAAC,OAAA;AACA,IAAAqB,gBAAA,GAAAtB,sBAAA,CAAAC,OAAA;AACA,IAAAsB,WAAA,GAAAvB,sBAAA,CAAAC,OAAA;AACA,IAAAuB,SAAA,GAAAxB,sBAAA,CAAAC,OAAA;AACA,IAAAwB,UAAA,GAAAzB,sBAAA,CAAAC,OAAA;AACA,IAAAyB,QAAA,GAAA1B,sBAAA,CAAAC,OAAA;AACA,IAAA0B,QAAA,GAAA3B,sBAAA,CAAAC,OAAA;AACA,IAAA2B,KAAA,GAAA3B,OAAA;AACA,IAAA4B,UAAA,GAAA5B,OAAA;AACA,IAAA6B,UAAA,GAAA9B,sBAAA,CAAAC,OAAA;AACA,IAAA8B,WAAA,GAAA/B,sBAAA,CAAAC,OAAA;AACA,IAAA+B,QAAA,GAAA/B,OAAA;AACA,IAAAgC,kBAAA,GAAAjC,sBAAA,CAAAC,OAAA;AACA,IAAAiC,mBAAA,GAAAlC,sBAAA,CAAAC,OAAA;AACA,IAAAkC,kBAAA,GAAAnC,sBAAA,CAAAC,OAAA;AACA,IAAAmC,UAAA,GAAApC,sBAAA,CAAAC,OAAA;AAA6D,SAAAD,uBAAAqC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/design-tokens/JFSThemeProvider.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTokens = exports.JFSThemeProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _figmaVariablesResolver = require("./figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Shape of the TokenContext
+ */
+
+const TokenContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+/**
+ * Provider component for the JFS Design System.
+ * Wraps your application or a subtree to provide global configuration for design tokens.
+ *
+ * @example
+ * <JFSThemeProvider modes={{ 'Color Mode': 'Dark', 'Platform': 'web' }}>
+ *   <App />
+ * </JFSThemeProvider>
+ */
+const JFSThemeProvider = ({
+  modes = {},
+  children
+}) => {
+  const value = (0, _react.useMemo)(() => {
+    // We bind the current modes to getVariableByName so consumers don't have to pass it
+    const getVariable = name => (0, _figmaVariablesResolver.getVariableByName)(name, modes);
+    return {
+      modes,
+      getVariable
+    };
+  }, [modes]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TokenContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+/**
+ * Hook to access the current design token context.
+ *
+ * returns {
+ *   modes: Record<string, any> - The current active modes
+ *   getVariable: (name: string) => any - Function to resolve a token value
+ * }
+ */
+exports.JFSThemeProvider = JFSThemeProvider;
+const useTokens = () => {
+  const context = (0, _react.useContext)(TokenContext);
+  if (!context) {
+    // If used outside provider, fall back to default behavior (empty modes)
+    return {
+      modes: {},
+      getVariable: name => (0, _figmaVariablesResolver.getVariableByName)(name, {})
+    };
+  }
+  return context;
+};
+exports.useTokens = useTokens;
+//# sourceMappingURL=JFSThemeProvider.js.map

package/lib/commonjs/design-tokens/JFSThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TokenContext","createContext","undefined","JFSThemeProvider","modes","children","value","useMemo","getVariable","name","getVariableByName","jsx","Provider","exports","useTokens","context","useContext"],"sourceRoot":"../../../src","sources":["design-tokens/JFSThemeProvider.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAA+D,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE/D;AACA;AACA;;AAaA,MAAMkB,YAAY,gBAAG,IAAAC,oBAAa,EAA+BC,SAAS,CAAC;AAW3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,gBAAiD,GAAGA,CAAC;EAC9DC,KAAK,GAAG,CAAC,CAAC;EACVC;AACJ,CAAC,KAAK;EACF,MAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC,MAAM;IACxB;IACA,MAAMC,WAAW,GAAIC,IAAY,IAAK,IAAAC,yCAAiB,EAACD,IAAI,EAAEL,KAAK,CAAC;IAEpE,OAAO;MACHA,KAAK;MACLI;IACJ,CAAC;EACL,CAAC,EAAE,CAACJ,KAAK,CAAC,CAAC;EAEX,oBACI,IAAAxB,WAAA,CAAA+B,GAAA,EAACX,YAAY,CAACY,QAAQ;IAACN,KAAK,EAAEA,KAAM;IAAAD,QAAA,EAC/BA;EAAQ,CACU,CAAC;AAEhC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPAQ,OAAA,CAAAV,gBAAA,GAAAA,gBAAA;AAQO,MAAMW,SAAS,GAAGA,CAAA,KAAwB;EAC7C,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAAChB,YAAY,CAAC;EACxC,IAAI,CAACe,OAAO,EAAE;IACV;IACA,OAAO;MACHX,KAAK,EAAE,CAAC,CAAC;MACTI,WAAW,EAAGC,IAAY,IAAK,IAAAC,yCAAiB,EAACD,IAAI,EAAE,CAAC,CAAC;IAC7D,CAAC;EACL;EACA,OAAOM,OAAO;AAClB,CAAC;AAACF,OAAA,CAAAC,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/commonjs/design-tokens/figma-variables-resolver.js

@@ -11,10 +11,10 @@ exports.modeMap = exports.keyMap = void 0;
 exports.resolveVariable = resolveVariable;
 exports.traceVariableCollections = traceVariableCollections;
 exports.variableMap = void 0;
-const variablesData = require('./JFS Variables-variables-full.json');
-
+var _JFSVariablesVariablesFull = _interopRequireDefault(require("./JFS Variables-variables-full.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // 🔧 Configure the imports to include all the json files then add them to the allVariableData array 🔧
-const allVariableData = [variablesData];
+const allVariableData = [_JFSVariablesVariablesFull.default];
 // 🔧 DO NOT EDIT BELOW THIS LINE 🔧
 // Create comprehensive lookup maps
 const variableMap = exports.variableMap = new Map();
@@ -333,10 +333,4 @@ function traceVariableCollections(variableName) {
   }
   return collections;
 }
-//# sourceMappingURL=figma-variables-resolver.js.mapm.modeId === collection.defaultModeId)?.name
-      });
-    }
-  }
-  return collections;
-}
 //# sourceMappingURL=figma-variables-resolver.js.map

package/lib/commonjs/design-tokens/index.js

@@ -14,4 +14,15 @@ Object.keys(_figmaVariablesResolver).forEach(function (key) {
     }
   });
 });
+var _JFSThemeProvider = require("./JFSThemeProvider");
+Object.keys(_JFSThemeProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _JFSThemeProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _JFSThemeProvider[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/lib/commonjs/design-tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_figmaVariablesResolver","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../src","sources":["design-tokens/index.ts"],"mappings":";;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,uBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,uBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,uBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["_figmaVariablesResolver","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_JFSThemeProvider"],"sourceRoot":"../../../src","sources":["design-tokens/index.ts"],"mappings":";;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,uBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,uBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,uBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,iBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,iBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,iBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,iBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}