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.
- package/lib/commonjs/components/ActionFooter/ActionFooter.js +124 -0
- package/lib/commonjs/components/ActionFooter/ActionFooter.js.map +1 -0
- package/lib/commonjs/components/ActionFooter/ActionFooter.mdx +101 -0
- package/lib/commonjs/components/Button/Button.js +1 -1
- package/lib/commonjs/components/Button/Button.js.map +1 -1
- package/lib/commonjs/components/Button/Button.mdx +2 -2
- package/lib/commonjs/components/CardFeedback/CardFeedback.js +47 -11
- package/lib/commonjs/components/CardFeedback/CardFeedback.js.map +1 -1
- package/lib/commonjs/components/CardFeedback/CardFeedback.mdx +1 -0
- package/lib/commonjs/components/Divider/Divider.js +63 -0
- package/lib/commonjs/components/Divider/Divider.js.map +1 -0
- package/lib/commonjs/components/Divider/Divider.mdx +91 -0
- package/lib/commonjs/components/ListItem/ListItem.js +24 -13
- package/lib/commonjs/components/ListItem/ListItem.js.map +1 -1
- package/lib/commonjs/components/ListItem/ListItem.mdx +46 -5
- package/lib/commonjs/components/MerchantProfile/MerchantProfile.js +133 -0
- package/lib/commonjs/components/MerchantProfile/MerchantProfile.js.map +1 -0
- package/lib/commonjs/components/MerchantProfile/MerchantProfile.mdx +139 -0
- package/lib/commonjs/components/MoneyValue/MoneyValue.js +36 -4
- package/lib/commonjs/components/MoneyValue/MoneyValue.js.map +1 -1
- package/lib/commonjs/components/MoneyValue/MoneyValue.mdx +4 -0
- package/lib/commonjs/components/NavArrow/NavArrow.js +90 -0
- package/lib/commonjs/components/NavArrow/NavArrow.js.map +1 -0
- package/lib/commonjs/components/NavArrow/NavArrow.mdx +123 -0
- package/lib/commonjs/components/Section/Section.mdx +4 -4
- package/lib/commonjs/components/Stepper/Step.mdx +1 -1
- package/lib/commonjs/components/index.js +28 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/design-tokens/JFS Variables-variables-full.json +18633 -1
- package/lib/commonjs/design-tokens/figma-variables-resolver.js.map +1 -2
- package/lib/commonjs/icons/registry.js +1 -1
- package/lib/module/components/ActionFooter/ActionFooter.js +119 -0
- package/lib/module/components/ActionFooter/ActionFooter.js.map +1 -0
- package/lib/module/components/ActionFooter/ActionFooter.mdx +101 -0
- package/lib/module/components/Button/Button.js +1 -1
- package/lib/module/components/Button/Button.js.map +1 -1
- package/lib/module/components/Button/Button.mdx +2 -2
- package/lib/module/components/CardFeedback/CardFeedback.js +46 -11
- package/lib/module/components/CardFeedback/CardFeedback.js.map +1 -1
- package/lib/module/components/CardFeedback/CardFeedback.mdx +1 -0
- package/lib/module/components/Divider/Divider.js +58 -0
- package/lib/module/components/Divider/Divider.js.map +1 -0
- package/lib/module/components/Divider/Divider.mdx +91 -0
- package/lib/module/components/ListItem/ListItem.js +24 -13
- package/lib/module/components/ListItem/ListItem.js.map +1 -1
- package/lib/module/components/ListItem/ListItem.mdx +46 -5
- package/lib/module/components/MerchantProfile/MerchantProfile.js +128 -0
- package/lib/module/components/MerchantProfile/MerchantProfile.js.map +1 -0
- package/lib/module/components/MerchantProfile/MerchantProfile.mdx +139 -0
- package/lib/module/components/MoneyValue/MoneyValue.js +36 -4
- package/lib/module/components/MoneyValue/MoneyValue.js.map +1 -1
- package/lib/module/components/MoneyValue/MoneyValue.mdx +4 -0
- package/lib/module/components/NavArrow/NavArrow.js +84 -0
- package/lib/module/components/NavArrow/NavArrow.js.map +1 -0
- package/lib/module/components/NavArrow/NavArrow.mdx +123 -0
- package/lib/module/components/Section/Section.mdx +4 -4
- package/lib/module/components/Stepper/Step.mdx +1 -1
- package/lib/module/components/index.js +4 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/design-tokens/JFS Variables-variables-full.json +18633 -1
- package/lib/module/icons/registry.js +1 -1
- package/lib/typescript/components/ActionFooter/ActionFooter.d.ts +58 -0
- package/lib/typescript/components/ActionFooter/ActionFooter.d.ts.map +1 -0
- package/lib/typescript/components/CardFeedback/CardFeedback.d.ts +4 -3
- package/lib/typescript/components/CardFeedback/CardFeedback.d.ts.map +1 -1
- package/lib/typescript/components/Divider/Divider.d.ts +50 -0
- package/lib/typescript/components/Divider/Divider.d.ts.map +1 -0
- package/lib/typescript/components/ListItem/ListItem.d.ts +4 -3
- package/lib/typescript/components/ListItem/ListItem.d.ts.map +1 -1
- package/lib/typescript/components/MerchantProfile/MerchantProfile.d.ts +68 -0
- package/lib/typescript/components/MerchantProfile/MerchantProfile.d.ts.map +1 -0
- package/lib/typescript/components/MoneyValue/MoneyValue.d.ts +9 -2
- package/lib/typescript/components/MoneyValue/MoneyValue.d.ts.map +1 -1
- package/lib/typescript/components/NavArrow/NavArrow.d.ts +35 -0
- package/lib/typescript/components/NavArrow/NavArrow.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +4 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/icons/registry.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/.token-metadata.json +99 -11
- package/src/components/ActionFooter/ActionFooter.mdx +101 -0
- package/src/components/ActionFooter/ActionFooter.tsx +142 -0
- package/src/components/Button/Button.mdx +2 -2
- package/src/components/Button/Button.tsx +1 -1
- package/src/components/CardFeedback/CardFeedback.mdx +1 -0
- package/src/components/CardFeedback/CardFeedback.tsx +37 -12
- package/src/components/Divider/Divider.mdx +91 -0
- package/src/components/Divider/Divider.tsx +91 -0
- package/src/components/ListItem/ListItem.mdx +46 -5
- package/src/components/ListItem/ListItem.tsx +22 -11
- package/src/components/MerchantProfile/MerchantProfile.mdx +139 -0
- package/src/components/MerchantProfile/MerchantProfile.tsx +174 -0
- package/src/components/MoneyValue/MoneyValue.mdx +4 -0
- package/src/components/MoneyValue/MoneyValue.tsx +39 -3
- package/src/components/NavArrow/NavArrow.mdx +123 -0
- package/src/components/NavArrow/NavArrow.tsx +108 -0
- package/src/components/Section/Section.mdx +4 -4
- package/src/components/Stepper/Step.mdx +1 -1
- package/src/components/index.ts +4 -0
- package/src/design-tokens/JFS Variables-variables-full.json +18633 -1
- 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":["
|
|
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":[]}
|