jfs-components 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/lib/commonjs/components/Accordion/Accordion.js +217 -0
  2. package/lib/commonjs/components/Accordion/Accordion.js.map +1 -0
  3. package/lib/commonjs/components/Accordion/Accordion.mdx +122 -0
  4. package/lib/commonjs/components/ActionTile/ActionTile.js +93 -0
  5. package/lib/commonjs/components/ActionTile/ActionTile.js.map +1 -0
  6. package/lib/commonjs/components/ActionTile/ActionTile.mdx +54 -0
  7. package/lib/commonjs/components/ActionTile/index.js +14 -0
  8. package/lib/commonjs/components/ActionTile/index.js.map +1 -0
  9. package/lib/commonjs/components/CtaCard/CtaCard.js +122 -0
  10. package/lib/commonjs/components/CtaCard/CtaCard.js.map +1 -0
  11. package/lib/commonjs/components/CtaCard/CtaCard.mdx +66 -0
  12. package/lib/commonjs/components/CtaCard/index.js +14 -0
  13. package/lib/commonjs/components/CtaCard/index.js.map +1 -0
  14. package/lib/commonjs/components/ThreadHero/ThreadHero.js +114 -0
  15. package/lib/commonjs/components/ThreadHero/ThreadHero.js.map +1 -0
  16. package/lib/commonjs/components/ThreadHero/ThreadHero.mdx +69 -0
  17. package/lib/commonjs/components/TransactionBubble/TransactionBubble.js +101 -0
  18. package/lib/commonjs/components/TransactionBubble/TransactionBubble.js.map +1 -0
  19. package/lib/commonjs/components/TransactionBubble/TransactionBubble.mdx +40 -0
  20. package/lib/commonjs/components/TransactionDetails/TransactionDetails.js +177 -0
  21. package/lib/commonjs/components/TransactionDetails/TransactionDetails.js.map +1 -0
  22. package/lib/commonjs/components/TransactionDetails/TransactionDetails.mdx +98 -0
  23. package/lib/commonjs/components/TransactionStatus/TransactionStatus.js +82 -0
  24. package/lib/commonjs/components/TransactionStatus/TransactionStatus.js.map +1 -0
  25. package/lib/commonjs/components/TransactionStatus/TransactionStatus.mdx +41 -0
  26. package/lib/commonjs/components/index.js +35 -0
  27. package/lib/commonjs/components/index.js.map +1 -1
  28. package/lib/commonjs/design-tokens/figma-variables-resolver.js +3 -9
  29. package/lib/commonjs/icons/registry.js +1 -1
  30. package/lib/module/components/Accordion/Accordion.js +212 -0
  31. package/lib/module/components/Accordion/Accordion.js.map +1 -0
  32. package/lib/module/components/Accordion/Accordion.mdx +122 -0
  33. package/lib/module/components/ActionTile/ActionTile.js +88 -0
  34. package/lib/module/components/ActionTile/ActionTile.js.map +1 -0
  35. package/lib/module/components/ActionTile/ActionTile.mdx +54 -0
  36. package/lib/module/components/ActionTile/index.js +4 -0
  37. package/lib/module/components/ActionTile/index.js.map +1 -0
  38. package/lib/module/components/CtaCard/CtaCard.js +117 -0
  39. package/lib/module/components/CtaCard/CtaCard.js.map +1 -0
  40. package/lib/module/components/CtaCard/CtaCard.mdx +66 -0
  41. package/lib/module/components/CtaCard/index.js +4 -0
  42. package/lib/module/components/CtaCard/index.js.map +1 -0
  43. package/lib/module/components/ThreadHero/ThreadHero.js +109 -0
  44. package/lib/module/components/ThreadHero/ThreadHero.js.map +1 -0
  45. package/lib/module/components/ThreadHero/ThreadHero.mdx +69 -0
  46. package/lib/module/components/TransactionBubble/TransactionBubble.js +96 -0
  47. package/lib/module/components/TransactionBubble/TransactionBubble.js.map +1 -0
  48. package/lib/module/components/TransactionBubble/TransactionBubble.mdx +40 -0
  49. package/lib/module/components/TransactionDetails/TransactionDetails.js +174 -0
  50. package/lib/module/components/TransactionDetails/TransactionDetails.js.map +1 -0
  51. package/lib/module/components/TransactionDetails/TransactionDetails.mdx +98 -0
  52. package/lib/module/components/TransactionStatus/TransactionStatus.js +77 -0
  53. package/lib/module/components/TransactionStatus/TransactionStatus.js.map +1 -0
  54. package/lib/module/components/TransactionStatus/TransactionStatus.mdx +41 -0
  55. package/lib/module/components/index.js +5 -0
  56. package/lib/module/components/index.js.map +1 -1
  57. package/lib/module/design-tokens/figma-variables-resolver.js +2 -2
  58. package/lib/module/design-tokens/figma-variables-resolver.js.map +2 -1
  59. package/lib/module/icons/registry.js +1 -1
  60. package/lib/typescript/components/Accordion/Accordion.d.ts +58 -0
  61. package/lib/typescript/components/Accordion/Accordion.d.ts.map +1 -0
  62. package/lib/typescript/components/ActionTile/ActionTile.d.ts +26 -0
  63. package/lib/typescript/components/ActionTile/ActionTile.d.ts.map +1 -0
  64. package/lib/typescript/components/ActionTile/index.d.ts +2 -0
  65. package/lib/typescript/components/ActionTile/index.d.ts.map +1 -0
  66. package/lib/typescript/components/CtaCard/CtaCard.d.ts +61 -0
  67. package/lib/typescript/components/CtaCard/CtaCard.d.ts.map +1 -0
  68. package/lib/typescript/components/CtaCard/index.d.ts +2 -0
  69. package/lib/typescript/components/CtaCard/index.d.ts.map +1 -0
  70. package/lib/typescript/components/ThreadHero/ThreadHero.d.ts +21 -0
  71. package/lib/typescript/components/ThreadHero/ThreadHero.d.ts.map +1 -0
  72. package/lib/typescript/components/TransactionBubble/TransactionBubble.d.ts +24 -0
  73. package/lib/typescript/components/TransactionBubble/TransactionBubble.d.ts.map +1 -0
  74. package/lib/typescript/components/TransactionDetails/TransactionDetails.d.ts +57 -0
  75. package/lib/typescript/components/TransactionDetails/TransactionDetails.d.ts.map +1 -0
  76. package/lib/typescript/components/TransactionStatus/TransactionStatus.d.ts +16 -0
  77. package/lib/typescript/components/TransactionStatus/TransactionStatus.d.ts.map +1 -0
  78. package/lib/typescript/components/index.d.ts +5 -0
  79. package/lib/typescript/components/index.d.ts.map +1 -1
  80. package/lib/typescript/icons/registry.d.ts +1 -1
  81. package/package.json +5 -2
  82. package/src/components/.token-metadata.json +161 -0
  83. package/src/components/Accordion/Accordion.mdx +122 -0
  84. package/src/components/Accordion/Accordion.tsx +279 -0
  85. package/src/components/ActionTile/ActionTile.mdx +54 -0
  86. package/src/components/ActionTile/ActionTile.tsx +100 -0
  87. package/src/components/ActionTile/index.ts +1 -0
  88. package/src/components/CtaCard/CtaCard.mdx +66 -0
  89. package/src/components/CtaCard/CtaCard.tsx +185 -0
  90. package/src/components/CtaCard/index.ts +1 -0
  91. package/src/components/ThreadHero/ThreadHero.mdx +69 -0
  92. package/src/components/ThreadHero/ThreadHero.tsx +124 -0
  93. package/src/components/TransactionBubble/TransactionBubble.mdx +40 -0
  94. package/src/components/TransactionBubble/TransactionBubble.tsx +113 -0
  95. package/src/components/TransactionDetails/TransactionDetails.mdx +98 -0
  96. package/src/components/TransactionDetails/TransactionDetails.tsx +236 -0
  97. package/src/components/TransactionStatus/TransactionStatus.mdx +41 -0
  98. package/src/components/TransactionStatus/TransactionStatus.tsx +94 -0
  99. package/src/components/index.ts +5 -0
  100. package/src/icons/registry.ts +1 -1
@@ -0,0 +1,98 @@
1
+ import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
2
+ import * as TransactionDetailsStories from './TransactionDetails.stories';
3
+ import TransactionDetails from './TransactionDetails';
4
+ import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
5
+
6
+ <Meta of={TransactionDetailsStories} />
7
+
8
+ # TransactionDetails
9
+
10
+ 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.
11
+
12
+ ## Available Collections and Modes
13
+
14
+ This component does not use any design token collections with multiple modes.
15
+ ## Usage
16
+
17
+ <Canvas>
18
+ <Story of={TransactionDetailsStories.Default} />
19
+ </Canvas>
20
+
21
+ ## Usage Example
22
+
23
+ ```tsx
24
+ import TransactionDetails from 'jfs-components';
25
+
26
+ function PaymentConfirmation() {
27
+ return (
28
+ <TransactionDetails>
29
+ <TransactionDetails.Item label="UPI transaction ID" value="101674916166" />
30
+ <TransactionDetails.Item label="From: 5678 XXXX XXXX 1234" value="JioFinance • shivashankar@okjio" />
31
+ <TransactionDetails.Item label="To: SHIVASHANKAR RAJAN" value="JioFinance • shivashankar@okjio" />
32
+ <TransactionDetails.Item label="Payment method" value="UPI" />
33
+ </TransactionDetails>
34
+ );
35
+ }
36
+ ```
37
+
38
+ ## Single Item
39
+
40
+ <Canvas>
41
+ <Story of={TransactionDetailsStories.SingleItem} />
42
+ </Canvas>
43
+
44
+ <AccessibilitySection
45
+ items={[
46
+ 'TransactionDetails has role "summary" for screen readers to announce it as a summary section.',
47
+ 'Each DetailItem has role "text" with a combined label and value for clear reading.',
48
+ 'Use descriptive labels that clearly indicate what the value represents.',
49
+ 'Ensure sufficient color contrast between label and value text.',
50
+ ]}
51
+ />
52
+
53
+ <AnatomySection>
54
+ <ul>
55
+ <li><strong>TransactionDetails (Container)</strong> — Wraps all Item children with consistent gap and padding.</li>
56
+ <li><strong>TransactionDetails.Item</strong> — Individual label-value pair component.</li>
57
+ <li><strong>Label</strong> — Descriptive text above the value, using token typography.</li>
58
+ <li><strong>Value</strong> — The actual data/content text, using token typography.</li>
59
+ </ul>
60
+ </AnatomySection>
61
+
62
+ <UsageConstraintsSection
63
+ items={[
64
+ 'Always use TransactionDetails.Item as direct children of TransactionDetails for proper mode propagation.',
65
+ 'Keep label text concise and descriptive.',
66
+ 'Values can be longer but consider text wrapping on smaller screens.',
67
+ 'Use consistent date/time and number formatting across all detail items.',
68
+ ]}
69
+ />
70
+
71
+ ## TransactionDetails Props
72
+
73
+ <ArgsTable of={TransactionDetails} />
74
+
75
+ ## TransactionDetails.Item Props
76
+
77
+ <ArgsTable of={TransactionDetails.Item} />
78
+
79
+ ## Design Tokens
80
+
81
+ This component uses the following design tokens, resolved through `getVariableByName`:
82
+
83
+ - **`detailItem/gap`**
84
+ - **`detailItem/label/color`**
85
+ - **`detailItem/label/fontFamily`**
86
+ - **`detailItem/label/fontSize`**
87
+ - **`detailItem/label/fontWeight`**
88
+ - **`detailItem/label/lineHeight`**
89
+ - **`detailItem/value/color`**
90
+ - **`detailItem/value/fontFamily`**
91
+ - **`detailItem/value/fontSize`**
92
+ - **`detailItem/value/fontWeight`**
93
+ - **`detailItem/value/lineHeight`**
94
+ - **`transationDetails/gap`**
95
+ - **`transationDetails/padding/horizontal`**
96
+ - **`transationDetails/padding/vertical`**
97
+
98
+ All tokens support mode-based theming through the `modes` prop.
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = TransactionStatus;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _reactNative = require("react-native");
9
+ var _reactNativeSvg = require("react-native-svg");
10
+ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
11
+ var _jsxRuntime = require("react/jsx-runtime");
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ // --- Internal Icon Component ---
14
+
15
+ const StatusIcon = ({
16
+ modes = {},
17
+ width = 15,
18
+ height = 15,
19
+ color
20
+ }) => {
21
+ const resolvedColor = color || (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/icon/color', modes) || '#F06D0F';
22
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Svg, {
23
+ width: width,
24
+ height: height,
25
+ viewBox: "0 0 15 15",
26
+ fill: "none",
27
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
28
+ 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",
29
+ fill: resolvedColor,
30
+ fillRule: "evenodd" // Added based on typical icon behavior, though Figma output said 'nonzero' default. SVG data usually needs checking.
31
+ })
32
+ });
33
+ };
34
+
35
+ // --- Main Component ---
36
+
37
+ /**
38
+ * TransactionStatus component displaying status icon, label, and date.
39
+ */
40
+ function TransactionStatus({
41
+ status = 'Expired',
42
+ date = '20 Mar 2025',
43
+ modes = {},
44
+ style
45
+ }) {
46
+ const gap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', modes)) || 4;
47
+ // Using 'transactionStatus' tokens for text
48
+ const textColor = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/color', modes) || '#191b1e';
49
+ const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontSize', modes)) || 12;
50
+ const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/lineHeight', modes)) || 16;
51
+ const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontFamily', modes) || 'System';
52
+ const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/fontWeight2', modes) || '500';
53
+ const iconColor = (0, _figmaVariablesResolver.getVariableByName)('transactionStatus/icon/color', modes) || '#f06d0f';
54
+ const iconSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionStatus/iconSize', modes)) || 18;
55
+ const containerStyle = {
56
+ flexDirection: 'row',
57
+ alignItems: 'center',
58
+ gap,
59
+ ...style
60
+ };
61
+ const textStyle = {
62
+ color: textColor,
63
+ fontSize,
64
+ lineHeight,
65
+ fontFamily,
66
+ fontWeight: fontWeight
67
+ };
68
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
69
+ style: containerStyle,
70
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {
71
+ width: iconSize,
72
+ height: iconSize,
73
+ color: iconColor,
74
+ modes: modes
75
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
76
+ style: textStyle,
77
+ numberOfLines: 1,
78
+ children: [status, " \xB7 ", date]
79
+ })]
80
+ });
81
+ }
82
+ //# sourceMappingURL=TransactionStatus.js.map
@@ -0,0 +1 @@
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":"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","ignoreList":[]}
@@ -0,0 +1,41 @@
1
+ import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
2
+ import * as TransactionStatusStories from './TransactionStatus.stories';
3
+ import TransactionStatus from './TransactionStatus';
4
+
5
+ <Meta of={TransactionStatusStories} />
6
+
7
+ # TransactionStatus
8
+
9
+ TransactionStatus component with design-token-driven styling.
10
+
11
+ ## Available Collections and Modes
12
+
13
+ This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
14
+
15
+ ### Transaction Status
16
+ - **Modes:** Request | Paid | Declined | Expired
17
+ - **Default:** Request
18
+ ## Usage
19
+
20
+ <Canvas>
21
+ <Story of={TransactionStatusStories.Default} />
22
+ </Canvas>
23
+
24
+ ## Props
25
+
26
+ <ArgsTable of={TransactionStatus} />
27
+
28
+ ## Design Tokens
29
+
30
+ This component uses the following design tokens, resolved through `getVariableByName`:
31
+
32
+ - **`transactionBubble/statusWrap/gap`**
33
+ - **`transactionStatus/color`**
34
+ - **`transactionStatus/fontFamily`**
35
+ - **`transactionStatus/fontSize`**
36
+ - **`transactionStatus/fontWeight2`**
37
+ - **`transactionStatus/icon/color`**
38
+ - **`transactionStatus/iconSize`**
39
+ - **`transactionStatus/lineHeight`**
40
+
41
+ All tokens support mode-based theming through the `modes` prop.
@@ -63,6 +63,12 @@ Object.defineProperty(exports, "CardFeedback", {
63
63
  return _CardFeedback.default;
64
64
  }
65
65
  });
66
+ Object.defineProperty(exports, "CtaCard", {
67
+ enumerable: true,
68
+ get: function () {
69
+ return _CtaCard.default;
70
+ }
71
+ });
66
72
  Object.defineProperty(exports, "Disclaimer", {
67
73
  enumerable: true,
68
74
  get: function () {
@@ -177,12 +183,36 @@ Object.defineProperty(exports, "TextInput", {
177
183
  return _TextInput.default;
178
184
  }
179
185
  });
186
+ Object.defineProperty(exports, "ThreadHero", {
187
+ enumerable: true,
188
+ get: function () {
189
+ return _ThreadHero.default;
190
+ }
191
+ });
180
192
  Object.defineProperty(exports, "Tooltip", {
181
193
  enumerable: true,
182
194
  get: function () {
183
195
  return _Tooltip.Tooltip;
184
196
  }
185
197
  });
198
+ Object.defineProperty(exports, "TransactionBubble", {
199
+ enumerable: true,
200
+ get: function () {
201
+ return _TransactionBubble.default;
202
+ }
203
+ });
204
+ Object.defineProperty(exports, "TransactionDetails", {
205
+ enumerable: true,
206
+ get: function () {
207
+ return _TransactionDetails.default;
208
+ }
209
+ });
210
+ Object.defineProperty(exports, "TransactionStatus", {
211
+ enumerable: true,
212
+ get: function () {
213
+ return _TransactionStatus.default;
214
+ }
215
+ });
186
216
  Object.defineProperty(exports, "UpiHandle", {
187
217
  enumerable: true,
188
218
  get: function () {
@@ -202,6 +232,7 @@ var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"
202
232
  var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
203
233
  var _Divider = _interopRequireDefault(require("./Divider/Divider"));
204
234
  var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
235
+ var _CtaCard = _interopRequireDefault(require("./CtaCard/CtaCard"));
205
236
  var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
206
237
  var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
207
238
  var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
@@ -218,7 +249,11 @@ var _Stepper = _interopRequireDefault(require("./Stepper/Stepper"));
218
249
  var _Step = require("./Stepper/Step");
219
250
  var _StepLabel = require("./Stepper/StepLabel");
220
251
  var _TextInput = _interopRequireDefault(require("./TextInput/TextInput"));
252
+ var _ThreadHero = _interopRequireDefault(require("./ThreadHero/ThreadHero"));
221
253
  var _Tooltip = require("./Tooltip/Tooltip");
254
+ var _TransactionBubble = _interopRequireDefault(require("./TransactionBubble/TransactionBubble"));
255
+ var _TransactionDetails = _interopRequireDefault(require("./TransactionDetails/TransactionDetails"));
256
+ var _TransactionStatus = _interopRequireDefault(require("./TransactionStatus/TransactionStatus"));
222
257
  var _UpiHandle = _interopRequireDefault(require("./UpiHandle/UpiHandle"));
223
258
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
224
259
  //# sourceMappingURL=index.js.map
@@ -1 +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":[]}
1
+ {"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":[]}
@@ -11,10 +11,10 @@ exports.modeMap = exports.keyMap = void 0;
11
11
  exports.resolveVariable = resolveVariable;
12
12
  exports.traceVariableCollections = traceVariableCollections;
13
13
  exports.variableMap = void 0;
14
- const variablesData = require('./JFS Variables-variables-full.json');
15
-
14
+ var _JFSVariablesVariablesFull = _interopRequireDefault(require("./JFS Variables-variables-full.json"));
15
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
16
  // 🔧 Configure the imports to include all the json files then add them to the allVariableData array 🔧
17
- const allVariableData = [variablesData];
17
+ const allVariableData = [_JFSVariablesVariablesFull.default];
18
18
  // 🔧 DO NOT EDIT BELOW THIS LINE 🔧
19
19
  // Create comprehensive lookup maps
20
20
  const variableMap = exports.variableMap = new Map();
@@ -333,10 +333,4 @@ function traceVariableCollections(variableName) {
333
333
  }
334
334
  return collections;
335
335
  }
336
- //# sourceMappingURL=figma-variables-resolver.js.mapm.modeId === collection.defaultModeId)?.name
337
- });
338
- }
339
- }
340
- return collections;
341
- }
342
336
  //# sourceMappingURL=figma-variables-resolver.js.map