@ledgerhq/lumen-ui-rnative 0.1.31 → 0.1.32
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/dist/module/lib/Components/AddressInput/AddressInput.mdx +10 -12
- package/dist/module/lib/Components/AddressInput/AddressInput.stories.js +2 -1
- package/dist/module/lib/Components/AddressInput/AddressInput.stories.js.map +1 -1
- package/dist/module/lib/Components/AmountInput/AmountInput.mdx +3 -3
- package/dist/module/lib/Components/BaseInput/BaseInput.js +60 -32
- package/dist/module/lib/Components/BaseInput/BaseInput.js.map +1 -1
- package/dist/module/lib/Components/DotCount/DotCount.stories.js +9 -18
- package/dist/module/lib/Components/DotCount/DotCount.stories.js.map +1 -1
- package/dist/module/lib/Components/DotIndicator/DotIndicator.stories.js +3 -5
- package/dist/module/lib/Components/DotIndicator/DotIndicator.stories.js.map +1 -1
- package/dist/module/lib/Components/MediaImage/MediaImage.test.js +7 -3
- package/dist/module/lib/Components/MediaImage/MediaImage.test.js.map +1 -1
- package/dist/module/lib/Components/SearchInput/SearchInput.mdx +4 -10
- package/dist/module/lib/Components/SearchInput/SearchInput.stories.js +2 -1
- package/dist/module/lib/Components/SearchInput/SearchInput.stories.js.map +1 -1
- package/dist/module/lib/Components/SegmentedControl/SegmentedControl.js +2 -1
- package/dist/module/lib/Components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/module/lib/Components/SegmentedControl/SegmentedControl.mdx +34 -4
- package/dist/module/lib/Components/SegmentedControl/SegmentedControl.stories.js +32 -7
- package/dist/module/lib/Components/SegmentedControl/SegmentedControl.stories.js.map +1 -1
- package/dist/module/lib/Components/SegmentedControl/SegmentedControl.test.js +26 -0
- package/dist/module/lib/Components/SegmentedControl/SegmentedControl.test.js.map +1 -1
- package/dist/module/lib/Components/TextInput/TextInput.js +4 -3
- package/dist/module/lib/Components/TextInput/TextInput.js.map +1 -1
- package/dist/module/lib/Components/TextInput/TextInput.mdx +8 -10
- package/dist/module/lib/Components/TextInput/TextInput.stories.js +40 -1
- package/dist/module/lib/Components/TextInput/TextInput.stories.js.map +1 -1
- package/dist/module/lib/Components/TextInput/TextInput.test.js +76 -0
- package/dist/module/lib/Components/TextInput/TextInput.test.js.map +1 -0
- package/dist/typescript/src/lib/Components/BaseInput/BaseInput.d.ts +1 -1
- package/dist/typescript/src/lib/Components/BaseInput/BaseInput.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/BaseInput/types.d.ts +9 -2
- package/dist/typescript/src/lib/Components/BaseInput/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/typescript/src/lib/Components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/SegmentedControl/types.d.ts +4 -0
- package/dist/typescript/src/lib/Components/SegmentedControl/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/TextInput/TextInput.d.ts +4 -3
- package/dist/typescript/src/lib/Components/TextInput/TextInput.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/lib/Components/AddressInput/AddressInput.mdx +10 -12
- package/src/lib/Components/AddressInput/AddressInput.stories.tsx +2 -1
- package/src/lib/Components/AmountInput/AmountInput.mdx +3 -3
- package/src/lib/Components/BaseInput/BaseInput.tsx +61 -29
- package/src/lib/Components/BaseInput/types.ts +10 -2
- package/src/lib/Components/DotCount/DotCount.stories.tsx +12 -10
- package/src/lib/Components/DotIndicator/DotIndicator.stories.tsx +1 -3
- package/src/lib/Components/MediaImage/MediaImage.test.tsx +7 -3
- package/src/lib/Components/SearchInput/SearchInput.mdx +4 -10
- package/src/lib/Components/SearchInput/SearchInput.stories.tsx +2 -1
- package/src/lib/Components/SegmentedControl/SegmentedControl.mdx +34 -4
- package/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx +34 -6
- package/src/lib/Components/SegmentedControl/SegmentedControl.test.tsx +27 -0
- package/src/lib/Components/SegmentedControl/SegmentedControl.tsx +2 -0
- package/src/lib/Components/SegmentedControl/types.ts +4 -0
- package/src/lib/Components/TextInput/TextInput.mdx +8 -10
- package/src/lib/Components/TextInput/TextInput.stories.tsx +41 -1
- package/src/lib/Components/TextInput/TextInput.test.tsx +90 -0
- package/src/lib/Components/TextInput/TextInput.tsx +4 -3
|
@@ -67,17 +67,10 @@ Alternatively, use `editable={false}` to prevent editing without applying the mu
|
|
|
67
67
|
|
|
68
68
|
### Error State
|
|
69
69
|
|
|
70
|
-
The search component supports error handling through `
|
|
70
|
+
The search component supports error handling through `helperText` and `status` (`'error'` \| `'success'`), which show copy below the input with matching border and text styling.
|
|
71
71
|
|
|
72
72
|
<Canvas of={SearchInputStories.WithError} />
|
|
73
73
|
|
|
74
|
-
The error message will be automatically:
|
|
75
|
-
|
|
76
|
-
- Connected to the input
|
|
77
|
-
- Displayed with a warning icon
|
|
78
|
-
- Styled in the error color
|
|
79
|
-
- Announced by screen readers
|
|
80
|
-
|
|
81
74
|
## Controlled vs Uncontrolled
|
|
82
75
|
|
|
83
76
|
The SearchInput component supports both controlled and uncontrolled usage.
|
|
@@ -232,13 +225,14 @@ function MyComponent() {
|
|
|
232
225
|
placeholder='Search products'
|
|
233
226
|
value={query}
|
|
234
227
|
onChangeText={handleSearch}
|
|
235
|
-
|
|
228
|
+
helperText={error || undefined}
|
|
229
|
+
status={error ? 'error' : undefined}
|
|
236
230
|
/>
|
|
237
231
|
);
|
|
238
232
|
}
|
|
239
233
|
```
|
|
240
234
|
|
|
241
|
-
> **Note:**
|
|
235
|
+
> **Note:** Helper text is optional. Use `helperText` with `status="error"` to show validation feedback below the search input.
|
|
242
236
|
|
|
243
237
|
### With Custom Styling
|
|
244
238
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","View","SearchInput","jsx","_jsx","meta","component","title","args","appearance","parameters","docs","source","language","format","type","SearchInputStory","query","setQuery","initialValue","style","flex","minHeight","alignItems","justifyContent","padding","children","width","maxWidth","value","onChangeText","onClear","Base","render","placeholder","editable","hideClearButton","WithContent","WithError","
|
|
1
|
+
{"version":3,"names":["useState","View","SearchInput","jsx","_jsx","meta","component","title","args","appearance","parameters","docs","source","language","format","type","SearchInputStory","query","setQuery","initialValue","style","flex","minHeight","alignItems","justifyContent","padding","children","width","maxWidth","value","onChangeText","onClear","Base","render","placeholder","editable","hideClearButton","WithContent","WithError","helperText","status","DisabledSearchInput","disabled","WithHiddenClearButton","WithClearCallback","alert"],"sourceRoot":"../../../../../src","sources":["lib/Components/SearchInput/SearchInput.stories.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ export function SegmentedControlButton({
|
|
|
11
11
|
value,
|
|
12
12
|
children,
|
|
13
13
|
icon: Icon,
|
|
14
|
+
trailingContent,
|
|
14
15
|
onPress,
|
|
15
16
|
...props
|
|
16
17
|
}) {
|
|
@@ -71,7 +72,7 @@ export function SegmentedControlButton({
|
|
|
71
72
|
style: styles.label,
|
|
72
73
|
numberOfLines: 1,
|
|
73
74
|
children: children
|
|
74
|
-
})]
|
|
75
|
+
}), trailingContent]
|
|
75
76
|
})
|
|
76
77
|
});
|
|
77
78
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useDisabledContext","Animated","useStyleSheet","Box","Pressable","Text","SegmentedControlContextProvider","useSegmentedControlContext","usePillLayout","useSegmentedControlSelectedIndex","jsx","_jsx","jsxs","_jsxs","SegmentedControlButton","value","children","icon","Icon","onPress","props","selectedValue","onSelectedChange","disabled","tabLayout","registerButtonLayout","selected","styles","useButtonStyles","handlePress","handleLayout","e","x","width","nativeEvent","layout","onLayout","accessibilityState","style","button","content","iconWrap","size","color","textColor","typography","lx","label","numberOfLines","t","flex","undefined","flexDirection","alignItems","justifyContent","paddingHorizontal","spacings","s16","paddingVertical","s8","borderRadius","full","zIndex","gap","textAlign","includeFontPadding","flexShrink","SegmentedControl","accessibilityLabel","disabledProp","appearance","consumerName","mergeWith","useRootStyles","Boolean","selectedIndex","animatedPillStyle","accessibilityRole","container","View","pill","pointerEvents","position","alignSelf","md","backgroundColor","colors","bg","surface","top","left","sm","baseTransparentPressed","mutedTransparent"],"sourceRoot":"../../../../../src","sources":["lib/Components/SegmentedControl/SegmentedControl.tsx"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,8BAA8B;AAEjE,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,aAAa,QAAQ,0BAAiB;AAE/C,SAASC,GAAG,EAAEC,SAAS,EAAEC,IAAI,QAAQ,qBAAY;AACjD,SACEC,+BAA+B,EAC/BC,0BAA0B,QACrB,8BAA2B;AAKlC,SACEC,aAAa,EACbC,gCAAgC,QAC3B,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzB,OAAO,SAASC,sBAAsBA,CAAC;EACrCC,KAAK;EACLC,QAAQ;EACRC,IAAI,EAAEC,IAAI;EACVC,OAAO;EACP,GAAGC;AACwB,CAAC,EAAE;EAC9B,MAAM;IACJC,aAAa;IACbC,gBAAgB;IAChBC,QAAQ;IACRC,SAAS;IACTC;EACF,CAAC,
|
|
1
|
+
{"version":3,"names":["useDisabledContext","Animated","useStyleSheet","Box","Pressable","Text","SegmentedControlContextProvider","useSegmentedControlContext","usePillLayout","useSegmentedControlSelectedIndex","jsx","_jsx","jsxs","_jsxs","SegmentedControlButton","value","children","icon","Icon","trailingContent","onPress","props","selectedValue","onSelectedChange","disabled","tabLayout","registerButtonLayout","selected","styles","useButtonStyles","handlePress","handleLayout","e","x","width","nativeEvent","layout","onLayout","accessibilityState","style","button","content","iconWrap","size","color","textColor","typography","lx","label","numberOfLines","t","flex","undefined","flexDirection","alignItems","justifyContent","paddingHorizontal","spacings","s16","paddingVertical","s8","borderRadius","full","zIndex","gap","textAlign","includeFontPadding","flexShrink","SegmentedControl","accessibilityLabel","disabledProp","appearance","consumerName","mergeWith","useRootStyles","Boolean","selectedIndex","animatedPillStyle","accessibilityRole","container","View","pill","pointerEvents","position","alignSelf","md","backgroundColor","colors","bg","surface","top","left","sm","baseTransparentPressed","mutedTransparent"],"sourceRoot":"../../../../../src","sources":["lib/Components/SegmentedControl/SegmentedControl.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,6 +25,7 @@ SegmentedControl is a tab bar–style component for switching between mutually e
|
|
|
25
25
|
- **Segments**: Individual options the user can select.
|
|
26
26
|
- **Selected state**: The active segment (sliding pill + semi-bold label).
|
|
27
27
|
- **Optional icon**: Icon to the left of the label (from Symbols).
|
|
28
|
+
- **Optional trailing content**: Any node (e.g. `DotCount`) rendered to the right of the label.
|
|
28
29
|
- **Appearance**: Use `appearance="background"` (default) for a surface background, or `appearance="no-background"` for a transparent container.
|
|
29
30
|
|
|
30
31
|
## Properties
|
|
@@ -40,6 +41,12 @@ You can use segments with text only (Base), or add an icon to each button (WithI
|
|
|
40
41
|
|
|
41
42
|
<Canvas of={SegmentedControlStories.WithIcons} />
|
|
42
43
|
|
|
44
|
+
### With trailing content
|
|
45
|
+
|
|
46
|
+
Use `trailingContent` to render content (e.g. `DotCount`) to the right of the label.
|
|
47
|
+
|
|
48
|
+
<Canvas of={SegmentedControlStories.WithTrailingContent} />
|
|
49
|
+
|
|
43
50
|
## Responsive Layout
|
|
44
51
|
|
|
45
52
|
SegmentedControl lays out segments in a horizontal row with equal width per segment. The sliding pill animates to the selected segment.
|
|
@@ -80,6 +87,33 @@ export default function Example() {
|
|
|
80
87
|
}
|
|
81
88
|
```
|
|
82
89
|
|
|
90
|
+
## With trailing content
|
|
91
|
+
|
|
92
|
+
Pass any node via `trailingContent` to render it to the right of the label. Use it for badges like `DotCount` to surface counts per segment.
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
import { SegmentedControl, SegmentedControlButton, DotCount } from '@ledgerhq/lumen-ui-rnative';
|
|
96
|
+
|
|
97
|
+
function Example() {
|
|
98
|
+
const [state, setState] = React.useState('tokens');
|
|
99
|
+
return (
|
|
100
|
+
<SegmentedControl
|
|
101
|
+
selectedValue={state}
|
|
102
|
+
onSelectedChange={setState}
|
|
103
|
+
accessibilityLabel='Asset section'
|
|
104
|
+
>
|
|
105
|
+
<SegmentedControlButton value='tokens' trailingContent={<DotCount value={3} />}>
|
|
106
|
+
Tokens
|
|
107
|
+
</SegmentedControlButton>
|
|
108
|
+
<SegmentedControlButton value='nfts' trailingContent={<DotCount value={12} />}>
|
|
109
|
+
NFTs
|
|
110
|
+
</SegmentedControlButton>
|
|
111
|
+
<SegmentedControlButton value='activity'>Activity</SegmentedControlButton>
|
|
112
|
+
</SegmentedControl>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
83
117
|
## With icons
|
|
84
118
|
|
|
85
119
|
Pass an icon from symbols to each button for a left-positioned icon. Use icons on all segments or none for consistency.
|
|
@@ -113,9 +147,5 @@ function Example() {
|
|
|
113
147
|
}
|
|
114
148
|
```
|
|
115
149
|
|
|
116
|
-
<Box lx={{ flexDirection: 'column', gap: 's24' }}>
|
|
117
|
-
<CommonRulesDoAndDont />
|
|
118
|
-
</Box>
|
|
119
|
-
|
|
120
150
|
</Tab>
|
|
121
151
|
</CustomTabs>
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
-
import { Coins, Nft, TransferHorizontal
|
|
4
|
+
import { Coins, Nft, TransferHorizontal } from "../../Symbols/index.js";
|
|
5
|
+
import { DotCount } from "../DotCount/index.js";
|
|
5
6
|
import { Box } from "../Utility/index.js";
|
|
6
7
|
import { SegmentedControl, SegmentedControlButton } from "./SegmentedControl.js";
|
|
7
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -71,13 +72,9 @@ export const WithIcons = {
|
|
|
71
72
|
icon: Nft,
|
|
72
73
|
children: "NFTs"
|
|
73
74
|
}), /*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
74
|
-
value: "
|
|
75
|
+
value: "trade",
|
|
75
76
|
icon: TransferHorizontal,
|
|
76
|
-
children: "
|
|
77
|
-
}), /*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
78
|
-
value: "settings",
|
|
79
|
-
icon: Settings,
|
|
80
|
-
children: "Settings"
|
|
77
|
+
children: "Trade"
|
|
81
78
|
})]
|
|
82
79
|
});
|
|
83
80
|
}
|
|
@@ -152,4 +149,32 @@ export const Disabled = {
|
|
|
152
149
|
})]
|
|
153
150
|
})
|
|
154
151
|
};
|
|
152
|
+
export const WithTrailingContent = {
|
|
153
|
+
args: {},
|
|
154
|
+
render: args => {
|
|
155
|
+
const [state, setState] = useState('tokens');
|
|
156
|
+
return /*#__PURE__*/_jsxs(SegmentedControl, {
|
|
157
|
+
...args,
|
|
158
|
+
selectedValue: state,
|
|
159
|
+
onSelectedChange: setState,
|
|
160
|
+
accessibilityLabel: "Asset section",
|
|
161
|
+
children: [/*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
162
|
+
value: "tokens",
|
|
163
|
+
trailingContent: /*#__PURE__*/_jsx(DotCount, {
|
|
164
|
+
value: 3
|
|
165
|
+
}),
|
|
166
|
+
children: "Tokens"
|
|
167
|
+
}), /*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
168
|
+
value: "nfts",
|
|
169
|
+
trailingContent: /*#__PURE__*/_jsx(DotCount, {
|
|
170
|
+
value: 12
|
|
171
|
+
}),
|
|
172
|
+
children: "NFTs"
|
|
173
|
+
}), /*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
174
|
+
value: "trade",
|
|
175
|
+
children: "Trade"
|
|
176
|
+
})]
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
};
|
|
155
180
|
//# sourceMappingURL=SegmentedControl.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","Coins","Nft","TransferHorizontal","
|
|
1
|
+
{"version":3,"names":["useState","Coins","Nft","TransferHorizontal","DotCount","Box","SegmentedControl","SegmentedControlButton","jsx","_jsx","jsxs","_jsxs","meta","title","component","subcomponents","parameters","layout","backgrounds","default","decorators","Story","lx","width","flexDirection","justifyContent","children","args","appearance","tabLayout","Base","render","state","setState","selectedValue","onSelectedChange","accessibilityLabel","value","WithIcons","icon","TabLayoutShowcase","fitState","setFitState","fixedState","setFixedState","gap","style","Disabled","disabled","WithTrailingContent","trailingContent"],"sourceRoot":"../../../../../src","sources":["lib/Components/SegmentedControl/SegmentedControl.stories.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { describe, it, expect, jest } from '@jest/globals';
|
|
4
4
|
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
5
5
|
import { render, fireEvent } from '@testing-library/react-native';
|
|
6
|
+
import { DotCount } from "../DotCount/index.js";
|
|
6
7
|
import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
|
|
7
8
|
import { SegmentedControl, SegmentedControlButton } from "./SegmentedControl.js";
|
|
8
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -58,5 +59,30 @@ describe('SegmentedControl', () => {
|
|
|
58
59
|
fireEvent.press(getByText('Receive'));
|
|
59
60
|
expect(onSelectedChange).toHaveBeenCalledWith('receive');
|
|
60
61
|
});
|
|
62
|
+
it('renders trailingContent inside segment buttons', () => {
|
|
63
|
+
const {
|
|
64
|
+
getByLabelText
|
|
65
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
66
|
+
children: /*#__PURE__*/_jsxs(SegmentedControl, {
|
|
67
|
+
selectedValue: "tokens",
|
|
68
|
+
onSelectedChange: () => {
|
|
69
|
+
/* empty */
|
|
70
|
+
},
|
|
71
|
+
accessibilityLabel: "Asset section",
|
|
72
|
+
children: [/*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
73
|
+
value: "tokens",
|
|
74
|
+
trailingContent: /*#__PURE__*/_jsx(DotCount, {
|
|
75
|
+
value: 3,
|
|
76
|
+
accessibilityLabel: "3 tokens"
|
|
77
|
+
}),
|
|
78
|
+
children: "Tokens"
|
|
79
|
+
}), /*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
80
|
+
value: "nfts",
|
|
81
|
+
children: "NFTs"
|
|
82
|
+
})]
|
|
83
|
+
})
|
|
84
|
+
}));
|
|
85
|
+
expect(getByLabelText('3 tokens')).toBeTruthy();
|
|
86
|
+
});
|
|
61
87
|
});
|
|
62
88
|
//# sourceMappingURL=SegmentedControl.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","render","fireEvent","ThemeProvider","SegmentedControl","SegmentedControlButton","jsx","_jsx","jsxs","_jsxs","TestWrapper","children","themes","colorScheme","locale","getByText","selectedValue","onSelectedChange","accessibilityLabel","value","toBeTruthy","fn","press","toHaveBeenCalledWith"],"sourceRoot":"../../../../../src","sources":["lib/Components/SegmentedControl/SegmentedControl.test.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,EAAEC,IAAI,QAAQ,eAAe;AAC1D,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,MAAM,EAAEC,SAAS,QAAQ,+BAA+B;AACjE,SAASC,aAAa,QAAQ,mCAAgC;AAC9D,SAASC,gBAAgB,EAAEC,sBAAsB,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9E,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAwC,CAAC,kBAC9DJ,IAAA,CAACJ,aAAa;EAACS,MAAM,
|
|
1
|
+
{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","render","fireEvent","DotCount","ThemeProvider","SegmentedControl","SegmentedControlButton","jsx","_jsx","jsxs","_jsxs","TestWrapper","children","themes","colorScheme","locale","getByText","selectedValue","onSelectedChange","accessibilityLabel","value","toBeTruthy","fn","press","toHaveBeenCalledWith","getByLabelText","trailingContent"],"sourceRoot":"../../../../../src","sources":["lib/Components/SegmentedControl/SegmentedControl.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
9
9
|
* - **Automatic clear button** appears when input has content
|
|
10
10
|
* - **Floating label** with smooth animations
|
|
11
11
|
* - **Suffix elements** for icons, buttons, or custom content
|
|
12
|
-
* - **
|
|
12
|
+
* - **Helper text** with optional `status` (`error` | `success`) for border and helper feedback styling
|
|
13
13
|
* - **Container-based spacing** with padding and gap for clean layout
|
|
14
14
|
* - **Flexible styling** via style props
|
|
15
15
|
* - **React Native TextInput** with proper mobile behavior
|
|
@@ -29,12 +29,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
29
29
|
* // Basic input with automatic clear button
|
|
30
30
|
* <TextInput label="Title" value={title} onChangeText={setTitle} />
|
|
31
31
|
*
|
|
32
|
-
* // Input with error
|
|
32
|
+
* // Input with error helper
|
|
33
33
|
* <TextInput
|
|
34
34
|
* label="Email"
|
|
35
35
|
* value={email}
|
|
36
36
|
* onChangeText={setEmail}
|
|
37
|
-
*
|
|
37
|
+
* helperText="Please enter a valid email address"
|
|
38
|
+
* status="error"
|
|
38
39
|
* />
|
|
39
40
|
*
|
|
40
41
|
* // Input with suffix element
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BaseInput","jsx","_jsx","TextInput","props"],"sourceRoot":"../../../../../src","sources":["lib/Components/TextInput/TextInput.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,uBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAIC,KAAqB,IAAK;EAClD,oBAAOF,IAAA,CAACF,SAAS;IAAA,GAAKI;EAAK,CAAG,CAAC;AACjC,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["BaseInput","jsx","_jsx","TextInput","props"],"sourceRoot":"../../../../../src","sources":["lib/Components/TextInput/TextInput.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,uBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAIC,KAAqB,IAAK;EAClD,oBAAOF,IAAA,CAACF,SAAS;IAAA,GAAKI;EAAK,CAAG,CAAC;AACjC,CAAC","ignoreList":[]}
|
|
@@ -34,6 +34,10 @@ The label text automatically floats above the input when content is entered, pro
|
|
|
34
34
|
|
|
35
35
|
<Canvas of={TextInputStories.WithContent} />
|
|
36
36
|
|
|
37
|
+
### Label and placeholder
|
|
38
|
+
|
|
39
|
+
<Canvas of={TextInputStories.WithLabelAndPlaceholder} />
|
|
40
|
+
|
|
37
41
|
### Clear Button
|
|
38
42
|
|
|
39
43
|
A clear button (×) appears **automatically** when input has content.
|
|
@@ -54,17 +58,10 @@ Use `onClear` to extend the default clear behavior with custom logic.
|
|
|
54
58
|
|
|
55
59
|
### Error State
|
|
56
60
|
|
|
57
|
-
The input supports error handling through `
|
|
61
|
+
The input supports error handling through `helperText` and `status` (`'error'` \| `'success'`), which show copy below the input with matching border and text styling.
|
|
58
62
|
|
|
59
63
|
<Canvas of={TextInputStories.WithError} />
|
|
60
64
|
|
|
61
|
-
The error message will be automatically:
|
|
62
|
-
|
|
63
|
-
- Connected to the input
|
|
64
|
-
- Displayed with a warning icon
|
|
65
|
-
- Styled in the error color
|
|
66
|
-
- Announced by screen readers
|
|
67
|
-
|
|
68
65
|
### Disabled State
|
|
69
66
|
|
|
70
67
|
The input can be fully disabled using the `disabled` prop, which prevents interaction and applies a muted visual style.
|
|
@@ -221,13 +218,14 @@ function MyComponent() {
|
|
|
221
218
|
label='Username'
|
|
222
219
|
value={value}
|
|
223
220
|
onChangeText={handleChange}
|
|
224
|
-
|
|
221
|
+
helperText={error || undefined}
|
|
222
|
+
status={error ? 'error' : undefined}
|
|
225
223
|
/>
|
|
226
224
|
);
|
|
227
225
|
}
|
|
228
226
|
```
|
|
229
227
|
|
|
230
|
-
> **Note:**
|
|
228
|
+
> **Note:** Helper text is optional. Use `helperText` with `status="error"` to show validation feedback below the input.
|
|
231
229
|
|
|
232
230
|
### With Custom Styling
|
|
233
231
|
|
|
@@ -65,6 +65,18 @@ export const WithContent = {
|
|
|
65
65
|
keyboardType: 'default'
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
|
+
export const WithLabelAndPlaceholder = {
|
|
69
|
+
render: args => /*#__PURE__*/_jsx(TextInputStory, {
|
|
70
|
+
...args
|
|
71
|
+
}),
|
|
72
|
+
args: {
|
|
73
|
+
label: 'Phone',
|
|
74
|
+
placeholder: '+1 (555) 000-0000',
|
|
75
|
+
editable: true,
|
|
76
|
+
hideClearButton: false,
|
|
77
|
+
keyboardType: 'phone-pad'
|
|
78
|
+
}
|
|
79
|
+
};
|
|
68
80
|
export const WithError = {
|
|
69
81
|
render: args => /*#__PURE__*/_jsx(TextInputStory, {
|
|
70
82
|
...args,
|
|
@@ -72,7 +84,34 @@ export const WithError = {
|
|
|
72
84
|
}),
|
|
73
85
|
args: {
|
|
74
86
|
label: 'Username',
|
|
75
|
-
|
|
87
|
+
helperText: 'Username must be at least 3 characters',
|
|
88
|
+
status: 'error',
|
|
89
|
+
editable: true,
|
|
90
|
+
hideClearButton: false,
|
|
91
|
+
keyboardType: 'default'
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
export const WithSuccess = {
|
|
95
|
+
render: args => /*#__PURE__*/_jsx(TextInputStory, {
|
|
96
|
+
...args,
|
|
97
|
+
initialValue: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27"
|
|
98
|
+
}),
|
|
99
|
+
args: {
|
|
100
|
+
label: 'Address',
|
|
101
|
+
helperText: 'Address verified',
|
|
102
|
+
status: 'success',
|
|
103
|
+
editable: true,
|
|
104
|
+
hideClearButton: false,
|
|
105
|
+
keyboardType: 'default'
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
export const WithNeutralHint = {
|
|
109
|
+
render: args => /*#__PURE__*/_jsx(TextInputStory, {
|
|
110
|
+
...args
|
|
111
|
+
}),
|
|
112
|
+
args: {
|
|
113
|
+
label: 'Address',
|
|
114
|
+
helperText: 'Enter your ETH address',
|
|
76
115
|
editable: true,
|
|
77
116
|
hideClearButton: false,
|
|
78
117
|
keyboardType: 'default'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","View","TextInput","jsx","_jsx","meta","component","title","parameters","docs","source","language","format","type","TextInputStory","args","value","setValue","initialValue","style","flex","minHeight","alignItems","justifyContent","padding","children","width","maxWidth","onChangeText","onClear","Base","render","label","editable","hideClearButton","keyboardType","WithContent","WithError","
|
|
1
|
+
{"version":3,"names":["useState","View","TextInput","jsx","_jsx","meta","component","title","parameters","docs","source","language","format","type","TextInputStory","args","value","setValue","initialValue","style","flex","minHeight","alignItems","justifyContent","padding","children","width","maxWidth","onChangeText","onClear","Base","render","label","editable","hideClearButton","keyboardType","WithContent","WithLabelAndPlaceholder","placeholder","WithError","helperText","status","WithSuccess","WithNeutralHint","DisabledTextInput","disabled","WithHiddenClearButton","WithClearCallback","alert","EmailKeyboard","PhoneKeyboard"],"sourceRoot":"../../../../../src","sources":["lib/Components/TextInput/TextInput.stories.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { describe, expect, it } from '@jest/globals';
|
|
4
|
+
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
5
|
+
import { render, screen } from '@testing-library/react-native';
|
|
6
|
+
import { CheckmarkCircleFill } from "../../Symbols/Icons/CheckmarkCircleFill.js";
|
|
7
|
+
import { DeleteCircleFill } from "../../Symbols/Icons/DeleteCircleFill.js";
|
|
8
|
+
import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
|
|
9
|
+
import { TextInput } from "./TextInput.js";
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
const {
|
|
12
|
+
colors
|
|
13
|
+
} = ledgerLiveThemes.dark;
|
|
14
|
+
const renderWithProvider = component => {
|
|
15
|
+
return render(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
16
|
+
themes: ledgerLiveThemes,
|
|
17
|
+
colorScheme: "dark",
|
|
18
|
+
locale: "en",
|
|
19
|
+
children: component
|
|
20
|
+
}));
|
|
21
|
+
};
|
|
22
|
+
describe('TextInput', () => {
|
|
23
|
+
describe('Placeholder and label (BaseInput parity with web)', () => {
|
|
24
|
+
it('uses the provided placeholder when label and placeholder are both set', async () => {
|
|
25
|
+
await renderWithProvider(/*#__PURE__*/_jsx(TextInput, {
|
|
26
|
+
label: "Username",
|
|
27
|
+
placeholder: "jane.doe",
|
|
28
|
+
value: "",
|
|
29
|
+
onChangeText: () => {}
|
|
30
|
+
}));
|
|
31
|
+
expect(screen.getByPlaceholderText('jane.doe')).toBeTruthy();
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
describe('Helper text', () => {
|
|
35
|
+
it('renders neutral helper text without feedback icons', () => {
|
|
36
|
+
renderWithProvider(/*#__PURE__*/_jsx(TextInput, {
|
|
37
|
+
label: "Address",
|
|
38
|
+
helperText: "Enter your ETH address"
|
|
39
|
+
}));
|
|
40
|
+
const helperText = screen.getByText('Enter your ETH address');
|
|
41
|
+
expect(helperText).toBeTruthy();
|
|
42
|
+
expect(helperText.props.style).toEqual(expect.objectContaining({
|
|
43
|
+
color: colors.text.muted
|
|
44
|
+
}));
|
|
45
|
+
expect(screen.UNSAFE_queryByType(DeleteCircleFill)).toBeNull();
|
|
46
|
+
expect(screen.UNSAFE_queryByType(CheckmarkCircleFill)).toBeNull();
|
|
47
|
+
});
|
|
48
|
+
it('renders error helper text with an error icon', () => {
|
|
49
|
+
renderWithProvider(/*#__PURE__*/_jsx(TextInput, {
|
|
50
|
+
label: "Address",
|
|
51
|
+
helperText: "Invalid address format",
|
|
52
|
+
status: "error"
|
|
53
|
+
}));
|
|
54
|
+
const helperText = screen.getByText('Invalid address format');
|
|
55
|
+
expect(helperText.props.style).toEqual(expect.objectContaining({
|
|
56
|
+
color: colors.text.error
|
|
57
|
+
}));
|
|
58
|
+
expect(screen.UNSAFE_getByType(DeleteCircleFill)).toBeTruthy();
|
|
59
|
+
expect(screen.UNSAFE_queryByType(CheckmarkCircleFill)).toBeNull();
|
|
60
|
+
});
|
|
61
|
+
it('renders success helper text with a success icon', () => {
|
|
62
|
+
renderWithProvider(/*#__PURE__*/_jsx(TextInput, {
|
|
63
|
+
label: "Address",
|
|
64
|
+
helperText: "Address verified",
|
|
65
|
+
status: "success"
|
|
66
|
+
}));
|
|
67
|
+
const helperText = screen.getByText('Address verified');
|
|
68
|
+
expect(helperText.props.style).toEqual(expect.objectContaining({
|
|
69
|
+
color: colors.text.success
|
|
70
|
+
}));
|
|
71
|
+
expect(screen.UNSAFE_getByType(CheckmarkCircleFill)).toBeTruthy();
|
|
72
|
+
expect(screen.UNSAFE_queryByType(DeleteCircleFill)).toBeNull();
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
//# sourceMappingURL=TextInput.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["describe","expect","it","ledgerLiveThemes","render","screen","CheckmarkCircleFill","DeleteCircleFill","ThemeProvider","TextInput","jsx","_jsx","colors","dark","renderWithProvider","component","themes","colorScheme","locale","children","label","placeholder","value","onChangeText","getByPlaceholderText","toBeTruthy","helperText","getByText","props","style","toEqual","objectContaining","color","text","muted","UNSAFE_queryByType","toBeNull","status","error","UNSAFE_getByType","success"],"sourceRoot":"../../../../../src","sources":["lib/Components/TextInput/TextInput.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { type BaseInputProps } from './types';
|
|
2
|
-
export declare const BaseInput: ({ lx, style, containerStyle, inputStyle, labelStyle, label,
|
|
2
|
+
export declare const BaseInput: ({ lx, style, containerStyle, inputStyle, labelStyle, label, helperText, status, hideClearButton, onChangeText: onChangeTextProp, editable, disabled: disabledProp, prefix, suffix, ref, placeholder: placeholderProp, ...props }: BaseInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=BaseInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,SAAS,GAAI,kOAkBvB,cAAc,4CAuIhB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { TextStyle, ViewStyle, StyleProp, TextInputProps } from 'react-native';
|
|
2
2
|
import type { BoxProps } from '../Utility';
|
|
3
|
+
export type BaseInputStatus = 'error' | 'success';
|
|
3
4
|
export type BaseInputProps = {
|
|
4
5
|
/**
|
|
5
6
|
* The label text that floats above the input when focused or filled.
|
|
@@ -29,9 +30,15 @@ export type BaseInputProps = {
|
|
|
29
30
|
*/
|
|
30
31
|
labelStyle?: StyleProp<TextStyle>;
|
|
31
32
|
/**
|
|
32
|
-
*
|
|
33
|
+
* Optional text shown below the input (hint, error, or success copy).
|
|
34
|
+
* Pair with `status` for error/success styling and icons; omit `status` for a neutral hint.
|
|
33
35
|
*/
|
|
34
|
-
|
|
36
|
+
helperText?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Visual state for border, helper text, helper icon, and the label in error state.
|
|
39
|
+
* Omit when `helperText` is a neutral hint.
|
|
40
|
+
*/
|
|
41
|
+
status?: BaseInputStatus;
|
|
35
42
|
/**
|
|
36
43
|
* Custom content to render after the input (right side in LTR).
|
|
37
44
|
* @example suffix={<Icon />}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAC/B,QAAQ,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { SegmentedControlButtonProps, SegmentedControlProps } from './types';
|
|
2
|
-
export declare function SegmentedControlButton({ value, children, icon: Icon, onPress, ...props }: SegmentedControlButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function SegmentedControlButton({ value, children, icon: Icon, trailingContent, onPress, ...props }: SegmentedControlButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare function SegmentedControl({ selectedValue, onSelectedChange, accessibilityLabel, children, disabled: disabledProp, appearance, tabLayout, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
//# sourceMappingURL=SegmentedControl.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAMjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EACP,GAAG,KAAK,EACT,EAAE,2BAA2B,
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAMjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,eAAe,EACf,OAAO,EACP,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAoD7B;AAkDD,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,QAAQ,EACR,QAAQ,EAAE,YAAY,EACtB,UAAyB,EACzB,SAAmB,EACnB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+CvB"}
|