@mirai/ui 1.0.62 → 1.0.64
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/README.md +8 -1
- package/build/components/Button/Button.stories.js +4 -2
- package/build/components/Button/Button.stories.js.map +1 -1
- package/build/components/Calendar/Calendar.stories.js +2 -2
- package/build/components/Calendar/Calendar.stories.js.map +1 -1
- package/build/components/Form/Form.stories.js +4 -2
- package/build/components/Form/Form.stories.js.map +1 -1
- package/build/components/InputDate/InputDate.js +28 -12
- package/build/components/InputDate/InputDate.js.map +1 -1
- package/build/components/InputDate/InputDate.module.css +9 -16
- package/build/components/InputDate/InputDate.stories.js +15 -3
- package/build/components/InputDate/InputDate.stories.js.map +1 -1
- package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap +144 -167
- package/build/components/InputNumber/InputNumber.stories.js +4 -2
- package/build/components/InputNumber/InputNumber.stories.js.map +1 -1
- package/build/components/InputOption/InputOption.js +1 -0
- package/build/components/InputOption/InputOption.js.map +1 -1
- package/build/components/InputOption/InputOption.stories.js +4 -2
- package/build/components/InputOption/InputOption.stories.js.map +1 -1
- package/build/components/InputOption/__tests__/__snapshots__/InputOption.test.js.snap +3 -3
- package/build/components/InputSelect/InputSelect.js +17 -7
- package/build/components/InputSelect/InputSelect.js.map +1 -1
- package/build/components/InputSelect/InputSelect.stories.js +4 -2
- package/build/components/InputSelect/InputSelect.stories.js.map +1 -1
- package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +217 -163
- package/build/components/InputText/InputText.js +13 -10
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/InputText.module.css +11 -11
- package/build/components/InputText/InputText.stories.js +5 -2
- package/build/components/InputText/InputText.stories.js.map +1 -1
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +108 -88
- package/build/components/Menu/Menu.js +37 -15
- package/build/components/Menu/Menu.js.map +1 -1
- package/build/components/Menu/Menu.module.css +3 -0
- package/build/components/Menu/Menu.stories.js +7 -4
- package/build/components/Menu/Menu.stories.js.map +1 -1
- package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap +36 -19
- package/build/components/Modal/Modal.js +5 -2
- package/build/components/Modal/Modal.js.map +1 -1
- package/build/components/Modal/Modal.module.css +9 -20
- package/build/components/Modal/Modal.stories.js +5 -2
- package/build/components/Modal/Modal.stories.js.map +1 -1
- package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap +24 -12
- package/build/components/Notification/Notification.stories.js +4 -2
- package/build/components/Notification/Notification.stories.js.map +1 -1
- package/build/components/Table/Table.stories.js +4 -2
- package/build/components/Table/Table.stories.js.map +1 -1
- package/build/components/Tooltip/Tooltip.stories.js +4 -2
- package/build/components/Tooltip/Tooltip.stories.js.map +1 -1
- package/build/hooks/useDevice.js +1 -1
- package/build/hooks/useDevice.js.map +1 -1
- package/build/primitives/Checkbox/Checkbox.stories.js +4 -2
- package/build/primitives/Checkbox/Checkbox.stories.js.map +1 -1
- package/build/primitives/Icon/Icon.stories.js +4 -2
- package/build/primitives/Icon/Icon.stories.js.map +1 -1
- package/build/primitives/Input/Input.stories.js +4 -2
- package/build/primitives/Input/Input.stories.js.map +1 -1
- package/build/primitives/Layer/Layer.stories.js +4 -2
- package/build/primitives/Layer/Layer.stories.js.map +1 -1
- package/build/primitives/Pressable/Pressable.stories.js +4 -2
- package/build/primitives/Pressable/Pressable.stories.js.map +1 -1
- package/build/primitives/Radio/Radio.stories.js +4 -2
- package/build/primitives/Radio/Radio.stories.js.map +1 -1
- package/build/primitives/ScrollView/ScrollView.stories.js +4 -2
- package/build/primitives/ScrollView/ScrollView.stories.js.map +1 -1
- package/build/primitives/Select/Select.stories.js +4 -2
- package/build/primitives/Select/Select.stories.js.map +1 -1
- package/build/primitives/Switch/Switch.stories.js +4 -2
- package/build/primitives/Switch/Switch.stories.js.map +1 -1
- package/build/primitives/Text/Text.stories.js +4 -2
- package/build/primitives/Text/Text.stories.js.map +1 -1
- package/build/primitives/View/View.stories.js +4 -2
- package/build/primitives/View/View.stories.js.map +1 -1
- package/build/theme/default.theme.css +1 -1
- package/build/theme/theme.stories.js +2 -0
- package/build/theme/theme.stories.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -580,6 +580,7 @@ This component helps you to create a menu over a determinate component receiving
|
|
|
580
580
|
- `children:node` The element which we will use as reference for display the menu.
|
|
581
581
|
- `options:arrayOf(Option:shape)`
|
|
582
582
|
- `Template:node` if you don't want use the default option scaffold.
|
|
583
|
+
- `title:string` shows a title for the modal
|
|
583
584
|
- `visible:boolean` showing or hiding the menu
|
|
584
585
|
- `onPress:func` callback when we click on a determinate _option_.
|
|
585
586
|
|
|
@@ -633,8 +634,9 @@ const MyComponent = () => {
|
|
|
633
634
|
A modal component receiving the following props:
|
|
634
635
|
|
|
635
636
|
- `children:node`
|
|
636
|
-
- `
|
|
637
|
+
- `fit:bool` if you want use fit width with the content
|
|
637
638
|
- `overflow:bool` wraps all modal in a semi-transparent layer
|
|
639
|
+
- `portal:bool` if you want use _portal feature_ of React API
|
|
638
640
|
- `title:string` shows a title for the modal
|
|
639
641
|
- `visible:boolean` if true modal is shown
|
|
640
642
|
- `onBack:function` executed once back button is clicked
|
|
@@ -812,6 +814,11 @@ Theme.shadeColors()
|
|
|
812
814
|
--mirai-ui-space-XL: 48px;
|
|
813
815
|
--mirai-ui-space-XXL: 64px;
|
|
814
816
|
|
|
817
|
+
/* breakpoints */
|
|
818
|
+
--mirai-ui-breakpoint-S: 430px;
|
|
819
|
+
--mirai-ui-breakpoint-M: 768px;
|
|
820
|
+
--mirai-ui-breakpoint-content: 1280px;
|
|
821
|
+
|
|
815
822
|
/* motion */
|
|
816
823
|
--mirai-ui-motion-collapse: 200ms;
|
|
817
824
|
--mirai-ui-motion-expand: 300ms;
|
|
@@ -15,6 +15,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
17
|
|
|
18
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
+
|
|
18
20
|
var _default = {
|
|
19
21
|
title: 'Components'
|
|
20
22
|
};
|
|
@@ -26,7 +28,7 @@ var Story = function Story(props) {
|
|
|
26
28
|
|
|
27
29
|
exports.Story = Story;
|
|
28
30
|
Story.storyName = 'Button';
|
|
29
|
-
Story.args = {
|
|
31
|
+
Story.args = _defineProperty({
|
|
30
32
|
busy: false,
|
|
31
33
|
children: 'children',
|
|
32
34
|
disabled: false,
|
|
@@ -37,7 +39,7 @@ Story.args = {
|
|
|
37
39
|
squared: false,
|
|
38
40
|
tag: 'button',
|
|
39
41
|
wide: false
|
|
40
|
-
};
|
|
42
|
+
}, 'data-testid', 'test-story');
|
|
41
43
|
Story.argTypes = {
|
|
42
44
|
onEnter: {
|
|
43
45
|
action: 'onEnter'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","names":["title","Story","props","storyName","args","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Button {...props} />;\n\nStory.storyName = 'Button';\n\nStory.args = {\n busy: false,\n children: 'children',\n disabled: false,\n large: false,\n rounded: false,\n secondary: false,\n small: false,\n squared: false,\n tag: 'button',\n wide: false,\n};\n\nStory.argTypes = {\n onEnter: { action: 'onEnter' },\n onLeave: { action: 'onLeave' },\n onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA
|
|
1
|
+
{"version":3,"file":"Button.stories.js","names":["title","Story","props","storyName","args","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Button {...props} />;\n\nStory.storyName = 'Button';\n\nStory.args = {\n busy: false,\n children: 'children',\n disabled: false,\n large: false,\n rounded: false,\n secondary: false,\n small: false,\n squared: false,\n tag: 'button',\n wide: false,\n ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n onEnter: { action: 'onEnter' },\n onLeave: { action: 'onLeave' },\n onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,cAAD,EAAYA,KAAZ,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,QAAlB;AAEAF,KAAK,CAACG,IAAN;EACEC,IAAI,EAAE,KADR;EAEEC,QAAQ,EAAE,UAFZ;EAGEC,QAAQ,EAAE,KAHZ;EAIEC,KAAK,EAAE,KAJT;EAKEC,OAAO,EAAE,KALX;EAMEC,SAAS,EAAE,KANb;EAOEC,KAAK,EAAE,KAPT;EAQEC,OAAO,EAAE,KARX;EASEC,GAAG,EAAE,QATP;EAUEC,IAAI,EAAE;AAVR,GAWG,aAXH,EAWmB,YAXnB;AAcAb,KAAK,CAACc,QAAN,GAAiB;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAV,CADM;EAEfC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAV,CAFM;EAGfE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAV;AAHM,CAAjB"}
|
|
@@ -34,7 +34,7 @@ exports.Story = Story;
|
|
|
34
34
|
var format = 'DD/MM/YYYY';
|
|
35
35
|
var today = new Date();
|
|
36
36
|
Story.storyName = 'Calendar';
|
|
37
|
-
Story.args = {
|
|
37
|
+
Story.args = _defineProperty({
|
|
38
38
|
captions: (_captions = {}, _defineProperty(_captions, (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 6, 'days'), {
|
|
39
39
|
format: format
|
|
40
40
|
}), '10.95$'), _defineProperty(_captions, (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 8, 'days'), {
|
|
@@ -112,7 +112,7 @@ Story.args = {
|
|
|
112
112
|
|
|
113
113
|
return (_console4 = console).log.apply(_console4, ['<Calendar>::onScroll'].concat(props));
|
|
114
114
|
}
|
|
115
|
-
};
|
|
115
|
+
}, 'data-testid', 'test-story');
|
|
116
116
|
Story.argTypes = {
|
|
117
117
|
locale: {
|
|
118
118
|
options: ['es-ES', 'en-GB', 'ja-JP', 'it-IT', 'pt-PT'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.stories.js","names":["title","Story","props","format","today","Date","storyName","args","captions","disabledDates","disabledPast","from","highlights","locale","months","range","rangeMaxDays","rangeMinDays","to","value","onChange","console","log","onFocus","onNavigation","onScroll","argTypes","options","control","type","defaultValue"],"sources":["../../../src/components/Calendar/Calendar.stories.jsx"],"sourcesContent":["import { dateCalc, dateFormat } from '@mirai/locale';\nimport * as React from 'react';\n\nimport { Calendar } from './Calendar';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Calendar {...props} />;\n\nconst format = 'DD/MM/YYYY';\nconst today = new Date();\n\nStory.storyName = 'Calendar';\n\nStory.args = {\n captions: {\n [dateFormat(dateCalc(today, 6, 'days'), { format })]: '10.95$',\n [dateFormat(dateCalc(today, 8, 'days'), { format })]: '129510.95$',\n [dateFormat(dateCalc(today, 16, 'days'), { format })]: '10.95$',\n [dateFormat(dateCalc(today, 18, 'days'), { format })]: '9.95$',\n },\n disabledDates: [\n dateFormat(dateCalc(today, 20, 'days'), { format }),\n dateFormat(dateCalc(today, 21, 'days'), { format }),\n dateFormat(dateCalc(today, 22, 'days'), { format }),\n dateFormat(dateCalc(today, 23, 'days'), { format }),\n dateFormat(dateCalc(today, 24, 'days'), { format }),\n ],\n disabledPast: true,\n format,\n from: '',\n highlights: [\n dateFormat(dateCalc(today, 6, 'days'), { format }),\n dateFormat(dateCalc(today, 10, 'days'), { format }),\n dateFormat(dateCalc(today, 12, 'days'), { format }),\n dateFormat(dateCalc(today, 14, 'days'), { format }),\n dateFormat(dateCalc(today, 16, 'days'), { format }),\n ],\n locale: 'es-ES',\n months: 2,\n range: true,\n rangeMaxDays: 7,\n rangeMinDays: 3,\n to: dateFormat(dateCalc(today, 6, 'months')),\n value: [],\n onChange: (...props) => console.log('<Calendar>::onChange', ...props),\n onFocus: (...props) => console.log('<Calendar>::onFocus', ...props),\n onNavigation: (...props) => console.log('<Calendar>::onNavigation', ...props),\n onScroll: (...props) => console.log('<Calendar>::onScroll', ...props),\n};\n\nStory.argTypes = {\n locale: {\n options: ['es-ES', 'en-GB', 'ja-JP', 'it-IT', 'pt-PT'],\n control: { type: 'select' },\n defaultValue: 'es-ES',\n },\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,kBAAD,EAAcA,KAAd,CAAX;AAAA,CAAd;;;AAEP,IAAMC,MAAM,GAAG,YAAf;AACA,IAAMC,KAAK,GAAG,IAAIC,IAAJ,EAAd;AAEAJ,KAAK,CAACK,SAAN,GAAkB,UAAlB;AAEAL,KAAK,CAACM,IAAN
|
|
1
|
+
{"version":3,"file":"Calendar.stories.js","names":["title","Story","props","format","today","Date","storyName","args","captions","disabledDates","disabledPast","from","highlights","locale","months","range","rangeMaxDays","rangeMinDays","to","value","onChange","console","log","onFocus","onNavigation","onScroll","argTypes","options","control","type","defaultValue"],"sources":["../../../src/components/Calendar/Calendar.stories.jsx"],"sourcesContent":["import { dateCalc, dateFormat } from '@mirai/locale';\nimport * as React from 'react';\n\nimport { Calendar } from './Calendar';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Calendar {...props} />;\n\nconst format = 'DD/MM/YYYY';\nconst today = new Date();\n\nStory.storyName = 'Calendar';\n\nStory.args = {\n captions: {\n [dateFormat(dateCalc(today, 6, 'days'), { format })]: '10.95$',\n [dateFormat(dateCalc(today, 8, 'days'), { format })]: '129510.95$',\n [dateFormat(dateCalc(today, 16, 'days'), { format })]: '10.95$',\n [dateFormat(dateCalc(today, 18, 'days'), { format })]: '9.95$',\n },\n disabledDates: [\n dateFormat(dateCalc(today, 20, 'days'), { format }),\n dateFormat(dateCalc(today, 21, 'days'), { format }),\n dateFormat(dateCalc(today, 22, 'days'), { format }),\n dateFormat(dateCalc(today, 23, 'days'), { format }),\n dateFormat(dateCalc(today, 24, 'days'), { format }),\n ],\n disabledPast: true,\n format,\n from: '',\n highlights: [\n dateFormat(dateCalc(today, 6, 'days'), { format }),\n dateFormat(dateCalc(today, 10, 'days'), { format }),\n dateFormat(dateCalc(today, 12, 'days'), { format }),\n dateFormat(dateCalc(today, 14, 'days'), { format }),\n dateFormat(dateCalc(today, 16, 'days'), { format }),\n ],\n locale: 'es-ES',\n months: 2,\n range: true,\n rangeMaxDays: 7,\n rangeMinDays: 3,\n to: dateFormat(dateCalc(today, 6, 'months')),\n value: [],\n onChange: (...props) => console.log('<Calendar>::onChange', ...props),\n onFocus: (...props) => console.log('<Calendar>::onFocus', ...props),\n onNavigation: (...props) => console.log('<Calendar>::onNavigation', ...props),\n onScroll: (...props) => console.log('<Calendar>::onScroll', ...props),\n ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n locale: {\n options: ['es-ES', 'en-GB', 'ja-JP', 'it-IT', 'pt-PT'],\n control: { type: 'select' },\n defaultValue: 'es-ES',\n },\n};\n"],"mappings":"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"}
|
|
@@ -17,6 +17,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
19
|
|
|
20
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
+
|
|
20
22
|
var _default = {
|
|
21
23
|
title: 'Components'
|
|
22
24
|
};
|
|
@@ -43,7 +45,7 @@ Story.args = {
|
|
|
43
45
|
showErrors: false,
|
|
44
46
|
validateOnMount: false
|
|
45
47
|
};
|
|
46
|
-
Story.argTypes = {
|
|
48
|
+
Story.argTypes = _defineProperty({
|
|
47
49
|
onBlur: {
|
|
48
50
|
action: 'onBlur'
|
|
49
51
|
},
|
|
@@ -59,5 +61,5 @@ Story.argTypes = {
|
|
|
59
61
|
onSubmit: {
|
|
60
62
|
action: 'onSubmit'
|
|
61
63
|
}
|
|
62
|
-
};
|
|
64
|
+
}, 'data-testid', 'test-story');
|
|
63
65
|
//# sourceMappingURL=Form.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.stories.js","names":["title","Story","props","storyName","args","debounce","schema","showErrors","validateOnMount","argTypes","onBlur","action","onChange","onError","onFocus","onSubmit"],"sources":["../../../src/components/Form/Form.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, InputText } from '../';\nimport { Form } from './Form';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <Form {...props}>\n <InputText name=\"username\" label=\"username\" />\n <InputText name=\"password\" label=\"password\" type=\"password\" />\n <Button wide>Submit</Button>\n </Form>\n);\n\nStory.storyName = 'Form';\n\nStory.args = {\n debounce: 0,\n schema: {},\n showErrors: false,\n validateOnMount: false,\n};\n\nStory.argTypes = {\n onBlur: { action: 'onBlur' },\n onChange: { action: 'onBlur' },\n onError: { action: 'onError' },\n onFocus: { action: 'onFocus' },\n onSubmit: { action: 'onSubmit' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA
|
|
1
|
+
{"version":3,"file":"Form.stories.js","names":["title","Story","props","storyName","args","debounce","schema","showErrors","validateOnMount","argTypes","onBlur","action","onChange","onError","onFocus","onSubmit"],"sources":["../../../src/components/Form/Form.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, InputText } from '../';\nimport { Form } from './Form';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <Form {...props}>\n <InputText name=\"username\" label=\"username\" />\n <InputText name=\"password\" label=\"password\" type=\"password\" />\n <Button wide>Submit</Button>\n </Form>\n);\n\nStory.storyName = 'Form';\n\nStory.args = {\n debounce: 0,\n schema: {},\n showErrors: false,\n validateOnMount: false,\n};\n\nStory.argTypes = {\n onBlur: { action: 'onBlur' },\n onChange: { action: 'onBlur' },\n onError: { action: 'onError' },\n onFocus: { action: 'onFocus' },\n onSubmit: { action: 'onSubmit' },\n ['data-testid']: 'test-story',\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,oBAAC,UAAD,EAAUA,KAAV,eACE,oBAAC,WAAD;IAAW,IAAI,EAAC,UAAhB;IAA2B,KAAK,EAAC;EAAjC,EADF,eAEE,oBAAC,WAAD;IAAW,IAAI,EAAC,UAAhB;IAA2B,KAAK,EAAC,UAAjC;IAA4C,IAAI,EAAC;EAAjD,EAFF,eAGE,oBAAC,QAAD;IAAQ,IAAI;EAAZ,YAHF,CADmB;AAAA,CAAd;;;AAQPD,KAAK,CAACE,SAAN,GAAkB,MAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,QAAQ,EAAE,CADC;EAEXC,MAAM,EAAE,EAFG;EAGXC,UAAU,EAAE,KAHD;EAIXC,eAAe,EAAE;AAJN,CAAb;AAOAP,KAAK,CAACQ,QAAN;EACEC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAV,CADV;EAEEC,QAAQ,EAAE;IAAED,MAAM,EAAE;EAAV,CAFZ;EAGEE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAV,CAHX;EAIEG,OAAO,EAAE;IAAEH,MAAM,EAAE;EAAV,CAJX;EAKEI,QAAQ,EAAE;IAAEJ,MAAM,EAAE;EAAV;AALZ,GAMG,aANH,EAMmB,YANnB"}
|
|
@@ -17,9 +17,12 @@ var _primitives = require("../../primitives");
|
|
|
17
17
|
|
|
18
18
|
var _InputText = require("../InputText");
|
|
19
19
|
|
|
20
|
+
var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
|
|
21
|
+
|
|
20
22
|
var _InputDateModule = _interopRequireDefault(require("./InputDate.module.css"));
|
|
21
23
|
|
|
22
|
-
var _excluded = ["disabled", "error", "format", "label", "labels", "max", "min", "name", "required", "value", "onChange", "onError", "onEnter", "onLeave"]
|
|
24
|
+
var _excluded = ["disabled", "error", "format", "hint", "label", "labels", "max", "min", "name", "placeholder", "required", "value", "onChange", "onError", "onEnter", "onLeave"],
|
|
25
|
+
_excluded2 = ["className", "data-testid"];
|
|
23
26
|
|
|
24
27
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
28
|
|
|
@@ -27,6 +30,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
30
|
|
|
28
31
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
32
|
|
|
33
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
34
|
+
|
|
30
35
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
31
36
|
|
|
32
37
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -48,12 +53,15 @@ var InputDate = function InputDate(_ref) {
|
|
|
48
53
|
error = _ref.error,
|
|
49
54
|
_ref$format = _ref.format,
|
|
50
55
|
format = _ref$format === void 0 ? 'DD/MM/YYYY' : _ref$format,
|
|
56
|
+
hint = _ref.hint,
|
|
51
57
|
label = _ref.label,
|
|
52
58
|
_ref$labels = _ref.labels,
|
|
53
59
|
labels = _ref$labels === void 0 ? [] : _ref$labels,
|
|
54
60
|
max = _ref.max,
|
|
55
61
|
min = _ref.min,
|
|
56
62
|
name = _ref.name,
|
|
63
|
+
_ref$placeholder = _ref.placeholder,
|
|
64
|
+
placeholder = _ref$placeholder === void 0 ? true : _ref$placeholder,
|
|
57
65
|
required = _ref.required,
|
|
58
66
|
_ref$value = _ref.value,
|
|
59
67
|
value = _ref$value === void 0 ? '' : _ref$value,
|
|
@@ -82,6 +90,7 @@ var InputDate = function InputDate(_ref) {
|
|
|
82
90
|
var nextValue = parts.map(function (part, index) {
|
|
83
91
|
return part !== partKey ? values[index] || '' : partValue;
|
|
84
92
|
}).join('/');
|
|
93
|
+
onChange(nextValue, event);
|
|
85
94
|
var errors = (0, _helpers.getInputDateErrors)({
|
|
86
95
|
format: format,
|
|
87
96
|
max: max,
|
|
@@ -90,7 +99,6 @@ var InputDate = function InputDate(_ref) {
|
|
|
90
99
|
required: required
|
|
91
100
|
});
|
|
92
101
|
if (Object.keys(errors).length > 0) onError(errors);
|
|
93
|
-
onChange(nextValue, event);
|
|
94
102
|
};
|
|
95
103
|
|
|
96
104
|
var handleEnter = function handleEnter(event) {
|
|
@@ -103,23 +111,28 @@ var InputDate = function InputDate(_ref) {
|
|
|
103
111
|
onLeave(event);
|
|
104
112
|
};
|
|
105
113
|
|
|
106
|
-
var
|
|
114
|
+
var className = others.className,
|
|
115
|
+
testId = others['data-testid'],
|
|
116
|
+
rest = _objectWithoutProperties(others, _excluded2);
|
|
117
|
+
|
|
107
118
|
return /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
108
|
-
className:
|
|
119
|
+
className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, className),
|
|
109
120
|
"data-testid": testId
|
|
110
121
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
111
|
-
|
|
122
|
+
small: true,
|
|
123
|
+
className: (0, _helpers.styles)(_InputDateModule.default.label, _InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error)
|
|
112
124
|
}, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
113
125
|
row: true
|
|
114
126
|
}, parts.map(function (part, index) {
|
|
115
|
-
return /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
|
|
127
|
+
return /*#__PURE__*/_react.default.createElement(_InputText.InputText, _extends({}, rest, {
|
|
116
128
|
disabled: disabled,
|
|
117
129
|
error: error,
|
|
118
|
-
hint: labels[index] || part,
|
|
130
|
+
hint: !placeholder ? labels[index] || part : undefined,
|
|
119
131
|
key: index,
|
|
120
132
|
maxLength: part.length,
|
|
121
133
|
name: "".concat(name, ":").concat(part),
|
|
122
|
-
|
|
134
|
+
placeholder: placeholder ? labels[index] || part : undefined,
|
|
135
|
+
showState: index === parts.length - 1,
|
|
123
136
|
value: values[index],
|
|
124
137
|
onChange: function onChange(value) {
|
|
125
138
|
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
@@ -130,10 +143,13 @@ var InputDate = function InputDate(_ref) {
|
|
|
130
143
|
},
|
|
131
144
|
onEnter: handleEnter,
|
|
132
145
|
onLeave: handleLeave,
|
|
133
|
-
className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)]),
|
|
146
|
+
className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)], index === parts.length - 1 && _InputDateModule.default.state),
|
|
134
147
|
"data-testid": testId ? "".concat(testId, "-").concat(part) : undefined
|
|
135
|
-
});
|
|
136
|
-
}))
|
|
148
|
+
}));
|
|
149
|
+
})), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
150
|
+
small: true,
|
|
151
|
+
className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
|
|
152
|
+
}, hint));
|
|
137
153
|
};
|
|
138
154
|
|
|
139
155
|
exports.InputDate = InputDate;
|
|
@@ -143,12 +159,12 @@ InputDate.propTypes = {
|
|
|
143
159
|
error: _propTypes.default.bool,
|
|
144
160
|
format: _propTypes.default.string,
|
|
145
161
|
hint: _propTypes.default.string,
|
|
146
|
-
// !TODO
|
|
147
162
|
label: _propTypes.default.string,
|
|
148
163
|
labels: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
149
164
|
max: _propTypes.default.string,
|
|
150
165
|
min: _propTypes.default.string,
|
|
151
166
|
name: _propTypes.default.string.isRequired,
|
|
167
|
+
placeholder: _propTypes.default.bool,
|
|
152
168
|
required: _propTypes.default.bool,
|
|
153
169
|
value: _propTypes.default.string,
|
|
154
170
|
onChange: _propTypes.default.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","label","labels","max","min","name","required","value","onChange","onError","onEnter","onLeave","others","focus","setFocus","parts","split","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","Object","keys","length","handleEnter","handleLeave","testId","
|
|
1
|
+
{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","hint","label","labels","max","min","name","placeholder","required","value","onChange","onError","onEnter","onLeave","others","focus","setFocus","parts","split","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","Object","keys","length","handleEnter","handleLeave","className","testId","rest","style","inputContainer","styleDate","text","undefined","input","substring","state","displayName","propTypes","PropTypes","bool","string","arrayOf","isRequired","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getInputDateErrors, styles } from '../../helpers';\nimport { Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from '../InputText/InputText.module.css';\nimport styleDate from './InputDate.module.css';\n\nconst InputDate = ({\n disabled,\n error,\n format = 'DD/MM/YYYY',\n hint,\n label,\n labels = [],\n max,\n min,\n name,\n placeholder = true,\n required,\n value = '',\n onChange = () => {},\n onError = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const parts = format.split('/');\n const values = value?.split('/') || [];\n\n const handleChange = (partValue = '', partKey, event) => {\n const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n onChange(nextValue, event);\n\n const errors = getInputDateErrors({ format, max, min, value, required });\n if (Object.keys(errors).length > 0) onError(errors);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const { className, ['data-testid']: testId, ...rest } = others;\n\n return (\n <View className={styles(style.inputContainer, className)} data-testid={testId}>\n <Text\n small\n className={styles(\n styleDate.label,\n style.text,\n style.hint,\n disabled && style.disabled,\n focus && style.focus,\n error && style.error,\n )}\n >\n {label}\n </Text>\n\n <View row>\n {parts.map((part, index) => (\n <InputText\n {...rest}\n disabled={disabled}\n error={error}\n hint={!placeholder ? labels[index] || part : undefined}\n key={index}\n maxLength={part.length}\n name={`${name}:${part}`}\n placeholder={placeholder ? labels[index] || part : undefined}\n showState={index === parts.length - 1}\n value={values[index]}\n onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n onEnter={handleEnter}\n onLeave={handleLeave}\n className={styles(\n styleDate.input,\n styleDate[part.substring(0, 1)],\n index === parts.length - 1 && styleDate.state,\n )}\n data-testid={testId ? `${testId}-${part}` : undefined}\n />\n ))}\n </View>\n\n {hint && (\n <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n {hint}\n </Text>\n )}\n </View>\n );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n format: PropTypes.string,\n hint: PropTypes.string,\n label: PropTypes.string,\n labels: PropTypes.arrayOf(PropTypes.string),\n max: PropTypes.string,\n min: PropTypes.string,\n name: PropTypes.string.isRequired,\n placeholder: PropTypes.bool,\n required: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onError: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":"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"}
|
|
@@ -1,29 +1,22 @@
|
|
|
1
1
|
.input {
|
|
2
2
|
max-width: calc(calc(var(--mirai-ui-input-font-size) * 2.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
|
|
3
|
+
margin-bottom: 0;
|
|
4
|
+
margin-top: 0;
|
|
3
5
|
}
|
|
4
6
|
|
|
5
7
|
.input:not(:last-child) {
|
|
6
|
-
margin-right: var(--mirai-ui-
|
|
8
|
+
margin-right: var(--mirai-ui-input-text-padding-x);
|
|
7
9
|
}
|
|
8
10
|
|
|
9
|
-
.input.Y
|
|
11
|
+
.input.Y,
|
|
12
|
+
.input.state:not(.Y) {
|
|
10
13
|
max-width: calc(calc(var(--mirai-ui-input-font-size) * 3.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
|
|
11
14
|
}
|
|
12
15
|
|
|
13
|
-
.
|
|
14
|
-
|
|
15
|
-
margin-bottom: calc(var(--mirai-ui-font-size-small) * -1);
|
|
16
|
-
padding: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.label.disabled {
|
|
20
|
-
color: var(--mirai-ui-input-text-disabled);
|
|
16
|
+
.input.state.Y {
|
|
17
|
+
max-width: calc(calc(var(--mirai-ui-input-font-size) * 4.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
|
|
21
18
|
}
|
|
22
19
|
|
|
23
|
-
.label
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.label.error {
|
|
28
|
-
color: var(--mirai-ui-error);
|
|
20
|
+
.label {
|
|
21
|
+
margin-top: calc(var(--mirai-ui-font-size-small) * -0.5);
|
|
29
22
|
}
|
|
@@ -11,22 +11,33 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _InputDate = require("./InputDate");
|
|
13
13
|
|
|
14
|
+
var _InputText = require("../InputText");
|
|
15
|
+
|
|
14
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
17
|
|
|
16
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
19
|
|
|
20
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
+
|
|
18
22
|
var _default = {
|
|
19
23
|
title: 'Components'
|
|
20
24
|
};
|
|
21
25
|
exports.default = _default;
|
|
22
26
|
|
|
23
27
|
var Story = function Story(props) {
|
|
24
|
-
return /*#__PURE__*/React.createElement(
|
|
28
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_InputText.InputText, {
|
|
29
|
+
label: "name",
|
|
30
|
+
hint: true
|
|
31
|
+
}), /*#__PURE__*/React.createElement(_InputDate.InputDate, props), /*#__PURE__*/React.createElement(_InputText.InputText, {
|
|
32
|
+
label: "password",
|
|
33
|
+
type: "password",
|
|
34
|
+
hint: true
|
|
35
|
+
}));
|
|
25
36
|
};
|
|
26
37
|
|
|
27
38
|
exports.Story = Story;
|
|
28
39
|
Story.storyName = 'InputDate';
|
|
29
|
-
Story.args = {
|
|
40
|
+
Story.args = _defineProperty({
|
|
30
41
|
disabled: false,
|
|
31
42
|
error: false,
|
|
32
43
|
format: 'DD/MM/YYYY',
|
|
@@ -35,6 +46,7 @@ Story.args = {
|
|
|
35
46
|
max: '10/04/2080',
|
|
36
47
|
min: '10/04/1980',
|
|
37
48
|
name: 'name',
|
|
49
|
+
placeholder: true,
|
|
38
50
|
required: false,
|
|
39
51
|
value: '06/05/2020',
|
|
40
52
|
onChange: function onChange() {
|
|
@@ -73,6 +85,6 @@ Story.args = {
|
|
|
73
85
|
|
|
74
86
|
return (_console4 = console).log.apply(_console4, ['<InputDate>::onLeave'].concat(props));
|
|
75
87
|
}
|
|
76
|
-
};
|
|
88
|
+
}, 'data-testid', 'test-story');
|
|
77
89
|
Story.argTypes = {};
|
|
78
90
|
//# sourceMappingURL=InputDate.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputDate.stories.js","names":["title","Story","props","storyName","args","disabled","error","format","hint","label","max","min","name","required","value","onChange","console","log","onError","onEnter","onLeave","argTypes"],"sources":["../../../src/components/InputDate/InputDate.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputDate } from './InputDate';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <InputDate {...props}
|
|
1
|
+
{"version":3,"file":"InputDate.stories.js","names":["title","Story","props","storyName","args","disabled","error","format","hint","label","max","min","name","placeholder","required","value","onChange","console","log","onError","onEnter","onLeave","argTypes"],"sources":["../../../src/components/InputDate/InputDate.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputDate } from './InputDate';\nimport { InputText } from '../InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <>\n <InputText label=\"name\" hint />\n <InputDate {...props} />\n <InputText label=\"password\" type=\"password\" hint />\n </>\n);\n\nStory.storyName = 'InputDate';\n\nStory.args = {\n disabled: false,\n error: false,\n format: 'DD/MM/YYYY',\n hint: 'hint',\n label: 'label',\n max: '10/04/2080',\n min: '10/04/1980',\n name: 'name',\n placeholder: true,\n required: false,\n value: '06/05/2020',\n onChange: (...props) => console.log('<InputDate>::onBlur', ...props),\n onError: (...props) => console.log('<InputDate>::onError', ...props),\n onEnter: (...props) => console.log('<InputDate>::onEnter', ...props),\n onLeave: (...props) => console.log('<InputDate>::onLeave', ...props),\n ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,uDACE,oBAAC,oBAAD;IAAW,KAAK,EAAC,MAAjB;IAAwB,IAAI;EAA5B,EADF,eAEE,oBAAC,oBAAD,EAAeA,KAAf,CAFF,eAGE,oBAAC,oBAAD;IAAW,KAAK,EAAC,UAAjB;IAA4B,IAAI,EAAC,UAAjC;IAA4C,IAAI;EAAhD,EAHF,CADmB;AAAA,CAAd;;;AAQPD,KAAK,CAACE,SAAN,GAAkB,WAAlB;AAEAF,KAAK,CAACG,IAAN;EACEC,QAAQ,EAAE,KADZ;EAEEC,KAAK,EAAE,KAFT;EAGEC,MAAM,EAAE,YAHV;EAIEC,IAAI,EAAE,MAJR;EAKEC,KAAK,EAAE,OALT;EAMEC,GAAG,EAAE,YANP;EAOEC,GAAG,EAAE,YAPP;EAQEC,IAAI,EAAE,MARR;EASEC,WAAW,EAAE,IATf;EAUEC,QAAQ,EAAE,KAVZ;EAWEC,KAAK,EAAE,YAXT;EAYEC,QAAQ,EAAE;IAAA;;IAAA,kCAAId,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,YAAAe,OAAO,EAACC,GAAR,kBAAY,qBAAZ,SAAsChB,KAAtC,EAAd;EAAA,CAZZ;EAaEiB,OAAO,EAAE;IAAA;;IAAA,mCAAIjB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAe,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuChB,KAAvC,EAAd;EAAA,CAbX;EAcEkB,OAAO,EAAE;IAAA;;IAAA,mCAAIlB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAe,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuChB,KAAvC,EAAd;EAAA,CAdX;EAeEmB,OAAO,EAAE;IAAA;;IAAA,mCAAInB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAe,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuChB,KAAvC,EAAd;EAAA;AAfX,GAgBG,aAhBH,EAgBmB,YAhBnB;AAmBAD,KAAK,CAACqB,QAAN,GAAiB,EAAjB"}
|