maru_design2 2.29.1 → 2.30.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.30.0](https://github.com/42maru-ai/maru-design2/compare/v2.29.1...v2.30.0) (2026-01-30)
+
+
+### Features
+
+* :hammer: Radio & Slider & Toggle UI ([#693](https://github.com/42maru-ai/maru-design2/issues/693)) ([b7038de](https://github.com/42maru-ai/maru-design2/commit/b7038de4105fc7086f931cc751503a62f79d35de))
+
 ## [2.29.1](https://github.com/42maru-ai/maru-design2/compare/v2.29.0...v2.29.1) (2026-01-06)
 
 

package/dist/components/atoms/radio/Radio.d.ts

@@ -3,12 +3,21 @@ import { TRadioColor } from '../../../enums/color';
 import { TGap } from '../../../enums/gap';
 import './radio.scss';
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'type'> {
+    /**
+     * 라디오 토글의 값
+     */
     checked?: boolean;
+    /**
+     * 기본 회색, 메인 테마색 ['primary']
+     */
     color?: TRadioColor;
     /**
      * 컴포넌트와 라벨 사이의 거리. ['8px', '4px', '2px']
      */
     gap?: TGap;
+    /**
+     * 라디오 버튼 옆 문자 내용
+     */
     label?: string;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/slider/Slider.d.ts

@@ -25,7 +25,14 @@ export interface SliderProps {
      * 값 증가 단위 (기본값: 1)
      */
     step?: number;
+    /**
+     * 값 표시 여부
+     */
+    showValue?: boolean;
     disabled?: boolean;
     className?: string;
 }
-export declare function Slider({ value, onChange, color, min, max, step, disabled, className, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * showValue에 관한 글: showValue가 true면 기존 input에 있는 thumb를 숨기고 custom thumb를 보여준다.
+ */
+export declare function Slider({ value, onChange, color, min, max, step, showValue, disabled, className, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/toggle/Toggle.d.ts

@@ -8,6 +8,9 @@ export interface ToggleProps {
      * ['primary', 'secondary', 'positive', 'warning', 'danger']. (@v1 variant)
      */
     color?: TColor;
+    /**
+     * 비활성화 여부
+     */
     disabled?: boolean;
     /**
      * 텍스트가 있는 토글.
@@ -16,5 +19,13 @@ export interface ToggleProps {
         left?: string;
         right?: string;
     };
+    /**
+     * 토글 아이콘 표시 여부
+     */
+    showIcon?: boolean;
+    /**
+     * 토글 크기 배율 (기본값: 1)
+     */
+    scale?: number;
 }
-export declare function Toggle({ checked, onChange, className, color, disabled, text, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toggle({ checked, onChange, className, color, disabled, text, showIcon, scale, }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useColor.d.ts

@@ -1,4 +1,4 @@
 declare const useColor: (color?: string) => {
-    keyColor: "var(--p)" | "#8c8c8c" | "#32a483" | "#ffb020" | "#e53e3e" | "#308acc";
+    keyColor: string;
 };
 export default useColor;

package/dist/index.js

@@ -125,9 +125,10 @@ function styleInject(css, ref) {
 var css_248z$n = "* {\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}";
 styleInject(css_248z$n);
 
-var css_248z$m = ".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  --primary-05-per: var(--p-05-per);\n  --primary-05: var(--p-05);\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}";
+var css_248z$m = ".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-80: var(--p-80);\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  --primary-05-per: var(--p-05-per);\n  --primary-05: var(--p-05);\n}\n\n[data-theme=blue] {\n  --p: #308acc;\n  --p-80: #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-80: #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-80: #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}";
 styleInject(css_248z$m);
 
+// eslint-disable-next-line import/prefer-default-export
 function StyleProvider(_a) {
   var children = _a.children,
     theme = _a.theme;
@@ -244,8 +245,10 @@ var DColor = {
 };
 
 var useColor = function useColor(color) {
+  // 'inherit'일 경우 currentColor 반환 (CSS에서 색상 제어)
   // DColor에도 없고 color도 undefined면 $b400(=#8c8c8c) 리턴
   var keyColor = useMemo(function () {
+    if (color === 'inherit') return 'currentColor';
     return DColor[color] || color || '#8c8c8c';
   }, [color]);
   return {
@@ -72064,7 +72067,7 @@ function Popover(_a) {
   }) : PopoverBody;
 }
 
-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: 400;\n  color: #5c5c5c;\n  cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n  cursor: default;\n  opacity: 0.5;\n}";
+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 #bdbdbd;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  background-color: transparent;\n}\n.maru-radio:checked {\n  border-color: var(--p);\n  background: var(--p);\n}\n.maru-radio:checked::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #fafafa;\n}\n.maru-radio:not(.maru-radio-primary):checked {\n  border-color: #5c5c5c;\n  background: #5c5c5c;\n}\n.maru-radio:not(:disabled):hover {\n  border-color: #5c5c5c;\n  filter: brightness(1.3);\n}\n.maru-radio.maru-radio-primary:not(:disabled):hover {\n  border-color: var(--p);\n}\n.maru-radio:not(:checked):not(:disabled):focus {\n  outline: 3px solid #5c5c5c;\n  outline-offset: 3px;\n}\n.maru-radio.maru-radio-primary:not(:checked):not(:disabled):focus {\n  outline: 3px solid var(--p);\n  outline-offset: 3px;\n}\n.maru-radio:checked:not(:disabled):focus {\n  outline: none;\n}\n.maru-radio:not(.maru-radio-primary):checked:not(:disabled):focus {\n  background: color-mix(in srgb, #5c5c5c 80%, black);\n  border-color: color-mix(in srgb, #5c5c5c 80%, black);\n}\n.maru-radio.maru-radio-primary:checked:not(:disabled):focus {\n  background: color-mix(in srgb, var(--p) 80%, black);\n  border-color: color-mix(in srgb, var(--p) 80%, black);\n}\n.maru-radio:not(:checked):disabled {\n  background-color: #fafafa;\n}\n.maru-radio:checked:disabled {\n  opacity: 1;\n  background: #bdbdbd;\n  border-color: #bdbdbd;\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: 400;\n  color: #5c5c5c;\n  cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n  cursor: default;\n  opacity: 0.5;\n}";
 styleInject(css_248z$e);
 
 var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -72179,9 +72182,12 @@ function Skeleton(_a) {
   });
 }
 
-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}";
+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.maru-slider-container.maru-slider-show-value {\n  margin-top: 24px;\n}\n\n.maru-slider-thumb-wrapper {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  pointer-events: none;\n  left: calc(7px + (100% - 14px) * var(--slider-progress-raw) / 100);\n}\n\n.maru-slider-value {\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  position: absolute;\n  bottom: 100%;\n  margin-bottom: 4px;\n  color: #5c5c5c;\n  white-space: nowrap;\n}\n\n.maru-slider-custom-thumb {\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s ease;\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.maru-slider-primary .maru-slider-custom-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.maru-slider-secondary .maru-slider-custom-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.maru-slider-positive .maru-slider-custom-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.maru-slider-warning .maru-slider-custom-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.maru-slider-danger .maru-slider-custom-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}\n.maru-slider-success .maru-slider-custom-thumb {\n  border: 3px solid #308acc;\n}\n\n.maru-slider-show-value .maru-slider::-webkit-slider-thumb {\n  opacity: 0;\n}\n.maru-slider-show-value .maru-slider::-moz-range-thumb {\n  opacity: 0;\n}\n.maru-slider-show-value:active .maru-slider-custom-thumb {\n  transform: scale(1.2);\n}\n.maru-slider-show-value.maru-slider-disabled .maru-slider-custom-thumb {\n  transform: none;\n}";
 styleInject(css_248z$c);
 
+/**
+ * showValue에 관한 글: showValue가 true면 기존 input에 있는 thumb를 숨기고 custom thumb를 보여준다.
+ */
 function Slider(_a) {
   var value = _a.value,
     onChange = _a.onChange,
@@ -72193,19 +72199,26 @@ function Slider(_a) {
     max = _d === void 0 ? 100 : _d,
     _e = _a.step,
     step = _e === void 0 ? 1 : _e,
-    _f = _a.disabled,
-    disabled = _f === void 0 ? false : _f,
+    _f = _a.showValue,
+    showValue = _f === void 0 ? false : _f,
+    _g = _a.disabled,
+    disabled = _g === void 0 ? false : _g,
     className = _a.className;
   var progress = (value - min) / (max - min) * 100;
   var handleSliderChange = function handleSliderChange(e) {
     onChange(+e.target.value);
   };
-  return jsx("div", __assign({
+  return jsxs("div", __assign({
     className: classNames('maru-slider-container', "maru-slider-".concat(color), {
-      'maru-slider-disabled': disabled
-    }, className)
+      'maru-slider-disabled': disabled,
+      'maru-slider-show-value': showValue
+    }, className),
+    style: {
+      '--slider-progress': "".concat(progress, "%"),
+      '--slider-progress-raw': progress
+    }
   }, {
-    children: jsx("input", {
+    children: [jsx("input", {
       type: "range",
       className: "maru-slider",
       value: value,
@@ -72213,11 +72226,18 @@ function Slider(_a) {
       min: min,
       max: max,
       step: step,
-      disabled: disabled,
-      style: {
-        '--slider-progress': "".concat(progress, "%")
-      }
-    })
+      disabled: disabled
+    }), showValue && jsxs("div", __assign({
+      className: "maru-slider-thumb-wrapper"
+    }, {
+      children: [jsx("span", __assign({
+        className: "maru-slider-value"
+      }, {
+        children: value
+      })), jsx("div", {
+        className: "maru-slider-custom-thumb"
+      })]
+    }))]
   }));
 }
 
@@ -72385,7 +72405,7 @@ Textarea.defaultProps = {
 };
 Textarea.displayName = 'Textarea';
 
-var css_248z$a = ".maru-toggle-wrapper {\n  display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n  position: relative;\n  width: 30px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 11;\n  cursor: pointer;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n  background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n  position: absolute;\n  width: 30px;\n  height: 18px;\n  border-radius: 17.5px;\n  background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-primary {\n  background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-secondary {\n  background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-positive {\n  background-color: #32a483;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-warning {\n  background-color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-danger {\n  background-color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-success {\n  background-color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  transition: all 0.2s ease-in-out;\n  background-color: white;\n  top: 2px;\n  right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n  transform: translateX(12px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle {\n  cursor: default;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-thumb {\n  background-color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-rail {\n  background-color: #e4e4e4 !important;\n}\n\n.maru-toggle-text {\n  position: relative;\n  width: 66px;\n  height: 23px;\n  background-color: white;\n  border-radius: 62px;\n  overflow: hidden;\n}\n.maru-toggle-text-primary {\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb {\n  background-color: var(--p);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-button {\n  color: var(--p);\n}\n.maru-toggle-text-primary .toggle-active {\n  color: white;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px var(--p-50) inset;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: var(--p-50);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: var(--p-50);\n  cursor: default;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-secondary {\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb {\n  background-color: #8c8c8c;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-button {\n  color: #8c8c8c;\n}\n.maru-toggle-text-secondary .toggle-active {\n  color: white;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #bdbdbd;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #bdbdbd;\n  cursor: default;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-positive {\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n  background-color: #32a483;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #d6ede6;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #d6ede6;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n  color: #32a483;\n}\n.maru-toggle-text-positive .toggle-active {\n  color: white;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #98d1c1 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #98d1c1;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #eaf6f3;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #eaf6f3;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #98d1c1;\n  cursor: default;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-warning {\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb {\n  background-color: #ffb020;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-button {\n  color: #ffb020;\n}\n.maru-toggle-text-warning .toggle-active {\n  color: white;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #ffd78f inset;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #ffd78f;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #ffd78f;\n  cursor: default;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-danger {\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb {\n  background-color: #e53e3e;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-button {\n  color: #e53e3e;\n}\n.maru-toggle-text-danger .toggle-active {\n  color: white;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #f29e9e inset;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #f29e9e;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #f29e9e;\n  cursor: default;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-success {\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb {\n  background-color: #308acc;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-button {\n  color: #308acc;\n}\n.maru-toggle-text-success .toggle-active {\n  color: white;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #97c4e5 inset;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #97c4e5;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #97c4e5;\n  cursor: default;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text .maru-toggle-text-thumb {\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 33px;\n  height: 23px;\n  border-radius: 62px;\n  transition: all 0.2s ease-in-out;\n  z-index: 1;\n}\n\n.slide-after {\n  transform: translateX(33px);\n}\n\n.maru-toggle-text-button-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n\n.maru-toggle-text-button {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 700;\n  position: relative;\n  width: 33px;\n  height: 23px;\n  cursor: pointer;\n  z-index: 2;\n  background-color: transparent;\n  border: 0;\n  transition: color 0.4s ease;\n}";
+var css_248z$a = ".maru-toggle-wrapper {\n  display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n  position: relative;\n  width: 30px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 11;\n  cursor: pointer;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n  background-color: #4a4e52;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n  position: absolute;\n  width: 30px;\n  height: 18px;\n  border-radius: 17.5px;\n  background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color 0.2s ease-in-out;\n  pointer-events: none;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-primary {\n  background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-secondary {\n  background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-positive {\n  background-color: #32a483;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-warning {\n  background-color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-danger {\n  background-color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-success {\n  background-color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:disabled):hover ~ .maru-toggle-rail::after {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  transition: all 0.2s ease-in-out;\n  background-color: white;\n  top: 2px;\n  right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb .maru-toggle-thumb-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: inherit;\n  height: inherit;\n  color: #4a4e52;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb .maru-toggle-thumb-icon > svg {\n  display: block;\n  width: inherit;\n  height: inherit;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n  transform: translateX(12px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-primary .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-secondary .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-positive .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #32a483;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-warning .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-danger .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-success .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle {\n  cursor: default;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-thumb {\n  background-color: white;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n  background-color: #e4e4e4 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-primary {\n  background-color: var(--p-20) !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-secondary {\n  background-color: #e4e4e4 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-positive {\n  background-color: #d6ede6 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-warning {\n  background-color: #ffefd2 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-danger {\n  background-color: #fad8d8 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-success {\n  background-color: #d6e8f5 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-primary.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: var(--p-20);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-secondary.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #e4e4e4;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-positive.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #d6ede6;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-warning.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #ffefd2;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-danger.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #fad8d8;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-success.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #d6e8f5;\n}\n\n.maru-toggle-text {\n  position: relative;\n  width: 66px;\n  height: 23px;\n  background-color: white;\n  border-radius: 62px;\n  overflow: hidden;\n}\n.maru-toggle-text-primary {\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb {\n  background-color: var(--p);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-button {\n  color: var(--p);\n}\n.maru-toggle-text-primary .toggle-active {\n  color: white;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px var(--p-50) inset;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: var(--p-50);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: var(--p-50);\n  cursor: default;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-secondary {\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb {\n  background-color: #8c8c8c;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-button {\n  color: #8c8c8c;\n}\n.maru-toggle-text-secondary .toggle-active {\n  color: white;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #bdbdbd;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #bdbdbd;\n  cursor: default;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-positive {\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n  background-color: #32a483;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #d6ede6;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #d6ede6;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n  color: #32a483;\n}\n.maru-toggle-text-positive .toggle-active {\n  color: white;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #98d1c1 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #98d1c1;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #eaf6f3;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #eaf6f3;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #98d1c1;\n  cursor: default;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-warning {\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb {\n  background-color: #ffb020;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-button {\n  color: #ffb020;\n}\n.maru-toggle-text-warning .toggle-active {\n  color: white;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #ffd78f inset;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #ffd78f;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #ffd78f;\n  cursor: default;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-danger {\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb {\n  background-color: #e53e3e;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-button {\n  color: #e53e3e;\n}\n.maru-toggle-text-danger .toggle-active {\n  color: white;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #f29e9e inset;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #f29e9e;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #f29e9e;\n  cursor: default;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-success {\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb {\n  background-color: #308acc;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-button {\n  color: #308acc;\n}\n.maru-toggle-text-success .toggle-active {\n  color: white;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #97c4e5 inset;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #97c4e5;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #97c4e5;\n  cursor: default;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text .maru-toggle-text-thumb {\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 33px;\n  height: 23px;\n  border-radius: 62px;\n  transition: all 0.2s ease-in-out;\n  z-index: 1;\n}\n.maru-toggle-text .maru-toggle-text-thumb::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color 0.2s ease-in-out;\n  pointer-events: none;\n}\n.maru-toggle-text:not(.maru-toggle-text-disabled):hover .maru-toggle-text-thumb::after {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.slide-after {\n  transform: translateX(33px);\n}\n\n.maru-toggle-text-button-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n\n.maru-toggle-text-button {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 700;\n  position: relative;\n  width: 33px;\n  height: 23px;\n  cursor: pointer;\n  z-index: 2;\n  background-color: transparent;\n  border: 0;\n  transition: color 0.4s ease;\n}";
 styleInject(css_248z$a);
 
 function Toggle(_a) {
@@ -72395,10 +72415,14 @@ function Toggle(_a) {
     _b = _a.color,
     color = _b === void 0 ? 'primary' : _b,
     disabled = _a.disabled,
-    text = _a.text;
-  var _c = useState(false),
-    buttonToggle = _c[0],
-    setButtonToggle = _c[1];
+    text = _a.text,
+    _c = _a.showIcon,
+    showIcon = _c === void 0 ? false : _c,
+    _d = _a.scale,
+    scale = _d === void 0 ? 1 : _d;
+  var _e = useState(false),
+    buttonToggle = _e[0],
+    setButtonToggle = _e[1];
   useEffect(function () {
     setButtonToggle(checked);
   }, [checked]);
@@ -72415,7 +72439,11 @@ function Toggle(_a) {
     children: text ? jsxs("div", __assign({
       className: classNames('maru-toggle-text', "maru-toggle-text-".concat(color), {
         'maru-toggle-text-disabled': disabled
-      }, className)
+      }, className),
+      style: {
+        transform: "scale(".concat(scale, ")"),
+        transformOrigin: 'left center'
+      }
     }, {
       children: [jsx("span", {
         className: classNames('maru-toggle-text-thumb', {
@@ -72449,10 +72477,14 @@ function Toggle(_a) {
         }))]
       }))]
     })) : jsx("div", __assign({
-      className: classNames('maru-toggle-wrapper', className)
+      className: classNames('maru-toggle-wrapper', className),
+      style: {
+        transform: "scale(".concat(scale, ")"),
+        transformOrigin: 'left center'
+      }
     }, {
       children: jsxs("div", __assign({
-        className: classNames('maru-toggle-inner-wrapper', {
+        className: classNames('maru-toggle-inner-wrapper', "maru-toggle-".concat(color), {
           'toggle-disabled': disabled
         })
       }, {
@@ -72464,9 +72496,18 @@ function Toggle(_a) {
           onChange: handleInputChange
         }), jsx("span", {
           className: classNames('maru-toggle-rail', "maru-toggle-rail-".concat(color))
-        }), jsx("span", {
+        }), jsx("span", __assign({
           className: "maru-toggle-thumb"
-        })]
+        }, {
+          children: showIcon && jsx("span", __assign({
+            className: "maru-toggle-thumb-icon"
+          }, {
+            children: jsx(Icon, {
+              name: checked ? ICONS.Check_s1413 : ICONS.SubtractLine_s1610,
+              color: "inherit"
+            })
+          }))
+        }))]
       }))
     }))
   });

package/mise.toml

@@ -0,0 +1,3 @@
+[tools]
+node = "20.12.1"
+yarn = "1.22.22"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "2.29.1",
+  "version": "2.30.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",