maru_design2 2.20.4 → 2.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -84,11 +84,11 @@ function styleInject(css, ref) {
84
84
  }
85
85
  }
86
86
 
87
- var css_248z$k = "* {\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$k);
87
+ var css_248z$l = "* {\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$l);
89
89
 
90
- var css_248z$j = ".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* {\n -webkit-font-smoothing: antialiased;\n}\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$j);
90
+ var css_248z$k = ".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* {\n -webkit-font-smoothing: antialiased;\n}\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}\n\n[data-theme=navy] {\n --p: #213a78;\n --p-50-per: #213a787f;\n --p-50: #909cbb;\n --p-20-per: #213a7833;\n --p-20: #d3d8e4;\n --p-10-per: #213a781a;\n --p-10: #e9ebf1;\n --p-05-per: #213a780d;\n --p-05: #f4f5f8;\n}";
91
+ styleInject(css_248z$k);
92
92
 
93
93
  function StyleProvider(_a) {
94
94
  var children = _a.children,
@@ -441,6 +441,45 @@ var iconmap = {
441
441
  "circles": [],
442
442
  "rects": []
443
443
  },
444
+ "BarChartSquare01Bg_s1810": {
445
+ "width": "18",
446
+ "height": "17",
447
+ "viewBox": "0 0 18 17",
448
+ "fill": "none",
449
+ "paths": [{
450
+ "d": "M1 5C1 3.59987 1 2.8998 1.29065 2.36502C1.54631 1.89462 1.95426 1.51217 2.45603 1.27248C3.02646 1 3.77319 1 5.26667 1H12.7333C14.2268 1 14.9735 1 15.544 1.27248C16.0457 1.51217 16.4537 1.89462 16.7094 2.36502C17 2.8998 17 3.59987 17 5V12C17 13.4001 17 14.1002 16.7094 14.635C16.4537 15.1054 16.0457 15.4878 15.544 15.7275C14.9735 16 14.2268 16 12.7333 16H5.26667C3.77319 16 3.02646 16 2.45603 15.7275C1.95426 15.4878 1.54631 15.1054 1.29065 14.635C1 14.1002 1 13.4001 1 12V5Z",
451
+ "fill": "#096412",
452
+ "stroke": "#096412",
453
+ "strokeLinecap": "round",
454
+ "strokeLinejoin": "round"
455
+ }, {
456
+ "d": "M6 9.5V12.5M12 7.5V12.5M9 5V12.5",
457
+ "stroke": "white",
458
+ "strokeLinecap": "round",
459
+ "strokeLinejoin": "round"
460
+ }],
461
+ "circles": [],
462
+ "rects": []
463
+ },
464
+ "BarChartSquare01_s1810": {
465
+ "width": "18",
466
+ "height": "17",
467
+ "viewBox": "0 0 18 17",
468
+ "fill": "none",
469
+ "paths": [{
470
+ "d": "M1 5C1 3.59987 1 2.8998 1.29065 2.36502C1.54631 1.89462 1.95426 1.51217 2.45603 1.27248C3.02646 1 3.77319 1 5.26667 1H12.7333C14.2268 1 14.9735 1 15.544 1.27248C16.0457 1.51217 16.4537 1.89462 16.7094 2.36502C17 2.8998 17 3.59987 17 5V12C17 13.4001 17 14.1002 16.7094 14.635C16.4537 15.1054 16.0457 15.4878 15.544 15.7275C14.9735 16 14.2268 16 12.7333 16H5.26667C3.77319 16 3.02646 16 2.45603 15.7275C1.95426 15.4878 1.54631 15.1054 1.29065 14.635C1 14.1002 1 13.4001 1 12V5Z",
471
+ "stroke": "#8C8C8C",
472
+ "strokeLinecap": "round",
473
+ "strokeLinejoin": "round"
474
+ }, {
475
+ "d": "M6 9.5V12.5M12 7.5V12.5M9 5V12.5",
476
+ "stroke": "#8C8C8C",
477
+ "strokeLinecap": "round",
478
+ "strokeLinejoin": "round"
479
+ }],
480
+ "circles": [],
481
+ "rects": []
482
+ },
444
483
  "BarChartSquare01_s2420": {
445
484
  "width": "24",
446
485
  "height": "24",
@@ -1948,6 +1987,31 @@ var iconmap = {
1948
1987
  "circles": [],
1949
1988
  "rects": []
1950
1989
  },
1990
+ "Diagram_s2415": {
1991
+ "width": "24",
1992
+ "height": "24",
1993
+ "viewBox": "0 0 24 24",
1994
+ "fill": "none",
1995
+ "paths": [{
1996
+ "d": "M2.66663 19.1743C2.66663 20.3668 3.63328 21.3334 4.82572 21.3334H8.06435C9.25679 21.3334 10.2234 20.3668 10.2234 19.1743V15.9357C10.2234 14.7433 9.25679 13.7766 8.06435 13.7766H4.82572C3.63328 13.7766 2.66663 14.7433 2.66663 15.9357V19.1743Z",
1997
+ "stroke": "#096412",
1998
+ "strokeWidth": "1.5"
1999
+ }, {
2000
+ "d": "M2.66663 8.73522C2.66663 9.92765 3.63328 10.8943 4.82572 10.8943H8.06435C9.25679 10.8943 10.2234 9.92765 10.2234 8.73522V5.49658C10.2234 4.30415 9.25679 3.33749 8.06435 3.33749H4.82572C3.63328 3.33749 2.66663 4.30415 2.66663 5.49658V8.73522Z",
2001
+ "stroke": "#096412",
2002
+ "strokeWidth": "1.5"
2003
+ }, {
2004
+ "d": "M13.0674 5.58919C12.2242 6.43237 12.2242 7.79943 13.0674 8.64261L15.3574 10.9327C16.2006 11.7758 17.5677 11.7758 18.4108 10.9327L20.7009 8.64261C21.5441 7.79943 21.5441 6.43237 20.7009 5.58919L18.4108 3.29913C17.5677 2.45595 16.2006 2.45595 15.3574 3.29913L13.0674 5.58919Z",
2005
+ "stroke": "#096412",
2006
+ "strokeWidth": "1.5"
2007
+ }, {
2008
+ "d": "M13.1057 19.1743C13.1057 20.3668 14.0724 21.3334 15.2648 21.3334H18.5035C19.6959 21.3334 20.6625 20.3668 20.6625 19.1743V15.9357C20.6625 14.7433 19.6959 13.7766 18.5035 13.7766H15.2648C14.0724 13.7766 13.1057 14.7433 13.1057 15.9357V19.1743Z",
2009
+ "stroke": "#096412",
2010
+ "strokeWidth": "1.5"
2011
+ }],
2012
+ "circles": [],
2013
+ "rects": []
2014
+ },
1951
2015
  "Dotpoints01_s2420": {
1952
2016
  "width": "24",
1953
2017
  "height": "24",
@@ -2985,6 +3049,22 @@ var iconmap = {
2985
3049
  "circles": [],
2986
3050
  "rects": []
2987
3051
  },
3052
+ "Filter_s1613": {
3053
+ "width": "16",
3054
+ "height": "16",
3055
+ "viewBox": "0 0 16 16",
3056
+ "fill": "none",
3057
+ "paths": [{
3058
+ "d": "M2.55995 2H13.44C13.5606 2.04329 13.6698 2.11427 13.7595 2.20748C13.8491 2.3007 13.9167 2.41369 13.9571 2.53779C13.9974 2.66189 14.0096 2.79382 13.9925 2.92346C13.9754 3.0531 13.9296 3.17701 13.8585 3.28571L9.67386 8V14L6.32614 11.4286V8L2.14149 3.28571C2.07042 3.17701 2.0246 3.0531 2.00752 2.92346C1.99044 2.79382 2.00256 2.66189 2.04295 2.53779C2.08334 2.41369 2.15093 2.3007 2.24055 2.20748C2.33016 2.11427 2.43942 2.04329 2.55995 2Z",
3059
+ "fill": "white",
3060
+ "stroke": "#BDBDBD",
3061
+ "strokeWidth": "1.3",
3062
+ "strokeLinecap": "round",
3063
+ "strokeLinejoin": "round"
3064
+ }],
3065
+ "circles": [],
3066
+ "rects": []
3067
+ },
2988
3068
  "FolderSetting_s2013": {
2989
3069
  "width": "19",
2990
3070
  "height": "19",
@@ -3007,6 +3087,28 @@ var iconmap = {
3007
3087
  "circles": [],
3008
3088
  "rects": []
3009
3089
  },
3090
+ "FolderSetting_s2415": {
3091
+ "width": "24",
3092
+ "height": "24",
3093
+ "viewBox": "0 0 24 24",
3094
+ "fill": "none",
3095
+ "paths": [{
3096
+ "d": "M16 6.09532V5.85042C16 5.0389 15.3433 4.38103 14.5333 4.38103H7.8075C7.41852 4.38103 7.04546 3.98133 6.77041 3.70576L6.16289 3.09712C5.88784 2.82156 5.51479 2.66675 5.1258 2.66675H2.79998C1.98997 2.66675 1.33332 3.32462 1.33332 4.13614L1.33325 14.5307C1.33325 15.3422 1.9899 16.0001 2.79992 16.0001H5.84607",
3097
+ "stroke": "#8C8C8C",
3098
+ "strokeWidth": "1.5",
3099
+ "strokeLinecap": "round"
3100
+ }, {
3101
+ "d": "M14.8501 9.3335H16.5057C17.1531 9.3335 17.6779 9.85831 17.6779 10.5057C17.6779 11.4081 18.6547 11.972 19.4362 11.5209C19.9969 11.1972 20.7138 11.3892 21.0375 11.9499L21.8653 13.3837C22.189 13.9443 21.9969 14.6612 21.4362 14.9849C20.6547 15.4361 20.6547 16.5641 21.4362 17.0153C21.9969 17.339 22.189 18.0559 21.8653 18.6166L21.0375 20.0503C20.7138 20.611 19.9969 20.8031 19.4362 20.4794C18.6547 20.0282 17.6779 20.5922 17.6779 21.4946C17.6779 22.142 17.153 22.6668 16.5056 22.6668H14.8501C14.2027 22.6668 13.6779 22.142 13.6779 21.4946C13.6779 20.5922 12.701 20.0282 11.9196 20.4794C11.3589 20.8031 10.642 20.611 10.3183 20.0503L9.4905 18.6166C9.1668 18.0559 9.35889 17.339 9.91956 17.0153C10.701 16.5641 10.701 15.4361 9.91956 14.9849C9.35889 14.6612 9.1668 13.9443 9.4905 13.3837L10.3183 11.9499C10.642 11.3892 11.3589 11.1971 11.9196 11.5208C12.701 11.972 13.6779 11.4081 13.6779 10.5057C13.6779 9.85831 14.2027 9.3335 14.8501 9.3335Z",
3102
+ "stroke": "#8C8C8C",
3103
+ "strokeWidth": "1.5"
3104
+ }, {
3105
+ "d": "M18.6666 16.0002C18.6666 17.4729 17.4727 18.6668 15.9999 18.6668C14.5272 18.6668 13.3333 17.4729 13.3333 16.0002C13.3333 14.5274 14.5272 13.3335 15.9999 13.3335C17.4727 13.3335 18.6666 14.5274 18.6666 16.0002Z",
3106
+ "stroke": "#8C8C8C",
3107
+ "strokeWidth": "1.5"
3108
+ }],
3109
+ "circles": [],
3110
+ "rects": []
3111
+ },
3010
3112
  "FolderUpload_s1615": {
3011
3113
  "width": "16",
3012
3114
  "height": "16",
@@ -3086,6 +3188,21 @@ var iconmap = {
3086
3188
  "circles": [],
3087
3189
  "rects": []
3088
3190
  },
3191
+ "Folder_s1815": {
3192
+ "width": "18",
3193
+ "height": "16",
3194
+ "viewBox": "0 0 18 16",
3195
+ "fill": "none",
3196
+ "paths": [{
3197
+ "d": "M2.77778 1H6.33333L9 3.66667H15.2222C15.6937 3.66667 16.1459 3.85397 16.4793 4.18737C16.8127 4.52076 17 4.97295 17 5.44444V12.5556C17 13.0271 16.8127 13.4792 16.4793 13.8126C16.1459 14.146 15.6937 14.3333 15.2222 14.3333H2.77778C2.30628 14.3333 1.8541 14.146 1.5207 13.8126C1.1873 13.4792 1 13.0271 1 12.5556V2.77778C1 2.30628 1.1873 1.8541 1.5207 1.5207C1.8541 1.1873 2.30628 1 2.77778 1Z",
3198
+ "stroke": "#5C5C5C",
3199
+ "strokeWidth": "1.5",
3200
+ "strokeLinecap": "round",
3201
+ "strokeLinejoin": "round"
3202
+ }],
3203
+ "circles": [],
3204
+ "rects": []
3205
+ },
3089
3206
  "Folder_s2415": {
3090
3207
  "width": "24",
3091
3208
  "height": "24",
@@ -3128,6 +3245,27 @@ var iconmap = {
3128
3245
  "circles": [],
3129
3246
  "rects": []
3130
3247
  },
3248
+ "Folders_s1815": {
3249
+ "width": "18",
3250
+ "height": "17",
3251
+ "viewBox": "0 0 18 17",
3252
+ "fill": "none",
3253
+ "paths": [{
3254
+ "d": "M6.33332 1H8.99999L10.7778 2.77778H15.2222C15.6937 2.77778 16.1459 2.96508 16.4793 3.29848C16.8127 3.63187 17 4.08406 17 4.55556V10.7778C17 11.2493 16.8127 11.7015 16.4793 12.0349C16.1459 12.3683 15.6937 12.5556 15.2222 12.5556H6.33332C5.86182 12.5556 5.40964 12.3683 5.07624 12.0349C4.74284 11.7015 4.55554 11.2493 4.55554 10.7778V2.77778C4.55554 2.30628 4.74284 1.8541 5.07624 1.5207C5.40964 1.1873 5.86182 1 6.33332 1Z",
3255
+ "stroke": "#5C5C5C",
3256
+ "strokeWidth": "1.5",
3257
+ "strokeLinecap": "round",
3258
+ "strokeLinejoin": "round"
3259
+ }, {
3260
+ "d": "M13.4444 12.5556V14.3333C13.4444 14.8048 13.2571 15.257 12.9237 15.5904C12.5903 15.9238 12.1382 16.1111 11.6667 16.1111H2.77778C2.30628 16.1111 1.8541 15.9238 1.5207 15.5904C1.1873 15.257 1 14.8048 1 14.3333V6.33334C1 5.86184 1.1873 5.40965 1.5207 5.07626C1.8541 4.74286 2.30628 4.55556 2.77778 4.55556H4.55556",
3261
+ "stroke": "#5C5C5C",
3262
+ "strokeWidth": "1.5",
3263
+ "strokeLinecap": "round",
3264
+ "strokeLinejoin": "round"
3265
+ }],
3266
+ "circles": [],
3267
+ "rects": []
3268
+ },
3131
3269
  "Globe01_s1615": {
3132
3270
  "width": "16",
3133
3271
  "height": "16",
@@ -3294,6 +3432,27 @@ var iconmap = {
3294
3432
  "circles": [],
3295
3433
  "rects": []
3296
3434
  },
3435
+ "Information_s2015": {
3436
+ "width": "20",
3437
+ "height": "21",
3438
+ "viewBox": "0 0 20 21",
3439
+ "fill": "none",
3440
+ "paths": [{
3441
+ "d": "M10 7.85243V7.82104",
3442
+ "stroke": "#8C8C8C",
3443
+ "strokeWidth": "1.5",
3444
+ "strokeLinecap": "round",
3445
+ "strokeLinejoin": "round"
3446
+ }, {
3447
+ "d": "M9.99979 10.4998L9.99979 14.0712M2.85693 10.4998C2.85693 6.5549 6.0549 3.35693 9.99979 3.35693C13.9447 3.35693 17.1426 6.5549 17.1426 10.4998C17.1426 14.4447 13.9447 17.6426 9.99979 17.6426C6.0549 17.6426 2.85693 14.4447 2.85693 10.4998Z",
3448
+ "stroke": "#8C8C8C",
3449
+ "strokeWidth": "1.3",
3450
+ "strokeLinecap": "round",
3451
+ "strokeLinejoin": "round"
3452
+ }],
3453
+ "circles": [],
3454
+ "rects": []
3455
+ },
3297
3456
  "LineChartDown01_s2420": {
3298
3457
  "width": "24",
3299
3458
  "height": "24",
@@ -3985,6 +4144,20 @@ var iconmap = {
3985
4144
  "circles": [],
3986
4145
  "rects": []
3987
4146
  },
4147
+ "PreviewLine_s2415": {
4148
+ "width": "24",
4149
+ "height": "24",
4150
+ "viewBox": "0 0 24 24",
4151
+ "fill": "none",
4152
+ "paths": [{
4153
+ "d": "M6.90905 7.75766H8.60602M17.0909 12.0001H15.3939M6.90905 16.2425H8.60602M12 7.75766H17.0909M12 12.0001H6.90905M12 16.2425H17.0909M9.4545 21.3334H14.5454C16.9214 21.3334 18.1094 21.3334 19.0169 20.871C19.8152 20.4643 20.4642 19.8153 20.8709 19.017C21.3333 18.1095 21.3333 16.9215 21.3333 14.5455V9.45463C21.3333 7.07865 21.3333 5.89066 20.8709 4.98315C20.4642 4.18489 19.8152 3.53588 19.0169 3.12914C18.1094 2.66675 16.9214 2.66675 14.5454 2.66675H9.4545C7.07852 2.66675 5.89053 2.66675 4.98303 3.12914C4.18477 3.53588 3.53576 4.18489 3.12902 4.98315C2.66663 5.89066 2.66663 7.07865 2.66663 9.45463V14.5455C2.66663 16.9215 2.66663 18.1095 3.12902 19.017C3.53576 19.8153 4.18477 20.4643 4.98303 20.871C5.89053 21.3334 7.07852 21.3334 9.4545 21.3334Z",
4154
+ "stroke": "#8C8C8C",
4155
+ "strokeWidth": "1.5",
4156
+ "strokeLinecap": "round"
4157
+ }],
4158
+ "circles": [],
4159
+ "rects": []
4160
+ },
3988
4161
  "PreviewZoom_s2013": {
3989
4162
  "width": "20",
3990
4163
  "height": "20",
@@ -4000,6 +4173,21 @@ var iconmap = {
4000
4173
  "circles": [],
4001
4174
  "rects": []
4002
4175
  },
4176
+ "PreviewZoom_s2415": {
4177
+ "width": "24",
4178
+ "height": "24",
4179
+ "viewBox": "0 0 24 24",
4180
+ "fill": "none",
4181
+ "paths": [{
4182
+ "d": "M20.4363 20.4435L19.1272 19.1344M20.1212 8.15295H11.3939H2.66663M20.1212 11.062V6.79248C20.1212 5.81494 20.1212 5.32617 19.9309 4.95279C19.7636 4.62436 19.4966 4.35734 19.1681 4.19C18.7948 3.99976 18.306 3.99976 17.3284 3.99976H5.45935C4.48181 3.99976 3.99303 3.99976 3.61966 4.19C3.29123 4.35734 3.02421 4.62436 2.85687 4.95279C2.66663 5.32616 2.66663 5.81494 2.66663 6.79248L2.66663 15.542C2.66663 16.5196 2.66663 17.0084 2.85687 17.3817C3.02421 17.7102 3.29123 17.9772 3.61966 18.1445C3.99303 18.3348 4.48181 18.3348 5.45935 18.3348H10.0848M20 16.9526C20 18.6395 18.6324 20.0071 16.9454 20.0071C15.2584 20.0071 13.8909 18.6395 13.8909 16.9526C13.8909 15.2656 15.2584 13.898 16.9454 13.898C18.6324 13.898 20 15.2656 20 16.9526Z",
4183
+ "stroke": "#8C8C8C",
4184
+ "strokeWidth": "1.5",
4185
+ "strokeLinecap": "round",
4186
+ "strokeLinejoin": "round"
4187
+ }],
4188
+ "circles": [],
4189
+ "rects": []
4190
+ },
4003
4191
  "Preview_s1413": {
4004
4192
  "width": "14",
4005
4193
  "height": "12",
@@ -4167,6 +4355,27 @@ var iconmap = {
4167
4355
  "circles": [],
4168
4356
  "rects": []
4169
4357
  },
4358
+ "ReverseRight2Circle_s1413": {
4359
+ "width": "14",
4360
+ "height": "14",
4361
+ "viewBox": "0 0 14 14",
4362
+ "fill": "none",
4363
+ "paths": [{
4364
+ "d": "M6.83333 12.6667C10.055 12.6667 12.6667 10.055 12.6667 6.83333C12.6667 3.61167 10.055 1 6.83333 1C3.61167 1 1 3.61167 1 6.83333C1 10.055 3.61167 12.6667 6.83333 12.6667Z",
4365
+ "stroke": "#096412",
4366
+ "strokeWidth": "1.3",
4367
+ "strokeLinecap": "round",
4368
+ "strokeLinejoin": "round"
4369
+ }, {
4370
+ "d": "M10 5.73077H5.5C4.67157 5.73077 4 6.35068 4 7.11538C4 7.88009 3.99989 9 5.5 9H7M10 5.73077L8 4M10 5.73077L8 7.5",
4371
+ "stroke": "#096412",
4372
+ "strokeWidth": "1.3",
4373
+ "strokeLinecap": "round",
4374
+ "strokeLinejoin": "round"
4375
+ }],
4376
+ "circles": [],
4377
+ "rects": []
4378
+ },
4170
4379
  "SaveAll_s1810": {
4171
4380
  "width": "18",
4172
4381
  "height": "18",
@@ -4620,6 +4829,21 @@ var iconmap = {
4620
4829
  "circles": [],
4621
4830
  "rects": []
4622
4831
  },
4832
+ "Toggle_s2415": {
4833
+ "width": "24",
4834
+ "height": "24",
4835
+ "viewBox": "0 0 24 24",
4836
+ "fill": "none",
4837
+ "paths": [{
4838
+ "d": "M14.7116 9.33333H6.22222C4.99492 9.33333 4 8.33841 4 7.11111C4 5.88381 4.99492 4.88889 6.22222 4.88889H14.7116M9.28844 19.1111H17.7778C19.0051 19.1111 20 18.1162 20 16.8889C20 15.6616 19.0051 14.6667 17.7778 14.6667H9.28844M4 16.8889C4 18.6071 5.39289 20 7.11111 20C8.82933 20 10.2222 18.6071 10.2222 16.8889C10.2222 15.1707 8.82933 13.7778 7.11111 13.7778C5.39289 13.7778 4 15.1707 4 16.8889ZM20 7.11111C20 8.82933 18.6071 10.2222 16.8889 10.2222C15.1707 10.2222 13.7778 8.82933 13.7778 7.11111C13.7778 5.39289 15.1707 4 16.8889 4C18.6071 4 20 5.39289 20 7.11111Z",
4839
+ "stroke": "#8C8C8C",
4840
+ "strokeWidth": "1.5",
4841
+ "strokeLinecap": "round",
4842
+ "strokeLinejoin": "round"
4843
+ }],
4844
+ "circles": [],
4845
+ "rects": []
4846
+ },
4623
4847
  "Tool_s1413": {
4624
4848
  "width": "14",
4625
4849
  "height": "14",
@@ -5177,6 +5401,8 @@ var ICONS = {
5177
5401
  "BarChart10_s2420": "BarChart10_s2420",
5178
5402
  "BarChart12_s2420": "BarChart12_s2420",
5179
5403
  "BarChart20_s1613": "BarChart20_s1613",
5404
+ "BarChartSquare01Bg_s1810": "BarChartSquare01Bg_s1810",
5405
+ "BarChartSquare01_s1810": "BarChartSquare01_s1810",
5180
5406
  "BarChartSquare01_s2420": "BarChartSquare01_s2420",
5181
5407
  "BarChartSquare02_s2420": "BarChartSquare02_s2420",
5182
5408
  "BookClosed_s2420": "BookClosed_s2420",
@@ -5266,6 +5492,7 @@ var ICONS = {
5266
5492
  "Dataflow04_s2415": "Dataflow04_s2415",
5267
5493
  "Dataflow05_s1815": "Dataflow05_s1815",
5268
5494
  "Diagram_s2014": "Diagram_s2014",
5495
+ "Diagram_s2415": "Diagram_s2415",
5269
5496
  "Dotpoints01_s2420": "Dotpoints01_s2420",
5270
5497
  "DotsGrid_s1815": "DotsGrid_s1815",
5271
5498
  "DotsGrid_s2420": "DotsGrid_s2420",
@@ -5313,14 +5540,18 @@ var ICONS = {
5313
5540
  "File_s2420": "File_s2420",
5314
5541
  "File_s3020": "File_s3020",
5315
5542
  "FilterLines_s1815": "FilterLines_s1815",
5543
+ "Filter_s1613": "Filter_s1613",
5316
5544
  "FolderSetting_s2013": "FolderSetting_s2013",
5545
+ "FolderSetting_s2415": "FolderSetting_s2415",
5317
5546
  "FolderUpload_s1615": "FolderUpload_s1615",
5318
5547
  "FolderUpload_s1815": "FolderUpload_s1815",
5319
5548
  "FolderUpload_s2420": "FolderUpload_s2420",
5320
5549
  "Folder_s1810": "Folder_s1810",
5550
+ "Folder_s1815": "Folder_s1815",
5321
5551
  "Folder_s2415": "Folder_s2415",
5322
5552
  "Folder_s2420": "Folder_s2420",
5323
5553
  "Folder_s2820": "Folder_s2820",
5554
+ "Folders_s1815": "Folders_s1815",
5324
5555
  "Globe01_s1615": "Globe01_s1615",
5325
5556
  "GraduationHat01_s1615": "GraduationHat01_s1615",
5326
5557
  "GraduationHat01_s2415": "GraduationHat01_s2415",
@@ -5330,6 +5561,7 @@ var ICONS = {
5330
5561
  "Home_s2415": "Home_s2415",
5331
5562
  "Information_s1410": "Information_s1410",
5332
5563
  "Information_s1610": "Information_s1610",
5564
+ "Information_s2015": "Information_s2015",
5333
5565
  "LineChartDown01_s2420": "LineChartDown01_s2420",
5334
5566
  "Loading02_s1415": "Loading02_s1415",
5335
5567
  "Loading02_s1615": "Loading02_s1615",
@@ -5371,7 +5603,9 @@ var ICONS = {
5371
5603
  "PlusUpLines_s1413": "PlusUpLines_s1413",
5372
5604
  "Plus_s1610": "Plus_s1610",
5373
5605
  "PreviewLine_s2013": "PreviewLine_s2013",
5606
+ "PreviewLine_s2415": "PreviewLine_s2415",
5374
5607
  "PreviewZoom_s2013": "PreviewZoom_s2013",
5608
+ "PreviewZoom_s2415": "PreviewZoom_s2415",
5375
5609
  "Preview_s1413": "Preview_s1413",
5376
5610
  "QuestionCircleBg_s1610": "QuestionCircleBg_s1610",
5377
5611
  "RefreshCcw02_s1415": "RefreshCcw02_s1415",
@@ -5383,6 +5617,7 @@ var ICONS = {
5383
5617
  "RefreshCw02_s1615": "RefreshCw02_s1615",
5384
5618
  "ReverseLeft2_s1613": "ReverseLeft2_s1613",
5385
5619
  "ReverseLeft_s1815": "ReverseLeft_s1815",
5620
+ "ReverseRight2Circle_s1413": "ReverseRight2Circle_s1413",
5386
5621
  "SaveAll_s1810": "SaveAll_s1810",
5387
5622
  "SaveAll_s1812": "SaveAll_s1812",
5388
5623
  "Save_s1413": "Save_s1413",
@@ -5408,6 +5643,7 @@ var ICONS = {
5408
5643
  "SwitchHorizontal02_s1615": "SwitchHorizontal02_s1615",
5409
5644
  "Title_s2420": "Title_s2420",
5410
5645
  "Toggle_s2013": "Toggle_s2013",
5646
+ "Toggle_s2415": "Toggle_s2415",
5411
5647
  "Tool_s1413": "Tool_s1413",
5412
5648
  "Transform_s1815": "Transform_s1815",
5413
5649
  "Trash01_s1413": "Trash01_s1413",
@@ -5483,7 +5719,7 @@ function Icon(_a) {
5483
5719
  * 마지막 path.stroke은 지정 색이 아니라 white로 고정시켜야함
5484
5720
  */
5485
5721
  var staticPathStorke = useMemo(function () {
5486
- return name === ICONS.ChevronLeftCircleBg_s2415 || name === ICONS.ChevronRightCircleBg_s2415 || name === ICONS.CheckCircleBg_s1612 || name === ICONS.XCircleBg_s1612 || name === ICONS.XDiamondBg_s2415 || name === ICONS.UserCircleBg_s2415;
5722
+ return name === ICONS.ChevronLeftCircleBg_s2415 || name === ICONS.ChevronRightCircleBg_s2415 || name === ICONS.CheckCircleBg_s1612 || name === ICONS.XCircleBg_s1612 || name === ICONS.XDiamondBg_s2415 || name === ICONS.UserCircleBg_s2415 || name === ICONS.BarChartSquare01Bg_s1810;
5487
5723
  }, [name]);
5488
5724
  return jsxs("svg", __assign({
5489
5725
  width: width,
@@ -5535,8 +5771,8 @@ function Icon(_a) {
5535
5771
  }));
5536
5772
  }
5537
5773
 
5538
- var css_248z$i = ".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: 400;\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: 400;\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: 400;\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}";
5539
- styleInject(css_248z$i);
5774
+ var css_248z$j = ".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: 400;\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: 400;\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: 400;\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}";
5775
+ styleInject(css_248z$j);
5540
5776
 
5541
5777
  var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
5542
5778
  var children = _a.children,
@@ -5699,8 +5935,8 @@ function uuidv4(length) {
5699
5935
  }
5700
5936
  }
5701
5937
 
5702
- var css_248z$h = ".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}";
5703
- styleInject(css_248z$h);
5938
+ var css_248z$i = ".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}";
5939
+ styleInject(css_248z$i);
5704
5940
 
5705
5941
  var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
5706
5942
  var _b;
@@ -5765,8 +6001,8 @@ Checkbox.defaultProps = {
5765
6001
  };
5766
6002
  Checkbox.displayName = 'Checkbox';
5767
6003
 
5768
- var css_248z$g = ".maru-chip {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\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: 400;\n border-radius: 10px;\n gap: 2px;\n}\n.maru-chip-size-normal {\n padding: 2px 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: 400;\n border-radius: 16px;\n gap: 8px;\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}\n.maru-chip .maru-chip-x-icon-button {\n transform: translateY(-1px);\n}";
5769
- styleInject(css_248z$g);
6004
+ var css_248z$h = ".maru-chip {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\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: 400;\n border-radius: 10px;\n gap: 2px;\n}\n.maru-chip-size-normal {\n padding: 2px 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: 400;\n border-radius: 16px;\n gap: 8px;\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}\n.maru-chip .maru-chip-x-icon-button {\n transform: translateY(-1px);\n}";
6005
+ styleInject(css_248z$h);
5770
6006
 
5771
6007
  function Chip(_a) {
5772
6008
  var children = _a.children,
@@ -5797,8 +6033,8 @@ function Chip(_a) {
5797
6033
  }));
5798
6034
  }
5799
6035
 
5800
- var css_248z$f = ".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: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\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: 1px solid #e4e4e4;\n border-radius: 6px;\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: 400;\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n border-color: #5c5c5c;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n outline: 1px solid #e53e3e;\n border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n outline: 1px solid #e4e4e4;\n border-color: #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled {\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n outline: unset;\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 font-weight: 400;\n}";
5801
- styleInject(css_248z$f);
6036
+ var css_248z$g = ".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: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\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: 1px solid #e4e4e4;\n border-radius: 6px;\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: 400;\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n border-color: #5c5c5c;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n outline: 1px solid #e53e3e;\n border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n outline: 1px solid #e4e4e4;\n border-color: #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled {\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n outline: unset;\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 font-weight: 400;\n}";
6037
+ styleInject(css_248z$g);
5802
6038
 
5803
6039
  var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
5804
6040
  var invalid = _a.invalid,
@@ -5844,25 +6080,37 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
5844
6080
  }
5845
6081
  }, [combineRef.current, hiddenClearButton]);
5846
6082
  var handleInputChange = function handleInputChange(e) {
5847
- var _a, _b;
6083
+ var _a;
5848
6084
  setShowClearButton(!hiddenClearButton);
5849
- var curValue = e.currentTarget.value;
5850
- if (!curValue) {
5851
- setShowClearButton(false );
5852
- }
5853
- if (type === 'number' && !!curValue.at(-1)) {
5854
- if (!/[0-9,-]/.test(curValue.at(-1)) || /^-*/.test(curValue) && (((_a = curValue.match(/-/g)) === null || _a === void 0 ? void 0 : _a.length) || 0) > 1) {
5855
- e.currentTarget.value = curValue.slice(0, curValue.length - 1);
6085
+ var value = e.currentTarget.value;
6086
+ var newValue = value;
6087
+ if (type === 'number') {
6088
+ var regex = /^(-?)([0-9]?)*([.]?)([0-9]?)*$/;
6089
+ if (regex.test(newValue)) {
6090
+ newValue = value;
6091
+ } else {
6092
+ newValue = value.slice(0, value.length - 1);
5856
6093
  }
5857
6094
  }
5858
- (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, e);
6095
+ if (!newValue) {
6096
+ setShowClearButton(false );
6097
+ }
6098
+ e.currentTarget.value = newValue;
6099
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
5859
6100
  };
5860
6101
  var handleInputBlur = function handleInputBlur(e) {
5861
6102
  var _a;
6103
+ var value = e.currentTarget.value;
6104
+ var newValue = value;
5862
6105
  if (type === 'number') {
5863
- var curValue = e.currentTarget.value;
5864
- e.currentTarget.value = "".concat(curValue != null && curValue !== '' ? +curValue : '');
6106
+ var numValue = value ? +value : ''; // 값이 있을때만 숫자로 변환
6107
+ // NaN이 아닌 숫자로 제대로 변환됐으면 그대로 쓰고 아니면 빈문자열 리턴
6108
+ newValue = "".concat(numValue || numValue === 0 ? numValue : '');
6109
+ }
6110
+ if (!newValue) {
6111
+ setShowClearButton(false );
5865
6112
  }
6113
+ e.currentTarget.value = newValue;
5866
6114
  (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
5867
6115
  };
5868
6116
  var handleClearClick = function handleClearClick() {
@@ -7756,8 +8004,8 @@ function CreatePortal(_a) {
7756
8004
  return (parentElement || styleRootElement) && /*#__PURE__*/ReactDOM__default.createPortal(children, parentElement ? parentElement.current : styleRootElement);
7757
8005
  }
7758
8006
 
7759
- var css_248z$e = ".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}";
7760
- styleInject(css_248z$e);
8007
+ var css_248z$f = ".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}";
8008
+ styleInject(css_248z$f);
7761
8009
 
7762
8010
  function Popover(_a) {
7763
8011
  var anchorEl = _a.anchorEl,
@@ -7845,8 +8093,8 @@ function Popover(_a) {
7845
8093
  }) : PopoverBody;
7846
8094
  }
7847
8095
 
7848
- var css_248z$d = ".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: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.maru-radio:not(:disabled):hover::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:checked::before {\n background-color: var(--p);\n}\n.maru-radio-primary:not(:disabled):hover::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}";
7849
- styleInject(css_248z$d);
8096
+ var css_248z$e = ".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: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.maru-radio:not(:disabled):hover::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:checked::before {\n background-color: var(--p);\n}\n.maru-radio-primary:not(:disabled):hover::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}";
8097
+ styleInject(css_248z$e);
7850
8098
 
7851
8099
  var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
7852
8100
  var checked = _a.checked,
@@ -7911,8 +8159,8 @@ function Contents() {
7911
8159
  }));
7912
8160
  }
7913
8161
 
7914
- var css_248z$c = "@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 20px 20px 20px;\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: 210px;\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: 72px;\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}";
7915
- styleInject(css_248z$c);
8162
+ var css_248z$d = "@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 20px 20px 20px;\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: 210px;\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: 72px;\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}";
8163
+ styleInject(css_248z$d);
7916
8164
 
7917
8165
  function Skeleton(_a) {
7918
8166
  var _b = _a.variant,
@@ -7960,6 +8208,48 @@ function Skeleton(_a) {
7960
8208
  });
7961
8209
  }
7962
8210
 
8211
+ var css_248z$c = ".maru-slider-container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n width: 100%;\n}\n\n.maru-slider {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n width: 100%;\n height: 6px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n.maru-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n.maru-slider::-moz-range-thumb {\n appearance: none;\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n.maru-slider:active::-webkit-slider-thumb {\n transform: scale(1.2);\n}\n.maru-slider:active::-moz-range-thumb {\n transform: scale(1.2);\n}\n.maru-slider[disabled] {\n cursor: default;\n opacity: 0.5;\n}\n.maru-slider[disabled]:active::-webkit-slider-thumb {\n transform: none;\n}\n.maru-slider[disabled]:active::-moz-range-thumb {\n transform: none;\n}\n\n.maru-slider-primary .maru-slider {\n background: linear-gradient(to right, var(--p) 0%, var(--p) calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-primary .maru-slider::-webkit-slider-thumb {\n border: 3px solid var(--p);\n}\n.maru-slider-primary .maru-slider::-moz-range-thumb {\n border: 3px solid var(--p);\n}\n\n.maru-slider-secondary .maru-slider {\n background: linear-gradient(to right, #8c8c8c 0%, #8c8c8c calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-secondary .maru-slider::-webkit-slider-thumb {\n border: 3px solid #8c8c8c;\n}\n.maru-slider-secondary .maru-slider::-moz-range-thumb {\n border: 3px solid #8c8c8c;\n}\n\n.maru-slider-positive .maru-slider {\n background: linear-gradient(to right, #58c5a6 0%, #58c5a6 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-positive .maru-slider::-webkit-slider-thumb {\n border: 3px solid #58c5a6;\n}\n.maru-slider-positive .maru-slider::-moz-range-thumb {\n border: 3px solid #58c5a6;\n}\n\n.maru-slider-warning .maru-slider {\n background: linear-gradient(to right, #ffb020 0%, #ffb020 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-warning .maru-slider::-webkit-slider-thumb {\n border: 3px solid #ffb020;\n}\n.maru-slider-warning .maru-slider::-moz-range-thumb {\n border: 3px solid #ffb020;\n}\n\n.maru-slider-danger .maru-slider {\n background: linear-gradient(to right, #e53e3e 0%, #e53e3e calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-danger .maru-slider::-webkit-slider-thumb {\n border: 3px solid #e53e3e;\n}\n.maru-slider-danger .maru-slider::-moz-range-thumb {\n border: 3px solid #e53e3e;\n}\n\n.maru-slider-success .maru-slider {\n background: linear-gradient(to right, #308acc 0%, #308acc calc(var(--slider-progress, 0%) * 100%), #e4e4e4 calc(var(--slider-progress, 0%) * 100%), #e4e4e4 100%);\n}\n.maru-slider-success .maru-slider::-webkit-slider-thumb {\n border: 3px solid #308acc;\n}\n.maru-slider-success .maru-slider::-moz-range-thumb {\n border: 3px solid #308acc;\n}";
8212
+ styleInject(css_248z$c);
8213
+
8214
+ function Slider(_a) {
8215
+ var value = _a.value,
8216
+ onChange = _a.onChange,
8217
+ _b = _a.color,
8218
+ color = _b === void 0 ? 'primary' : _b,
8219
+ _c = _a.min,
8220
+ min = _c === void 0 ? 0 : _c,
8221
+ _d = _a.max,
8222
+ max = _d === void 0 ? 100 : _d,
8223
+ _e = _a.step,
8224
+ step = _e === void 0 ? 1 : _e,
8225
+ _f = _a.disabled,
8226
+ disabled = _f === void 0 ? false : _f,
8227
+ className = _a.className;
8228
+ useEffect(function () {
8229
+ var progress = (value - min) / (max - min);
8230
+ document.documentElement.style.setProperty('--slider-progress', progress.toString());
8231
+ }, [value, min, max]);
8232
+ var handleSliderChange = function handleSliderChange(e) {
8233
+ onChange(+e.target.value);
8234
+ };
8235
+ return jsx("div", __assign({
8236
+ className: classNames('maru-slider-container', "maru-slider-".concat(color), {
8237
+ 'maru-slider-disabled': disabled
8238
+ }, className)
8239
+ }, {
8240
+ children: jsx("input", {
8241
+ type: "range",
8242
+ className: "maru-slider",
8243
+ value: value,
8244
+ onChange: handleSliderChange,
8245
+ min: min,
8246
+ max: max,
8247
+ step: step,
8248
+ disabled: disabled
8249
+ })
8250
+ }));
8251
+ }
8252
+
7963
8253
  var css_248z$b = ".maru-textarea-wrapper .maru-textarea {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n flex-direction: row;\n padding: 8px 8px 8px 12px;\n border: 1px solid #e4e4e4;\n border-radius: 6px;\n gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\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: 400;\n color: #5c5c5c;\n resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n font-weight: 300;\n color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n border-color: #5c5c5c;\n background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n outline: 1px solid #e53e3e;\n border-color: #e53e3e;\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n outline: 1px solid #e4e4e4;\n border-color: #e4e4e4;\n background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-textarea-wrapper .maru-textarea-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-textarea-wrapper .maru-textarea-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-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}";
7964
8254
  styleInject(css_248z$b);
7965
8255
 
@@ -26220,28 +26510,201 @@ function Pagination(_a) {
26220
26510
  }));
26221
26511
  }
26222
26512
 
26223
- var css_248z$2 = ".maru-search-input .maru-input {\n box-shadow: 0px 0px 5px 0px #e4e4e4;\n border: unset;\n height: 41px;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n background-color: white;\n}\n.maru-search-input .maru-input:hover {\n background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n margin-right: 8px;\n}";
26513
+ function Filter(_a) {
26514
+ var on = _a.on,
26515
+ formats = _a.formats,
26516
+ hoverContent = _a.hoverContent,
26517
+ resetButtonContent = _a.resetButtonContent,
26518
+ onReset = _a.onReset,
26519
+ searchButtonContent = _a.searchButtonContent,
26520
+ onSearch = _a.onSearch,
26521
+ inputWrapperRef = _a.inputWrapperRef;
26522
+ var _b = useState(false),
26523
+ open = _b[0],
26524
+ setOpen = _b[1];
26525
+ var handlePopoverClose = function handlePopoverClose() {
26526
+ onSearch();
26527
+ setOpen(false);
26528
+ };
26529
+ return jsxs(Fragment, {
26530
+ children: [jsx("button", __assign({
26531
+ type: "button",
26532
+ className: classNames('maru-search-input-filter-button', {
26533
+ active: open,
26534
+ selected: on
26535
+ }),
26536
+ onClick: function onClick() {
26537
+ return setOpen(true);
26538
+ }
26539
+ }, {
26540
+ children: jsx(Tooltip, __assign({
26541
+ content: hoverContent,
26542
+ direction: "top-start"
26543
+ }, {
26544
+ children: jsx(Icon, {
26545
+ name: ICONS.Filter_s1613
26546
+ })
26547
+ }))
26548
+ })), jsx(Popover, __assign({
26549
+ anchorEl: inputWrapperRef.current,
26550
+ open: open,
26551
+ onClose: handlePopoverClose,
26552
+ direction: "bottom-end",
26553
+ className: "maru-search-input-filter-popover"
26554
+ }, {
26555
+ children: jsxs("div", {
26556
+ children: [jsx("ul", {
26557
+ children: formats.map(function (f) {
26558
+ return jsxs("li", {
26559
+ children: [jsx("div", __assign({
26560
+ className: "filter-key"
26561
+ }, {
26562
+ children: jsx("span", {
26563
+ children: f.columnName
26564
+ })
26565
+ })), jsx("div", __assign({
26566
+ className: "filter-value"
26567
+ }, {
26568
+ children: f.filter
26569
+ }))]
26570
+ }, f.columnIdKey);
26571
+ })
26572
+ }), jsxs("div", {
26573
+ children: [jsx(Button, __assign({
26574
+ variant: "outline",
26575
+ onClick: onReset
26576
+ }, {
26577
+ children: resetButtonContent
26578
+ })), jsx(Button, __assign({
26579
+ onClick: onSearch
26580
+ }, {
26581
+ children: searchButtonContent
26582
+ }))]
26583
+ })]
26584
+ })
26585
+ }))]
26586
+ });
26587
+ }
26588
+
26589
+ var css_248z$2 = ".maru-search-input .maru-input {\n border: 1px solid #e4e4e4;\n background-color: white;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n background-color: white;\n}\n.maru-search-input .maru-input:hover {\n background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter-button {\n border: unset;\n background-color: unset;\n padding: unset;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter-button .maru-tooltip-wrapper {\n padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter-button svg > path {\n stroke: #bdbdbd;\n fill: white;\n}\n.maru-search-input .maru-search-input-filter-button:hover svg > path {\n stroke: #8c8c8c;\n fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter-button.active svg > path {\n stroke: #5c5c5c;\n fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter-button.selected svg > path {\n stroke: var(--p);\n fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover {\n padding: 32px;\n border: 1px solid #e4e4e4;\n border-radius: 6px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul > li {\n display: flex;\n gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > ul > li .filter-key {\n width: 88px;\n display: flex;\n align-items: center;\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-search-input .maru-search-input-filter-popover > div > ul > li .filter-value {\n width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover > div > div {\n margin-top: 24px;\n display: flex;\n justify-content: flex-end;\n gap: 6px;\n}";
26224
26590
  styleInject(css_248z$2);
26225
26591
 
26226
26592
  function SearchInput(_a) {
26227
- var className = _a.className,
26228
- props = __rest(_a, ["className"]);
26593
+ var hiddenClearButton = _a.hiddenClearButton,
26594
+ className = _a.className,
26595
+ filter = _a.filter,
26596
+ props = __rest(_a, ["hiddenClearButton", "className", "filter"]);
26597
+ var inputWrapperRef = useRef(null);
26229
26598
  return jsx(Input, __assign({}, props, {
26599
+ wrapperRef: inputWrapperRef,
26230
26600
  type: "text",
26601
+ className: classNames('maru-search-input', className),
26231
26602
  startNode: jsx(Icon, {
26232
26603
  name: ICONS.SearchMd_s1615,
26233
26604
  color: "#bdbdbd"
26234
26605
  }),
26235
- className: classNames('maru-search-input', className)
26606
+ endNode: filter ? jsx(Filter, {
26607
+ on: filter.on,
26608
+ formats: filter.formats,
26609
+ hoverContent: filter.hoverContent,
26610
+ onReset: filter.onReset,
26611
+ resetButtonContent: filter.resetButtonContent,
26612
+ onSearch: filter.onSearch,
26613
+ searchButtonContent: filter.searchButtonContent,
26614
+ inputWrapperRef: inputWrapperRef
26615
+ }) : undefined,
26616
+ hiddenClearButton: filter ? true : hiddenClearButton
26236
26617
  }));
26237
26618
  }
26238
26619
 
26239
- function CheckboxTd(_a) {
26620
+ function EmptyTr(_a) {
26621
+ var noDataMessage = _a.noDataMessage,
26622
+ loadingContent = _a.loadingContent,
26623
+ emptyBodyHeight = _a.emptyBodyHeight;
26624
+ var ref = useRef(null);
26625
+ useEffect(function () {
26626
+ if (ref.current && emptyBodyHeight) {
26627
+ ref.current.style.height = "".concat(emptyBodyHeight, "px");
26628
+ }
26629
+ }, [emptyBodyHeight]);
26630
+ return jsx("tr", __assign({
26631
+ ref: ref,
26632
+ className: "maru-table-body-empty-tr"
26633
+ }, {
26634
+ children: jsx("td", {
26635
+ children: noDataMessage ? jsxs(Fragment, {
26636
+ children: [jsx(Icon, {
26637
+ name: ICONS.FileX02_s3220,
26638
+ color: "#bdbdbd"
26639
+ }), jsx("p", {
26640
+ children: noDataMessage
26641
+ })]
26642
+ }) : loadingContent || jsx("div", __assign({
26643
+ className: "loading-wrapper"
26644
+ }, {
26645
+ children: jsx(Icon, {
26646
+ name: ICONS.Loading02_s2420,
26647
+ color: "#bdbdbd"
26648
+ })
26649
+ }))
26650
+ })
26651
+ }));
26652
+ }
26653
+
26654
+ function BinButtonTd(_a) {
26240
26655
  var rowId = _a.rowId,
26241
- checked = _a.checked,
26656
+ hovered = _a.hovered,
26657
+ _onClick = _a.onClick;
26658
+ return jsx("td", __assign({
26659
+ className: "maru-table-body-bin-button-td"
26660
+ }, {
26661
+ children: jsx("div", __assign({
26662
+ className: "maru-table-body-bin-button-wrapper"
26663
+ }, {
26664
+ children: jsx(Button, {
26665
+ startIcon: {
26666
+ name: ICONS.Trash01_s1815,
26667
+ color: hovered ? 'danger' : '#8c8c8c'
26668
+ },
26669
+ color: "danger",
26670
+ onClick: function onClick() {
26671
+ return _onClick(rowId);
26672
+ }
26673
+ })
26674
+ }))
26675
+ }));
26676
+ }
26677
+
26678
+ function ChartButtonTd(_a) {
26679
+ var rowId = _a.rowId,
26680
+ hovered = _a.hovered,
26681
+ selected = _a.selected,
26682
+ _onClick = _a.onClick;
26683
+ return jsx("td", __assign({
26684
+ className: "maru-table-body-bin-button-td"
26685
+ }, {
26686
+ children: jsx("div", __assign({
26687
+ className: "maru-table-body-bin-button-wrapper"
26688
+ }, {
26689
+ children: jsx(Button, {
26690
+ startIcon: {
26691
+ name: selected ? ICONS.BarChartSquare01Bg_s1810 : ICONS.BarChartSquare01_s1810,
26692
+ color: selected ? 'primary' : hovered ? '#5c5c5c' : '#8c8c8c'
26693
+ },
26694
+ color: "#8c8c8c",
26695
+ onClick: function onClick() {
26696
+ return _onClick(rowId);
26697
+ }
26698
+ })
26699
+ }))
26700
+ }));
26701
+ }
26702
+
26703
+ function CheckboxTd(_a) {
26704
+ var checked = _a.checked,
26242
26705
  onCheck = _a.onCheck;
26243
26706
  var handleCheck = function handleCheck(e) {
26244
- onCheck(rowId, e.currentTarget.checked);
26707
+ onCheck(e.currentTarget.checked);
26245
26708
  };
26246
26709
  return (
26247
26710
  // eslint-disable-next-line jsx-a11y/control-has-associated-label
@@ -26305,11 +26768,10 @@ function KebabMenuTd(_a) {
26305
26768
  }
26306
26769
 
26307
26770
  function RadioTd(_a) {
26308
- var rowId = _a.rowId,
26309
- checked = _a.checked,
26771
+ var checked = _a.checked,
26310
26772
  onCheck = _a.onCheck;
26311
26773
  var handleCheck = function handleCheck(e) {
26312
- onCheck(rowId, e.currentTarget.checked);
26774
+ onCheck(e.currentTarget.checked);
26313
26775
  };
26314
26776
  return (
26315
26777
  // eslint-disable-next-line jsx-a11y/control-has-associated-label
@@ -26327,45 +26789,10 @@ function RadioTd(_a) {
26327
26789
  );
26328
26790
  }
26329
26791
 
26330
- function TBodyEmptyContent(_a) {
26331
- var status = _a.status,
26332
- noData = _a.noData,
26333
- loading = _a.loading,
26334
- emptyBodyHeight = _a.emptyBodyHeight;
26335
- var ref = useRef(null);
26336
- useEffect(function () {
26337
- if (ref.current && emptyBodyHeight) {
26338
- ref.current.style.height = "".concat(emptyBodyHeight, "px");
26339
- }
26340
- }, [emptyBodyHeight]);
26341
- return jsx("tr", __assign({
26342
- ref: ref,
26343
- className: "maru-table-body-empty-tr"
26344
- }, {
26345
- children: jsx("td", {
26346
- children: status === 'no-data' ? jsxs(Fragment, {
26347
- children: [jsx(Icon, {
26348
- name: ICONS.FileX02_s3220,
26349
- color: "#bdbdbd"
26350
- }), jsx("p", {
26351
- children: noData === null || noData === void 0 ? void 0 : noData.message
26352
- })]
26353
- }) : (loading === null || loading === void 0 ? void 0 : loading.content) || jsx("div", __assign({
26354
- className: "loading-wrapper"
26355
- }, {
26356
- children: jsx(Icon, {
26357
- name: ICONS.Loading02_s2420,
26358
- color: "#bdbdbd"
26359
- })
26360
- }))
26361
- })
26362
- }));
26363
- }
26364
-
26365
- function TBody(_a) {
26366
- var rowIdKey = _a.rowIdKey,
26792
+ function Tr(_a) {
26793
+ var row = _a.row,
26794
+ rowIdKey = _a.rowIdKey,
26367
26795
  formats = _a.formats,
26368
- data = _a.data,
26369
26796
  checkedIds = _a.checkedIds,
26370
26797
  onCheck = _a.onCheck,
26371
26798
  radioCheckedId = _a.radioCheckedId,
@@ -26373,22 +26800,28 @@ function TBody(_a) {
26373
26800
  hasActionCol = _a.hasActionCol,
26374
26801
  kebabMenu = _a.kebabMenu,
26375
26802
  binButton = _a.binButton,
26376
- arrowButton = _a.arrowButton,
26803
+ chartButton = _a.chartButton,
26377
26804
  onRowClick = _a.onRowClick,
26378
26805
  selectedRow = _a.selectedRow,
26379
- highlightRows = _a.highlightRows,
26380
- noData = _a.noData,
26381
- loading = _a.loading,
26382
- emptyBodyHeight = _a.emptyBodyHeight;
26806
+ highlightRows = _a.highlightRows;
26383
26807
  var _b = useState(''),
26384
26808
  hoveredRowId = _b[0],
26385
26809
  setHoveredRowId = _b[1];
26386
- var tableBodyStatus = useMemo(function () {
26387
- if (loading === null || loading === void 0 ? void 0 : loading.isLoading) return 'loading';
26388
- if (noData === null || noData === void 0 ? void 0 : noData.isNoData) return 'no-data';
26389
- return 'enable';
26390
- }, [noData, loading]);
26391
- var handleCheck = function handleCheck(rowId, checked) {
26810
+ var ref = useRef(null);
26811
+ var rowId = useMemo(function () {
26812
+ return row[rowIdKey];
26813
+ }, [row, rowIdKey]);
26814
+ useEffect(function () {
26815
+ var _a;
26816
+ if (rowId === (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.scrollIntoView)) {
26817
+ (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
26818
+ behavior: 'smooth',
26819
+ block: 'center',
26820
+ inline: 'center'
26821
+ });
26822
+ }
26823
+ }, [rowId, selectedRow]);
26824
+ var handleCheck = function handleCheck(checked) {
26392
26825
  if (checked) {
26393
26826
  var newCheckedArray = checkedIds ? __spreadArray([], checkedIds, true) : [];
26394
26827
  newCheckedArray.push(rowId);
@@ -26400,120 +26833,143 @@ function TBody(_a) {
26400
26833
  onCheck === null || onCheck === void 0 ? void 0 : onCheck(__spreadArray([], newCheckedArray, true));
26401
26834
  }
26402
26835
  };
26403
- var handleRadioCheck = function handleRadioCheck(rowId, checked) {
26836
+ var handleRadioCheck = function handleRadioCheck(checked) {
26404
26837
  if (checked) {
26405
26838
  onRadioCheck === null || onRadioCheck === void 0 ? void 0 : onRadioCheck(rowId);
26406
26839
  }
26407
26840
  };
26408
- var handleRowClick = function handleRowClick(rowId) {
26409
- return function () {
26410
- onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowId);
26411
- };
26841
+ var handleRowClick = function handleRowClick() {
26842
+ onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowId);
26412
26843
  };
26413
- var handleRowEnter = function handleRowEnter(rowId) {
26414
- return function () {
26415
- setHoveredRowId(rowId);
26416
- };
26844
+ var handleRowEnter = function handleRowEnter() {
26845
+ setHoveredRowId(rowId);
26417
26846
  };
26418
26847
  var handleRowLeave = function handleRowLeave() {
26419
- return function () {
26420
- setHoveredRowId('');
26421
- };
26422
- };
26423
- var handleArrowButtonClick = function handleArrowButtonClick(row) {
26424
- return function (e) {
26425
- e.stopPropagation();
26426
- arrowButton === null || arrowButton === void 0 ? void 0 : arrowButton.onClick(row[rowIdKey]);
26427
- };
26848
+ setHoveredRowId('');
26428
26849
  };
26850
+ return jsxs("tr", __assign({
26851
+ ref: ref,
26852
+ onClick: handleRowClick,
26853
+ onMouseEnter: handleRowEnter,
26854
+ onMouseLeave: handleRowLeave,
26855
+ className: classNames({
26856
+ 'clickable-row': onRowClick,
26857
+ 'selected-row': selectedRow && selectedRow.rowId === rowId,
26858
+ 'highlight-row': highlightRows && highlightRows.rowIds.includes(rowId)
26859
+ }, selectedRow && selectedRow.className, highlightRows && highlightRows.className)
26860
+ }, {
26861
+ children: [checkedIds != null && jsx(CheckboxTd, {
26862
+ checked: !!(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.includes(rowId)),
26863
+ onCheck: handleCheck
26864
+ }), radioCheckedId != null && jsx(RadioTd, {
26865
+ checked: radioCheckedId === rowId,
26866
+ onCheck: handleRadioCheck
26867
+ }), formats.map(function (format) {
26868
+ if (format.isHide) return null;
26869
+ var cellHashId = uuidv4(4);
26870
+ return jsx("td", {
26871
+ children: format.customColumn ? format.customColumn(row[format.columnIdKey], rowId) : row[format.columnIdKey]
26872
+ }, "cell-".concat(row[format.columnIdKey], "-").concat(cellHashId));
26873
+ }), (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(rowId)) === 'always' || (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(rowId)) === 'hover' && hoveredRowId === rowId ? jsx(KebabMenuTd, {
26874
+ rowId: rowId,
26875
+ kebabContent: kebabMenu.content
26876
+ }) :
26877
+ // 최우측: 휴지통 버튼
26878
+ (binButton === null || binButton === void 0 ? void 0 : binButton.show(rowId)) === 'always' || (binButton === null || binButton === void 0 ? void 0 : binButton.show(rowId)) === 'hover' && hoveredRowId === rowId ? jsx(BinButtonTd, {
26879
+ rowId: rowId,
26880
+ hovered: hoveredRowId === rowId,
26881
+ onClick: binButton.onClick
26882
+ }) :
26883
+ // 최우측: 차트 버튼
26884
+ (chartButton === null || chartButton === void 0 ? void 0 : chartButton.show(rowId)) === 'always' || (chartButton === null || chartButton === void 0 ? void 0 : chartButton.show(rowId)) === 'hover' && hoveredRowId === rowId ? jsx(ChartButtonTd, {
26885
+ rowId: rowId,
26886
+ hovered: hoveredRowId === rowId,
26887
+ selected: selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === rowId,
26888
+ onClick: chartButton.onClick
26889
+ }) :
26890
+ // 최우측에 뭐라도 있다고 하면 빈공간으로 있다는 표시 해둠: action column icon width = 18px
26891
+ hasActionCol && jsx("td", {
26892
+ children: jsx("div", {
26893
+ style: {
26894
+ width: '18px'
26895
+ }
26896
+ })
26897
+ })]
26898
+ }));
26899
+ }
26900
+
26901
+ function TBody(_a) {
26902
+ var rowIdKey = _a.rowIdKey,
26903
+ formats = _a.formats,
26904
+ data = _a.data,
26905
+ checkedIds = _a.checkedIds,
26906
+ onCheck = _a.onCheck,
26907
+ radioCheckedId = _a.radioCheckedId,
26908
+ onRadioCheck = _a.onRadioCheck,
26909
+ hasActionCol = _a.hasActionCol,
26910
+ kebabMenu = _a.kebabMenu,
26911
+ binButton = _a.binButton,
26912
+ chartButton = _a.chartButton,
26913
+ onRowClick = _a.onRowClick,
26914
+ selectedRow = _a.selectedRow,
26915
+ highlightRows = _a.highlightRows,
26916
+ noData = _a.noData,
26917
+ loading = _a.loading,
26918
+ emptyBodyHeight = _a.emptyBodyHeight;
26429
26919
  return jsx("tbody", __assign({
26430
26920
  className: "maru-table-body"
26431
26921
  }, {
26432
- children: tableBodyStatus !== 'enable' ? jsx(TBodyEmptyContent, {
26433
- status: tableBodyStatus,
26434
- noData: noData,
26435
- loading: loading,
26922
+ children: (loading === null || loading === void 0 ? void 0 : loading.isLoading) || (noData === null || noData === void 0 ? void 0 : noData.isNoData) ? jsx(EmptyTr, {
26923
+ noDataMessage: noData === null || noData === void 0 ? void 0 : noData.message,
26924
+ loadingContent: loading === null || loading === void 0 ? void 0 : loading.content,
26436
26925
  emptyBodyHeight: emptyBodyHeight
26437
26926
  }) : data.map(function (row) {
26438
- return jsx(React__default.Fragment, {
26439
- children: jsxs("tr", __assign({
26440
- onClick: handleRowClick(row[rowIdKey]),
26441
- onMouseEnter: handleRowEnter(row[rowIdKey]),
26442
- onMouseLeave: handleRowLeave(),
26443
- className: classNames({
26444
- 'clickable-row': onRowClick,
26445
- 'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey] || hoveredRowId === row[rowIdKey],
26446
- 'highlight-row': highlightRows && (highlightRows === null || highlightRows === void 0 ? void 0 : highlightRows.rowIds.includes(row[rowIdKey]))
26447
- }, selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.className), highlightRows && (highlightRows === null || highlightRows === void 0 ? void 0 : highlightRows.className))
26448
- }, {
26449
- children: [checkedIds != null && jsx(CheckboxTd, {
26450
- rowId: row[rowIdKey],
26451
- checked: !!(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.includes(row[rowIdKey])),
26452
- onCheck: handleCheck
26453
- }), radioCheckedId != null && jsx(RadioTd, {
26454
- rowId: row[rowIdKey],
26455
- checked: radioCheckedId === row[rowIdKey],
26456
- onCheck: handleRadioCheck
26457
- }), formats.map(function (format) {
26458
- if (format.isHide) return null;
26459
- var cellHashId = uuidv4(4);
26460
- return jsx("td", {
26461
- children: format.customColumn ? format.customColumn(row[format.columnIdKey], row[rowIdKey]) : row[format.columnIdKey]
26462
- }, "cell-".concat(row[format.columnIdKey], "-").concat(cellHashId));
26463
- }), (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(row[rowIdKey])) === 'always' || (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(row[rowIdKey])) === 'hover' && hoveredRowId === row[rowIdKey] ?
26464
- // eslint-disable-next-line react/jsx-indent
26465
- jsx(KebabMenuTd, {
26466
- rowId: row[rowIdKey],
26467
- kebabContent: kebabMenu.content
26468
- }) : (binButton === null || binButton === void 0 ? void 0 : binButton.show(row[rowIdKey])) === 'always' || (binButton === null || binButton === void 0 ? void 0 : binButton.show(row[rowIdKey])) === 'hover' && hoveredRowId === row[rowIdKey] ?
26469
- // eslint-disable-next-line jsx-a11y/control-has-associated-label, react/jsx-indent
26470
- jsx("td", __assign({
26471
- className: "maru-table-body-bin-button-td"
26472
- }, {
26473
- children: jsx("div", __assign({
26474
- className: "maru-table-body-bin-button-wrapper"
26475
- }, {
26476
- children: jsx(Button, {
26477
- startIcon: {
26478
- name: ICONS.Trash01_s1815,
26479
- color: hoveredRowId === row[rowIdKey] ? 'danger' : '#8c8c8c'
26480
- },
26481
- color: "danger",
26482
- onClick: function onClick() {
26483
- return binButton.onClick(row[rowIdKey]);
26484
- }
26485
- })
26486
- }))
26487
- })) : (arrowButton === null || arrowButton === void 0 ? void 0 : arrowButton.show(row[rowIdKey])) === 'always' || (arrowButton === null || arrowButton === void 0 ? void 0 : arrowButton.show(row[rowIdKey])) === 'hover' && hoveredRowId === row[rowIdKey] ?
26488
- // eslint-disable-next-line jsx-a11y/control-has-associated-label, react/jsx-indent
26489
- jsx("td", __assign({
26490
- className: "maru-table-body-bin-button-td"
26491
- }, {
26492
- children: jsx("div", __assign({
26493
- className: "maru-table-body-bin-button-wrapper"
26494
- }, {
26495
- children: jsx(Button, {
26496
- startIcon: {
26497
- name: ICONS.ArrowRight_s1813,
26498
- color: '#5c5c5c'
26499
- },
26500
- color: "#5c5c5c",
26501
- onClick: handleArrowButtonClick(row)
26502
- })
26503
- }))
26504
- })) : hasActionCol ? jsx("td", {
26505
- children: jsx("div", {
26506
- style: {
26507
- width: '18px'
26508
- }
26509
- })
26510
- }) : null]
26511
- }))
26927
+ return jsx(Tr, {
26928
+ row: row,
26929
+ rowIdKey: rowIdKey,
26930
+ formats: formats,
26931
+ checkedIds: checkedIds,
26932
+ onCheck: onCheck,
26933
+ radioCheckedId: radioCheckedId,
26934
+ onRadioCheck: onRadioCheck,
26935
+ hasActionCol: hasActionCol,
26936
+ kebabMenu: kebabMenu,
26937
+ binButton: binButton,
26938
+ chartButton: chartButton,
26939
+ onRowClick: onRowClick,
26940
+ selectedRow: selectedRow,
26941
+ highlightRows: highlightRows,
26942
+ // 필수 props라서 전달하지만 쓰지는 않는 쓰레기값
26943
+ data: [],
26944
+ maxHeight: -1
26512
26945
  }, "table-row-".concat(row[rowIdKey]));
26513
26946
  })
26514
26947
  }));
26515
26948
  }
26516
26949
 
26950
+ function Colgroup(_a) {
26951
+ var hasCheckbox = _a.hasCheckbox,
26952
+ hasRadio = _a.hasRadio,
26953
+ formats = _a.formats,
26954
+ hasActionCol = _a.hasActionCol;
26955
+ return jsxs("colgroup", {
26956
+ children: [hasCheckbox ? jsx("col", {
26957
+ width: "5%"
26958
+ }) : null, hasRadio ? jsx("col", {
26959
+ width: "5%"
26960
+ }) : null, formats === null || formats === void 0 ? void 0 : formats.map(function (format) {
26961
+ if (format.isHide) {
26962
+ return null;
26963
+ }
26964
+ return jsx("col", {
26965
+ width: format.width || "".concat(90 / formats.length, "%")
26966
+ }, "col-".concat(format.columnIdKey));
26967
+ }), hasActionCol ? jsx("col", {
26968
+ width: "5%"
26969
+ }) : null]
26970
+ });
26971
+ }
26972
+
26517
26973
  function FilterButtonsTh(_a) {
26518
26974
  var toggle = _a.toggle,
26519
26975
  onToggle = _a.onToggle,
@@ -26618,13 +27074,13 @@ function THead(_a) {
26618
27074
  sort = _a.sort,
26619
27075
  onSortClick = _a.onSortClick,
26620
27076
  hasCheckbox = _a.hasCheckbox,
26621
- hasRadio = _a.hasRadio,
26622
27077
  allCheckbox = _a.allCheckbox,
26623
27078
  onAllCheck = _a.onAllCheck,
26624
- hasActionCol = _a.hasActionCol,
27079
+ hasRadio = _a.hasRadio,
26625
27080
  filter = _a.filter,
26626
27081
  filterToggle = _a.filterToggle,
26627
- setFilterToggle = _a.setFilterToggle;
27082
+ setFilterToggle = _a.setFilterToggle,
27083
+ hasActionCol = _a.hasActionCol;
26628
27084
  useEffect(function () {
26629
27085
  if (filter === null || filter === void 0 ? void 0 : filter.on) {
26630
27086
  setFilterToggle(filter === null || filter === void 0 ? void 0 : filter.on);
@@ -26635,7 +27091,7 @@ function THead(_a) {
26635
27091
  return !prev;
26636
27092
  });
26637
27093
  };
26638
- var handleChange = function handleChange(e) {
27094
+ var handleAllCheckChange = function handleAllCheckChange(e) {
26639
27095
  e.stopPropagation();
26640
27096
  onAllCheck(e.currentTarget.checked);
26641
27097
  };
@@ -26653,12 +27109,12 @@ function THead(_a) {
26653
27109
  }, {
26654
27110
  children: jsx(Checkbox, {
26655
27111
  checked: allCheckbox,
26656
- onChange: handleChange,
27112
+ onChange: handleAllCheckChange,
26657
27113
  color: "#5C5C5C"
26658
27114
  })
26659
27115
  })) : jsx(Checkbox, {
26660
27116
  checked: allCheckbox,
26661
- onChange: handleChange,
27117
+ onChange: handleAllCheckChange,
26662
27118
  color: "#5C5C5C"
26663
27119
  })
26664
27120
  })), hasRadio && jsx("th", {
@@ -26722,29 +27178,6 @@ function THead(_a) {
26722
27178
  }));
26723
27179
  }
26724
27180
 
26725
- function Colgroup(_a) {
26726
- var hasCheckbox = _a.hasCheckbox,
26727
- hasRadio = _a.hasRadio,
26728
- formats = _a.formats,
26729
- hasActionCol = _a.hasActionCol;
26730
- return jsxs("colgroup", {
26731
- children: [hasCheckbox ? jsx("col", {
26732
- width: "5%"
26733
- }) : null, hasRadio ? jsx("col", {
26734
- width: "5%"
26735
- }) : null, formats === null || formats === void 0 ? void 0 : formats.map(function (format) {
26736
- if (format.isHide) {
26737
- return null;
26738
- }
26739
- return jsx("col", {
26740
- width: format.width || "".concat(90 / formats.length, "%")
26741
- }, "col-".concat(format.columnIdKey));
26742
- }), hasActionCol ? jsx("col", {
26743
- width: "5%"
26744
- }) : null]
26745
- });
26746
- }
26747
-
26748
27181
  var css_248z$1 = "@-webkit-keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@-webkit-keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@-webkit-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.maru-table-wrapper {\n width: 100%;\n background-color: white;\n box-shadow: 0px 0px 6px 0px #e4e4e4;\n border-radius: 6px;\n overflow-x: auto;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n width: 100%;\n}\n.maru-table-wrapper tr {\n height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n text-align: start;\n vertical-align: middle;\n padding: 16.5px 15px;\n word-break: break-word;\n color: #5c5c5c;\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n padding: 16.5px 25px;\n}\n.maru-table-wrapper .checkbox-td {\n padding: 18px 15px 18px 25px !important;\n}\n.maru-table-wrapper .radio-td {\n padding: 11px 15px !important;\n}\n.maru-table-wrapper .maru-table-header tr {\n border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\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-table-wrapper .maru-table-header .filter-th {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th.toggle-on .filter-box {\n width: 100%;\n height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n padding: 18px 15px 16px 15px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n margin-bottom: 8px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n padding: unset;\n margin: unset;\n color: #5c5c5c;\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-table-wrapper .maru-table-header .sort-icon-wrapper-th {\n display: flex;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n background-color: var(--p-05);\n}\n.maru-table-wrapper .maru-table-body .highlight-row {\n background-color: var(--p-20);\n}\n.maru-table-wrapper .maru-table-body td {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 400;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n border-bottom-left-radius: 6px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n border-bottom-right-radius: 6px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-td .maru-table-body-kebab-wrapper {\n display: flex;\n flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-bin-button-td .maru-table-body-bin-button-wrapper {\n display: flex;\n flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n margin: unset;\n padding: unset;\n height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n width: 100%;\n vertical-align: middle;\n text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n margin-top: 20px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 400;\n color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n -webkit-animation: blink 1s infinite;\n animation: blink 1s infinite;\n}";
26749
27182
  styleInject(css_248z$1);
26750
27183
 
@@ -26763,7 +27196,7 @@ function Table(_a) {
26763
27196
  filter = _a.filter,
26764
27197
  kebabMenu = _a.kebabMenu,
26765
27198
  binButton = _a.binButton,
26766
- arrowButton = _a.arrowButton,
27199
+ chartButton = _a.chartButton,
26767
27200
  onRowClick = _a.onRowClick,
26768
27201
  selectedRow = _a.selectedRow,
26769
27202
  highlightRows = _a.highlightRows,
@@ -26787,9 +27220,9 @@ function Table(_a) {
26787
27220
  /**
26788
27221
  * 최우측 컬럼(=액션 컬럼)에 자리를 차지 하는지 여부
26789
27222
  * 헤더에는 filter 가 올 수 있고,
26790
- * 바디에는 kebabMenu, binButton, arrowButton 중 하나가 올 수 있다.
27223
+ * 바디에는 kebabMenu, binButton, chartButton 중 하나가 올 수 있다.
26791
27224
  */
26792
- var hasActionCol = filter != null || kebabMenu != null || binButton != null || arrowButton != null;
27225
+ var hasActionCol = filter != null || kebabMenu != null || binButton != null || chartButton != null;
26793
27226
  /**
26794
27227
  * 테이블 바디 높이 조정
26795
27228
  * 1. maxHeight가 헤더 높이보다 클때만 조정 (참고로 헤더 높이는 최소 55 최대 105)
@@ -26909,13 +27342,13 @@ function Table(_a) {
26909
27342
  sort: sort,
26910
27343
  onSortClick: handleSortClick,
26911
27344
  hasCheckbox: checkedIds != null,
26912
- hasRadio: radioCheckedId != null,
26913
27345
  allCheckbox: allChecked,
26914
27346
  onAllCheck: handleAllCheckboxChange,
26915
- hasActionCol: hasActionCol,
27347
+ hasRadio: radioCheckedId != null,
26916
27348
  filter: filter,
26917
27349
  filterToggle: filterToggle,
26918
- setFilterToggle: setFilterToggle
27350
+ setFilterToggle: setFilterToggle,
27351
+ hasActionCol: hasActionCol
26919
27352
  })]
26920
27353
  })), jsx("div", __assign({
26921
27354
  ref: tableBodyScrollWrapperRef,
@@ -26934,6 +27367,7 @@ function Table(_a) {
26934
27367
  rowIdKey: rowIdKey,
26935
27368
  formats: formats,
26936
27369
  data: data,
27370
+ maxHeight: maxHeight,
26937
27371
  checkedIds: checkedIds,
26938
27372
  onCheck: onCheck,
26939
27373
  radioCheckedId: radioCheckedId,
@@ -26941,7 +27375,7 @@ function Table(_a) {
26941
27375
  hasActionCol: hasActionCol,
26942
27376
  kebabMenu: kebabMenu,
26943
27377
  binButton: binButton,
26944
- arrowButton: arrowButton,
27378
+ chartButton: chartButton,
26945
27379
  onRowClick: onRowClick,
26946
27380
  selectedRow: selectedRow,
26947
27381
  highlightRows: highlightRows,
@@ -27115,4 +27549,4 @@ function Toast(_a) {
27115
27549
  }));
27116
27550
  }
27117
27551
 
27118
- export { Button, Calendar, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, MultiSelectDropdown, Pagination, Popover, Radio, SearchInput, Skeleton, StyleProvider, Table, Textarea, Toast, Toggle, Tooltip };
27552
+ export { Button, Calendar, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, MultiSelectDropdown, Pagination, Popover, Radio, SearchInput, Skeleton, Slider, StyleProvider, Table, Textarea, Toast, Toggle, Tooltip };