maru_design2 2.12.4 → 2.13.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/CHANGELOG.md +26 -0
- package/dist/components/atoms/icon/iconmap.d.ts +3 -0
- package/dist/components/atoms/skeleton/Contents.d.ts +1 -0
- package/dist/components/atoms/skeleton/Skeleton.d.ts +6 -0
- package/dist/components/atoms/skeleton/index.d.ts +1 -0
- package/dist/enums/variant.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +143 -27
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.13.0](https://github.com/42maru-ai/maru-design2/compare/v2.12.5...v2.13.0) (2024-07-23)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* :label: Skeleton - ADD types ([b722d49](https://github.com/42maru-ai/maru-design2/commit/b722d49eea45c143ca33b703ea80e4c8c635c4e3))
|
|
9
|
+
* :memo: Skeleton - ADD documentation ([82b3c9f](https://github.com/42maru-ai/maru-design2/commit/82b3c9f563eb2164d059493b0574348d125abd5a))
|
|
10
|
+
* :sparkles: Skeleton - ADD skeleton ui ([ed14fe9](https://github.com/42maru-ai/maru-design2/commit/ed14fe9c323168bda479165ef7d8aac4cf6e4a24))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* :adhesive_bandage: Radio - FIX code review feedback ([c24f98a](https://github.com/42maru-ai/maru-design2/commit/c24f98a83e9670f027f977e3c005c8ca98365ab8))
|
|
16
|
+
* :adhesive_bandage: Skeleton - FIX code review feedback ([b920e78](https://github.com/42maru-ai/maru-design2/commit/b920e78d379e3f2bc95ca1f897097649ac353957))
|
|
17
|
+
* :adhesive_bandage: Skeleton - FIX code review feedback ([3d169fa](https://github.com/42maru-ai/maru-design2/commit/3d169fa43974650d888d19abda79165328db8cff))
|
|
18
|
+
* :bento: Icon - ADD annotator icons [#243](https://github.com/42maru-ai/maru-design2/issues/243) ([ac41087](https://github.com/42maru-ai/maru-design2/commit/ac410875d96448e256a6eb4349ca305653236e3f))
|
|
19
|
+
* :bug: Radio - FIX input id ([b555a2d](https://github.com/42maru-ai/maru-design2/commit/b555a2d2b8dbf3e98b65e00de24da3c2176be5f1))
|
|
20
|
+
* :coffin: Skeleton - REMOVE unused code ([dc2e17d](https://github.com/42maru-ai/maru-design2/commit/dc2e17d508ab5170045912d9d6b658bd27490296))
|
|
21
|
+
|
|
22
|
+
## [2.12.5](https://github.com/42maru-ai/maru-design2/compare/v2.12.4...v2.12.5) (2024-07-18)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Bug Fixes
|
|
26
|
+
|
|
27
|
+
* :bug: Table - UPDATE header scroll cond. to data fetching ([6f7061e](https://github.com/42maru-ai/maru-design2/commit/6f7061ec4a3a8fce8e06a5e84b7da70fe530a5e0))
|
|
28
|
+
|
|
3
29
|
## [2.12.4](https://github.com/42maru-ai/maru-design2/compare/v2.12.3...v2.12.4) (2024-07-18)
|
|
4
30
|
|
|
5
31
|
|
|
@@ -138,10 +138,12 @@ export declare const ICONS: {
|
|
|
138
138
|
readonly FileX02_s3220: "FileX02_s3220";
|
|
139
139
|
readonly File_s1611: "File_s1611";
|
|
140
140
|
readonly File_s2420: "File_s2420";
|
|
141
|
+
readonly File_s3020: "File_s3020";
|
|
141
142
|
readonly FilterLines_s1815: "FilterLines_s1815";
|
|
142
143
|
readonly FolderUpload_s1615: "FolderUpload_s1615";
|
|
143
144
|
readonly FolderUpload_s2420: "FolderUpload_s2420";
|
|
144
145
|
readonly Folder_s2420: "Folder_s2420";
|
|
146
|
+
readonly Folder_s2820: "Folder_s2820";
|
|
145
147
|
readonly Globe01_s1615: "Globe01_s1615";
|
|
146
148
|
readonly Grabber_s1612: "Grabber_s1612";
|
|
147
149
|
readonly GraduationHat01_s1615: "GraduationHat01_s1615";
|
|
@@ -224,6 +226,7 @@ export declare const ICONS: {
|
|
|
224
226
|
readonly XCircle_s1613: "XCircle_s1613";
|
|
225
227
|
readonly XCircle_s2420: "XCircle_s2420";
|
|
226
228
|
readonly XDiamondBg_s2415: "XDiamondBg_s2415";
|
|
229
|
+
readonly X_s14: "X_s14";
|
|
227
230
|
readonly X_s1613: "X_s1613";
|
|
228
231
|
readonly X_s2420: "X_s2420";
|
|
229
232
|
readonly Zap_s1812: "Zap_s1812";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function Contents(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Skeleton';
|
package/dist/enums/variant.d.ts
CHANGED
|
@@ -4,3 +4,5 @@ export declare const CHIP_VARIANTS: readonly ["default", "outline", "dot"];
|
|
|
4
4
|
export type TChipVariant = (typeof CHIP_VARIANTS)[number];
|
|
5
5
|
export declare const TOAST_VARIANTS: readonly ["success", "warning", "danger"];
|
|
6
6
|
export type TToastVariant = (typeof TOAST_VARIANTS)[number];
|
|
7
|
+
export declare const SKELETON_VARIANTS: readonly ["frame"];
|
|
8
|
+
export type TSkeletonVariant = (typeof SKELETON_VARIANTS)[number];
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export * from './components/atoms/popover';
|
|
|
8
8
|
export * from './components/atoms/radio';
|
|
9
9
|
export * from './components/atoms/toggle';
|
|
10
10
|
export * from './components/atoms/tooltip';
|
|
11
|
+
export * from './components/atoms/skeleton';
|
|
11
12
|
export * from './components/molecules/calendar';
|
|
12
13
|
export * from './components/molecules/dropdown';
|
|
13
14
|
export * from './components/molecules/modal';
|
package/dist/index.js
CHANGED
|
@@ -84,11 +84,11 @@ function styleInject(css, ref) {
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
var css_248z$
|
|
88
|
-
styleInject(css_248z$
|
|
87
|
+
var css_248z$h = "* {\n /* HTML5 display-role reset for older browsers */\n}\n* html,\n* body,\n* div,\n* span,\n* applet,\n* object,\n* iframe,\n* h1,\n* h2,\n* h3,\n* h4,\n* h5,\n* h6,\n* p,\n* blockquote,\n* pre,\n* a,\n* abbr,\n* acronym,\n* address,\n* big,\n* cite,\n* code,\n* del,\n* dfn,\n* em,\n* img,\n* ins,\n* kbd,\n* q,\n* s,\n* samp,\n* small,\n* strike,\n* strong,\n* sub,\n* sup,\n* tt,\n* var,\n* b,\n* u,\n* i,\n* center,\n* dl,\n* dt,\n* dd,\n* ol,\n* ul,\n* li,\n* fieldset,\n* form,\n* label,\n* legend,\n* table,\n* caption,\n* tbody,\n* tfoot,\n* thead,\n* tr,\n* th,\n* td,\n* article,\n* aside,\n* canvas,\n* details,\n* embed,\n* figure,\n* figcaption,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* output,\n* ruby,\n* section,\n* summary,\n* time,\n* mark,\n* audio,\n* video {\n padding: 0;\n border: 0;\n margin: 0;\n font: inherit;\n font-size: 100%;\n vertical-align: baseline;\n}\n* article,\n* aside,\n* details,\n* figcaption,\n* figure,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* section {\n display: block;\n}\n* ol,\n* ul {\n list-style: none;\n}\n* blockquote,\n* q {\n quotes: none;\n}\n* blockquote::before,\n* blockquote::after,\n* q::before,\n* q::after {\n content: \"\";\n content: none;\n}\n* table {\n border-collapse: collapse;\n border-spacing: 0;\n}\n* html {\n box-sizing: border-box;\n}\n* *,\n* *::before,\n* *::after {\n box-sizing: inherit;\n}";
|
|
88
|
+
styleInject(css_248z$h);
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$g = ".scrollbar, * {\n scrollbar-track-color: #e4e4e4;\n scrollbar-arrow-color: #e4e4e4;\n scrollbar-3dlight-color: #e4e4e4;\n scrollbar-highlight-color: #e4e4e4;\n scrollbar-shadow-color: #e4e4e4;\n scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n background: inherit;\n width: 6px;\n height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n background-color: #e4e4e4;\n border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n display: none;\n}\n\n@font-face {\n font-family: \"Pretendard\";\n src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n:root {\n --primary: var(--p);\n --primary-50-per: var(--p-50-per);\n --primary-50: var(--p-50);\n --primary-20-per: var(--p-20-per);\n --primary-20: var(--p-20);\n --primary-10-per: var(--p-10-per);\n --primary-10: var(--p-10);\n}\n\n[data-theme=blue] {\n --p: #308acc;\n --p-50-per: #308acc80;\n --p-50: #97c4e5;\n --p-20-per: #308acc33;\n --p-20: #d6e8f5;\n --p-10-per: #308acc1a;\n --p-10: #eaf3fa;\n --p-05-per: #308acc0d;\n --p-05: #f5fafd;\n}\n\n[data-theme=green] {\n --p: #096412;\n --p-50-per: #09641280;\n --p-50: #84b188;\n --p-20-per: #09641233;\n --p-20: #cee0d0;\n --p-10-per: #0964121a;\n --p-10: #e6f0e7;\n --p-05-per: #0964120d;\n --p-05: #f3f7f3;\n}";
|
|
91
|
+
styleInject(css_248z$g);
|
|
92
92
|
|
|
93
93
|
function StyleProvider(_a) {
|
|
94
94
|
var children = _a.children,
|
|
@@ -2027,6 +2027,21 @@ var iconmap = {
|
|
|
2027
2027
|
"circles": [],
|
|
2028
2028
|
"rects": []
|
|
2029
2029
|
},
|
|
2030
|
+
"File_s3020": {
|
|
2031
|
+
"width": "30",
|
|
2032
|
+
"height": "30",
|
|
2033
|
+
"viewBox": "0 0 30 30",
|
|
2034
|
+
"fill": "none",
|
|
2035
|
+
"paths": [{
|
|
2036
|
+
"d": "M18.622 2.37768V8.16712C18.622 8.9521 18.622 9.34459 18.756 9.64441C18.8739 9.90814 19.062 10.1226 19.2934 10.2569C19.5564 10.4097 19.9008 10.4097 20.5894 10.4097H25.6687M26 13.1964V21.2722C26 23.6272 26 24.8046 25.5979 25.7041C25.2442 26.4953 24.6799 27.1386 23.9858 27.5417C23.1966 28 22.1636 28 20.0976 28H9.90243C7.83638 28 6.80336 28 6.01424 27.5417C5.32011 27.1386 4.75576 26.4953 4.40208 25.7041C4 24.8046 4 23.6272 4 21.2722V8.72776C4 6.37282 4 5.19536 4.40208 4.29589C4.75576 3.5047 5.32011 2.86143 6.01424 2.4583C6.80336 2 7.83638 2 9.90243 2H16.1771C17.0794 2 17.5305 2 17.9551 2.11618C18.3315 2.21919 18.6914 2.38908 19.0214 2.61963C19.3937 2.87966 19.7127 3.24328 20.3507 3.97052L24.2712 8.43919C24.9092 9.16642 25.2283 9.53004 25.4564 9.95438C25.6587 10.3306 25.8077 10.7408 25.8981 11.1698C26 11.6537 26 12.168 26 13.1964Z",
|
|
2037
|
+
"stroke": "#096412",
|
|
2038
|
+
"strokeWidth": "2",
|
|
2039
|
+
"strokeLinecap": "round",
|
|
2040
|
+
"strokeLinejoin": "round"
|
|
2041
|
+
}],
|
|
2042
|
+
"circles": [],
|
|
2043
|
+
"rects": []
|
|
2044
|
+
},
|
|
2030
2045
|
"FilterLines_s1815": {
|
|
2031
2046
|
"width": "18",
|
|
2032
2047
|
"height": "18",
|
|
@@ -2098,6 +2113,20 @@ var iconmap = {
|
|
|
2098
2113
|
"circles": [],
|
|
2099
2114
|
"rects": []
|
|
2100
2115
|
},
|
|
2116
|
+
"Folder_s2820": {
|
|
2117
|
+
"width": "28",
|
|
2118
|
+
"height": "28",
|
|
2119
|
+
"viewBox": "0 0 28 28",
|
|
2120
|
+
"fill": "none",
|
|
2121
|
+
"paths": [{
|
|
2122
|
+
"d": "M1 3.45466V20.5453C1 21.901 2.16406 23 3.6 23H24.4C25.8359 23 27 21.901 27 20.5453V6.40026C27 5.04459 25.8359 3.9456 24.4 3.9456H13.8789C13.1893 3.9456 12.528 3.19605 12.0404 2.73571L10.9635 1.71895C10.4759 1.25862 9.81456 1 9.125 1H3.6C2.16406 1 1 2.09899 1 3.45466Z",
|
|
2123
|
+
"stroke": "#BDBDBD",
|
|
2124
|
+
"strokeWidth": "2",
|
|
2125
|
+
"strokeLinecap": "round"
|
|
2126
|
+
}],
|
|
2127
|
+
"circles": [],
|
|
2128
|
+
"rects": []
|
|
2129
|
+
},
|
|
2101
2130
|
"Globe01_s1615": {
|
|
2102
2131
|
"width": "16",
|
|
2103
2132
|
"height": "16",
|
|
@@ -3475,6 +3504,20 @@ var iconmap = {
|
|
|
3475
3504
|
"fill": "#E53E3E"
|
|
3476
3505
|
}]
|
|
3477
3506
|
},
|
|
3507
|
+
"X_s14": {
|
|
3508
|
+
"width": "14",
|
|
3509
|
+
"height": "14",
|
|
3510
|
+
"viewBox": "0 0 14 14",
|
|
3511
|
+
"fill": "none",
|
|
3512
|
+
"paths": [{
|
|
3513
|
+
"d": "M9.91634 4.5835L4.08301 10.4168M4.08301 4.5835L9.91634 10.4168",
|
|
3514
|
+
"stroke": "#8C8C8C",
|
|
3515
|
+
"strokeLinecap": "round",
|
|
3516
|
+
"strokeLinejoin": "round"
|
|
3517
|
+
}],
|
|
3518
|
+
"circles": [],
|
|
3519
|
+
"rects": []
|
|
3520
|
+
},
|
|
3478
3521
|
"X_s1613": {
|
|
3479
3522
|
"width": "16",
|
|
3480
3523
|
"height": "16",
|
|
@@ -3655,10 +3698,12 @@ var ICONS = {
|
|
|
3655
3698
|
"FileX02_s3220": "FileX02_s3220",
|
|
3656
3699
|
"File_s1611": "File_s1611",
|
|
3657
3700
|
"File_s2420": "File_s2420",
|
|
3701
|
+
"File_s3020": "File_s3020",
|
|
3658
3702
|
"FilterLines_s1815": "FilterLines_s1815",
|
|
3659
3703
|
"FolderUpload_s1615": "FolderUpload_s1615",
|
|
3660
3704
|
"FolderUpload_s2420": "FolderUpload_s2420",
|
|
3661
3705
|
"Folder_s2420": "Folder_s2420",
|
|
3706
|
+
"Folder_s2820": "Folder_s2820",
|
|
3662
3707
|
"Globe01_s1615": "Globe01_s1615",
|
|
3663
3708
|
"Grabber_s1612": "Grabber_s1612",
|
|
3664
3709
|
"GraduationHat01_s1615": "GraduationHat01_s1615",
|
|
@@ -3741,6 +3786,7 @@ var ICONS = {
|
|
|
3741
3786
|
"XCircle_s1613": "XCircle_s1613",
|
|
3742
3787
|
"XCircle_s2420": "XCircle_s2420",
|
|
3743
3788
|
"XDiamondBg_s2415": "XDiamondBg_s2415",
|
|
3789
|
+
"X_s14": "X_s14",
|
|
3744
3790
|
"X_s1613": "X_s1613",
|
|
3745
3791
|
"X_s2420": "X_s2420",
|
|
3746
3792
|
"Zap_s1812": "Zap_s1812",
|
|
@@ -3814,8 +3860,8 @@ function Icon(_a) {
|
|
|
3814
3860
|
}));
|
|
3815
3861
|
}
|
|
3816
3862
|
|
|
3817
|
-
var css_248z$e = ".size-small {\n padding: 5px 16px;\n border-radius: 4px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n\n.size-normal {\n padding: 8px 16px;\n border-radius: 6px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n\n.size-large {\n padding: 10px 16px;\n border-radius: 6px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n\n.maru-button {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n border: 0;\n cursor: pointer;\n gap: 6px;\n}\n.maru-button:focus-within {\n outline: none;\n}\n.maru-button:disabled {\n cursor: default;\n opacity: 0.5;\n pointer-events: none;\n}\n.maru-button-primary-default {\n background-color: var(--p);\n color: white;\n}\n.maru-button-primary-default:hover {\n box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n box-shadow: none;\n background-color: var(--p-10);\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-default-light {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n box-shadow: none;\n background-color: var(--p);\n color: white;\n}\n.maru-button-primary-outline {\n background-color: white;\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n box-shadow: none;\n background-color: var(--p-20);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n box-shadow: 0 0 0 1px var(--p) inset, 0 0 6px var(--p);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n box-shadow: none;\n background-color: var(--p-10);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n background-color: transparent;\n color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n background-color: var(--p-10);\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-secondary-default {\n background-color: #8c8c8c;\n color: white;\n background-color: #e4e4e4;\n color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n box-shadow: none;\n background-color: #fafafa;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default:hover {\n box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n box-shadow: none;\n background-color: #e4e4e4;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default-light {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n box-shadow: none;\n background-color: #8c8c8c;\n color: white;\n}\n.maru-button-secondary-outline {\n background-color: white;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n box-shadow: none;\n background-color: #e4e4e4;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n background-color: transparent;\n color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-button-positive-default {\n background-color: #58c5a6;\n color: white;\n}\n.maru-button-positive-default:hover {\n box-shadow: 0 0 6px #58c5a6;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n box-shadow: none;\n background-color: #eef9f6;\n color: #58c5a6;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-default-light {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-button-positive-default-light:hover {\n box-shadow: 0 0 6px rgba(88, 196, 166, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n box-shadow: none;\n background-color: #58c5a6;\n color: white;\n}\n.maru-button-positive-outline {\n background-color: white;\n color: #58c5a6;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-outline:hover {\n box-shadow: 0 0 6px #def3ed;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n box-shadow: none;\n background-color: #def3ed;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-text {\n background-color: transparent;\n color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n background-color: #eef9f6;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-button-warning-default {\n background-color: #ffb020;\n color: white;\n}\n.maru-button-warning-default:hover {\n box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n box-shadow: none;\n background-color: #ffefd2;\n color: #ffb020;\n}\n.maru-button-warning-default-light {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n box-shadow: none;\n background-color: #ffb020;\n color: white;\n}\n.maru-button-warning-outline {\n background-color: white;\n color: #ffb020;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n box-shadow: none;\n background-color: #ffefd2;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n background-color: transparent;\n color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n background-color: #fff7e9;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-button-danger-default {\n background-color: #e53e3e;\n color: white;\n}\n.maru-button-danger-default:hover {\n box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n box-shadow: none;\n background-color: #fcecec;\n color: #e53e3e;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-default-light {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n box-shadow: none;\n background-color: #e53e3e;\n color: white;\n}\n.maru-button-danger-outline {\n background-color: white;\n color: #e53e3e;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n box-shadow: none;\n background-color: #fad8d8;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n background-color: transparent;\n color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n background-color: #fcecec;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-button-success-default {\n background-color: #308acc;\n color: white;\n}\n.maru-button-success-default:hover {\n box-shadow: 0 0 6px #308acc;\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n box-shadow: none;\n background-color: #eaf3fa;\n color: #308acc;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-default-light {\n background-color: #eaf3fa;\n color: #308acc;\n}\n.maru-button-success-default-light:hover {\n box-shadow: 0 0 6px rgba(48, 138, 204, 0.5019607843);\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n box-shadow: none;\n background-color: #308acc;\n color: white;\n}\n.maru-button-success-outline {\n background-color: white;\n color: #308acc;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-outline:hover {\n box-shadow: 0 0 6px #d6e8f5;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n box-shadow: none;\n background-color: #d6e8f5;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-text {\n background-color: transparent;\n color: #308acc;\n}\n.maru-button-success-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n background-color: #eaf3fa;\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n background-color: #eaf3fa;\n color: #308acc;\n}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n padding: 5px 12px;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline {\n background-color: white;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:hover,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:hover {\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:focus-visible, .maru-button-with-start-icon.size-small.maru-button-secondary-outline:active,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:focus-visible,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:active {\n background-color: var(--p-10);\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n padding: 8px 12px;\n}\n\n.maru-button-only-icon.size-normal {\n padding: 0;\n justify-content: center;\n background-color: transparent;\n}\n.maru-button-only-icon.size-normal:hover, .maru-button-only-icon.size-normal:focus-visible, .maru-button-only-icon.size-normal:active {\n box-shadow: none;\n background-color: transparent;\n}";
|
|
3818
|
-
styleInject(css_248z$
|
|
3863
|
+
var css_248z$f = ".size-small {\n padding: 5px 16px;\n border-radius: 4px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n\n.size-normal {\n padding: 8px 16px;\n border-radius: 6px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n\n.size-large {\n padding: 10px 16px;\n border-radius: 6px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n\n.maru-button {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n border: 0;\n cursor: pointer;\n gap: 6px;\n}\n.maru-button:focus-within {\n outline: none;\n}\n.maru-button:disabled {\n cursor: default;\n opacity: 0.5;\n pointer-events: none;\n}\n.maru-button-primary-default {\n background-color: var(--p);\n color: white;\n}\n.maru-button-primary-default:hover {\n box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n box-shadow: none;\n background-color: var(--p-10);\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-default-light {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n box-shadow: none;\n background-color: var(--p);\n color: white;\n}\n.maru-button-primary-outline {\n background-color: white;\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n box-shadow: none;\n background-color: var(--p-20);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n box-shadow: 0 0 0 1px var(--p) inset, 0 0 6px var(--p);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n box-shadow: none;\n background-color: var(--p-10);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n background-color: transparent;\n color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n background-color: var(--p-10);\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-button-secondary-default {\n background-color: #8c8c8c;\n color: white;\n background-color: #e4e4e4;\n color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n box-shadow: none;\n background-color: #fafafa;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default:hover {\n box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n box-shadow: none;\n background-color: #e4e4e4;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-default-light {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n box-shadow: none;\n background-color: #8c8c8c;\n color: white;\n}\n.maru-button-secondary-outline {\n background-color: white;\n color: #8c8c8c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n box-shadow: none;\n background-color: #e4e4e4;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n background-color: transparent;\n color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-button-positive-default {\n background-color: #58c5a6;\n color: white;\n}\n.maru-button-positive-default:hover {\n box-shadow: 0 0 6px #58c5a6;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n box-shadow: none;\n background-color: #eef9f6;\n color: #58c5a6;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-default-light {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-button-positive-default-light:hover {\n box-shadow: 0 0 6px rgba(88, 196, 166, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n box-shadow: none;\n background-color: #58c5a6;\n color: white;\n}\n.maru-button-positive-outline {\n background-color: white;\n color: #58c5a6;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-outline:hover {\n box-shadow: 0 0 6px #def3ed;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n box-shadow: none;\n background-color: #def3ed;\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-text {\n background-color: transparent;\n color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n background-color: #eef9f6;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-button-warning-default {\n background-color: #ffb020;\n color: white;\n}\n.maru-button-warning-default:hover {\n box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n box-shadow: none;\n background-color: #ffefd2;\n color: #ffb020;\n}\n.maru-button-warning-default-light {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n box-shadow: none;\n background-color: #ffb020;\n color: white;\n}\n.maru-button-warning-outline {\n background-color: white;\n color: #ffb020;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n box-shadow: none;\n background-color: #ffefd2;\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n background-color: transparent;\n color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n background-color: #fff7e9;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-button-danger-default {\n background-color: #e53e3e;\n color: white;\n}\n.maru-button-danger-default:hover {\n box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n box-shadow: none;\n background-color: #fcecec;\n color: #e53e3e;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-default-light {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n box-shadow: none;\n background-color: #e53e3e;\n color: white;\n}\n.maru-button-danger-outline {\n background-color: white;\n color: #e53e3e;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n box-shadow: none;\n background-color: #fad8d8;\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n background-color: transparent;\n color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n background-color: #fcecec;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-button-success-default {\n background-color: #308acc;\n color: white;\n}\n.maru-button-success-default:hover {\n box-shadow: 0 0 6px #308acc;\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n box-shadow: none;\n background-color: #eaf3fa;\n color: #308acc;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-default-light {\n background-color: #eaf3fa;\n color: #308acc;\n}\n.maru-button-success-default-light:hover {\n box-shadow: 0 0 6px rgba(48, 138, 204, 0.5019607843);\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n box-shadow: none;\n background-color: #308acc;\n color: white;\n}\n.maru-button-success-outline {\n background-color: white;\n color: #308acc;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-outline:hover {\n box-shadow: 0 0 6px #d6e8f5;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n box-shadow: none;\n background-color: #d6e8f5;\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-text {\n background-color: transparent;\n color: #308acc;\n}\n.maru-button-success-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #8c8c8c inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n background-color: #eaf3fa;\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n background-color: #eaf3fa;\n color: #308acc;\n}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n padding: 5px 12px;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline {\n background-color: white;\n color: #bdbdbd;\n box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:hover,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:hover {\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:focus-visible, .maru-button-with-start-icon.size-small.maru-button-secondary-outline:active,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:focus-visible,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:active {\n background-color: var(--p-10);\n color: var(--p);\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n padding: 8px 12px;\n}\n\n.maru-button-only-icon.size-normal {\n padding: 0;\n justify-content: center;\n background-color: transparent;\n}\n.maru-button-only-icon.size-normal:hover, .maru-button-only-icon.size-normal:focus-visible, .maru-button-only-icon.size-normal:active {\n box-shadow: none;\n background-color: transparent;\n}";
|
|
3864
|
+
styleInject(css_248z$f);
|
|
3819
3865
|
|
|
3820
3866
|
var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
3821
3867
|
var children = _a.children,
|
|
@@ -3976,8 +4022,8 @@ function uuidv4(length) {
|
|
|
3976
4022
|
}
|
|
3977
4023
|
}
|
|
3978
4024
|
|
|
3979
|
-
var css_248z$
|
|
3980
|
-
styleInject(css_248z$
|
|
4025
|
+
var css_248z$e = ".maru-checkbox-wrapper {\n display: flex;\n align-items: center;\n flex-direction: row;\n width: fit-content;\n}\n\n.maru-checkbox-wrapper-2px {\n gap: 2px;\n}\n\n.maru-checkbox-wrapper-4px {\n gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n}\n\n.maru-checkbox {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.maru-checkbox-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n cursor: default;\n}";
|
|
4026
|
+
styleInject(css_248z$e);
|
|
3981
4027
|
|
|
3982
4028
|
var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
3983
4029
|
var _b;
|
|
@@ -4042,8 +4088,8 @@ Checkbox.defaultProps = {
|
|
|
4042
4088
|
};
|
|
4043
4089
|
Checkbox.displayName = 'Checkbox';
|
|
4044
4090
|
|
|
4045
|
-
var css_248z$
|
|
4046
|
-
styleInject(css_248z$
|
|
4091
|
+
var css_248z$d = ".maru-chip {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n border-radius: 10px;\n}\n.maru-chip-size-small {\n padding: 1.5px 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n}\n.maru-chip-size-normal {\n padding: 2px 10px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n}\n.maru-chip-primary-default {\n background-color: var(--p-10);\n color: var(--p);\n}\n.maru-chip-primary-default.maru-chip-warning-default, .maru-chip-primary-default.maru-chip-positive-default {\n background-color: var(--p-20);\n}\n.maru-chip-primary-outline {\n background-color: var(--p-10);\n border: 1px solid var(--p);\n color: var(--p);\n}\n.maru-chip-primary-outline.maru-chip-warning-default, .maru-chip-primary-outline.maru-chip-positive-default {\n background-color: var(--p-20);\n}\n.maru-chip-primary-dot {\n color: var(--p);\n gap: 2px;\n padding: unset;\n}\n.maru-chip-secondary-default {\n background-color: #fafafa;\n color: #8c8c8c;\n}\n.maru-chip-secondary-default.maru-chip-warning-default, .maru-chip-secondary-default.maru-chip-positive-default {\n background-color: #e4e4e4;\n}\n.maru-chip-secondary-outline {\n background-color: #fafafa;\n border: 1px solid #8c8c8c;\n color: #8c8c8c;\n}\n.maru-chip-secondary-outline.maru-chip-warning-default, .maru-chip-secondary-outline.maru-chip-positive-default {\n background-color: #e4e4e4;\n}\n.maru-chip-secondary-dot {\n color: #8c8c8c;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-positive-default {\n background-color: #eef9f6;\n color: #58c5a6;\n}\n.maru-chip-positive-default.maru-chip-warning-default, .maru-chip-positive-default.maru-chip-positive-default {\n background-color: #def3ed;\n}\n.maru-chip-positive-outline {\n background-color: #eef9f6;\n border: 1px solid #58c5a6;\n color: #58c5a6;\n}\n.maru-chip-positive-outline.maru-chip-warning-default, .maru-chip-positive-outline.maru-chip-positive-default {\n background-color: #def3ed;\n}\n.maru-chip-positive-dot {\n color: #58c5a6;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-warning-default {\n background-color: #fff7e9;\n color: #ffb020;\n}\n.maru-chip-warning-default.maru-chip-warning-default, .maru-chip-warning-default.maru-chip-positive-default {\n background-color: #ffefd2;\n}\n.maru-chip-warning-outline {\n background-color: #fff7e9;\n border: 1px solid #ffb020;\n color: #ffb020;\n}\n.maru-chip-warning-outline.maru-chip-warning-default, .maru-chip-warning-outline.maru-chip-positive-default {\n background-color: #ffefd2;\n}\n.maru-chip-warning-dot {\n color: #ffb020;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-danger-default {\n background-color: #fcecec;\n color: #e53e3e;\n}\n.maru-chip-danger-default.maru-chip-warning-default, .maru-chip-danger-default.maru-chip-positive-default {\n background-color: #fad8d8;\n}\n.maru-chip-danger-outline {\n background-color: #fcecec;\n border: 1px solid #e53e3e;\n color: #e53e3e;\n}\n.maru-chip-danger-outline.maru-chip-warning-default, .maru-chip-danger-outline.maru-chip-positive-default {\n background-color: #fad8d8;\n}\n.maru-chip-danger-dot {\n color: #e53e3e;\n gap: 2px;\n padding: unset;\n}\n.maru-chip-success-default {\n background-color: #eaf3fa;\n color: #308acc;\n}\n.maru-chip-success-default.maru-chip-warning-default, .maru-chip-success-default.maru-chip-positive-default {\n background-color: #d6e8f5;\n}\n.maru-chip-success-outline {\n background-color: #eaf3fa;\n border: 1px solid #308acc;\n color: #308acc;\n}\n.maru-chip-success-outline.maru-chip-warning-default, .maru-chip-success-outline.maru-chip-positive-default {\n background-color: #d6e8f5;\n}\n.maru-chip-success-dot {\n color: #308acc;\n gap: 2px;\n padding: unset;\n}";
|
|
4092
|
+
styleInject(css_248z$d);
|
|
4047
4093
|
|
|
4048
4094
|
function Chip(_a) {
|
|
4049
4095
|
var children = _a.children,
|
|
@@ -4066,8 +4112,8 @@ function Chip(_a) {
|
|
|
4066
4112
|
}));
|
|
4067
4113
|
}
|
|
4068
4114
|
|
|
4069
|
-
var css_248z$
|
|
4070
|
-
styleInject(css_248z$
|
|
4115
|
+
var css_248z$c = ".maru-input-wrapper.disabled input {\n opacity: 0.5;\n pointer-events: none;\n}\n.maru-input-wrapper.disabled .maru-input-default:hover,\n.maru-input-wrapper.disabled .maru-input-default:focus-within,\n.maru-input-wrapper.disabled .maru-input-underline:hover,\n.maru-input-wrapper.disabled .maru-input-underline:focus-within {\n border-color: transparent;\n outline: transparent;\n}\n.maru-input-wrapper .maru-input-label {\n margin-bottom: 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n.maru-input-wrapper .maru-input-label label {\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n border: 1px solid #e4e4e4;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n height: 37px;\n padding: 8px 10px 8px 14px;\n border-radius: 6px;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n border: 2px solid #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n border: 2px solid #e53e3e;\n}\n.maru-input-wrapper .maru-input.errored:focus-visible, .maru-input-wrapper .maru-input.errored:focus-within {\n border: 2px solid #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input:hover {\n border: 2px solid #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input > input {\n width: 100%;\n border: unset;\n outline: unset;\n background-color: transparent;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input-start-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n width: 16px;\n height: 16px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:last-of-type {\n margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n color: #e53e3e;\n}";
|
|
4116
|
+
styleInject(css_248z$c);
|
|
4071
4117
|
|
|
4072
4118
|
var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
|
|
4073
4119
|
var errorMessage = _a.errorMessage,
|
|
@@ -6017,8 +6063,8 @@ function CreatePortal(_a) {
|
|
|
6017
6063
|
return (parentElement || styleRootElement) && /*#__PURE__*/ReactDOM__default.createPortal(children, parentElement ? parentElement.current : styleRootElement);
|
|
6018
6064
|
}
|
|
6019
6065
|
|
|
6020
|
-
var css_248z$
|
|
6021
|
-
styleInject(css_248z$
|
|
6066
|
+
var css_248z$b = ".maru-popover-background {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 1611;\n}\n\n.maru-popover {\n border-radius: 4px;\n background-color: white;\n outline: none;\n box-shadow: 0px 0px 4px #e4e4e4;\n}";
|
|
6067
|
+
styleInject(css_248z$b);
|
|
6022
6068
|
|
|
6023
6069
|
function Popover(_a) {
|
|
6024
6070
|
var anchorEl = _a.anchorEl,
|
|
@@ -6106,8 +6152,8 @@ function Popover(_a) {
|
|
|
6106
6152
|
}) : PopoverBody;
|
|
6107
6153
|
}
|
|
6108
6154
|
|
|
6109
|
-
var css_248z$
|
|
6110
|
-
styleInject(css_248z$
|
|
6155
|
+
var css_248z$a = ".maru-radio-wrapper-8px {\n display: flex;\n gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n display: flex;\n gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n display: flex;\n gap: 2px;\n}\n\n.maru-radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid #5c5c5c;\n position: relative;\n display: inline-block;\n cursor: pointer;\n}\n.maru-radio:hover::before, .maru-radio:checked::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: #5c5c5c;\n}\n\n.maru-radio-primary {\n border: 2px solid var(--p);\n}\n.maru-radio-primary:hover::before, .maru-radio-primary:checked::before {\n background-color: var(--p);\n}\n\n.maru-radio-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n cursor: default;\n opacity: 0.5;\n}";
|
|
6156
|
+
styleInject(css_248z$a);
|
|
6111
6157
|
|
|
6112
6158
|
var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
6113
6159
|
var checked = _a.checked,
|
|
@@ -6119,19 +6165,20 @@ var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
6119
6165
|
props = __rest(_a, ["checked", "color", "gap", "label"]);
|
|
6120
6166
|
var hashId = uuidv4(4);
|
|
6121
6167
|
var combineRef = useCombineRef(ref);
|
|
6168
|
+
var inputId = props.id || "maru-radio-id-".concat(hashId);
|
|
6122
6169
|
return jsxs("div", __assign({
|
|
6123
6170
|
className: classNames("maru-radio-wrapper-".concat(gap), props.className)
|
|
6124
6171
|
}, {
|
|
6125
|
-
children: [jsx("input", __assign({
|
|
6172
|
+
children: [jsx("input", __assign({}, props, {
|
|
6126
6173
|
ref: combineRef,
|
|
6127
|
-
id:
|
|
6174
|
+
id: inputId,
|
|
6128
6175
|
type: "radio",
|
|
6129
6176
|
checked: checked == null ? undefined : !!checked,
|
|
6130
6177
|
className: classNames('maru-radio', {
|
|
6131
6178
|
'maru-radio-primary': color === 'primary'
|
|
6132
6179
|
})
|
|
6133
|
-
}
|
|
6134
|
-
htmlFor:
|
|
6180
|
+
})), label && jsx("label", __assign({
|
|
6181
|
+
htmlFor: inputId,
|
|
6135
6182
|
className: classNames('maru-radio-label', {
|
|
6136
6183
|
'label-disabled': props.disabled
|
|
6137
6184
|
})
|
|
@@ -6148,8 +6195,8 @@ Radio.defaultProps = {
|
|
|
6148
6195
|
};
|
|
6149
6196
|
Radio.displayName = 'Radio';
|
|
6150
6197
|
|
|
6151
|
-
var css_248z$8 = ".maru-toggle-wrapper {\n display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n position: relative;\n width: 30.67px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 11;\n cursor: pointer;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n background-color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n position: absolute;\n width: 30.67px;\n height: 18px;\n border-radius: 17.5px;\n background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-primary {\n background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-secondary {\n background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-positive {\n background-color: #58c5a6;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-warning {\n background-color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-danger {\n background-color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-success {\n background-color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n position: absolute;\n width: 15.33px;\n height: 15.33px;\n border-radius: 50%;\n transition: all 0.2s ease-in-out;\n background-color: white;\n top: 1.33px;\n right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n transform: translateX(12.67px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle {\n cursor: default;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-rail {\n background-color: #e4e4e4 !important;\n}\n\n.maru-toggle-text {\n position: relative;\n width: 66px;\n height: 23px;\n background-color: white;\n border-radius: 62px;\n overflow: hidden;\n}\n.maru-toggle-text-primary {\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb {\n background-color: var(--p);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-button {\n color: var(--p);\n}\n.maru-toggle-text-primary .toggle-active {\n color: white;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px var(--p-50) inset;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: var(--p-50);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-button {\n color: var(--p-50);\n cursor: default;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-secondary {\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb {\n background-color: #8c8c8c;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-button {\n color: #8c8c8c;\n}\n.maru-toggle-text-secondary .toggle-active {\n color: white;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #bdbdbd;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #bdbdbd;\n cursor: default;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-positive {\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n background-color: #58c5a6;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n color: #58c5a6;\n}\n.maru-toggle-text-positive .toggle-active {\n color: white;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #abe1d2 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #abe1d2;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #eef9f6;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #eef9f6;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #abe1d2;\n cursor: default;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-warning {\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb {\n background-color: #ffb020;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-button {\n color: #ffb020;\n}\n.maru-toggle-text-warning .toggle-active {\n color: white;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #ffd78f inset;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #ffd78f;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #ffd78f;\n cursor: default;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-danger {\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb {\n background-color: #e53e3e;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-button {\n color: #e53e3e;\n}\n.maru-toggle-text-danger .toggle-active {\n color: white;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #f29e9e inset;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #f29e9e;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #f29e9e;\n cursor: default;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-success {\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb {\n background-color: #308acc;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-button {\n color: #308acc;\n}\n.maru-toggle-text-success .toggle-active {\n color: white;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #97c4e5 inset;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #97c4e5;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #97c4e5;\n cursor: default;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text .maru-toggle-text-thumb {\n top: 0;\n left: 0;\n position: absolute;\n width: 33px;\n height: 23px;\n border-radius: 62px;\n transition: all 0.2s ease-in-out;\n z-index: 1;\n}\n\n.slide-after {\n transform: translateX(33px);\n}\n\n.maru-toggle-text-button-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n\n.maru-toggle-text-button {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 10px;\n letter-spacing: -0.4px;\n font-weight: 700;\n position: relative;\n width: 33px;\n height: 23px;\n cursor: pointer;\n z-index: 2;\n background-color: transparent;\n border: 0;\n transition: color 0.4s ease;\n}";
|
|
6152
|
-
styleInject(css_248z$
|
|
6198
|
+
var css_248z$9 = ".maru-toggle-wrapper {\n display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n position: relative;\n width: 30.67px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 11;\n cursor: pointer;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n background-color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n position: absolute;\n width: 30.67px;\n height: 18px;\n border-radius: 17.5px;\n background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-primary {\n background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-secondary {\n background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-positive {\n background-color: #58c5a6;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-warning {\n background-color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-danger {\n background-color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-success {\n background-color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n position: absolute;\n width: 15.33px;\n height: 15.33px;\n border-radius: 50%;\n transition: all 0.2s ease-in-out;\n background-color: white;\n top: 1.33px;\n right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n transform: translateX(12.67px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle {\n cursor: default;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-rail {\n background-color: #e4e4e4 !important;\n}\n\n.maru-toggle-text {\n position: relative;\n width: 66px;\n height: 23px;\n background-color: white;\n border-radius: 62px;\n overflow: hidden;\n}\n.maru-toggle-text-primary {\n box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb {\n background-color: var(--p);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-button {\n color: var(--p);\n}\n.maru-toggle-text-primary .toggle-active {\n color: white;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px var(--p-50) inset;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: var(--p-50);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-button {\n color: var(--p-50);\n cursor: default;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-secondary {\n box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb {\n background-color: #8c8c8c;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-button {\n color: #8c8c8c;\n}\n.maru-toggle-text-secondary .toggle-active {\n color: white;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #bdbdbd;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #bdbdbd;\n cursor: default;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-positive {\n box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n background-color: #58c5a6;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n color: #58c5a6;\n}\n.maru-toggle-text-positive .toggle-active {\n color: white;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #abe1d2 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #abe1d2;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #eef9f6;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #eef9f6;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #abe1d2;\n cursor: default;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-warning {\n box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb {\n background-color: #ffb020;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-button {\n color: #ffb020;\n}\n.maru-toggle-text-warning .toggle-active {\n color: white;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #ffd78f inset;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #ffd78f;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #ffd78f;\n cursor: default;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-danger {\n box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb {\n background-color: #e53e3e;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-button {\n color: #e53e3e;\n}\n.maru-toggle-text-danger .toggle-active {\n color: white;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #f29e9e inset;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #f29e9e;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #f29e9e;\n cursor: default;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text-success {\n box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb {\n background-color: #308acc;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-button {\n color: #308acc;\n}\n.maru-toggle-text-success .toggle-active {\n color: white;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled {\n box-shadow: 0 0 0 1px #97c4e5 inset;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb {\n background-color: #97c4e5;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n box-shadow: -4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n box-shadow: 4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-button {\n color: #97c4e5;\n cursor: default;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .toggle-active {\n color: white;\n}\n.maru-toggle-text .maru-toggle-text-thumb {\n top: 0;\n left: 0;\n position: absolute;\n width: 33px;\n height: 23px;\n border-radius: 62px;\n transition: all 0.2s ease-in-out;\n z-index: 1;\n}\n\n.slide-after {\n transform: translateX(33px);\n}\n\n.maru-toggle-text-button-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n\n.maru-toggle-text-button {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 10px;\n letter-spacing: -0.4px;\n font-weight: 700;\n position: relative;\n width: 33px;\n height: 23px;\n cursor: pointer;\n z-index: 2;\n background-color: transparent;\n border: 0;\n transition: color 0.4s ease;\n}";
|
|
6199
|
+
styleInject(css_248z$9);
|
|
6153
6200
|
|
|
6154
6201
|
function Toggle(_a) {
|
|
6155
6202
|
var checked = _a.checked,
|
|
@@ -6235,8 +6282,8 @@ function Toggle(_a) {
|
|
|
6235
6282
|
});
|
|
6236
6283
|
}
|
|
6237
6284
|
|
|
6238
|
-
var css_248z$
|
|
6239
|
-
styleInject(css_248z$
|
|
6285
|
+
var css_248z$8 = ".maru-tooltip-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n padding: 6px;\n}\n\n.maru-tooltip {\n z-index: 1612;\n border-radius: 6px;\n padding: 6px 10px 6px 12px;\n display: none;\n background-color: rgba(0, 0, 0, 0.8);\n}\n.maru-tooltip[data-show=true] {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n color: white;\n white-space: pre-wrap;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n line-height: 140%;\n}";
|
|
6286
|
+
styleInject(css_248z$8);
|
|
6240
6287
|
|
|
6241
6288
|
function Tooltip(_a) {
|
|
6242
6289
|
var children = _a.children,
|
|
@@ -6318,6 +6365,75 @@ function Tooltip(_a) {
|
|
|
6318
6365
|
}));
|
|
6319
6366
|
}
|
|
6320
6367
|
|
|
6368
|
+
function Contents() {
|
|
6369
|
+
return jsxs("div", __assign({
|
|
6370
|
+
className: "maru-skeleton-contents"
|
|
6371
|
+
}, {
|
|
6372
|
+
children: [jsx("div", {
|
|
6373
|
+
className: "maru-skeleton-contents-text"
|
|
6374
|
+
}), jsx("div", {
|
|
6375
|
+
className: "maru-skeleton-contents-description"
|
|
6376
|
+
}), jsxs("div", __assign({
|
|
6377
|
+
className: "maru-skeleton-contents-grid-container"
|
|
6378
|
+
}, {
|
|
6379
|
+
children: [jsx("div", {
|
|
6380
|
+
className: "maru-skeleton-contents-grid"
|
|
6381
|
+
}), jsx("div", {
|
|
6382
|
+
className: "maru-skeleton-contents-grid"
|
|
6383
|
+
})]
|
|
6384
|
+
}))]
|
|
6385
|
+
}));
|
|
6386
|
+
}
|
|
6387
|
+
|
|
6388
|
+
var css_248z$7 = "@keyframes colorFade {\n 0%, 100% {\n background-color: #f7f7f7;\n }\n 50% {\n background-color: #ececec;\n }\n}\n.maru-skeleton {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: row;\n background-color: #fafafa;\n}\n.maru-skeleton .maru-skeleton-side-bar {\n width: 250px;\n height: 100%;\n border-radius: 0 20px 20px 0;\n background-color: #fafafa;\n box-shadow: 0 0 6px 0 #e4e4e4;\n padding: 27px 24px 24px 24px;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n gap: 14px;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper .maru-skeleton-logo {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper > div:last-child {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: column;\n gap: 5px;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper > div:last-child .maru-skeleton-sub-title {\n width: 50px;\n height: 10px;\n border-radius: 10px;\n animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper > div:last-child .maru-skeleton-title {\n width: 76px;\n height: 15px;\n border-radius: 10px;\n animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-menu-container {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: column;\n margin-top: 24px;\n}\n.maru-skeleton .maru-skeleton-menu-container .maru-skeleton-menu {\n width: 140px;\n height: 24px;\n border-radius: 10px;\n margin: 0 0 30px 11px;\n animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-menu-container .maru-skeleton-menu:first-child {\n width: 202px;\n height: 44px;\n margin: 0 0 22px 0;\n}\n.maru-skeleton .maru-skeleton-right-side {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: flex-start;\n align-items: stretch;\n flex-direction: column;\n}\n.maru-skeleton .maru-skeleton-right-side #maru-skeleton-header {\n width: 100%;\n height: 90px;\n box-shadow: 0 4px 6px -4px #e4e4e4;\n}\n.maru-skeleton .maru-skeleton-right-side #maru-skeleton-header.dense {\n height: 60px;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n flex-wrap: wrap;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents {\n width: 576px;\n height: 287px;\n box-shadow: 0 0 6px 0 #e4e4e4;\n margin: 77px 20px 20px 20px;\n border-radius: 10px;\n padding: 24px;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n flex-direction: column;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents .maru-skeleton-contents-text {\n width: 106px;\n height: 22px;\n border-radius: 10px;\n animation: colorFade 3s ease-in-out infinite;\n margin-bottom: 10px;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents .maru-skeleton-contents-description {\n width: 50px;\n height: 18px;\n border-radius: 10px;\n animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents .maru-skeleton-contents-grid-container {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n gap: 40px;\n margin-top: 20px;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents .maru-skeleton-contents-grid-container .maru-skeleton-contents-grid {\n width: 203px;\n height: 125px;\n border-radius: 10px;\n animation: colorFade 3s ease-in-out infinite;\n}";
|
|
6389
|
+
styleInject(css_248z$7);
|
|
6390
|
+
|
|
6391
|
+
function Skeleton(_a) {
|
|
6392
|
+
var _b = _a.variant,
|
|
6393
|
+
variant = _b === void 0 ? 'frame' : _b;
|
|
6394
|
+
return jsx(Fragment, {
|
|
6395
|
+
children: variant === 'frame' && jsxs("div", __assign({
|
|
6396
|
+
className: "maru-skeleton"
|
|
6397
|
+
}, {
|
|
6398
|
+
children: [jsxs("div", __assign({
|
|
6399
|
+
className: "maru-skeleton-side-bar"
|
|
6400
|
+
}, {
|
|
6401
|
+
children: [jsxs("div", __assign({
|
|
6402
|
+
className: "maru-skeleton-logo-wrapper"
|
|
6403
|
+
}, {
|
|
6404
|
+
children: [jsx("div", {
|
|
6405
|
+
className: "maru-skeleton-logo"
|
|
6406
|
+
}), jsxs("div", {
|
|
6407
|
+
children: [jsx("div", {
|
|
6408
|
+
className: "maru-skeleton-sub-title"
|
|
6409
|
+
}), jsx("div", {
|
|
6410
|
+
className: "maru-skeleton-title"
|
|
6411
|
+
})]
|
|
6412
|
+
})]
|
|
6413
|
+
})), jsxs("div", __assign({
|
|
6414
|
+
className: "maru-skeleton-menu-container"
|
|
6415
|
+
}, {
|
|
6416
|
+
children: [jsx("div", {
|
|
6417
|
+
className: "maru-skeleton-menu"
|
|
6418
|
+
}), jsx("div", {
|
|
6419
|
+
className: "maru-skeleton-menu"
|
|
6420
|
+
})]
|
|
6421
|
+
}))]
|
|
6422
|
+
})), jsxs("div", __assign({
|
|
6423
|
+
className: "maru-skeleton-right-side"
|
|
6424
|
+
}, {
|
|
6425
|
+
children: [jsx("header", {
|
|
6426
|
+
id: "maru-skeleton-header"
|
|
6427
|
+
}), jsx("div", __assign({
|
|
6428
|
+
className: "maru-skeleton-contents-container"
|
|
6429
|
+
}, {
|
|
6430
|
+
children: jsx(Contents, {})
|
|
6431
|
+
}))]
|
|
6432
|
+
}))]
|
|
6433
|
+
}))
|
|
6434
|
+
});
|
|
6435
|
+
}
|
|
6436
|
+
|
|
6321
6437
|
var reactIs = {exports: {}};
|
|
6322
6438
|
|
|
6323
6439
|
var reactIs_production_min = {};
|
|
@@ -24407,7 +24523,7 @@ function Table(_a) {
|
|
|
24407
24523
|
* setting table size
|
|
24408
24524
|
*/
|
|
24409
24525
|
useEffect(function () {
|
|
24410
|
-
if (tableBodyMaxHeight && tableWrapperRef.current && tableHeaderWrapperRef.current && tableBodyScrollWrapperRef.current && tableBodyWrapperRef.current) {
|
|
24526
|
+
if (data.length && tableBodyMaxHeight && tableWrapperRef.current && tableHeaderWrapperRef.current && tableBodyScrollWrapperRef.current && tableBodyWrapperRef.current) {
|
|
24411
24527
|
var tableHeaderWrapper = tableHeaderWrapperRef.current; // table
|
|
24412
24528
|
var tableBodyScrollWrapper = tableBodyScrollWrapperRef.current; // div
|
|
24413
24529
|
var tableBodyWrapper = tableBodyWrapperRef.current; // table
|
|
@@ -24419,7 +24535,7 @@ function Table(_a) {
|
|
|
24419
24535
|
tableHeaderWrapper.style.width = '100%';
|
|
24420
24536
|
}
|
|
24421
24537
|
}
|
|
24422
|
-
}, [tableBodyMaxHeight]);
|
|
24538
|
+
}, [data, tableBodyMaxHeight]);
|
|
24423
24539
|
/**
|
|
24424
24540
|
* setting all checkbox
|
|
24425
24541
|
*/
|
|
@@ -24698,4 +24814,4 @@ function Toast(_a) {
|
|
|
24698
24814
|
}));
|
|
24699
24815
|
}
|
|
24700
24816
|
|
|
24701
|
-
export { Button, Calendar, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, Pagination, Popover, Radio, StyleProvider, Table, Toast, Toggle, Tooltip };
|
|
24817
|
+
export { Button, Calendar, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, Pagination, Popover, Radio, Skeleton, StyleProvider, Table, Toast, Toggle, Tooltip };
|