jfs-components 0.0.1 → 0.0.3

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 (101) hide show
  1. package/lib/commonjs/components/ActionFooter/ActionFooter.js +124 -0
  2. package/lib/commonjs/components/ActionFooter/ActionFooter.js.map +1 -0
  3. package/lib/commonjs/components/ActionFooter/ActionFooter.mdx +101 -0
  4. package/lib/commonjs/components/Button/Button.js +1 -1
  5. package/lib/commonjs/components/Button/Button.js.map +1 -1
  6. package/lib/commonjs/components/Button/Button.mdx +2 -2
  7. package/lib/commonjs/components/CardFeedback/CardFeedback.js +47 -11
  8. package/lib/commonjs/components/CardFeedback/CardFeedback.js.map +1 -1
  9. package/lib/commonjs/components/CardFeedback/CardFeedback.mdx +1 -0
  10. package/lib/commonjs/components/Divider/Divider.js +63 -0
  11. package/lib/commonjs/components/Divider/Divider.js.map +1 -0
  12. package/lib/commonjs/components/Divider/Divider.mdx +91 -0
  13. package/lib/commonjs/components/ListItem/ListItem.js +24 -13
  14. package/lib/commonjs/components/ListItem/ListItem.js.map +1 -1
  15. package/lib/commonjs/components/ListItem/ListItem.mdx +46 -5
  16. package/lib/commonjs/components/MerchantProfile/MerchantProfile.js +133 -0
  17. package/lib/commonjs/components/MerchantProfile/MerchantProfile.js.map +1 -0
  18. package/lib/commonjs/components/MerchantProfile/MerchantProfile.mdx +139 -0
  19. package/lib/commonjs/components/MoneyValue/MoneyValue.js +36 -4
  20. package/lib/commonjs/components/MoneyValue/MoneyValue.js.map +1 -1
  21. package/lib/commonjs/components/MoneyValue/MoneyValue.mdx +4 -0
  22. package/lib/commonjs/components/NavArrow/NavArrow.js +90 -0
  23. package/lib/commonjs/components/NavArrow/NavArrow.js.map +1 -0
  24. package/lib/commonjs/components/NavArrow/NavArrow.mdx +123 -0
  25. package/lib/commonjs/components/Section/Section.mdx +4 -4
  26. package/lib/commonjs/components/Stepper/Step.mdx +1 -1
  27. package/lib/commonjs/components/index.js +28 -0
  28. package/lib/commonjs/components/index.js.map +1 -1
  29. package/lib/commonjs/design-tokens/JFS Variables-variables-full.json +18633 -1
  30. package/lib/commonjs/design-tokens/figma-variables-resolver.js.map +1 -2
  31. package/lib/commonjs/icons/registry.js +1 -1
  32. package/lib/module/components/ActionFooter/ActionFooter.js +119 -0
  33. package/lib/module/components/ActionFooter/ActionFooter.js.map +1 -0
  34. package/lib/module/components/ActionFooter/ActionFooter.mdx +101 -0
  35. package/lib/module/components/Button/Button.js +1 -1
  36. package/lib/module/components/Button/Button.js.map +1 -1
  37. package/lib/module/components/Button/Button.mdx +2 -2
  38. package/lib/module/components/CardFeedback/CardFeedback.js +46 -11
  39. package/lib/module/components/CardFeedback/CardFeedback.js.map +1 -1
  40. package/lib/module/components/CardFeedback/CardFeedback.mdx +1 -0
  41. package/lib/module/components/Divider/Divider.js +58 -0
  42. package/lib/module/components/Divider/Divider.js.map +1 -0
  43. package/lib/module/components/Divider/Divider.mdx +91 -0
  44. package/lib/module/components/ListItem/ListItem.js +24 -13
  45. package/lib/module/components/ListItem/ListItem.js.map +1 -1
  46. package/lib/module/components/ListItem/ListItem.mdx +46 -5
  47. package/lib/module/components/MerchantProfile/MerchantProfile.js +128 -0
  48. package/lib/module/components/MerchantProfile/MerchantProfile.js.map +1 -0
  49. package/lib/module/components/MerchantProfile/MerchantProfile.mdx +139 -0
  50. package/lib/module/components/MoneyValue/MoneyValue.js +36 -4
  51. package/lib/module/components/MoneyValue/MoneyValue.js.map +1 -1
  52. package/lib/module/components/MoneyValue/MoneyValue.mdx +4 -0
  53. package/lib/module/components/NavArrow/NavArrow.js +84 -0
  54. package/lib/module/components/NavArrow/NavArrow.js.map +1 -0
  55. package/lib/module/components/NavArrow/NavArrow.mdx +123 -0
  56. package/lib/module/components/Section/Section.mdx +4 -4
  57. package/lib/module/components/Stepper/Step.mdx +1 -1
  58. package/lib/module/components/index.js +4 -0
  59. package/lib/module/components/index.js.map +1 -1
  60. package/lib/module/design-tokens/JFS Variables-variables-full.json +18633 -1
  61. package/lib/module/icons/registry.js +1 -1
  62. package/lib/typescript/components/ActionFooter/ActionFooter.d.ts +58 -0
  63. package/lib/typescript/components/ActionFooter/ActionFooter.d.ts.map +1 -0
  64. package/lib/typescript/components/CardFeedback/CardFeedback.d.ts +4 -3
  65. package/lib/typescript/components/CardFeedback/CardFeedback.d.ts.map +1 -1
  66. package/lib/typescript/components/Divider/Divider.d.ts +50 -0
  67. package/lib/typescript/components/Divider/Divider.d.ts.map +1 -0
  68. package/lib/typescript/components/ListItem/ListItem.d.ts +4 -3
  69. package/lib/typescript/components/ListItem/ListItem.d.ts.map +1 -1
  70. package/lib/typescript/components/MerchantProfile/MerchantProfile.d.ts +68 -0
  71. package/lib/typescript/components/MerchantProfile/MerchantProfile.d.ts.map +1 -0
  72. package/lib/typescript/components/MoneyValue/MoneyValue.d.ts +9 -2
  73. package/lib/typescript/components/MoneyValue/MoneyValue.d.ts.map +1 -1
  74. package/lib/typescript/components/NavArrow/NavArrow.d.ts +35 -0
  75. package/lib/typescript/components/NavArrow/NavArrow.d.ts.map +1 -0
  76. package/lib/typescript/components/index.d.ts +4 -0
  77. package/lib/typescript/components/index.d.ts.map +1 -1
  78. package/lib/typescript/icons/registry.d.ts +1 -1
  79. package/package.json +2 -2
  80. package/src/components/.token-metadata.json +99 -11
  81. package/src/components/ActionFooter/ActionFooter.mdx +101 -0
  82. package/src/components/ActionFooter/ActionFooter.tsx +142 -0
  83. package/src/components/Button/Button.mdx +2 -2
  84. package/src/components/Button/Button.tsx +1 -1
  85. package/src/components/CardFeedback/CardFeedback.mdx +1 -0
  86. package/src/components/CardFeedback/CardFeedback.tsx +37 -12
  87. package/src/components/Divider/Divider.mdx +91 -0
  88. package/src/components/Divider/Divider.tsx +91 -0
  89. package/src/components/ListItem/ListItem.mdx +46 -5
  90. package/src/components/ListItem/ListItem.tsx +22 -11
  91. package/src/components/MerchantProfile/MerchantProfile.mdx +139 -0
  92. package/src/components/MerchantProfile/MerchantProfile.tsx +174 -0
  93. package/src/components/MoneyValue/MoneyValue.mdx +4 -0
  94. package/src/components/MoneyValue/MoneyValue.tsx +39 -3
  95. package/src/components/NavArrow/NavArrow.mdx +123 -0
  96. package/src/components/NavArrow/NavArrow.tsx +108 -0
  97. package/src/components/Section/Section.mdx +4 -4
  98. package/src/components/Stepper/Step.mdx +1 -1
  99. package/src/components/index.ts +4 -0
  100. package/src/design-tokens/JFS Variables-variables-full.json +18633 -1
  101. package/src/icons/registry.ts +1 -1
@@ -0,0 +1,90 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _reactNative = require("react-native");
9
+ var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
10
+ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
11
+ var _jsxRuntime = require("react/jsx-runtime");
12
+ 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); }
13
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
+ /**
15
+ * NavArrow component that displays a small chevron arrow for navigation.
16
+ *
17
+ * This component uses design tokens for all visual properties:
18
+ * - navArrow/icon/color - chevron stroke color
19
+ * - navArrow/icon/width - icon width
20
+ * - navArrow/icon/height - icon height
21
+ * - navArrow/icon/strokeWeight - stroke width
22
+ * - navArrow/width - container width
23
+ * - navArrow/height - container height
24
+ * - navArrow/radius - border radius
25
+ * - navArrow/background - background color
26
+ *
27
+ * @component
28
+ * @param {Object} props
29
+ * @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
30
+ * @param {Object} [props.modes={}] - Modes for design token resolution
31
+ * @param {Object} [props.style] - Additional container styles
32
+ */
33
+ function NavArrow({
34
+ direction = 'Back',
35
+ modes = {},
36
+ style,
37
+ accessibilityLabel,
38
+ ...rest
39
+ }) {
40
+ // Resolve design tokens
41
+ const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes) || '#24262b';
42
+ const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes)) || 4;
43
+ const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes)) || 8;
44
+ const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes)) || 2;
45
+ const containerWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
46
+ const containerHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes)) || 10;
47
+ const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes)) || 0;
48
+ const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes) || 'transparent';
49
+ const containerStyle = {
50
+ width: containerWidth,
51
+ height: containerHeight,
52
+ borderRadius,
53
+ backgroundColor,
54
+ alignItems: 'center',
55
+ justifyContent: 'center',
56
+ ...(style || {})
57
+ };
58
+ const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward');
59
+
60
+ // SVG path for chevron - draws a simple ">" shape
61
+ // For Back direction, we flip horizontally with scaleX(-1)
62
+ // The path creates a chevron pointing right by default
63
+ const chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`;
64
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
65
+ style: containerStyle,
66
+ accessibilityRole: "image",
67
+ accessibilityLabel: defaultAccessibilityLabel,
68
+ ...rest,
69
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
70
+ width: iconWidth,
71
+ height: iconHeight,
72
+ viewBox: `0 0 ${iconWidth} ${iconHeight}`,
73
+ style: direction === 'Back' ? {
74
+ transform: [{
75
+ scaleX: -1
76
+ }]
77
+ } : undefined,
78
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
79
+ d: chevronPath,
80
+ stroke: iconColor,
81
+ strokeWidth: strokeWeight,
82
+ strokeLinecap: "round",
83
+ strokeLinejoin: "round",
84
+ fill: "none"
85
+ })
86
+ })
87
+ });
88
+ }
89
+ var _default = exports.default = NavArrow;
90
+ //# sourceMappingURL=NavArrow.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeSvg","_interopRequireWildcard","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NavArrow","direction","modes","style","accessibilityLabel","rest","iconColor","getVariableByName","iconWidth","Number","iconHeight","strokeWeight","containerWidth","containerHeight","borderRadius","backgroundColor","containerStyle","width","height","alignItems","justifyContent","defaultAccessibilityLabel","chevronPath","jsx","View","accessibilityRole","children","viewBox","transform","scaleX","undefined","Path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","fill","_default","exports"],"sourceRoot":"../../../../src","sources":["components/NavArrow/NavArrow.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,123 @@
1
+ import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
2
+ import * as NavArrowStories from './NavArrow.stories';
3
+ import NavArrow from './NavArrow';
4
+
5
+ <Meta of={NavArrowStories} />
6
+
7
+ # NavArrow
8
+
9
+ A small navigation arrow component that displays a chevron for Back or Forward navigation. Commonly used in navigation headers, list items, or anywhere directional navigation cues are needed.
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
+ ### Color Mode
16
+ - **Modes:** Light | Dark
17
+ - **Default:** Light
18
+
19
+ ### Context2
20
+ - **Modes:** Default | AppBar
21
+ - **Default:** Default
22
+ ## Usage
23
+
24
+ ### Basic Usage
25
+
26
+ <Canvas>
27
+ <Story of={NavArrowStories.Default} />
28
+ </Canvas>
29
+
30
+ ### Direction Variants
31
+
32
+ The NavArrow supports two directions:
33
+
34
+ - **Back** — Left-pointing chevron (‹) for backward navigation
35
+ - **Forward** — Right-pointing chevron (›) for forward navigation
36
+
37
+ <Canvas>
38
+ <Story of={NavArrowStories.AllDirections} />
39
+ </Canvas>
40
+
41
+ ### Usage Examples
42
+
43
+ ```jsx
44
+ import { NavArrow } from 'jfs-components';
45
+
46
+ // Basic back arrow
47
+ <NavArrow direction="Back" />
48
+
49
+ // Forward arrow
50
+ <NavArrow direction="Forward" />
51
+
52
+ // With custom modes (for theming)
53
+ <NavArrow direction="Back" modes={{ 'Color Mode': 'Dark' }} />
54
+
55
+ // With accessibility label
56
+ <NavArrow
57
+ direction="Back"
58
+ accessibilityLabel="Navigate to previous screen"
59
+ />
60
+ ```
61
+
62
+ ### Usage in a Header
63
+
64
+ ```jsx
65
+ import { View, Text, Pressable } from 'react-native';
66
+ import { NavArrow } from 'jfs-components';
67
+
68
+ function Header({ title, onBack }) {
69
+ return (
70
+ <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16 }}>
71
+ <Pressable onPress={onBack} style={{ padding: 8 }}>
72
+ <NavArrow direction="Back" />
73
+ </Pressable>
74
+ <Text style={{ marginLeft: 8, fontSize: 18, fontWeight: '600' }}>
75
+ {title}
76
+ </Text>
77
+ </View>
78
+ );
79
+ }
80
+ ```
81
+
82
+ ### Usage in a List Item
83
+
84
+ ```jsx
85
+ import { View, Text, Pressable } from 'react-native';
86
+ import { NavArrow } from 'jfs-components';
87
+
88
+ function NavigableListItem({ label, onPress }) {
89
+ return (
90
+ <Pressable
91
+ onPress={onPress}
92
+ style={{
93
+ flexDirection: 'row',
94
+ alignItems: 'center',
95
+ justifyContent: 'space-between',
96
+ padding: 16
97
+ }}
98
+ >
99
+ <Text>{label}</Text>
100
+ <NavArrow direction="Forward" />
101
+ </Pressable>
102
+ );
103
+ }
104
+ ```
105
+
106
+ ## Props
107
+
108
+ <ArgsTable of={NavArrow} />
109
+
110
+ ## Design Tokens
111
+
112
+ This component uses the following design tokens, resolved through `getVariableByName`:
113
+
114
+ - **`navArrow/background`**
115
+ - **`navArrow/height`**
116
+ - **`navArrow/icon/color`**
117
+ - **`navArrow/icon/height`**
118
+ - **`navArrow/icon/strokeWeight`**
119
+ - **`navArrow/icon/width`**
120
+ - **`navArrow/radius`**
121
+ - **`navArrow/width`**
122
+
123
+ All tokens support mode-based theming through the `modes` prop.
@@ -13,6 +13,10 @@ Section component that mirrors the Figma "Section" component.
13
13
 
14
14
  This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
15
15
 
16
+ ### Color Mode
17
+ - **Modes:** Light | Dark
18
+ - **Default:** Light
19
+
16
20
  ### Padding
17
21
  - **Modes:** Default | None
18
22
  - **Default:** Default
@@ -20,10 +24,6 @@ This component uses the following design token collections. Each collection supp
20
24
  ### Appearance.Brand
21
25
  - **Modes:** Primary | Secondary | Neutral
22
26
  - **Default:** Primary
23
-
24
- ### Color Mode
25
- - **Modes:** Light | Dark
26
- - **Default:** Light
27
27
  ## Usage
28
28
 
29
29
  <Canvas>
@@ -12,7 +12,7 @@ A component representing a single step within a Stepper process. It displays an
12
12
 
13
13
  This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
14
14
 
15
- ### Status
15
+ ### Step Status
16
16
  - **Modes:** active | inactive | complete | error | warning
17
17
  - **Default:** active
18
18
 
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "ActionFooter", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _ActionFooter.default;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "AppBar", {
7
13
  enumerable: true,
8
14
  get: function () {
@@ -63,6 +69,12 @@ Object.defineProperty(exports, "Disclaimer", {
63
69
  return _Disclaimer.default;
64
70
  }
65
71
  });
72
+ Object.defineProperty(exports, "Divider", {
73
+ enumerable: true,
74
+ get: function () {
75
+ return _Divider.default;
76
+ }
77
+ });
66
78
  Object.defineProperty(exports, "Drawer", {
67
79
  enumerable: true,
68
80
  get: function () {
@@ -111,12 +123,24 @@ Object.defineProperty(exports, "MediaCard", {
111
123
  return _MediaCard.default;
112
124
  }
113
125
  });
126
+ Object.defineProperty(exports, "MerchantProfile", {
127
+ enumerable: true,
128
+ get: function () {
129
+ return _MerchantProfile.default;
130
+ }
131
+ });
114
132
  Object.defineProperty(exports, "MoneyValue", {
115
133
  enumerable: true,
116
134
  get: function () {
117
135
  return _MoneyValue.default;
118
136
  }
119
137
  });
138
+ Object.defineProperty(exports, "NavArrow", {
139
+ enumerable: true,
140
+ get: function () {
141
+ return _NavArrow.default;
142
+ }
143
+ });
120
144
  Object.defineProperty(exports, "PageTitle", {
121
145
  enumerable: true,
122
146
  get: function () {
@@ -165,6 +189,7 @@ Object.defineProperty(exports, "UpiHandle", {
165
189
  return _UpiHandle.default;
166
190
  }
167
191
  });
192
+ var _ActionFooter = _interopRequireDefault(require("./ActionFooter/ActionFooter"));
168
193
  var _AppBar = _interopRequireDefault(require("./AppBar/AppBar"));
169
194
  var _Avatar = _interopRequireDefault(require("./Avatar/Avatar"));
170
195
  var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup/AvatarGroup"));
@@ -175,6 +200,7 @@ var _Button = _interopRequireDefault(require("./Button/Button"));
175
200
  var _Card = _interopRequireDefault(require("./Card/Card"));
176
201
  var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"));
177
202
  var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
203
+ var _Divider = _interopRequireDefault(require("./Divider/Divider"));
178
204
  var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
179
205
  var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
180
206
  var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
@@ -183,7 +209,9 @@ var _LazyList = _interopRequireDefault(require("./LazyList/LazyList"));
183
209
  var _ListGroup = _interopRequireDefault(require("./ListGroup/ListGroup"));
184
210
  var _ListItem = _interopRequireDefault(require("./ListItem/ListItem"));
185
211
  var _MediaCard = _interopRequireDefault(require("./MediaCard/MediaCard"));
212
+ var _MerchantProfile = _interopRequireDefault(require("./MerchantProfile/MerchantProfile"));
186
213
  var _MoneyValue = _interopRequireDefault(require("./MoneyValue/MoneyValue"));
214
+ var _NavArrow = _interopRequireDefault(require("./NavArrow/NavArrow"));
187
215
  var _PageTitle = _interopRequireDefault(require("./PageTitle/PageTitle"));
188
216
  var _Section = _interopRequireDefault(require("./Section/Section"));
189
217
  var _Stepper = _interopRequireDefault(require("./Stepper/Stepper"));
@@ -1 +1 @@
1
- {"version":3,"names":["_AppBar","_interopRequireDefault","require","_Avatar","_AvatarGroup","_Badge","_BottomNav","_BottomNavItem","_Button","_Card","_CardFeedback","_Disclaimer","_Drawer","_FilterBar","_IconButton","_IconCapsule","_LazyList","_ListGroup","_ListItem","_MediaCard","_MoneyValue","_PageTitle","_Section","_Stepper","_Step","_StepLabel","_TextInput","_Tooltip","_UpiHandle","e","__esModule","default"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,UAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,cAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,OAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,KAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,aAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,WAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,OAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,UAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,WAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,YAAA,GAAAd,sBAAA,CAAAC,OAAA;AACA,IAAAc,SAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,UAAA,GAAAhB,sBAAA,CAAAC,OAAA;AACA,IAAAgB,SAAA,GAAAjB,sBAAA,CAAAC,OAAA;AACA,IAAAiB,UAAA,GAAAlB,sBAAA,CAAAC,OAAA;AACA,IAAAkB,WAAA,GAAAnB,sBAAA,CAAAC,OAAA;AACA,IAAAmB,UAAA,GAAApB,sBAAA,CAAAC,OAAA;AACA,IAAAoB,QAAA,GAAArB,sBAAA,CAAAC,OAAA;AACA,IAAAqB,QAAA,GAAAtB,sBAAA,CAAAC,OAAA;AACA,IAAAsB,KAAA,GAAAtB,OAAA;AACA,IAAAuB,UAAA,GAAAvB,OAAA;AACA,IAAAwB,UAAA,GAAAzB,sBAAA,CAAAC,OAAA;AACA,IAAAyB,QAAA,GAAAzB,OAAA;AACA,IAAA0B,UAAA,GAAA3B,sBAAA,CAAAC,OAAA;AAA6D,SAAAD,uBAAA4B,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","_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":[]}