maru_design2 2.23.1 → 2.23.3

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/components/atoms/icon/iconmap.d.ts +3 -0
  3. package/dist/index.js +103 -8
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.23.3](https://github.com/42maru-ai/maru-design2/compare/v2.23.2...v2.23.3) (2025-03-12)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * :bento: Icon - add llm-studio icons [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([cf94bd4](https://github.com/42maru-ai/maru-design2/commit/cf94bd4d76f10f6ded4e094e4e2feb2186ad6d04))
9
+ * :bug: Slider - FIX 여러 개의 슬라이더가 있을 때 하나를 조정해도 배경색이 동시에 다 변하는 버그 수정 ([e9bc3a3](https://github.com/42maru-ai/maru-design2/commit/e9bc3a3547f6ab11227628126767e08c63a203c0))
10
+ * :speech_balloon: update iconmap ([2740b73](https://github.com/42maru-ai/maru-design2/commit/2740b73f1c3e62e1a435288fa98b42602fd5d5fc))
11
+
12
+ ## [2.23.2](https://github.com/42maru-ai/maru-design2/compare/v2.23.1...v2.23.2) (2025-03-04)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * :lipstick: Button - UPDATE color-on-focus design ([2b830d5](https://github.com/42maru-ai/maru-design2/commit/2b830d543f22ce0e9cbfbf534a2af7e74512b074))
18
+ * :lipstick: Modal - update border radius [#513](https://github.com/42maru-ai/maru-design2/issues/513) ([e4cf6cf](https://github.com/42maru-ai/maru-design2/commit/e4cf6cfe1e35c1a392868a9c6e099711168f7fd9))
19
+
3
20
  ## [2.23.1](https://github.com/42maru-ai/maru-design2/compare/v2.23.0...v2.23.1) (2025-02-19)
4
21
 
5
22
 
package/dist/components/atoms/icon/iconmap.d.ts CHANGED
@@ -144,8 +144,10 @@ export declare const ICONS: {
144
144
  readonly Dataflow04_s1615: "Dataflow04_s1615";
145
145
  readonly Dataflow04_s2415: "Dataflow04_s2415";
146
146
  readonly Dataflow05_s1815: "Dataflow05_s1815";
147
+ readonly Diagram02_s1610: "Diagram02_s1610";
147
148
  readonly Diagram_s2014: "Diagram_s2014";
148
149
  readonly Diagram_s2415: "Diagram_s2415";
150
+ readonly Dotpoints01_s1617: "Dotpoints01_s1617";
149
151
  readonly Dotpoints01_s2420: "Dotpoints01_s2420";
150
152
  readonly DotsGrid_s1815: "DotsGrid_s1815";
151
153
  readonly DotsGrid_s2420: "DotsGrid_s2420";
@@ -162,6 +164,7 @@ export declare const ICONS: {
162
164
  readonly Downstream_s1410: "Downstream_s1410";
163
165
  readonly Downstream_s2410: "Downstream_s2410";
164
166
  readonly Drag_s1613: "Drag_s1613";
167
+ readonly Edit03_s1210: "Edit03_s1210";
165
168
  readonly Edit03_s1413: "Edit03_s1413";
166
169
  readonly Edit03_s1613: "Edit03_s1613";
167
170
  readonly Expand_s1613: "Expand_s1613";
package/dist/index.js CHANGED
@@ -2001,6 +2001,39 @@ var iconmap = {
2001
2001
  }],
2002
2002
  "rects": []
2003
2003
  },
2004
+ "Diagram02_s1610": {
2005
+ "width": "16",
2006
+ "height": "16",
2007
+ "viewBox": "0 0 16 16",
2008
+ "fill": "none",
2009
+ "paths": [{
2010
+ "d": "M2.6665 3.33268C2.6665 3.15587 2.73674 2.9863 2.86177 2.86128C2.98679 2.73625 3.15636 2.66602 3.33317 2.66602H5.99984C6.17665 2.66602 6.34622 2.73625 6.47124 2.86128C6.59627 2.9863 6.6665 3.15587 6.6665 3.33268V5.99935C6.6665 6.17616 6.59627 6.34573 6.47124 6.47075C6.34622 6.59578 6.17665 6.66602 5.99984 6.66602H3.33317C3.15636 6.66602 2.98679 6.59578 2.86177 6.47075C2.73674 6.34573 2.6665 6.17616 2.6665 5.99935V3.33268Z",
2011
+ "fill": "#BDBDBD",
2012
+ "stroke": "#BDBDBD",
2013
+ "strokeLinecap": "round",
2014
+ "strokeLinejoin": "round"
2015
+ }, {
2016
+ "d": "M9.3335 3.33268C9.3335 3.15587 9.40373 2.9863 9.52876 2.86128C9.65378 2.73625 9.82335 2.66602 10.0002 2.66602H12.6668C12.8436 2.66602 13.0132 2.73625 13.1382 2.86128C13.2633 2.9863 13.3335 3.15587 13.3335 3.33268V5.99935C13.3335 6.17616 13.2633 6.34573 13.1382 6.47075C13.0132 6.59578 12.8436 6.66602 12.6668 6.66602H10.0002C9.82335 6.66602 9.65378 6.59578 9.52876 6.47075C9.40373 6.34573 9.3335 6.17616 9.3335 5.99935V3.33268Z",
2017
+ "fill": "#BDBDBD",
2018
+ "stroke": "#BDBDBD",
2019
+ "strokeLinecap": "round",
2020
+ "strokeLinejoin": "round"
2021
+ }, {
2022
+ "d": "M2.6665 10.0007C2.6665 9.82384 2.73674 9.65427 2.86177 9.52925C2.98679 9.40422 3.15636 9.33398 3.33317 9.33398H5.99984C6.17665 9.33398 6.34622 9.40422 6.47124 9.52925C6.59627 9.65427 6.6665 9.82384 6.6665 10.0007V12.6673C6.6665 12.8441 6.59627 13.0137 6.47124 13.1387C6.34622 13.2637 6.17665 13.334 5.99984 13.334H3.33317C3.15636 13.334 2.98679 13.2637 2.86177 13.1387C2.73674 13.0137 2.6665 12.8441 2.6665 12.6673V10.0007Z",
2023
+ "fill": "#BDBDBD",
2024
+ "stroke": "#BDBDBD",
2025
+ "strokeLinecap": "round",
2026
+ "strokeLinejoin": "round"
2027
+ }, {
2028
+ "d": "M9.3335 10.0007C9.3335 9.82384 9.40373 9.65427 9.52876 9.52925C9.65378 9.40422 9.82335 9.33398 10.0002 9.33398H12.6668C12.8436 9.33398 13.0132 9.40422 13.1382 9.52925C13.2633 9.65427 13.3335 9.82384 13.3335 10.0007V12.6673C13.3335 12.8441 13.2633 13.0137 13.1382 13.1387C13.0132 13.2637 12.8436 13.334 12.6668 13.334H10.0002C9.82335 13.334 9.65378 13.2637 9.52876 13.1387C9.40373 13.0137 9.3335 12.8441 9.3335 12.6673V10.0007Z",
2029
+ "fill": "#BDBDBD",
2030
+ "stroke": "#BDBDBD",
2031
+ "strokeLinecap": "round",
2032
+ "strokeLinejoin": "round"
2033
+ }],
2034
+ "circles": [],
2035
+ "rects": []
2036
+ },
2004
2037
  "Diagram_s2014": {
2005
2038
  "width": "20",
2006
2039
  "height": "20",
@@ -2051,6 +2084,51 @@ var iconmap = {
2051
2084
  "circles": [],
2052
2085
  "rects": []
2053
2086
  },
2087
+ "Dotpoints01_s1617": {
2088
+ "width": "16",
2089
+ "height": "16",
2090
+ "viewBox": "0 0 16 16",
2091
+ "fill": "none",
2092
+ "paths": [{
2093
+ "d": "M6.66663 4H13.2218",
2094
+ "stroke": "#213A78",
2095
+ "strokeWidth": "1.7",
2096
+ "strokeLinecap": "round",
2097
+ "strokeLinejoin": "round"
2098
+ }, {
2099
+ "d": "M6.66663 7.99609H13.2218",
2100
+ "stroke": "#213A78",
2101
+ "strokeWidth": "1.7",
2102
+ "strokeLinecap": "round",
2103
+ "strokeLinejoin": "round"
2104
+ }, {
2105
+ "d": "M6.66663 11.9941H13.2218",
2106
+ "stroke": "#213A78",
2107
+ "strokeWidth": "1.7",
2108
+ "strokeLinecap": "round",
2109
+ "strokeLinejoin": "round"
2110
+ }, {
2111
+ "d": "M3.3335 4V4.00667",
2112
+ "stroke": "#213A78",
2113
+ "strokeWidth": "2.3",
2114
+ "strokeLinecap": "round",
2115
+ "strokeLinejoin": "round"
2116
+ }, {
2117
+ "d": "M3.3335 7.99609V8.00276",
2118
+ "stroke": "#213A78",
2119
+ "strokeWidth": "2.3",
2120
+ "strokeLinecap": "round",
2121
+ "strokeLinejoin": "round"
2122
+ }, {
2123
+ "d": "M3.3335 11.9941V12.0008",
2124
+ "stroke": "#213A78",
2125
+ "strokeWidth": "2.3",
2126
+ "strokeLinecap": "round",
2127
+ "strokeLinejoin": "round"
2128
+ }],
2129
+ "circles": [],
2130
+ "rects": []
2131
+ },
2054
2132
  "Dotpoints01_s2420": {
2055
2133
  "width": "24",
2056
2134
  "height": "24",
@@ -2537,6 +2615,20 @@ var iconmap = {
2537
2615
  "circles": [],
2538
2616
  "rects": []
2539
2617
  },
2618
+ "Edit03_s1210": {
2619
+ "width": "12",
2620
+ "height": "13",
2621
+ "viewBox": "0 0 12 13",
2622
+ "fill": "none",
2623
+ "paths": [{
2624
+ "d": "M5.99999 10.5001H10.5M1.5 10.5001H2.33727C2.58186 10.5001 2.70416 10.5001 2.81925 10.4725C2.92128 10.448 3.01883 10.4076 3.1083 10.3528C3.20921 10.2909 3.29569 10.2044 3.46864 10.0315L9.75001 3.75011C10.1642 3.3359 10.1642 2.66433 9.75001 2.25011C9.3358 1.8359 8.66423 1.8359 8.25001 2.25011L1.96863 8.53148C1.79568 8.70444 1.7092 8.79091 1.64736 8.89183C1.59253 8.9813 1.55213 9.07884 1.52763 9.18088C1.5 9.29597 1.5 9.41826 1.5 9.66285V10.5001Z",
2625
+ "stroke": "#213A78",
2626
+ "strokeLinecap": "round",
2627
+ "strokeLinejoin": "round"
2628
+ }],
2629
+ "circles": [],
2630
+ "rects": []
2631
+ },
2540
2632
  "Edit03_s1413": {
2541
2633
  "width": "14",
2542
2634
  "height": "14",
@@ -5805,8 +5897,10 @@ var ICONS = {
5805
5897
  "Dataflow04_s1615": "Dataflow04_s1615",
5806
5898
  "Dataflow04_s2415": "Dataflow04_s2415",
5807
5899
  "Dataflow05_s1815": "Dataflow05_s1815",
5900
+ "Diagram02_s1610": "Diagram02_s1610",
5808
5901
  "Diagram_s2014": "Diagram_s2014",
5809
5902
  "Diagram_s2415": "Diagram_s2415",
5903
+ "Dotpoints01_s1617": "Dotpoints01_s1617",
5810
5904
  "Dotpoints01_s2420": "Dotpoints01_s2420",
5811
5905
  "DotsGrid_s1815": "DotsGrid_s1815",
5812
5906
  "DotsGrid_s2420": "DotsGrid_s2420",
@@ -5823,6 +5917,7 @@ var ICONS = {
5823
5917
  "Downstream_s1410": "Downstream_s1410",
5824
5918
  "Downstream_s2410": "Downstream_s2410",
5825
5919
  "Drag_s1613": "Drag_s1613",
5920
+ "Edit03_s1210": "Edit03_s1210",
5826
5921
  "Edit03_s1413": "Edit03_s1413",
5827
5922
  "Edit03_s1613": "Edit03_s1613",
5828
5923
  "Expand_s1613": "Expand_s1613",
@@ -6100,7 +6195,7 @@ function Icon(_a) {
6100
6195
  }));
6101
6196
  }
6102
6197
 
6103
- 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: #32a483;\n color: white;\n}\n.maru-button-positive-default:hover {\n box-shadow: 0 0 6px #32a483;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n box-shadow: none;\n background-color: #eaf6f3;\n color: #32a483;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-default-light {\n background-color: #eaf6f3;\n color: #32a483;\n}\n.maru-button-positive-default-light:hover {\n box-shadow: 0 0 6px rgba(50, 164, 131, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n box-shadow: none;\n background-color: #32a483;\n color: white;\n}\n.maru-button-positive-outline {\n background-color: white;\n color: #32a483;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-outline:hover {\n box-shadow: 0 0 6px #d6ede6;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n box-shadow: none;\n background-color: #d6ede6;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-text {\n background-color: transparent;\n color: #32a483;\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: #eaf6f3;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n background-color: #eaf6f3;\n color: #32a483;\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}";
6198
+ 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 #bdbdbd 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 #bdbdbd 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: #32a483;\n color: white;\n}\n.maru-button-positive-default:hover {\n box-shadow: 0 0 6px #32a483;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n box-shadow: none;\n background-color: #eaf6f3;\n color: #32a483;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-default-light {\n background-color: #eaf6f3;\n color: #32a483;\n}\n.maru-button-positive-default-light:hover {\n box-shadow: 0 0 6px rgba(50, 164, 131, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n box-shadow: none;\n background-color: #32a483;\n color: white;\n}\n.maru-button-positive-outline {\n background-color: white;\n color: #32a483;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-outline:hover {\n box-shadow: 0 0 6px #d6ede6;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n box-shadow: none;\n background-color: #d6ede6;\n box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-positive-text {\n background-color: transparent;\n color: #32a483;\n}\n.maru-button-positive-color-on-focus {\n background-color: white;\n color: #5c5c5c;\n box-shadow: 0 0 0 1px #bdbdbd inset;\n padding: 5px 7px 5px 6px !important;\n gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n background-color: #eaf6f3;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n background-color: #eaf6f3;\n color: #32a483;\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 #bdbdbd 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 #bdbdbd 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 #bdbdbd 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}";
6104
6199
  styleInject(css_248z$j);
6105
6200
 
6106
6201
  var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -8582,7 +8677,7 @@ function Skeleton(_a) {
8582
8677
  });
8583
8678
  }
8584
8679
 
8585
- 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, #32a483 0%, #32a483 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 #32a483;\n}\n.maru-slider-positive .maru-slider::-moz-range-thumb {\n border: 3px solid #32a483;\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}";
8680
+ 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) var(--slider-progress), #e4e4e4 var(--slider-progress), #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 var(--slider-progress), #e4e4e4 var(--slider-progress), #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, #32a483 0%, #32a483 var(--slider-progress), #e4e4e4 var(--slider-progress), #e4e4e4 100%);\n}\n.maru-slider-positive .maru-slider::-webkit-slider-thumb {\n border: 3px solid #32a483;\n}\n.maru-slider-positive .maru-slider::-moz-range-thumb {\n border: 3px solid #32a483;\n}\n\n.maru-slider-warning .maru-slider {\n background: linear-gradient(to right, #ffb020 0%, #ffb020 var(--slider-progress), #e4e4e4 var(--slider-progress), #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 var(--slider-progress), #e4e4e4 var(--slider-progress), #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 var(--slider-progress), #e4e4e4 var(--slider-progress), #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}";
8586
8681
  styleInject(css_248z$c);
8587
8682
 
8588
8683
  function Slider(_a) {
@@ -8599,10 +8694,7 @@ function Slider(_a) {
8599
8694
  _f = _a.disabled,
8600
8695
  disabled = _f === void 0 ? false : _f,
8601
8696
  className = _a.className;
8602
- useEffect(function () {
8603
- var progress = (value - min) / (max - min);
8604
- document.documentElement.style.setProperty('--slider-progress', progress.toString());
8605
- }, [value, min, max]);
8697
+ var progress = (value - min) / (max - min) * 100;
8606
8698
  var handleSliderChange = function handleSliderChange(e) {
8607
8699
  onChange(+e.target.value);
8608
8700
  };
@@ -8619,7 +8711,10 @@ function Slider(_a) {
8619
8711
  min: min,
8620
8712
  max: max,
8621
8713
  step: step,
8622
- disabled: disabled
8714
+ disabled: disabled,
8715
+ style: {
8716
+ '--slider-progress': "".concat(progress, "%")
8717
+ }
8623
8718
  })
8624
8719
  }));
8625
8720
  }
@@ -26023,7 +26118,7 @@ function Dropdown(_a) {
26023
26118
  }));
26024
26119
  }
26025
26120
 
26026
- var css_248z$5 = ".maru-modal-wrapper {\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n background-color: rgba(92, 92, 92, 0.5019607843);\n z-index: 6006;\n display: block;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n background-color: white;\n border-radius: 12px;\n box-shadow: 0px 5px 20px 0px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n width: 300px;\n border-radius: 10px;\n box-shadow: 0px 2px 8px 1px #8c8c8c;\n padding: 32px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n width: 400px;\n padding: 32px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n width: 550px;\n padding: 28px 36px 36px 36px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n width: 860px;\n padding: 28px 36px 36px 36px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n width: 1200px;\n padding: 30px 40px 40px 40px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n gap: 8px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div > h1 {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 16px;\n letter-spacing: -0.64px;\n font-weight: 600;\n color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div .sub-title-wrapper {\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 color: #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-body {\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-modal-wrapper .maru-modal .maru-modal-footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-direction: row;\n margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n margin: 0 0 0 6px;\n}";
26121
+ var css_248z$5 = ".maru-modal-wrapper {\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n background-color: rgba(92, 92, 92, 0.5019607843);\n z-index: 6006;\n display: block;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n background-color: white;\n box-shadow: 0px 5px 20px 0px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n width: 300px;\n box-shadow: 0px 2px 8px 1px #8c8c8c;\n padding: 32px;\n border-radius: 10px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n width: 400px;\n padding: 32px;\n border-radius: 10px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n width: 550px;\n padding: 28px 36px 36px 36px;\n border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n width: 860px;\n padding: 28px 36px 36px 36px;\n border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n width: 1200px;\n padding: 30px 40px 40px 40px;\n border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n gap: 8px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div > h1 {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 16px;\n letter-spacing: -0.64px;\n font-weight: 600;\n color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div .sub-title-wrapper {\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 color: #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-body {\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-modal-wrapper .maru-modal .maru-modal-footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-direction: row;\n margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n margin: 0 0 0 6px;\n}";
26027
26122
  styleInject(css_248z$5);
26028
26123
 
26029
26124
  function Modal(_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maru_design2",
3
- "version": "2.23.1",
3
+ "version": "2.23.3",
4
4
  "main": "./dist/index.js",
5
5
  "author": "zena-42maru",
6
6
  "license": "MIT",