@ledgerhq/lumen-ui-rnative 0.1.25 → 0.1.26
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/index.js +1 -0
- package/dist/module/index.js.map +1 -1
- package/dist/module/lib/Components/Avatar/Avatar.js +22 -23
- package/dist/module/lib/Components/Avatar/Avatar.js.map +1 -1
- package/dist/module/lib/Components/Avatar/Avatar.test.js +17 -23
- package/dist/module/lib/Components/Avatar/Avatar.test.js.map +1 -1
- package/dist/module/lib/Components/DotCount/DotCount.js +128 -0
- package/dist/module/lib/Components/DotCount/DotCount.js.map +1 -0
- package/dist/module/lib/Components/DotCount/DotCount.mdx +86 -0
- package/dist/module/lib/Components/DotCount/DotCount.stories.js +172 -0
- package/dist/module/lib/Components/DotCount/DotCount.stories.js.map +1 -0
- package/dist/module/lib/Components/DotCount/DotCount.test.js +174 -0
- package/dist/module/lib/Components/DotCount/DotCount.test.js.map +1 -0
- package/dist/module/lib/Components/DotCount/index.js +5 -0
- package/dist/module/lib/Components/DotCount/index.js.map +1 -0
- package/dist/module/lib/Components/DotCount/types.js +4 -0
- package/dist/module/lib/Components/DotCount/types.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.js +89 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.mdx +82 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.stories.js +84 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.stories.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.test.js +136 -0
- package/dist/module/lib/Components/DotIndicator/DotIndicator.test.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/index.js +5 -0
- package/dist/module/lib/Components/DotIndicator/index.js.map +1 -0
- package/dist/module/lib/Components/DotIndicator/types.js +4 -0
- package/dist/module/lib/Components/DotIndicator/types.js.map +1 -0
- package/dist/module/lib/Components/TabBar/TabBar.js +16 -13
- package/dist/module/lib/Components/TabBar/TabBar.js.map +1 -1
- package/dist/module/lib/Components/index.js +2 -0
- package/dist/module/lib/Components/index.js.map +1 -1
- package/dist/typescript/src/index.d.ts +1 -0
- package/dist/typescript/src/index.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Avatar/Avatar.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/DotCount/DotCount.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotCount/DotCount.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotCount/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotCount/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotCount/types.d.ts +40 -0
- package/dist/typescript/src/lib/Components/DotCount/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIndicator/DotIndicator.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotIndicator/DotIndicator.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIndicator/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/DotIndicator/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/DotIndicator/types.d.ts +25 -0
- package/dist/typescript/src/lib/Components/DotIndicator/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/TabBar/TabBar.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/index.d.ts +2 -0
- package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/lib/Components/Avatar/Avatar.test.tsx +17 -27
- package/src/lib/Components/Avatar/Avatar.tsx +24 -21
- package/src/lib/Components/DotCount/DotCount.mdx +86 -0
- package/src/lib/Components/DotCount/DotCount.stories.tsx +124 -0
- package/src/lib/Components/DotCount/DotCount.test.tsx +150 -0
- package/src/lib/Components/DotCount/DotCount.tsx +130 -0
- package/src/lib/Components/DotCount/index.ts +2 -0
- package/src/lib/Components/DotCount/types.ts +40 -0
- package/src/lib/Components/DotIndicator/DotIndicator.mdx +82 -0
- package/src/lib/Components/DotIndicator/DotIndicator.stories.tsx +67 -0
- package/src/lib/Components/DotIndicator/DotIndicator.test.tsx +132 -0
- package/src/lib/Components/DotIndicator/DotIndicator.tsx +97 -0
- package/src/lib/Components/DotIndicator/index.ts +2 -0
- package/src/lib/Components/DotIndicator/types.ts +25 -0
- package/src/lib/Components/TabBar/TabBar.tsx +17 -16
- package/src/lib/Components/index.ts +2 -0
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { Avatar } from "../Avatar/Avatar.js";
|
|
5
|
+
import { MediaImage } from "../MediaImage/MediaImage.js";
|
|
6
|
+
import { SegmentedControl, SegmentedControlButton } from "../SegmentedControl/SegmentedControl.js";
|
|
7
|
+
import { Box } from "../Utility/Box/index.js";
|
|
8
|
+
import { DotCount } from "./DotCount.js";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
const meta = {
|
|
11
|
+
component: DotCount,
|
|
12
|
+
title: 'Communication/DotCount',
|
|
13
|
+
parameters: {
|
|
14
|
+
docs: {
|
|
15
|
+
source: {
|
|
16
|
+
language: 'tsx',
|
|
17
|
+
format: true,
|
|
18
|
+
type: 'code'
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
argTypes: {
|
|
23
|
+
size: {
|
|
24
|
+
control: 'radio',
|
|
25
|
+
options: ['lg', 'md']
|
|
26
|
+
},
|
|
27
|
+
appearance: {
|
|
28
|
+
control: 'radio',
|
|
29
|
+
options: ['base', 'red']
|
|
30
|
+
},
|
|
31
|
+
value: {
|
|
32
|
+
control: 'number'
|
|
33
|
+
},
|
|
34
|
+
max: {
|
|
35
|
+
control: 'number'
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
export default meta;
|
|
40
|
+
export const Base = {
|
|
41
|
+
args: {
|
|
42
|
+
value: 3,
|
|
43
|
+
size: 'lg',
|
|
44
|
+
appearance: 'base'
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
export const SizeShowcase = {
|
|
48
|
+
args: {
|
|
49
|
+
value: 5
|
|
50
|
+
},
|
|
51
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
52
|
+
lx: {
|
|
53
|
+
flexDirection: 'row',
|
|
54
|
+
alignItems: 'center',
|
|
55
|
+
gap: 's12'
|
|
56
|
+
},
|
|
57
|
+
children: [/*#__PURE__*/_jsx(DotCount, {
|
|
58
|
+
value: 5,
|
|
59
|
+
size: "lg"
|
|
60
|
+
}), /*#__PURE__*/_jsx(DotCount, {
|
|
61
|
+
value: 5,
|
|
62
|
+
size: "md"
|
|
63
|
+
})]
|
|
64
|
+
})
|
|
65
|
+
};
|
|
66
|
+
export const AppearanceShowcase = {
|
|
67
|
+
args: {
|
|
68
|
+
value: 3
|
|
69
|
+
},
|
|
70
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
71
|
+
lx: {
|
|
72
|
+
flexDirection: 'row',
|
|
73
|
+
alignItems: 'center',
|
|
74
|
+
gap: 's12'
|
|
75
|
+
},
|
|
76
|
+
children: [/*#__PURE__*/_jsx(DotCount, {
|
|
77
|
+
value: 3,
|
|
78
|
+
size: "lg",
|
|
79
|
+
appearance: "base"
|
|
80
|
+
}), /*#__PURE__*/_jsx(DotCount, {
|
|
81
|
+
value: 3,
|
|
82
|
+
size: "lg",
|
|
83
|
+
appearance: "red"
|
|
84
|
+
}), /*#__PURE__*/_jsx(DotCount, {
|
|
85
|
+
value: 3,
|
|
86
|
+
size: "lg",
|
|
87
|
+
disabled: true
|
|
88
|
+
})]
|
|
89
|
+
})
|
|
90
|
+
};
|
|
91
|
+
export const OverflowShowcase = {
|
|
92
|
+
args: {
|
|
93
|
+
value: 100
|
|
94
|
+
},
|
|
95
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
96
|
+
lx: {
|
|
97
|
+
flexDirection: 'row',
|
|
98
|
+
alignItems: 'center',
|
|
99
|
+
gap: 's12'
|
|
100
|
+
},
|
|
101
|
+
children: [/*#__PURE__*/_jsx(DotCount, {
|
|
102
|
+
value: 100,
|
|
103
|
+
size: "lg"
|
|
104
|
+
}), /*#__PURE__*/_jsx(DotCount, {
|
|
105
|
+
value: 100,
|
|
106
|
+
max: 50,
|
|
107
|
+
size: "lg"
|
|
108
|
+
}), /*#__PURE__*/_jsx(DotCount, {
|
|
109
|
+
value: 0,
|
|
110
|
+
size: "lg"
|
|
111
|
+
})]
|
|
112
|
+
})
|
|
113
|
+
};
|
|
114
|
+
export const WithChildren = {
|
|
115
|
+
args: {
|
|
116
|
+
value: 5
|
|
117
|
+
},
|
|
118
|
+
render: () => {
|
|
119
|
+
const [fitState, setFitState] = useState('preview');
|
|
120
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
121
|
+
lx: {
|
|
122
|
+
gap: 's24'
|
|
123
|
+
},
|
|
124
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
|
125
|
+
lx: {
|
|
126
|
+
flexDirection: 'row',
|
|
127
|
+
alignItems: 'center',
|
|
128
|
+
gap: 's12'
|
|
129
|
+
},
|
|
130
|
+
children: [/*#__PURE__*/_jsx(DotCount, {
|
|
131
|
+
value: 5,
|
|
132
|
+
size: "md",
|
|
133
|
+
children: /*#__PURE__*/_jsx(MediaImage, {
|
|
134
|
+
src: "https://crypto-icons.ledger.com/BTC.png",
|
|
135
|
+
alt: "Bitcoin",
|
|
136
|
+
size: 40,
|
|
137
|
+
shape: "circle"
|
|
138
|
+
})
|
|
139
|
+
}), /*#__PURE__*/_jsx(DotCount, {
|
|
140
|
+
value: 100,
|
|
141
|
+
size: "md",
|
|
142
|
+
children: /*#__PURE__*/_jsx(Avatar, {
|
|
143
|
+
src: "https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?q=80&w=774&auto=format&fit=crop",
|
|
144
|
+
size: "md"
|
|
145
|
+
})
|
|
146
|
+
})]
|
|
147
|
+
}), /*#__PURE__*/_jsxs(SegmentedControl, {
|
|
148
|
+
selectedValue: fitState,
|
|
149
|
+
onSelectedChange: setFitState,
|
|
150
|
+
tabLayout: "fit",
|
|
151
|
+
accessibilityLabel: "Fit layout",
|
|
152
|
+
children: [/*#__PURE__*/_jsxs(SegmentedControlButton, {
|
|
153
|
+
value: "preview",
|
|
154
|
+
children: ["Preview", /*#__PURE__*/_jsx(DotCount, {
|
|
155
|
+
value: 3,
|
|
156
|
+
size: "md",
|
|
157
|
+
style: {
|
|
158
|
+
marginLeft: 6
|
|
159
|
+
}
|
|
160
|
+
})]
|
|
161
|
+
}), /*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
162
|
+
value: "raw",
|
|
163
|
+
children: "Raw"
|
|
164
|
+
}), /*#__PURE__*/_jsx(SegmentedControlButton, {
|
|
165
|
+
value: "blame",
|
|
166
|
+
children: "Blame"
|
|
167
|
+
})]
|
|
168
|
+
})]
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
//# sourceMappingURL=DotCount.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useState","Avatar","MediaImage","SegmentedControl","SegmentedControlButton","Box","DotCount","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","argTypes","size","control","options","appearance","value","max","Base","args","SizeShowcase","render","lx","flexDirection","alignItems","gap","children","AppearanceShowcase","disabled","OverflowShowcase","WithChildren","fitState","setFitState","src","alt","shape","selectedValue","onSelectedChange","tabLayout","accessibilityLabel","style","marginLeft"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/DotCount.stories.tsx"],"mappings":";;AACA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,MAAM,QAAQ,qBAAkB;AACzC,SAASC,UAAU,QAAQ,6BAA0B;AACrD,SACEC,gBAAgB,EAChBC,sBAAsB,QACjB,yCAAsC;AAC7C,SAASC,GAAG,QAAQ,yBAAgB;AACpC,SAASC,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtC,MAAMC,IAAI,GAAG;EACXC,SAAS,EAAEN,QAAQ;EACnBO,KAAK,EAAE,wBAAwB;EAC/BC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,MAAM,EAAE;QACNC,QAAQ,EAAE,KAAK;QACfC,MAAM,EAAE,IAAI;QACZC,IAAI,EAAE;MACR;IACF;EACF,CAAC;EACDC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,OAAO,EAAE,OAAO;MAChBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI;IACtB,CAAC;IACDC,UAAU,EAAE;MACVF,OAAO,EAAE,OAAO;MAChBC,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK;IACzB,CAAC;IACDE,KAAK,EAAE;MACLH,OAAO,EAAE;IACX,CAAC;IACDI,GAAG,EAAE;MACHJ,OAAO,EAAE;IACX;EACF;AACF,CAAiC;AAEjC,eAAeX,IAAI;AAGnB,OAAO,MAAMgB,IAAW,GAAG;EACzBC,IAAI,EAAE;IACJH,KAAK,EAAE,CAAC;IACRJ,IAAI,EAAE,IAAI;IACVG,UAAU,EAAE;EACd;AACF,CAAC;AAED,OAAO,MAAMK,YAAmB,GAAG;EACjCD,IAAI,EAAE;IAAEH,KAAK,EAAE;EAAE,CAAC;EAClBK,MAAM,EAAEA,CAAA,kBACNpB,KAAA,CAACL,GAAG;IAAC0B,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAC,QAAA,gBAClE3B,IAAA,CAACF,QAAQ;MAACmB,KAAK,EAAE,CAAE;MAACJ,IAAI,EAAC;IAAI,CAAE,CAAC,eAChCb,IAAA,CAACF,QAAQ;MAACmB,KAAK,EAAE,CAAE;MAACJ,IAAI,EAAC;IAAI,CAAE,CAAC;EAAA,CAC7B;AAET,CAAC;AAED,OAAO,MAAMe,kBAAyB,GAAG;EACvCR,IAAI,EAAE;IAAEH,KAAK,EAAE;EAAE,CAAC;EAClBK,MAAM,EAAEA,CAAA,kBACNpB,KAAA,CAACL,GAAG;IAAC0B,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAC,QAAA,gBAClE3B,IAAA,CAACF,QAAQ;MAACmB,KAAK,EAAE,CAAE;MAACJ,IAAI,EAAC,IAAI;MAACG,UAAU,EAAC;IAAM,CAAE,CAAC,eAClDhB,IAAA,CAACF,QAAQ;MAACmB,KAAK,EAAE,CAAE;MAACJ,IAAI,EAAC,IAAI;MAACG,UAAU,EAAC;IAAK,CAAE,CAAC,eACjDhB,IAAA,CAACF,QAAQ;MAACmB,KAAK,EAAE,CAAE;MAACJ,IAAI,EAAC,IAAI;MAACgB,QAAQ;IAAA,CAAE,CAAC;EAAA,CACtC;AAET,CAAC;AAED,OAAO,MAAMC,gBAAuB,GAAG;EACrCV,IAAI,EAAE;IAAEH,KAAK,EAAE;EAAI,CAAC;EACpBK,MAAM,EAAEA,CAAA,kBACNpB,KAAA,CAACL,GAAG;IAAC0B,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAC,QAAA,gBAClE3B,IAAA,CAACF,QAAQ;MAACmB,KAAK,EAAE,GAAI;MAACJ,IAAI,EAAC;IAAI,CAAE,CAAC,eAClCb,IAAA,CAACF,QAAQ;MAACmB,KAAK,EAAE,GAAI;MAACC,GAAG,EAAE,EAAG;MAACL,IAAI,EAAC;IAAI,CAAE,CAAC,eAC3Cb,IAAA,CAACF,QAAQ;MAACmB,KAAK,EAAE,CAAE;MAACJ,IAAI,EAAC;IAAI,CAAE,CAAC;EAAA,CAC7B;AAET,CAAC;AAED,OAAO,MAAMkB,YAAmB,GAAG;EACjCX,IAAI,EAAE;IAAEH,KAAK,EAAE;EAAE,CAAC;EAClBK,MAAM,EAAEA,CAAA,KAAM;IACZ,MAAM,CAACU,QAAQ,EAAEC,WAAW,CAAC,GAAGzC,QAAQ,CAAC,SAAS,CAAC;IAEnD,oBACEU,KAAA,CAACL,GAAG;MAAC0B,EAAE,EAAE;QAAEG,GAAG,EAAE;MAAM,CAAE;MAAAC,QAAA,gBACtBzB,KAAA,CAACL,GAAG;QAAC0B,EAAE,EAAE;UAAEC,aAAa,EAAE,KAAK;UAAEC,UAAU,EAAE,QAAQ;UAAEC,GAAG,EAAE;QAAM,CAAE;QAAAC,QAAA,gBAClE3B,IAAA,CAACF,QAAQ;UAACmB,KAAK,EAAE,CAAE;UAACJ,IAAI,EAAC,IAAI;UAAAc,QAAA,eAC3B3B,IAAA,CAACN,UAAU;YACTwC,GAAG,EAAC,yCAAyC;YAC7CC,GAAG,EAAC,SAAS;YACbtB,IAAI,EAAE,EAAG;YACTuB,KAAK,EAAC;UAAQ,CACf;QAAC,CACM,CAAC,eACXpC,IAAA,CAACF,QAAQ;UAACmB,KAAK,EAAE,GAAI;UAACJ,IAAI,EAAC,IAAI;UAAAc,QAAA,eAC7B3B,IAAA,CAACP,MAAM;YACLyC,GAAG,EAAC,oGAAoG;YACxGrB,IAAI,EAAC;UAAI,CACV;QAAC,CACM,CAAC;MAAA,CACR,CAAC,eACNX,KAAA,CAACP,gBAAgB;QACf0C,aAAa,EAAEL,QAAS;QACxBM,gBAAgB,EAAEL,WAAY;QAC9BM,SAAS,EAAC,KAAK;QACfC,kBAAkB,EAAC,YAAY;QAAAb,QAAA,gBAE/BzB,KAAA,CAACN,sBAAsB;UAACqB,KAAK,EAAC,SAAS;UAAAU,QAAA,GAAC,SAEtC,eAAA3B,IAAA,CAACF,QAAQ;YAACmB,KAAK,EAAE,CAAE;YAACJ,IAAI,EAAC,IAAI;YAAC4B,KAAK,EAAE;cAAEC,UAAU,EAAE;YAAE;UAAE,CAAE,CAAC;QAAA,CACpC,CAAC,eACzB1C,IAAA,CAACJ,sBAAsB;UAACqB,KAAK,EAAC,KAAK;UAAAU,QAAA,EAAC;QAAG,CAAwB,CAAC,eAChE3B,IAAA,CAACJ,sBAAsB;UAACqB,KAAK,EAAC,OAAO;UAAAU,QAAA,EAAC;QAAK,CAAwB,CAAC;MAAA,CACpD,CAAC;IAAA,CAChB,CAAC;EAEV;AACF,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { describe, it, expect } from '@jest/globals';
|
|
4
|
+
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
5
|
+
import { render } from '@testing-library/react-native';
|
|
6
|
+
import { createRef } from 'react';
|
|
7
|
+
import { Text } from 'react-native';
|
|
8
|
+
import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
|
|
9
|
+
import { DotCount } from "./DotCount.js";
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
const TestWrapper = ({
|
|
12
|
+
children
|
|
13
|
+
}) => /*#__PURE__*/_jsx(ThemeProvider, {
|
|
14
|
+
themes: ledgerLiveThemes,
|
|
15
|
+
colorScheme: "dark",
|
|
16
|
+
locale: "en",
|
|
17
|
+
children: children
|
|
18
|
+
});
|
|
19
|
+
describe('DotCount', () => {
|
|
20
|
+
it('should render the value', () => {
|
|
21
|
+
const {
|
|
22
|
+
getByText
|
|
23
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
24
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
25
|
+
value: 5,
|
|
26
|
+
size: "lg"
|
|
27
|
+
})
|
|
28
|
+
}));
|
|
29
|
+
expect(getByText('5')).toBeTruthy();
|
|
30
|
+
});
|
|
31
|
+
it('should hide text when value is 0', () => {
|
|
32
|
+
const {
|
|
33
|
+
queryByText
|
|
34
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
35
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
36
|
+
value: 0,
|
|
37
|
+
size: "lg"
|
|
38
|
+
})
|
|
39
|
+
}));
|
|
40
|
+
expect(queryByText('0')).toBeNull();
|
|
41
|
+
});
|
|
42
|
+
it('should cap value at max and show overflow indicator', () => {
|
|
43
|
+
const {
|
|
44
|
+
getByText
|
|
45
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
46
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
47
|
+
value: 100,
|
|
48
|
+
max: 50,
|
|
49
|
+
size: "lg"
|
|
50
|
+
})
|
|
51
|
+
}));
|
|
52
|
+
expect(getByText('50+')).toBeTruthy();
|
|
53
|
+
});
|
|
54
|
+
it('should default max to 99', () => {
|
|
55
|
+
const {
|
|
56
|
+
getByText
|
|
57
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
58
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
59
|
+
value: 150,
|
|
60
|
+
size: "lg"
|
|
61
|
+
})
|
|
62
|
+
}));
|
|
63
|
+
expect(getByText('99+')).toBeTruthy();
|
|
64
|
+
});
|
|
65
|
+
it('should clamp max to 1 when given zero or negative', () => {
|
|
66
|
+
const {
|
|
67
|
+
getByText
|
|
68
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
69
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
70
|
+
value: 5,
|
|
71
|
+
max: 0,
|
|
72
|
+
size: "lg"
|
|
73
|
+
})
|
|
74
|
+
}));
|
|
75
|
+
expect(getByText('1+')).toBeTruthy();
|
|
76
|
+
});
|
|
77
|
+
it('should render children alongside the count', () => {
|
|
78
|
+
const {
|
|
79
|
+
getByText
|
|
80
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
81
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
82
|
+
value: 3,
|
|
83
|
+
size: "md",
|
|
84
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
85
|
+
children: "Child"
|
|
86
|
+
})
|
|
87
|
+
})
|
|
88
|
+
}));
|
|
89
|
+
expect(getByText('3')).toBeTruthy();
|
|
90
|
+
expect(getByText('Child')).toBeTruthy();
|
|
91
|
+
});
|
|
92
|
+
it('should forward testID to the outer wrapper', () => {
|
|
93
|
+
const {
|
|
94
|
+
getByTestId
|
|
95
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
96
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
97
|
+
testID: "dot-count",
|
|
98
|
+
value: 3,
|
|
99
|
+
size: "lg"
|
|
100
|
+
})
|
|
101
|
+
}));
|
|
102
|
+
expect(getByTestId('dot-count')).toBeTruthy();
|
|
103
|
+
});
|
|
104
|
+
it('should forward pointerEvents to the outer wrapper', () => {
|
|
105
|
+
const {
|
|
106
|
+
getByTestId
|
|
107
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
108
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
109
|
+
testID: "dot-count",
|
|
110
|
+
value: 3,
|
|
111
|
+
size: "lg",
|
|
112
|
+
pointerEvents: "none"
|
|
113
|
+
})
|
|
114
|
+
}));
|
|
115
|
+
expect(getByTestId('dot-count').props.pointerEvents).toBe('none');
|
|
116
|
+
});
|
|
117
|
+
it('should forward ref to the outer wrapper', () => {
|
|
118
|
+
const ref = /*#__PURE__*/createRef();
|
|
119
|
+
render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
120
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
121
|
+
ref: ref,
|
|
122
|
+
value: 3,
|
|
123
|
+
size: "lg"
|
|
124
|
+
})
|
|
125
|
+
}));
|
|
126
|
+
expect(ref.current).toBeTruthy();
|
|
127
|
+
});
|
|
128
|
+
it('should render with red appearance', () => {
|
|
129
|
+
const {
|
|
130
|
+
getByText
|
|
131
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
132
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
133
|
+
value: 5,
|
|
134
|
+
size: "lg",
|
|
135
|
+
appearance: "red"
|
|
136
|
+
})
|
|
137
|
+
}));
|
|
138
|
+
expect(getByText('5')).toBeTruthy();
|
|
139
|
+
});
|
|
140
|
+
it('should render with disabled state', () => {
|
|
141
|
+
const {
|
|
142
|
+
getByText
|
|
143
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
144
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
145
|
+
value: 5,
|
|
146
|
+
size: "lg",
|
|
147
|
+
disabled: true
|
|
148
|
+
})
|
|
149
|
+
}));
|
|
150
|
+
expect(getByText('5')).toBeTruthy();
|
|
151
|
+
});
|
|
152
|
+
it('should render in md size', () => {
|
|
153
|
+
const {
|
|
154
|
+
getByText
|
|
155
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
156
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
157
|
+
value: 5,
|
|
158
|
+
size: "md"
|
|
159
|
+
})
|
|
160
|
+
}));
|
|
161
|
+
expect(getByText('5')).toBeTruthy();
|
|
162
|
+
});
|
|
163
|
+
it('should default size to md when omitted', () => {
|
|
164
|
+
const {
|
|
165
|
+
getByText
|
|
166
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
167
|
+
children: /*#__PURE__*/_jsx(DotCount, {
|
|
168
|
+
value: 5
|
|
169
|
+
})
|
|
170
|
+
}));
|
|
171
|
+
expect(getByText('5')).toBeTruthy();
|
|
172
|
+
});
|
|
173
|
+
});
|
|
174
|
+
//# sourceMappingURL=DotCount.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","createRef","Text","ThemeProvider","DotCount","jsx","_jsx","TestWrapper","children","themes","colorScheme","locale","getByText","value","size","toBeTruthy","queryByText","toBeNull","max","getByTestId","testID","pointerEvents","props","toBe","ref","current","appearance","disabled"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/DotCount.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/index.ts"],"mappings":";;AAAA,cAAc,eAAY;AAC1B,cAAc,YAAS","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/DotCount/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
|
|
4
|
+
import { StyleSheet } from 'react-native';
|
|
5
|
+
import { useStyleSheet } from "../../../styles/index.js";
|
|
6
|
+
import { Box } from "../Utility/index.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
export function DotIndicator({
|
|
9
|
+
size = 'sm',
|
|
10
|
+
appearance = 'base',
|
|
11
|
+
disabled: disabledProp = false,
|
|
12
|
+
lx = {},
|
|
13
|
+
style,
|
|
14
|
+
children,
|
|
15
|
+
accessibilityLabel,
|
|
16
|
+
ref,
|
|
17
|
+
...props
|
|
18
|
+
}) {
|
|
19
|
+
const disabled = useDisabledContext({
|
|
20
|
+
consumerName: 'DotIndicator',
|
|
21
|
+
mergeWith: {
|
|
22
|
+
disabled: disabledProp
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
const styles = useStyles({
|
|
26
|
+
size,
|
|
27
|
+
appearance,
|
|
28
|
+
disabled,
|
|
29
|
+
pinned: !!children
|
|
30
|
+
});
|
|
31
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
32
|
+
ref: ref,
|
|
33
|
+
lx: lx,
|
|
34
|
+
style: StyleSheet.flatten([children ? {
|
|
35
|
+
position: 'relative'
|
|
36
|
+
} : undefined, style]),
|
|
37
|
+
...props,
|
|
38
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
|
39
|
+
style: styles.container,
|
|
40
|
+
accessibilityRole: "image",
|
|
41
|
+
accessibilityLabel: accessibilityLabel,
|
|
42
|
+
accessible: !!accessibilityLabel,
|
|
43
|
+
pointerEvents: "none"
|
|
44
|
+
}), children]
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
const useStyles = ({
|
|
48
|
+
size,
|
|
49
|
+
appearance,
|
|
50
|
+
disabled,
|
|
51
|
+
pinned
|
|
52
|
+
}) => {
|
|
53
|
+
return useStyleSheet(t => {
|
|
54
|
+
const sizeMap = {
|
|
55
|
+
xs: t.sizes.s10,
|
|
56
|
+
sm: t.sizes.s12,
|
|
57
|
+
md: t.sizes.s16
|
|
58
|
+
};
|
|
59
|
+
const bgColorMap = {
|
|
60
|
+
base: {
|
|
61
|
+
backgroundColor: t.colors.bg.interactive
|
|
62
|
+
},
|
|
63
|
+
red: {
|
|
64
|
+
backgroundColor: t.colors.bg.errorStrong
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
return {
|
|
68
|
+
container: {
|
|
69
|
+
height: sizeMap[size],
|
|
70
|
+
aspectRatio: 1,
|
|
71
|
+
alignItems: 'center',
|
|
72
|
+
justifyContent: 'center',
|
|
73
|
+
borderRadius: t.borderRadius.full,
|
|
74
|
+
...(pinned && {
|
|
75
|
+
position: 'absolute',
|
|
76
|
+
top: t.spacings.s0,
|
|
77
|
+
right: t.spacings.s0,
|
|
78
|
+
zIndex: 1
|
|
79
|
+
}),
|
|
80
|
+
...(disabled ? {
|
|
81
|
+
backgroundColor: t.colors.bg.disabled
|
|
82
|
+
} : {
|
|
83
|
+
...bgColorMap[appearance]
|
|
84
|
+
})
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
}, [size, appearance, disabled, pinned]);
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=DotIndicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useDisabledContext","StyleSheet","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","DotIndicator","size","appearance","disabled","disabledProp","lx","style","children","accessibilityLabel","ref","props","consumerName","mergeWith","styles","useStyles","pinned","flatten","position","undefined","container","accessibilityRole","accessible","pointerEvents","t","sizeMap","xs","sizes","s10","sm","s12","md","s16","bgColorMap","base","backgroundColor","colors","bg","interactive","red","errorStrong","height","aspectRatio","alignItems","justifyContent","borderRadius","full","top","spacings","s0","right","zIndex"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIndicator/DotIndicator.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import * as DotIndicatorStories from './DotIndicator.stories';
|
|
3
|
+
import { CustomTabs, Tab } from '../../../../.storybook/components';
|
|
4
|
+
|
|
5
|
+
<Meta title='Communication/DotIndicator' of={DotIndicatorStories} />
|
|
6
|
+
|
|
7
|
+
# DotIndicator
|
|
8
|
+
|
|
9
|
+
<CustomTabs>
|
|
10
|
+
<Tab label="Overview">
|
|
11
|
+
|
|
12
|
+
## Introduction
|
|
13
|
+
|
|
14
|
+
DotIndicator is a small colored dot used to signal status or draw attention without displaying a number. It supports two appearances (`base` and `red`) and can be pinned to the top-right of a child element.
|
|
15
|
+
|
|
16
|
+
> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=16470-25597).
|
|
17
|
+
|
|
18
|
+
## Properties
|
|
19
|
+
|
|
20
|
+
<Canvas of={DotIndicatorStories.Base} />
|
|
21
|
+
<Controls of={DotIndicatorStories.Base} />
|
|
22
|
+
|
|
23
|
+
## Sizes
|
|
24
|
+
|
|
25
|
+
DotIndicator comes in three sizes:
|
|
26
|
+
|
|
27
|
+
- **xs** - compact dot for tight layouts.
|
|
28
|
+
- **sm** (default) - standard dot for most use cases.
|
|
29
|
+
- **md** - larger dot for prominent indicators.
|
|
30
|
+
|
|
31
|
+
<Canvas of={DotIndicatorStories.SizeShowcase} />
|
|
32
|
+
|
|
33
|
+
## Appearances
|
|
34
|
+
|
|
35
|
+
Two color schemes are available:
|
|
36
|
+
|
|
37
|
+
- **base** (default) - neutral dot for general-purpose indicators.
|
|
38
|
+
- **red** - high-visibility dot, typically used for unread or alert states.
|
|
39
|
+
|
|
40
|
+
<Canvas of={DotIndicatorStories.AppearanceShowcase} />
|
|
41
|
+
|
|
42
|
+
## With Children
|
|
43
|
+
|
|
44
|
+
When wrapping a child element, the dot pins itself to the top-right corner.
|
|
45
|
+
|
|
46
|
+
<Canvas of={DotIndicatorStories.WithChildren} />
|
|
47
|
+
|
|
48
|
+
</Tab>
|
|
49
|
+
<Tab label="Implementation">
|
|
50
|
+
|
|
51
|
+
## Setup
|
|
52
|
+
|
|
53
|
+
Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
|
|
54
|
+
|
|
55
|
+
## Basic Usage
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { DotIndicator } from '@ledgerhq/lumen-ui-rnative';
|
|
59
|
+
|
|
60
|
+
function MyComponent() {
|
|
61
|
+
return <DotIndicator appearance="red" />;
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Pinned to a child
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<DotIndicator appearance="red">
|
|
69
|
+
<Button size="sm">Submit</Button>
|
|
70
|
+
</DotIndicator>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Accessibility
|
|
74
|
+
|
|
75
|
+
Pass `accessibilityLabel` to provide screen reader context:
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<DotIndicator accessibilityLabel="New notifications" />
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
</Tab>
|
|
82
|
+
</CustomTabs>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Button } from "../Button/Button.js";
|
|
4
|
+
import { Box } from "../Utility/Box/index.js";
|
|
5
|
+
import { DotIndicator } from "./DotIndicator.js";
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
const meta = {
|
|
8
|
+
component: DotIndicator,
|
|
9
|
+
title: 'Communication/DotIndicator',
|
|
10
|
+
parameters: {
|
|
11
|
+
docs: {
|
|
12
|
+
source: {
|
|
13
|
+
language: 'tsx',
|
|
14
|
+
format: true,
|
|
15
|
+
type: 'code'
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
argTypes: {
|
|
20
|
+
size: {
|
|
21
|
+
control: 'radio',
|
|
22
|
+
options: ['xs', 'sm', 'md']
|
|
23
|
+
},
|
|
24
|
+
appearance: {
|
|
25
|
+
control: 'radio',
|
|
26
|
+
options: ['base', 'red']
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export default meta;
|
|
31
|
+
export const Base = {
|
|
32
|
+
args: {
|
|
33
|
+
appearance: 'base'
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
export const SizeShowcase = {
|
|
37
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
38
|
+
lx: {
|
|
39
|
+
flexDirection: 'row',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
gap: 's12'
|
|
42
|
+
},
|
|
43
|
+
children: [/*#__PURE__*/_jsx(DotIndicator, {
|
|
44
|
+
size: "xs"
|
|
45
|
+
}), /*#__PURE__*/_jsx(DotIndicator, {
|
|
46
|
+
size: "sm"
|
|
47
|
+
}), /*#__PURE__*/_jsx(DotIndicator, {
|
|
48
|
+
size: "md"
|
|
49
|
+
})]
|
|
50
|
+
})
|
|
51
|
+
};
|
|
52
|
+
export const AppearanceShowcase = {
|
|
53
|
+
render: () => /*#__PURE__*/_jsxs(Box, {
|
|
54
|
+
lx: {
|
|
55
|
+
flexDirection: 'row',
|
|
56
|
+
alignItems: 'center',
|
|
57
|
+
gap: 's12'
|
|
58
|
+
},
|
|
59
|
+
children: [/*#__PURE__*/_jsx(DotIndicator, {
|
|
60
|
+
appearance: "base"
|
|
61
|
+
}), /*#__PURE__*/_jsx(DotIndicator, {
|
|
62
|
+
appearance: "red"
|
|
63
|
+
}), /*#__PURE__*/_jsx(DotIndicator, {
|
|
64
|
+
disabled: true
|
|
65
|
+
})]
|
|
66
|
+
})
|
|
67
|
+
};
|
|
68
|
+
export const WithChildren = {
|
|
69
|
+
render: () => /*#__PURE__*/_jsx(Box, {
|
|
70
|
+
lx: {
|
|
71
|
+
flexDirection: 'row',
|
|
72
|
+
alignItems: 'center',
|
|
73
|
+
gap: 's12'
|
|
74
|
+
},
|
|
75
|
+
children: /*#__PURE__*/_jsx(DotIndicator, {
|
|
76
|
+
appearance: "red",
|
|
77
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
78
|
+
size: "sm",
|
|
79
|
+
children: "Submit"
|
|
80
|
+
})
|
|
81
|
+
})
|
|
82
|
+
})
|
|
83
|
+
};
|
|
84
|
+
//# sourceMappingURL=DotIndicator.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Button","Box","DotIndicator","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","argTypes","size","control","options","appearance","Base","args","SizeShowcase","render","lx","flexDirection","alignItems","gap","children","AppearanceShowcase","disabled","WithChildren"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIndicator/DotIndicator.stories.tsx"],"mappings":";;AACA,SAASA,MAAM,QAAQ,qBAAkB;AACzC,SAASC,GAAG,QAAQ,yBAAgB;AACpC,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9C,MAAMC,IAAI,GAAG;EACXC,SAAS,EAAEN,YAAY;EACvBO,KAAK,EAAE,4BAA4B;EACnCC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,MAAM,EAAE;QACNC,QAAQ,EAAE,KAAK;QACfC,MAAM,EAAE,IAAI;QACZC,IAAI,EAAE;MACR;IACF;EACF,CAAC;EACDC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,OAAO,EAAE,OAAO;MAChBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI;IAC5B,CAAC;IACDC,UAAU,EAAE;MACVF,OAAO,EAAE,OAAO;MAChBC,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK;IACzB;EACF;AACF,CAAqC;AAErC,eAAeZ,IAAI;AAGnB,OAAO,MAAMc,IAAW,GAAG;EACzBC,IAAI,EAAE;IACJF,UAAU,EAAE;EACd;AACF,CAAC;AAED,OAAO,MAAMG,YAAmB,GAAG;EACjCC,MAAM,EAAEA,CAAA,kBACNlB,KAAA,CAACL,GAAG;IAACwB,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAC,QAAA,gBAClEzB,IAAA,CAACF,YAAY;MAACe,IAAI,EAAC;IAAI,CAAE,CAAC,eAC1Bb,IAAA,CAACF,YAAY;MAACe,IAAI,EAAC;IAAI,CAAE,CAAC,eAC1Bb,IAAA,CAACF,YAAY;MAACe,IAAI,EAAC;IAAI,CAAE,CAAC;EAAA,CACvB;AAET,CAAC;AAED,OAAO,MAAMa,kBAAyB,GAAG;EACvCN,MAAM,EAAEA,CAAA,kBACNlB,KAAA,CAACL,GAAG;IAACwB,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAC,QAAA,gBAClEzB,IAAA,CAACF,YAAY;MAACkB,UAAU,EAAC;IAAM,CAAE,CAAC,eAClChB,IAAA,CAACF,YAAY;MAACkB,UAAU,EAAC;IAAK,CAAE,CAAC,eACjChB,IAAA,CAACF,YAAY;MAAC6B,QAAQ;IAAA,CAAE,CAAC;EAAA,CACtB;AAET,CAAC;AAED,OAAO,MAAMC,YAAmB,GAAG;EACjCR,MAAM,EAAEA,CAAA,kBACNpB,IAAA,CAACH,GAAG;IAACwB,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAC,QAAA,eAClEzB,IAAA,CAACF,YAAY;MAACkB,UAAU,EAAC,KAAK;MAAAS,QAAA,eAC5BzB,IAAA,CAACJ,MAAM;QAACiB,IAAI,EAAC,IAAI;QAAAY,QAAA,EAAC;MAAM,CAAQ;IAAC,CACrB;EAAC,CACZ;AAET,CAAC","ignoreList":[]}
|