maru_design2 2.12.5 → 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 CHANGED
@@ -1,5 +1,24 @@
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
+
3
22
  ## [2.12.5](https://github.com/42maru-ai/maru-design2/compare/v2.12.4...v2.12.5) (2024-07-18)
4
23
 
5
24
 
@@ -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,6 @@
1
+ import { TSkeletonVariant } from '../../../enums/variant';
2
+ import './skeleton.scss';
3
+ export interface SkeletonProps {
4
+ variant: TSkeletonVariant;
5
+ }
6
+ export declare function Skeleton({ variant }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export * from './Skeleton';
@@ -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$g = "* {\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$g);
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$f = ".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$f);
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$e);
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$d = ".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}";
3980
- styleInject(css_248z$d);
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$c = ".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}";
4046
- styleInject(css_248z$c);
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$b = ".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}";
4070
- styleInject(css_248z$b);
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$a = ".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}";
6021
- styleInject(css_248z$a);
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$9 = ".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}";
6110
- styleInject(css_248z$9);
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: "maru-radio-id-".concat(hashId),
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
- }, props)), label && jsx("label", __assign({
6134
- htmlFor: "maru-radio-id-".concat(hashId),
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$8);
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$7 = ".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}";
6239
- styleInject(css_248z$7);
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 = {};
@@ -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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maru_design2",
3
- "version": "2.12.5",
3
+ "version": "2.13.0",
4
4
  "main": "./dist/index.js",
5
5
  "author": "zena-42maru",
6
6
  "license": "MIT",