alicia-design-system 1.48.2 → 1.49.0
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/cjs/alicia/common/DatePicker/DatePicker.d.ts +2 -0
- package/dist/cjs/alicia/common/DatePicker/DatePicker.js +24 -2
- package/dist/cjs/alicia/common/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/alicia/common/DatePicker/DatePicker.stories.d.ts +6 -0
- package/dist/cjs/alicia/common/DatePicker/DatePicker.stories.js +5 -2
- package/dist/cjs/alicia/common/DatePicker/DatePicker.stories.js.map +1 -1
- package/dist/esm/alicia/common/DatePicker/DatePicker.d.ts +2 -0
- package/dist/esm/alicia/common/DatePicker/DatePicker.js +24 -2
- package/dist/esm/alicia/common/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/alicia/common/DatePicker/DatePicker.stories.d.ts +6 -0
- package/dist/esm/alicia/common/DatePicker/DatePicker.stories.js +5 -2
- package/dist/esm/alicia/common/DatePicker/DatePicker.stories.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,17 +22,39 @@ const moment_1 = __importDefault(require("moment"));
|
|
|
22
22
|
const icons_1 = require("../icons");
|
|
23
23
|
const useAutoDateFormatter_1 = require("../../../hooks/useAutoDateFormatter");
|
|
24
24
|
const DatePicker = (_a) => {
|
|
25
|
-
var { isError, dateString = undefined, controlName, iconColor, onDateChange, placeholder, dateFormat = "YYYY-MM-DD", onBlurEvent } = _a, props = __rest(_a, ["isError", "dateString", "controlName", "iconColor", "onDateChange", "placeholder", "dateFormat", "onBlurEvent"]);
|
|
25
|
+
var { isError, dateString = undefined, controlName, iconColor, onDateChange, placeholder, dateFormat = "YYYY-MM-DD", onBlurEvent, maxDateString, minDateString } = _a, props = __rest(_a, ["isError", "dateString", "controlName", "iconColor", "onDateChange", "placeholder", "dateFormat", "onBlurEvent", "maxDateString", "minDateString"]);
|
|
26
26
|
const [value, setValue] = (0, react_2.useState)('');
|
|
27
27
|
const [showDate, setShowDate] = (0, react_2.useState)('');
|
|
28
28
|
const myRefname = (0, react_2.useRef)(null);
|
|
29
29
|
const [handleInputDate, formattedInput] = (0, useAutoDateFormatter_1.useAutoDateFormatter)(dateString);
|
|
30
|
+
const [maxDate, setMaxDate] = (0, react_2.useState)(undefined);
|
|
31
|
+
const [minDate, setMinDate] = (0, react_2.useState)(undefined);
|
|
30
32
|
const onChange = (item) => {
|
|
31
33
|
setValue(item.target.value);
|
|
32
34
|
const formattedDate = (0, moment_1.default)(item.target.value, "YYYY-MM-DD").format(dateFormat);
|
|
33
35
|
handleInputDate(formattedDate, dateFormat);
|
|
34
36
|
setShowDate(formattedDate);
|
|
35
37
|
};
|
|
38
|
+
(0, react_2.useEffect)(() => {
|
|
39
|
+
if (maxDateString) {
|
|
40
|
+
const formattedDate = (0, moment_1.default)(maxDateString, dateFormat).format("YYYY-MM-DD");
|
|
41
|
+
const max = new Date(+new Date(formattedDate));
|
|
42
|
+
setMaxDate((0, moment_1.default)(max).format('YYYY-MM-DD'));
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
setMaxDate(undefined);
|
|
46
|
+
}
|
|
47
|
+
}, [maxDateString]);
|
|
48
|
+
(0, react_2.useEffect)(() => {
|
|
49
|
+
if (minDateString) {
|
|
50
|
+
const formattedDate = (0, moment_1.default)(minDateString, dateFormat).format("YYYY-MM-DD");
|
|
51
|
+
const min = new Date(+new Date(formattedDate));
|
|
52
|
+
setMinDate((0, moment_1.default)(min).format('YYYY-MM-DD'));
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
setMinDate(undefined);
|
|
56
|
+
}
|
|
57
|
+
}, [minDateString]);
|
|
36
58
|
// handle empty dateString
|
|
37
59
|
(0, react_2.useEffect)(() => {
|
|
38
60
|
if (dateString && dateString.length === 10) {
|
|
@@ -68,7 +90,7 @@ const DatePicker = (_a) => {
|
|
|
68
90
|
onBlurEvent(e);
|
|
69
91
|
}
|
|
70
92
|
};
|
|
71
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_1.Input, Object.assign({}, props, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : dateFormat, value: showDate, variant: 'flushed', color: isError ? 'error' : 'text', id: `${controlName}-view`, name: `${controlName}-view`, isInvalid: isError, onChange: (e) => onUserInputChange(e), onBlur: (e) => { onBlurHandle(e); } })), (0, jsx_runtime_1.jsx)(react_1.VisuallyHiddenInput, { id: controlName, name: controlName, ref: myRefname, value: value, type: "date", onChange: onChange }), (0, jsx_runtime_1.jsx)(react_1.InputRightElement, { children: (0, jsx_runtime_1.jsx)(Calendar, { stroke: iconColor !== null && iconColor !== void 0 ? iconColor : "text", onClick: handleClick }) })] }));
|
|
93
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_1.Input, Object.assign({}, props, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : dateFormat, value: showDate, variant: 'flushed', color: isError ? 'error' : 'text', id: `${controlName}-view`, name: `${controlName}-view`, isInvalid: isError, onChange: (e) => onUserInputChange(e), onBlur: (e) => { onBlurHandle(e); } })), (0, jsx_runtime_1.jsx)(react_1.VisuallyHiddenInput, { id: controlName, name: controlName, ref: myRefname, value: value, max: maxDate, min: minDate, type: "date", onChange: onChange }), (0, jsx_runtime_1.jsx)(react_1.InputRightElement, { children: (0, jsx_runtime_1.jsx)(Calendar, { stroke: iconColor !== null && iconColor !== void 0 ? iconColor : "text", onClick: handleClick }) })] }));
|
|
72
94
|
};
|
|
73
95
|
exports.DatePicker = DatePicker;
|
|
74
96
|
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,4CAA0G;AAC1G,iCAAiF;AACjF,oDAA4B;AAC5B,oCAAwC;AACxC,8EAA2E;AAEpE,MAAM,UAAU,GAAwB,CAAC,
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,8 @@ declare const _default: ComponentMeta<import("react").FC<import("@chakra-ui/syst
|
|
|
9
9
|
dateFormat?: "YYYY-MM-DD" | "DD-MM-YYYY" | undefined;
|
|
10
10
|
placeholder?: string | undefined;
|
|
11
11
|
onBlurEvent?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
12
|
+
maxDateString?: string | undefined;
|
|
13
|
+
minDateString?: string | undefined;
|
|
12
14
|
}>>;
|
|
13
15
|
export default _default;
|
|
14
16
|
export declare const Primary: ComponentStory<import("react").FC<import("@chakra-ui/system/dist/system.types").ChakraProps & {
|
|
@@ -20,6 +22,8 @@ export declare const Primary: ComponentStory<import("react").FC<import("@chakra-
|
|
|
20
22
|
dateFormat?: "YYYY-MM-DD" | "DD-MM-YYYY" | undefined;
|
|
21
23
|
placeholder?: string | undefined;
|
|
22
24
|
onBlurEvent?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
25
|
+
maxDateString?: string | undefined;
|
|
26
|
+
minDateString?: string | undefined;
|
|
23
27
|
}>>;
|
|
24
28
|
export declare const Secondary: ComponentStory<import("react").FC<import("@chakra-ui/system/dist/system.types").ChakraProps & {
|
|
25
29
|
dateString?: string | undefined;
|
|
@@ -30,4 +34,6 @@ export declare const Secondary: ComponentStory<import("react").FC<import("@chakr
|
|
|
30
34
|
dateFormat?: "YYYY-MM-DD" | "DD-MM-YYYY" | undefined;
|
|
31
35
|
placeholder?: string | undefined;
|
|
32
36
|
onBlurEvent?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
37
|
+
maxDateString?: string | undefined;
|
|
38
|
+
minDateString?: string | undefined;
|
|
33
39
|
}>>;
|
|
@@ -22,12 +22,15 @@ exports.Primary.args = {
|
|
|
22
22
|
dateString: '',
|
|
23
23
|
isError: false,
|
|
24
24
|
controlName: 'birthdate',
|
|
25
|
-
dateFormat: "DD-MM-YYYY"
|
|
25
|
+
dateFormat: "DD-MM-YYYY",
|
|
26
|
+
maxDateString: "26-05-2023",
|
|
27
|
+
minDateString: "20-05-2023"
|
|
26
28
|
};
|
|
27
29
|
exports.Secondary.args = {
|
|
28
30
|
dateString: "22-12-2002",
|
|
29
31
|
isError: false,
|
|
30
32
|
controlName: 'birthdate',
|
|
31
|
-
|
|
33
|
+
maxDateString: "26-05-2023",
|
|
34
|
+
minDateString: "20-05-2023"
|
|
32
35
|
};
|
|
33
36
|
//# sourceMappingURL=DatePicker.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AACA,6CAA0C;AAE1C,kBAAe;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,uBAAU;IACrB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;CACgC,CAAC;AAEtC,MAAM,QAAQ,GAAsC,CAAC,IAAI,EAAE,EAAE;IACzD,OAAO,uBAAC,uBAAU,oBAAK,IAAI,IAAE,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;AAC7G,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,eAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,YAAY;
|
|
1
|
+
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AACA,6CAA0C;AAE1C,kBAAe;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,uBAAU;IACrB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;CACgC,CAAC;AAEtC,MAAM,QAAQ,GAAsC,CAAC,IAAI,EAAE,EAAE;IACzD,OAAO,uBAAC,uBAAU,oBAAK,IAAI,IAAE,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;AAC7G,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,eAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,YAAY;IACxB,aAAa,EAAE,YAAY;IAC3B,aAAa,EAAE,YAAY;CAE9B,CAAC;AAEF,iBAAS,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,YAAY;IACxB,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,aAAa,EAAE,YAAY;IAC3B,aAAa,EAAE,YAAY;CAC9B,CAAC"}
|
|
@@ -16,17 +16,39 @@ import moment from 'moment';
|
|
|
16
16
|
import { CalendarIcon } from '../icons';
|
|
17
17
|
import { useAutoDateFormatter } from '../../../hooks/useAutoDateFormatter';
|
|
18
18
|
export const DatePicker = (_a) => {
|
|
19
|
-
var { isError, dateString = undefined, controlName, iconColor, onDateChange, placeholder, dateFormat = "YYYY-MM-DD", onBlurEvent } = _a, props = __rest(_a, ["isError", "dateString", "controlName", "iconColor", "onDateChange", "placeholder", "dateFormat", "onBlurEvent"]);
|
|
19
|
+
var { isError, dateString = undefined, controlName, iconColor, onDateChange, placeholder, dateFormat = "YYYY-MM-DD", onBlurEvent, maxDateString, minDateString } = _a, props = __rest(_a, ["isError", "dateString", "controlName", "iconColor", "onDateChange", "placeholder", "dateFormat", "onBlurEvent", "maxDateString", "minDateString"]);
|
|
20
20
|
const [value, setValue] = useState('');
|
|
21
21
|
const [showDate, setShowDate] = useState('');
|
|
22
22
|
const myRefname = useRef(null);
|
|
23
23
|
const [handleInputDate, formattedInput] = useAutoDateFormatter(dateString);
|
|
24
|
+
const [maxDate, setMaxDate] = useState(undefined);
|
|
25
|
+
const [minDate, setMinDate] = useState(undefined);
|
|
24
26
|
const onChange = (item) => {
|
|
25
27
|
setValue(item.target.value);
|
|
26
28
|
const formattedDate = moment(item.target.value, "YYYY-MM-DD").format(dateFormat);
|
|
27
29
|
handleInputDate(formattedDate, dateFormat);
|
|
28
30
|
setShowDate(formattedDate);
|
|
29
31
|
};
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (maxDateString) {
|
|
34
|
+
const formattedDate = moment(maxDateString, dateFormat).format("YYYY-MM-DD");
|
|
35
|
+
const max = new Date(+new Date(formattedDate));
|
|
36
|
+
setMaxDate(moment(max).format('YYYY-MM-DD'));
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
setMaxDate(undefined);
|
|
40
|
+
}
|
|
41
|
+
}, [maxDateString]);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
if (minDateString) {
|
|
44
|
+
const formattedDate = moment(minDateString, dateFormat).format("YYYY-MM-DD");
|
|
45
|
+
const min = new Date(+new Date(formattedDate));
|
|
46
|
+
setMinDate(moment(min).format('YYYY-MM-DD'));
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
setMinDate(undefined);
|
|
50
|
+
}
|
|
51
|
+
}, [minDateString]);
|
|
30
52
|
// handle empty dateString
|
|
31
53
|
useEffect(() => {
|
|
32
54
|
if (dateString && dateString.length === 10) {
|
|
@@ -62,6 +84,6 @@ export const DatePicker = (_a) => {
|
|
|
62
84
|
onBlurEvent(e);
|
|
63
85
|
}
|
|
64
86
|
};
|
|
65
|
-
return (_jsxs(InputGroup, { children: [_jsx(Input, Object.assign({}, props, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : dateFormat, value: showDate, variant: 'flushed', color: isError ? 'error' : 'text', id: `${controlName}-view`, name: `${controlName}-view`, isInvalid: isError, onChange: (e) => onUserInputChange(e), onBlur: (e) => { onBlurHandle(e); } })), _jsx(VisuallyHiddenInput, { id: controlName, name: controlName, ref: myRefname, value: value, type: "date", onChange: onChange }), _jsx(InputRightElement, { children: _jsx(Calendar, { stroke: iconColor !== null && iconColor !== void 0 ? iconColor : "text", onClick: handleClick }) })] }));
|
|
87
|
+
return (_jsxs(InputGroup, { children: [_jsx(Input, Object.assign({}, props, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : dateFormat, value: showDate, variant: 'flushed', color: isError ? 'error' : 'text', id: `${controlName}-view`, name: `${controlName}-view`, isInvalid: isError, onChange: (e) => onUserInputChange(e), onBlur: (e) => { onBlurHandle(e); } })), _jsx(VisuallyHiddenInput, { id: controlName, name: controlName, ref: myRefname, value: value, max: maxDate, min: minDate, type: "date", onChange: onChange }), _jsx(InputRightElement, { children: _jsx(Calendar, { stroke: iconColor !== null && iconColor !== void 0 ? iconColor : "text", onClick: handleClick }) })] }));
|
|
66
88
|
};
|
|
67
89
|
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAe,UAAU,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC1G,OAAO,EAAM,QAAQ,EAAE,SAAS,EAAe,MAAM,EAAc,MAAM,OAAO,CAAC;AACjF,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,8 @@ declare const _default: ComponentMeta<import("react").FC<import("@chakra-ui/syst
|
|
|
9
9
|
dateFormat?: "YYYY-MM-DD" | "DD-MM-YYYY" | undefined;
|
|
10
10
|
placeholder?: string | undefined;
|
|
11
11
|
onBlurEvent?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
12
|
+
maxDateString?: string | undefined;
|
|
13
|
+
minDateString?: string | undefined;
|
|
12
14
|
}>>;
|
|
13
15
|
export default _default;
|
|
14
16
|
export declare const Primary: ComponentStory<import("react").FC<import("@chakra-ui/system/dist/system.types").ChakraProps & {
|
|
@@ -20,6 +22,8 @@ export declare const Primary: ComponentStory<import("react").FC<import("@chakra-
|
|
|
20
22
|
dateFormat?: "YYYY-MM-DD" | "DD-MM-YYYY" | undefined;
|
|
21
23
|
placeholder?: string | undefined;
|
|
22
24
|
onBlurEvent?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
25
|
+
maxDateString?: string | undefined;
|
|
26
|
+
minDateString?: string | undefined;
|
|
23
27
|
}>>;
|
|
24
28
|
export declare const Secondary: ComponentStory<import("react").FC<import("@chakra-ui/system/dist/system.types").ChakraProps & {
|
|
25
29
|
dateString?: string | undefined;
|
|
@@ -30,4 +34,6 @@ export declare const Secondary: ComponentStory<import("react").FC<import("@chakr
|
|
|
30
34
|
dateFormat?: "YYYY-MM-DD" | "DD-MM-YYYY" | undefined;
|
|
31
35
|
placeholder?: string | undefined;
|
|
32
36
|
onBlurEvent?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
37
|
+
maxDateString?: string | undefined;
|
|
38
|
+
minDateString?: string | undefined;
|
|
33
39
|
}>>;
|
|
@@ -19,12 +19,15 @@ Primary.args = {
|
|
|
19
19
|
dateString: '',
|
|
20
20
|
isError: false,
|
|
21
21
|
controlName: 'birthdate',
|
|
22
|
-
dateFormat: "DD-MM-YYYY"
|
|
22
|
+
dateFormat: "DD-MM-YYYY",
|
|
23
|
+
maxDateString: "26-05-2023",
|
|
24
|
+
minDateString: "20-05-2023"
|
|
23
25
|
};
|
|
24
26
|
Secondary.args = {
|
|
25
27
|
dateString: "22-12-2002",
|
|
26
28
|
isError: false,
|
|
27
29
|
controlName: 'birthdate',
|
|
28
|
-
|
|
30
|
+
maxDateString: "26-05-2023",
|
|
31
|
+
minDateString: "20-05-2023"
|
|
29
32
|
};
|
|
30
33
|
//# sourceMappingURL=DatePicker.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,eAAe;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;CACgC,CAAC;AAEtC,MAAM,QAAQ,GAAsC,CAAC,IAAI,EAAE,EAAE;IACzD,OAAO,KAAC,UAAU,oBAAK,IAAI,IAAE,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;AAC7G,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,OAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,YAAY;
|
|
1
|
+
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../../src/alicia/common/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,eAAe;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;CACgC,CAAC;AAEtC,MAAM,QAAQ,GAAsC,CAAC,IAAI,EAAE,EAAE;IACzD,OAAO,KAAC,UAAU,oBAAK,IAAI,IAAE,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;AAC7G,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,OAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,YAAY;IACxB,aAAa,EAAE,YAAY;IAC3B,aAAa,EAAE,YAAY;CAE9B,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,YAAY;IACxB,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,WAAW;IACxB,aAAa,EAAE,YAAY;IAC3B,aAAa,EAAE,YAAY;CAC9B,CAAC"}
|