@telepix-lab/telepix-ui 0.5.0 → 0.6.1

package/dist/cjs/button/index.d.ts

@@ -7,6 +7,7 @@ export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAtt
     isLoading?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
+    stateContainerClassName?: string;
 }
 /**
  * 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>

package/dist/cjs/button/types.d.ts

@@ -7,9 +7,13 @@ export type ButtonSize = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];
 export declare const BUTTON_VARIANTS: {
     readonly ACCENT: "accent";
     readonly OUTLINE: "outline";
+    readonly OUTLINE_TO_ACCENT: "outline_to_accent";
     readonly GHOST: "ghost";
     readonly THUMBNAIL_GHOST: "thumbnail_ghost";
+    readonly GHOST_TO_ACCENT: "ghost_to_accent";
     readonly SUBTLE_FILLED: "subtle_filled";
-    readonly ACCENT_GHOST: "accent_ghost";
+    readonly OUTLINE_ACCENT: "outline_accent";
+    readonly GHOST_ACCENT: "ghost_accent";
+    readonly GHOST_DIM: "ghost_dim";
 };
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];

package/dist/cjs/client.js

@@ -12069,6 +12069,12 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
+const StateColorContainer = ({ isInverted, className, }) => {
+    return (jsxRuntime.jsx("div", { className: cn("absolute left-0 top-0 right-0 bottom-0 inset-0 pointer-events-none z-0", isInverted
+            ? "group-hover/state:bg-fill-invert-hovered group-active/state:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/state:bg-fill-invert-selected"
+            : "group-hover/state:bg-fill-hovered bg-fill-default group-active/state:bg-fill-pressed group-aria-selected/state:bg-fill-selected", className) }));
+};
+
 const RadioGroupContext = React.createContext({ value: "", disabled: false });
 /**
  * 라디오 버튼 그룹을 생성하는 컴포넌트입니다.<br/>
@@ -12096,7 +12102,8 @@ const RadioItem = React.forwardRef(({ label, labelClassName, wrapperClassName, .
     const randomId = id ?? React.useId();
     const isSelected = React.useContext(RadioGroupContext).value === value;
     const isDisabled = React.useContext(RadioGroupContext).disabled || disabled || false;
-    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5 cursor-pointer bg-transparent border-none", wrapperClassName), children: [jsxRuntime.jsx(Item2, { ...restProps, id: randomId, ref: ref, value: value, disabled: isDisabled, className: cn("bg-transparent border-none p-0 flex items-center outline-none justify-center cursor-pointer", className), children: isDisabled ? (jsxRuntime.jsx(CircleBackslashIcon, { className: "stroke-comp-disabled" })) : isSelected ? (jsxRuntime.jsx(RadiobuttonIcon, { className: "stroke-comp-mono-selected" })) : (jsxRuntime.jsx(CircleIcon, { className: "stroke-comp-mono-default" })) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", isDisabled && "text-comp-disabled cursor-default", isSelected && "text-comp-mono-selected", labelClassName), htmlFor: randomId, children: label }))] }));
+    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5 cursor-pointer bg-transparent border-none py-1 pr-2 group/state relative", wrapperClassName), children: [jsxRuntime.jsx(Item2, { ...restProps, id: randomId, ref: ref, value: value, disabled: isDisabled, className: cn("bg-transparent border-none p-1.5 flex items-center outline-none justify-center cursor-pointer", className), children: isDisabled ? (jsxRuntime.jsx(CircleBackslashIcon, { className: "text-comp-disabled" })) : isSelected ? (jsxRuntime.jsx(RadiobuttonIcon, { className: "text-comp-mono-default" })) : (jsxRuntime.jsx(CircleIcon, { className: "text-comp-mono-default" })) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", isDisabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: randomId, children: label })), jsxRuntime.jsx(StateColorContainer, { className: cn("rounded-lg", isDisabled &&
+                    "bg-fill-disabled group-hover/state:bg-fill-disabled group-active/state:bg-fill-disabled") })] }));
 });
 RadioGroup.displayName = "RadioGroup";
 RadioItem.displayName = "RadioItem";
@@ -12303,7 +12310,7 @@ const Checkbox = React.forwardRef(({ label, labelClassName, wrapperClassName, ..
             return (jsxRuntime.jsx(SquareMinus, { className: "size-full fill-transparent text-comp-disabled cursor-default" }));
         }
         else if (checked) {
-            return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "size-full fill-transparent text-comp-mono-selected", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 2.1821C1 1.52924 1.52925 1 2.1821 1H13.6879C14.3408 1 14.87 1.52925 14.87 2.1821V13.6879C14.87 14.3408 14.3408 14.87 13.6879 14.87H2.1821C1.52924 14.87 1 14.3408 1 13.6879V2.1821ZM11.3429 4.58303C11.6121 4.76774 11.6805 5.13566 11.4958 5.4048L7.38613 11.393C7.28127 11.5457 7.11082 11.6405 6.9257 11.6489C6.74058 11.6574 6.56222 11.5785 6.44391 11.4359L4.0914 8.59999C3.88299 8.34876 3.9177 7.97614 4.16894 7.76772C4.42018 7.55931 4.79279 7.59403 5.00121 7.84526L6.85419 10.079L10.5211 4.73591C10.7059 4.46676 11.0738 4.39832 11.3429 4.58303Z", fill: "currentColor" }) }));
+            return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "size-full fill-transparent text-comp-mono-default", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 2.1821C1 1.52924 1.52925 1 2.1821 1H13.6879C14.3408 1 14.87 1.52925 14.87 2.1821V13.6879C14.87 14.3408 14.3408 14.87 13.6879 14.87H2.1821C1.52924 14.87 1 14.3408 1 13.6879V2.1821ZM11.3429 4.58303C11.6121 4.76774 11.6805 5.13566 11.4958 5.4048L7.38613 11.393C7.28127 11.5457 7.11082 11.6405 6.9257 11.6489C6.74058 11.6574 6.56222 11.5785 6.44391 11.4359L4.0914 8.59999C3.88299 8.34876 3.9177 7.97614 4.16894 7.76772C4.42018 7.55931 4.79279 7.59403 5.00121 7.84526L6.85419 10.079L10.5211 4.73591C10.7059 4.46676 11.0738 4.39832 11.3429 4.58303Z", fill: "currentColor" }) }));
         }
         return (jsxRuntime.jsx(BoxIcon, { className: "size-full fill-transparent text-comp-mono-default" }));
     };
@@ -12311,7 +12318,9 @@ const Checkbox = React.forwardRef(({ label, labelClassName, wrapperClassName, ..
         setChecked(value);
         onChange?.(value);
     };
-    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5", wrapperClassName), children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })] }));
+    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pr-3 pl-1.5 py-1 relative group/state rounded-lg", wrapperClassName), children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label }), jsxRuntime.jsx(StateColorContainer, { className: cn("rounded-lg", disabled
+                    ? "bg-fill-default group-hover/state:bg-fill-default group-active/state:bg-fill-default"
+                    : "") })] }));
 });
 Checkbox.displayName = "Checkbox";
 
@@ -12381,7 +12390,7 @@ const DialogTrigger = (props) => {
 const DialogPortal = Portal$3;
 const DialogClose = Close;
 const DialogContent = ({ className, overlayClassName, children, ...rest }) => {
-    return (jsxRuntime.jsxs(Portal$3, { children: [jsxRuntime.jsx(Overlay, { className: cn("fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in", overlayClassName) }), jsxRuntime.jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] animate-content-fade-in", className), ...rest, children: [jsxRuntime.jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsxRuntime.jsx(Root$4, {}) }), jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, { children: children })] })] }));
+    return (jsxRuntime.jsxs(Portal$3, { children: [jsxRuntime.jsx(Overlay, { className: cn("fixed top-0 bottom-0 left-0 right-0 bg-page-fade  inset-0 z-[1000] animate-fade-in", overlayClassName) }), jsxRuntime.jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] animate-content-fade-in", className), ...rest, children: [jsxRuntime.jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsxRuntime.jsx(Root$4, {}) }), jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, { children: children })] })] }));
 };
 const DialogDescription = (props) => {
     return jsxRuntime.jsx(CardBody, { ...props, children: props.children });
@@ -12397,8 +12406,10 @@ const DialogBody = ({ className, ...rest }) => {
 const SELECT_TRIGGER_VARIANTS = {
     OUTLINE: "outline",
     GHOST: "ghost",
+    FILLED: "filled",
 };
 const SELECT_TRIGGER_SIZES = {
+    COMPACT: "compact",
     REGULAR: "regular",
     LARGE: "large",
 };
@@ -12425,15 +12436,13 @@ const SELECT_TRIGGER_SIZES = {
 const Select = (props) => jsxRuntime.jsx(Root2, { ...props });
 const SelectTrigger = ({ placeholder, variant = "outline", size = "regular", icon, ...rest }) => {
     const { className, ...otherProps } = rest;
-    return (jsxRuntime.jsxs(Trigger$1, { className: cn(`flex items-center justify-between w-full bg-fill-mono-default outline-none cursor-pointer text-comp-mono-default 
-        hover:not-[:is([data-disabled])]:bg-fill-mono-hovered  hover:not-[:is([data-disabled])]:text-comp-mono-hovered
-        [&:is([data-disabled])]:text-comp-disabled [&:is([data-placeholder]):not(:is([data-disabled]))]:text-comp-mono-subtle-default
-        [&:is([data-placeholder]):not(:is([data-disabled]))]:hover:text-comp-mono-subtle-hovered
-        `, variant === SELECT_TRIGGER_VARIANTS.OUTLINE &&
-            "border border-border-bound [&:not(:is([data-placeholder]))]:border-border-focused [&:is([data-disabled])]:border-transparent rounded-sm py-0 px-2", variant === SELECT_TRIGGER_VARIANTS.GHOST &&
-            "border border-transparent py-0 px-2 has-[button:has([data-placeholder])]:border-comp-mono-subtle-default", size === SELECT_TRIGGER_SIZES.REGULAR &&
+    return (jsxRuntime.jsxs(Trigger$1, { className: cn("relative group/state flex items-center justify-between w-full bg-page-l-null outline-none cursor-pointer text-comp-mono-default data-[placeholder]:not-disabled:text-comp-mono-subtle-default data-disabled:text-comp-disabled rounded-md", variant === SELECT_TRIGGER_VARIANTS.OUTLINE &&
+            "border border-border-bound [&:not(:is([data-placeholder]))]:border-border-focused data-disabled:border-transparent py-0 px-2", variant === SELECT_TRIGGER_VARIANTS.GHOST &&
+            "border border-transparent py-0 px-2 [&:not(:is([data-placeholder]))]:border-border-focused data-disabled:border-transparent", variant === SELECT_TRIGGER_VARIANTS.FILLED &&
+            "border border-transparent py-0 px-2 bg-page-l3 [&:not(:is([data-placeholder]))]:border-border-focused [&:not(:is([data-placeholder]))]:bg-page-l2 data-disabled:border-transparent data-disabled:bg-page-l-null", size === SELECT_TRIGGER_SIZES.COMPACT &&
+            "py-1.5 px-1 text-label font-medium leading-label-compact gap-1", size === SELECT_TRIGGER_SIZES.REGULAR &&
             "py-1.5 px-2 text-body font-medium leading-body-compact gap-2", size === SELECT_TRIGGER_SIZES.LARGE &&
-            "py-3 px-4 text-base leading-base-compact font-medium gap-3", className), ...otherProps, children: [icon && jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: icon }), jsxRuntime.jsx(Value, { placeholder: placeholder }), jsxRuntime.jsx(Icon$1, { className: "flex items-center justify-center", children: jsxRuntime.jsx(CaretDownIcon, {}) })] }));
+            "py-3 px-4 text-base leading-base-compact font-medium gap-3", className), ...otherProps, children: [icon && jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: icon }), jsxRuntime.jsx(Value, { placeholder: placeholder }), jsxRuntime.jsx(Icon$1, { className: "flex items-center justify-center text-comp-mono-default group-disabled/state:text-comp-disabled", children: jsxRuntime.jsx(CaretDownIcon, {}) }), jsxRuntime.jsx(StateColorContainer, { className: "rounded-md" })] }));
 };
 const SelectContent = ({ children, viewportClassName, viewportWrapperClassName, ...rest }) => {
     const { className, position, sideOffset, ...otherProps } = rest;
@@ -12501,13 +12510,9 @@ const VerticalMenu = React.forwardRef(({ disabled, value, label, icon, variant =
         context.setSelectedMenu?.(value);
         rest.onClick?.(e);
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("w-full flex items-center rounded-md text-body leading-body-compact font-medium bg-transparent border-none cursor-pointer text-comp-mono-default", size === VERTICAL_MENU_SIZES.SMALL && "gap-3 p-1", size === VERTICAL_MENU_SIZES.REGULAR && "gap-[18px] p-2.5", variant === VERTICAL_MENU_VARIANTS.ACCENT &&
-            `hover:not-[:is([data-selected='true'])]:not-disabled:text-comp-mono-hovered hover:not-[:is([data-selected='true'])]:not-disabled:bg-fill-mono-hovered active:not-disabled:text-comp-mono-pressed active:not-disabled:bg-fill-mono-pressed 
-            [&:is([data-selected='true'])]:text-comp-accent-selected [&:is([data-selected='true'])]:bg-fill-accent-selected [&:is([data-selected='true'])]:font-semibold
-            disabled:text-comp-disabled disabled:bg-fill-disabled disabled:cursor-not-allowed`, variant === VERTICAL_MENU_VARIANTS.GHOST &&
-            `hover:not-[:is([data-selected='true'])]:not-disabled:text-comp-mono-hovered hover:not-[:is([data-selected='true'])]:not-disabled:bg-fill-mono-hovered active:not-disabled:text-comp-mono-pressed active:not-disabled:bg-fill-mono-pressed 
-            [&:is([data-selected='true'])]:text-comp-mono-selected [&:is([data-selected='true'])]:bg-fill-mono-selected [&:is([data-selected='true'])]:font-semibold
-            disabled:text-comp-disabled disabled:bg-fill-disabled disabled:cursor-not-allowed`, rest.className), ...rest, disabled: isDisabled, value: value, "data-selected": isSelected, onClick: onClick, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-5", children: icon })), label] }));
+    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("group/state relative w-full flex items-center rounded-md text-body leading-body-compact font-medium bg-transparent border-none cursor-pointer data-[selected=true]:font-semibold data-disabled:text-comp-disabled text-comp-mono-default", size === VERTICAL_MENU_SIZES.SMALL && "gap-3 p-1", size === VERTICAL_MENU_SIZES.REGULAR && "gap-[18px] p-2.5", variant === VERTICAL_MENU_VARIANTS.ACCENT &&
+            `bg-page-l-null data-[selected=true]:bg-page-accent-l0 data-[selected=true]:text-comp-accent-default`, rest.className), ...rest, disabled: isDisabled, value: value, "data-selected": isSelected, "aria-selected": isSelected, onClick: onClick, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-5", children: icon })), label, jsxRuntime.jsx(StateColorContainer, { className: cn("rounded-md group-disabled/state:bg-fill-default", variant === VERTICAL_MENU_VARIANTS.ACCENT &&
+                    "group-aria-selected:bg-fill-default") })] }));
 });
 VerticalMenu.displayName = "VerticalMenu";
 
@@ -12543,11 +12548,7 @@ const HorizontalTab = React.forwardRef(({ value, label, className, icon, size =
             return;
         setSelectedTab(value);
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn(`p-0 flex flex-col items-center justify-center flex-nowrap text-comp-mono-subtle-default text-body font-medium leading-body-compact bg-transparent border-none cursor-pointer
-        hover:not([data-selected='true']):not(:disabled):text-comp-mono-subtle-hovered
-        active:not(:disabled):text-comp-mono-subtle-pressed
-        disabled:text-comp-disabled disabled:cursor-not-allowed
-        `, isSelected && "text-comp-mono-subtle-selected font-bold", className), onClick: handleClick, disabled: isDisabled, "data-selected": isSelected, ...rest, children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-center gap-2", size === HORIZONTAL_TAB_SIZES.SMALL && "py-1 px-2", size === HORIZONTAL_TAB_SIZES.REGULAR && "py-2.5 px-2"), children: [icon && (jsxRuntime.jsx("span", { className: cn("flex items-center justify-center size-5", size === HORIZONTAL_TAB_SIZES.SMALL && "size-4"), children: icon })), label] }), jsxRuntime.jsx("div", { className: cn("bg-comp-mono-subtle-default mt-[3px] h-[1px] w-full", isSelected && "bg-comp-mono-subtle-selected h-0.5 mt-0.5"), "data-selected": isSelected })] }));
+    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("relative group/state p-0 flex flex-col items-center justify-center flex-nowrap text-comp-mono-subtle-default text-body font-medium leading-body-compact bg-transparent border-none cursor-pointer disabled:cursor-not-allowed", isSelected && "font-bold", className), onClick: handleClick, disabled: isDisabled, "data-selected": isSelected, "aria-selected": isSelected, ...rest, children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-center gap-2", size === HORIZONTAL_TAB_SIZES.SMALL && "py-1 px-2", size === HORIZONTAL_TAB_SIZES.REGULAR && "py-2.5 px-2"), children: [icon && (jsxRuntime.jsx("span", { className: cn("flex items-center justify-center size-5", size === HORIZONTAL_TAB_SIZES.SMALL && "size-4"), children: icon })), label] }), jsxRuntime.jsx("div", { className: cn("bg-comp-mono-subtle-default mt-[3px] h-[1px] w-full", isSelected && "h-0.5 mt-0.5"), "data-selected": isSelected }), jsxRuntime.jsx(StateColorContainer, { className: "group-aria-selected/state:bg-fill-default rounded-sm" })] }));
 });
 
 const ModeTabContext = React.createContext({
@@ -12577,7 +12578,7 @@ const ModeTab = React.forwardRef(({ label, icon, value, className, ...rest }, re
             return;
         setSelectedTab(value);
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("px-2 py-1 flex items-center justify-center gap-2.5 flex-1 text-comp-mono-subtle-default text-body leading-body-compact font-medium cursor-pointer bg-transparent border-none rounded-sm hover:text-comp-mono-subtle-hovered active:text-comp-mono-subtle-pressed", isSelected && "text-comp-mono-selected bg-page-l0", isDisabled && "text-comp-disabled cursor-not-allowed", className), "data-selected": isSelected, disabled: isDisabled, onClick: handleClick, ...rest, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-5", children: icon })), label] }));
+    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("relative group/state shadow-basic px-2 py-1 flex items-center justify-center gap-2.5 flex-1 text-comp-mono-subtle-default aria-selected:text-comp-mono-default text-body leading-body-compact font-medium cursor-pointer bg-transparent border-none rounded-sm hover:text-comp-mono-subtle-hovered active:text-comp-mono-subtle-pressed", isSelected && "bg-page-l0", isDisabled && "text-comp-disabled cursor-not-allowed", className), "data-selected": isSelected, "aria-selected": isSelected, disabled: isDisabled, onClick: handleClick, ...rest, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-5", children: icon })), label, jsxRuntime.jsx(StateColorContainer, { className: "rounded-sm" })] }));
 });
 
 const TOOLTIP_SHORT_VARIANTS = {
@@ -12597,14 +12598,14 @@ const TooltipTrigger = Trigger;
 const TooltipContent = ({ type, ...rest }) => {
     const { className, ...otherProps } = rest;
     if (type === "default") {
-        return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Content2, { className: cn("py-4 px-5 flex flex-col gap-1 bg-page-l1 rounded-lg border border-border-overlay shadow-basic", className), ...otherProps, children: rest.children }) }));
+        return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Content2, { className: cn("py-4 px-5 flex flex-col gap-1 bg-page-translucent-l2 rounded-lg border border-border-overlay shadow-glass-medium backdrop-blur-sm", className), ...otherProps, children: rest.children }) }));
     }
     const { variant = "default", size = "regular" } = rest;
     return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Content2, { className: cn("shadow-basic rounded-lg", type === "short" &&
                 variant === TOOLTIP_SHORT_VARIANTS.DEFAULT &&
-                "border border-border-overlay bg-page-l1 text-comp-mono-default", type === "short" &&
+                "border border-border-overlay bg-page-translucent-l2 text-comp-mono-default", type === "short" &&
                 variant === TOOLTIP_SHORT_VARIANTS.ACCENT &&
-                "bg-page-accent text-comp-accent-default", type === "short" &&
+                "bg-page-accent-l0 text-comp-accent-default", type === "short" &&
                 size === TOOLTIP_SHORT_SIZES.REGULAR &&
                 "py-2 px-3 text-body font-medium leading-body-compact", type === "short" &&
                 size === TOOLTIP_SHORT_SIZES.SMALL &&
@@ -12635,22 +12636,13 @@ const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular
         event.stopPropagation();
         onDeleteClick?.(value, event);
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("flex items-center justify-center rounded-sm bg-transparent", variant === "filled" &&
-            `bg-fill-mono-subtle-default text-comp-mono-subtle-default border border-fill-mono-subtle-default 
-            hover:bg-fill-mono-subtle-hovered hover:comp-mono-subtle-hovered hover:border-fill-mono-subtle-hovered 
-            disabled:bg-fill-disabled disabled:text-comp-disabled disabled:border-fill-disabled`, variant === "filled" &&
-            useSelectedStyle &&
-            "active:fill-mono-subtle-pressed active:comp-mono-subtle-pressed active:border-fill-mono-subtle-pressed", variant === "filled" &&
-            isSelected &&
-            `bg-fill-mono-subtle-selected text-comp-mono-subtle-selected border-border-selected`, variant === "accent" &&
-            `bg-fill-accent-default text-comp-accent-default hover:bg-fill-accent-hovered hover:text-comp-accent-hovered 
-            disabled:bg-fill-disabled disabled:text-comp-disabled`, variant === "accent" &&
-            useSelectedStyle &&
-            "active:bg-fill-accent-pressed active:text-comp-accent-pressed", variant === "accent" &&
-            isSelected &&
-            `bg-fill-accent-selected text-comp-accent-selected`, size === "regular" &&
-            "text-body font-medium leading-body-compact px-1 py-0.5 gap-2", size === "small" &&
-            "text-label font-medium leading-label-compact p-0.5 gap-1.5", className), onClick: handleClick, "data-selected": isSelected, ...props, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0", children: icon })), jsxRuntime.jsx("span", { className: "flex-1 text-nowrap overflow-hidden text-ellipsis text-inherit text-size-inherit leading-inherit font-inherit", children: value.label }), onDeleteClick && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0 cursor-pointer", onClick: handleDeleteClick, children: jsxRuntime.jsx(X, {}) }))] }));
+    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("flex items-center justify-center rounded-sm bg-transparent relative group/state", variant === "filled" &&
+            `bg-page-l4 text-comp-mono-subtle-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, variant === "accent" &&
+            `bg-page-accent-l0 text-comp-accent-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, size === "regular" &&
+            "text-body font-medium leading-body-compact px-2 py-1 gap-2", size === "small" &&
+            "text-label font-medium leading-label-compact px-1.5 py-0.5 gap-1.5", className), onClick: handleClick, "data-selected": isSelected, "aria-selected": isSelected, ...props, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0", children: icon })), jsxRuntime.jsx("span", { className: "flex-1 text-nowrap overflow-hidden text-ellipsis text-inherit text-size-inherit leading-inherit font-inherit", children: value.label }), onDeleteClick && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0 cursor-pointer text-comp-mono-default group-disabled/state:text-comp-disabled", onClick: handleDeleteClick, children: jsxRuntime.jsx(X, {}) })), jsxRuntime.jsx(StateColorContainer, { className: cn("rounded-sm", useSelectedStyle
+                    ? ""
+                    : "group-active/state:bg-fill-default group-active/state:border-transparent group-disabled/state:bg-fill-default"), isInverted: variant === "accent" })] }));
 });
 Tag.displayName = "Tag";
 
@@ -12872,10 +12864,20 @@ Text.displayName = "Text";
  * ```
  */
 const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, isError = false, useHoverStyle = true, errorMessage, ...rest }, ref) => {
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("flex items-center justify-center rounded-lg bg-fill-mono-default focus-within:bg-fill-mono-default border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", useHoverStyle && "hover:bg-fill-mono-hovered", size === INPUT_SIZES.REGULAR &&
+    const innerRef = React.useRef(null);
+    const mergedRef = (node) => {
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+        innerRef.current = node;
+    };
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("relative group/state flex items-center justify-center rounded-lg bg-Page-l-null border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", size === INPUT_SIZES.REGULAR &&
                     "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
                     "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", isError &&
-                    "border-comp-chroma-error focus-within:border-comp-chroma-error", wrapperClassName), children: [leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsxRuntime.jsx("input", { ref: ref, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", useHoverStyle &&
+                    "border-comp-chroma-error focus-within:border-comp-chroma-error", wrapperClassName), onClick: () => {
+                    innerRef.current?.focus();
+                }, children: [jsxRuntime.jsx(StateColorContainer, { className: cn("group-focus-within/state:bg-page-l-null", (!useHoverStyle || rest.disabled) && "hover:bg-fill-default") }), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsxRuntime.jsx("input", { ref: mergedRef, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", useHoverStyle &&
                             "hover:placeholder:text-comp-mono-subtle-hovered", size === INPUT_SIZES.REGULAR &&
                             "text-body leading-body-compact font-medium", size === INPUT_SIZES.LARGE &&
                             "text-base leading-base-compact font-medium", isError &&
@@ -12928,7 +12930,7 @@ const MultipleSelectTrigger = React.forwardRef(({ size = "regular", children, ..
         setIsOpen(value);
         onClick?.(e);
     };
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("flex items-center justify-between rounded-lg cursor-pointer border border-border-bound bg-fill-mono-default hover:bg-fill-mono-hovered", values.length > 0 && "border-border-focused", disabled && "border-none cursor-not-allowed", size === MULTIPLE_SELECT_SIZES.REGULAR && "py-1.5 px-3 gap-1", size === MULTIPLE_SELECT_SIZES.LARGE && "py-3 pr-4 pl-3 gap-2", className), "data-disabled": disabled, "data-selected": values.length > 0, onClick: handleTriggerClick, ...otherProps, children: [children, jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4", children: jsxRuntime.jsx(ChevronDown, { size: 16 }) })] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("relative group/state flex items-center justify-between rounded-lg cursor-pointer border border-border-bound bg-page-l-null text-comp-mono-default aria-selected:border-border-focused", disabled && "border-transparent cursor-not-allowed", size === MULTIPLE_SELECT_SIZES.REGULAR && "py-1.5 px-3 gap-2", size === MULTIPLE_SELECT_SIZES.LARGE && "py-3 pr-4 pl-3 gap-3", className), "data-disabled": disabled, "data-selected": isOpen, "aria-selected": isOpen, onClick: handleTriggerClick, ...otherProps, children: [children, jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 text-comp-mono-default", children: jsxRuntime.jsx(ChevronDown, { size: 16 }) }), jsxRuntime.jsx(StateColorContainer, { className: "group-aria-selected/state:bg-fill-default" })] }));
 });
 const MultipleSelectValue = React.forwardRef(({ placeholder, className, ...rest }, ref) => {
     const { values, disabled, setSelectedValues } = React.useContext(MultipleSelectContext);
@@ -12982,7 +12984,7 @@ const MultipleSelectContent = React.forwardRef(({ useSearch, options: optionsPro
             window.removeEventListener("resize", close);
         };
     }, [setIsOpen]);
-    return (isOpen && (jsxRuntime.jsxs("div", { ref: composedRefs, className: cn("flex-1 absolute top-[calc(100%+4px)] left-0 z-[1000] w-[calc(100%-16px)] bg-page-l1 rounded-xl shadow-medium p-2 border border-border-overlay", className), ...rest, children: [useSearch && (jsxRuntime.jsx("div", { className: "pb-2 mb-2 border-b border-b-border-divider", children: jsxRuntime.jsx(Input, { onChange: handleSearchChange, leftIcon: jsxRuntime.jsx(MagnifyingGlassIcon, { width: 20, height: 20 }), placeholder: "Enter any characters..." }) })), jsxRuntime.jsx("ul", { className: "p-0 m-0 flex flex-col gap-1 list-none", children: options.map((option) => (jsxRuntime.jsx(MultipleSelectItem, { option: option, indicator: indicator }, option.value))) })] })));
+    return (isOpen && (jsxRuntime.jsxs("div", { ref: composedRefs, className: cn("flex-1 absolute top-[calc(100%+4px)] left-0 z-[1000] w-[calc(100%-16px)] bg-page-translucent-l1 shadow-glass-medium backdrop-blur-sm rounded-xl p-2 border border-border-overlay", className), ...rest, children: [useSearch && (jsxRuntime.jsx("div", { className: "pb-2 mb-2 border-b border-b-border-divider", children: jsxRuntime.jsx(Input, { onChange: handleSearchChange, leftIcon: jsxRuntime.jsx(MagnifyingGlassIcon, { width: 20, height: 20 }), placeholder: "Enter any characters..." }) })), jsxRuntime.jsx("ul", { className: "p-0 m-0 flex flex-col gap-1 list-none", children: options.map((option) => (jsxRuntime.jsx(MultipleSelectItem, { option: option, indicator: indicator }, option.value))) })] })));
 });
 const MultipleSelectItem = React.forwardRef(({ option, indicator, className, ...rest }, ref) => {
     const { values, setSelectedValues } = React.useContext(MultipleSelectContext);
@@ -12996,8 +12998,8 @@ const MultipleSelectItem = React.forwardRef(({ option, indicator, className, ...
             : [...values, option];
         setSelectedValues(newValues);
     };
-    return (jsxRuntime.jsxs("li", { ref: ref, "data-selected": isSelected, "data-disabled": option.disabled, className: cn("py-2 px-3 cursor-pointer flex items-center justify-between gap-2 text-body text-comp-mono-default leading-body-compact font-medium rounded-sm hover:bg-fill-mono-hovered hover:text-comp-mono-default active:bg-fill-mono-selected active:text-comp-mono-default", isSelected && "bg-fill-mono-selected text-comp-mono-default", option.disabled &&
-            "bg-fill-disabled text-comp-disabled cursor-not-allowed", className), onClick: handleClick, ...rest, children: [jsxRuntime.jsx("span", { className: "flex-1 overflow-ellipsis overflow-x-hidden whitespace-nowrap text-inherit text-size-inherit leading-inherit font-inherit", children: option.label }), indicator && isSelected && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4", children: indicator }))] }));
+    return (jsxRuntime.jsxs("li", { ref: ref, "data-selected": isSelected, "aria-selected": isSelected, "data-disabled": option.disabled, className: cn("group/state relative py-2 px-3 cursor-pointer flex items-center justify-between gap-2 text-body text-comp-mono-default leading-body-compact font-medium rounded-sm", isSelected && "bg-fill-mono-selected text-comp-mono-default", option.disabled &&
+            "bg-fill-disabled text-comp-disabled cursor-not-allowed", className), onClick: handleClick, ...rest, children: [jsxRuntime.jsx("span", { className: "flex-1 overflow-ellipsis overflow-x-hidden whitespace-nowrap text-inherit text-size-inherit leading-inherit font-inherit", children: option.label }), indicator && isSelected && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4", children: indicator })), jsxRuntime.jsx(StateColorContainer, { className: "rounded-sm" })] }));
 });
 
 const Table = React.forwardRef(({ className, ...rest }, ref) => {
@@ -13045,8 +13047,8 @@ const InteractiveListItemContext = React.createContext({
     disabled: false,
 });
 const InteractiveListItem = React.forwardRef(({ isSelected, disabled, showHoverActions = true, children, className, ...rest }, ref) => {
-    return (jsxRuntime.jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsxRuntime.jsx("div", { ref: ref, "data-selected": isSelected, "data-disabled": disabled, "data-hover-actions": showHoverActions, className: cn("flex items-center gap-1 p-1.5 rounded-sm cursor-pointer text-comp-mono-default bg-fill-mono-default border border-transparent hover:bg-fill-mono-hovered active:bg-fill-mono-pressed", isSelected && "bg-fill-mono-selected border-border-selected", disabled &&
-                "cursor-not-allowed text-comp-disabled bg-fill-disabled", className), ...rest, children: children }) }));
+    return (jsxRuntime.jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsxRuntime.jsxs("div", { ref: ref, "aria-selected": isSelected, "data-selected": isSelected, "data-disabled": disabled, "data-hover-actions": showHoverActions, className: cn("relative group/state flex items-center gap-1 p-1.5 rounded-sm cursor-pointer text-comp-mono-default bg-fill-mono-default border border-transparent hover:bg-fill-mono-hovered active:bg-fill-mono-pressed", isSelected && "bg-fill-mono-selected border-border-selected", disabled &&
+                "cursor-not-allowed text-comp-disabled bg-fill-disabled", className), ...rest, children: [children, jsxRuntime.jsx(StateColorContainer, {})] }) }));
 });
 const InteractiveListItemIcon = React.forwardRef(({ children, className, ...props }, ref) => {
     return (jsxRuntime.jsx("span", { className: cn("flex items-center justify-center size-6 p-1", className), ...props, ref: ref, children: children }));
@@ -13072,12 +13074,12 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
             month_grid: "border-separate border-spacing-0",
             weekday: "text-comp-mono-subtle-default text-body font-normal leading-body size-9 p-1",
             day: "p-1 bg-transparent",
-            day_button: "size-8 rounded-md hover:bg-fill-mono-subtle-hovered focus:outline-none text-body leading-3.5 font-medium text-comp-mono-default cursor-pointer",
-            selected: cn("[&_button]:bg-fill-accent-selected bg-transparent", props.mode === "single" &&
-                "[&_button]:text-comp-accent-default [&_button]:hover:bg-fill-accent-selected"),
-            range_start: "[&_button]:bg-fill-accent-selected bg-transparent [&_button]:text-comp-accent-default [&_button]:hover:bg-fill-accent-selected",
-            range_middle: "[&_button]:bg-fill-mono-subtle-default bg-transparent [&_button]:hover:bg-fill-mono-subtle-default",
-            range_end: "[&_button]:bg-fill-accent-selected bg-transparent [&_button]:text-comp-accent-default [&_button]:hover:bg-fill-accent-selected",
+            day_button: "size-8 rounded-md hover:bg-fill-hovered focus:outline-none text-body leading-3.5 font-medium text-comp-mono-default cursor-pointer",
+            selected: cn("[&_button]:bg-page-accent-l0 bg-transparent", props.mode === "single" &&
+                "[&_button]:text-comp-accent-default [&_button]:hover:bg-page-accent-l0"),
+            range_start: "[&_button]:bg-page-accent-l0 bg-transparent [&_button]:text-comp-accent-default [&_button]:hover:bg-page-accent-l0",
+            range_middle: "[&_button]:bg-page-l3 bg-transparent [&_button]:hover:bg-fill-mono-subtle-default",
+            range_end: "[&_button]:bg-page-accent-l0 bg-transparent [&_button]:text-comp-accent-default [&_button]:hover:bg-page-accent-l0",
             button_next: cn(reactDayPicker.getDefaultClassNames().button_next, "h-9 py-0 px-2 text-body leading-body-compact !bg-fill-mono-default hover:!bg-fill-mono-hovered active:!bg-fill-mono-pressed disabled:!bg-fill-disabled disabled:text-comp-disabled rounded-md"),
             button_previous: cn(reactDayPicker.getDefaultClassNames().button_previous, "h-9 py-0 px-2 text-body leading-body-compact !bg-fill-mono-default hover:!bg-fill-mono-hovered active:!bg-fill-mono-pressed disabled:!bg-fill-disabled disabled:text-comp-disabled rounded-md"),
             ...classNames,
@@ -13097,6 +13099,7 @@ const BUTTON_SIZES = {
     LARGE: "large",
 };
 const BUTTON_VARIANTS = {
+    ACCENT: "accent",
     THUMBNAIL_GHOST: "thumbnail_ghost"};
 
 /**
@@ -13113,7 +13116,7 @@ const BUTTON_VARIANTS = {
  * </Button>
  * ```
  */
-const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
+const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
     const getClassName = (size, variant) => {
         const sizeClassName = {
             small: "h-7 py-0 px-1.5 text-label leading-label-compact",
@@ -13126,12 +13129,16 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
             large: "px-1.5",
         }[size];
         const variantClassName = {
-            accent: "bg-fill-accent-default hover:bg-fill-accent-hovered active:bg-fill-accent-pressed disabled:bg-fill-disabled text-comp-accent-default disabled:text-comp-disabled",
-            outline: "bg-fill-mono-default hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent",
-            ghost: "bg-fill-mono-default hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
-            thumbnail_ghost: "bg-transparent hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
-            subtle_filled: "bg-fill-mono-subtle-default hover:bg-fill-mono-subtle-hovered active:bg-fill-mono-subtle-pressed disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled",
-            accent_ghost: "bg-fill-mono-default hover:bg-fill-accent-hovered active:bg-fill-accent-pressed disabled:bg-fill-disabled text-comp-accent-default disabled:text-comp-disabled",
+            accent: "bg-page-accent-l0 disabled:bg-pure-transparent text-comp-accent-default disabled:text-comp-disabled",
+            outline: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent aria-selected:border-border-selected",
+            outline_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent aria-selected:border-border-selected aria-selected:bg-page-accent-l0 aria-selected:text-comp-accent-default",
+            ghost: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled",
+            thumbnail_ghost: "bg-page-l-null disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
+            ghost_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled aria-selected:bg-page-accent-l0 aria-selected:text-comp-accent-default",
+            subtle_filled: "bg-page-l3 disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
+            outline_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled border border-border-accent-bound disabled:border-pure-transparent aria-selected:border-border-accent-selected",
+            ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
+            ghost_dim: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
         }[variant];
         return [
             sizeClassName,
@@ -13160,7 +13167,7 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
             return "px-1.5";
         return "px-2"; // 기본값은 regular 크기
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", !children && (leftIcon || rightIcon) && getPaddingOnlyIcon(size), className), ...rest, children: [isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
+    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", !children && (leftIcon || rightIcon) && getPaddingOnlyIcon(size), className), ...rest, children: [jsxRuntime.jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName }), isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
                     "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
                     "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
                     "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
@@ -13217,7 +13224,7 @@ const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "Y
         }
         return placeholder ?? "";
     };
-    return (jsxRuntime.jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Trigger$2, { asChild: true, children: jsxRuntime.jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsxRuntime.jsx(Calendar$1, { size: 20 }), className: "justify-start", disabled: disabled, children: getDateToFormatString(inputValue) }) }), jsxRuntime.jsx(Content2$2, { sideOffset: 10, align: "start", className: cn("z-10", popoverContentClassName), ...rest, children: mode === "single" ? (jsxRuntime.jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsxRuntime.jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsxRuntime.jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
+    return (jsxRuntime.jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Trigger$2, { asChild: true, children: jsxRuntime.jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsxRuntime.jsx(Calendar$1, { size: 20 }), className: "justify-start", "aria-selected": open, disabled: disabled, stateContainerClassName: open ? "group-aria-selected/state:bg-fill-default" : undefined, children: getDateToFormatString(inputValue) }) }), jsxRuntime.jsx(Content2$2, { sideOffset: 10, align: "start", className: cn("z-10", popoverContentClassName), ...rest, children: mode === "single" ? (jsxRuntime.jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsxRuntime.jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsxRuntime.jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
 };
 
 const ContextMenu = Root2$3;
@@ -13230,12 +13237,8 @@ const ContextMenuLabel = (props) => {
     return (jsxRuntime.jsx(Label2, { ...props, children: props.children }));
 };
 const ContextMenuItem = ({ leftIcon, rightSlot, textValue, ...rest }) => {
-    return (jsxRuntime.jsxs(Item2$1, { ...rest, className: cn(`group outline-none p-2 flex items-center justify-between gap-2 text-body leading-body-compact font-medium text-comp-mono-default bg-fill-mono-default border border-fill-mono-default rounded-sm 
-        hover:not-[:is([data-disabled])]:bg-fill-mono-hovered hover:not-[:is([data-disabled])]:text-comp-mono-hovered 
-        active:not-[:is([data-disabled])]:bg-fill-mono-pressed active:not-[:is([data-disabled])]:text-comp-mono-pressed 
-        [&:is([data-state='open'])]:bg-fill-mono-selected [&:is([data-state='open'])]:text-comp-mono-selected
-        [&:is([data-disabled])]:bg-fill-disabled [&:is([data-disabled])]:text-comp-disabled [&:is([data-disabled])]:cursor-not-allowed`, rest.className), children: [jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-2 text-size-inherit font-inherit leading-inherit overflow-hidden", children: [jsxRuntime.jsx("div", { className: "size-4 flex items-center justify-center text-size-inherit leading-inherit font-inherit bg-transparent", children: leftIcon }), jsxRuntime.jsx("span", { className: "overflow-ellipsis overflow-hidden whitespace-nowrap", children: textValue })] }), rightSlot && (jsxRuntime.jsx("div", { className: `flex items-center justify-center text-size-inherit leading-inherit font-inherit text-comp-mono-subtle-default 
-          group-hover:not-[data-disabled]:text-comp-mono-subtle-hovered group-[data-state="open"]:text-comp-mono-subtle-selected group-[data-disabled]:text-comp-disabled`, children: rightSlot }))] }));
+    return (jsxRuntime.jsxs(Item2$1, { ...rest, className: cn(`relative group/state outline-none p-2 flex items-center justify-between gap-2 text-body leading-body-compact font-medium text-comp-mono-default bg-page-l-null rounded-sm 
+        [&:is([data-disabled])]:bg-fill-disabled [&:is([data-disabled])]:text-comp-disabled [&:is([data-disabled])]:cursor-not-allowed`, rest.className), children: [jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-2 text-size-inherit font-inherit leading-inherit overflow-hidden", children: [jsxRuntime.jsx("div", { className: "size-4 flex items-center justify-center text-size-inherit leading-inherit font-inherit bg-transparent text-comp-mono-subtle-default group-aria-disabled/state:text-comp-disabled", children: leftIcon }), jsxRuntime.jsx("span", { className: "overflow-ellipsis overflow-hidden whitespace-nowrap", children: textValue })] }), rightSlot && (jsxRuntime.jsx("div", { className: `flex items-center justify-center text-size-inherit leading-inherit font-inherit text-comp-mono-subtle-default group-aria-disabled/state:text-comp-disabled`, children: rightSlot })), jsxRuntime.jsx(StateColorContainer, { className: "rounded-sm group-aria-disabled/state:bg-fill-default group-[data-state='open']/state:bg-fill-selected" })] }));
 };
 const ContextMenuGroup = Group2;
 const ContextMenuSub = Sub2;
@@ -13244,7 +13247,7 @@ const ContextMenuSubContent = (props) => {
     return (jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { ...props, className: cn("p-2 bg-page-l1 shadow-medium rounded-lg w-[320px] border border-border-overlay", props.className), children: props.children }) }));
 };
 const ContextMenuSeparator = (props) => {
-    return (jsxRuntime.jsx(Separator2, { ...props, className: cn("h-[1px] bg-border-overlay my-1", props.className) }));
+    return (jsxRuntime.jsx(Separator2, { ...props, className: cn("h-[1px] bg-border-divider my-1", props.className) }));
 };
 const ContextMenuCheckboxItem = CheckboxItem2;
 const ContextMenuRadioGroup = RadioGroup2;
@@ -13255,8 +13258,8 @@ const ContextMenuItemIndicator = (props) => {
 
 const AutocompleteContentItem = ({ inputValue, item, index, displayValue, highlightedIndex, onClick, className = "", }) => {
     const isHighlighted = index === highlightedIndex;
-    return (jsxRuntime.jsx("li", { id: `suggestion-item-${index}`, className: cn("rounded-sm p-2 text-comp-mono-default text-body leading-body-compact font-medium list-none hover:bg-fill-mono-hovered hover:text-comp-mono-hovered", isHighlighted && "bg-fill-mono-hovered text-comp-mono-hovered", className), onClick: (e) => onClick(item, e), role: "option", "aria-selected": isHighlighted, children: displayValue(item)
-            .split(new RegExp(`(${inputValue})`, "gi"))
+    return (jsxRuntime.jsx("li", { id: `suggestion-item-${index}`, className: cn("rounded-sm p-2 text-comp-mono-default text-body leading-body-compact font-medium list-none hover:bg-fill-hovered", isHighlighted && "bg-fill-selected", className), onClick: (e) => onClick(item, e), role: "option", "aria-selected": isHighlighted, children: displayValue(item)
+            .split(new RegExp(`(${inputValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi"))
             .map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? (jsxRuntime.jsx("span", { className: "font-bold text-comp-chroma-error", children: part }, i)) : (jsxRuntime.jsx("span", { children: part }, i))) }));
 };
 const Autocomplete = ({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage = "검색 결과가 없습니다.", maxResults = 10, debounceTime = 300, wrapperClassName, contentClassName, itemClassName, }) => {
@@ -13373,27 +13376,27 @@ const SWITCH_SIZES = {
 
 const FilledSwitch = (props) => {
     const { size, checked, thumbClassName, ...rest } = props;
-    return (jsxRuntime.jsxs(Root, { className: cn("flex items-center gap-1 bg-page-l2 rounded-lg relative", size === SWITCH_SIZES.REGULAR && "p-1.5 w-[68px] h-9", size === SWITCH_SIZES.SMALL && "p-1 w-[59px] h-7"), checked: checked, ...rest, children: [jsxRuntime.jsx(Thumb, { className: cn("rounded-sm absolute transition-all duration-100", size === SWITCH_SIZES.REGULAR &&
+    return (jsxRuntime.jsxs(Root, { className: cn("group/state flex items-center gap-1 bg-page-l2 rounded-lg relative", size === SWITCH_SIZES.REGULAR && "p-1.5 w-[68px] h-9", size === SWITCH_SIZES.SMALL && "p-1 w-[59px] h-7"), checked: checked, ...rest, children: [jsxRuntime.jsx(Thumb, { className: cn("absolute transition-all duration-100 rounded-sm border border-border-divider", size === SWITCH_SIZES.REGULAR &&
                     "size-6 left-1.5 data-[state=checked]:left-[37px]", size === SWITCH_SIZES.SMALL &&
-                    "size-5 left-1 data-[state=checked]:left-[35px]", checked ? "bg-fill-accent-selected" : "bg-fill-mono-subtle-selected", thumbClassName) }), checked ? (jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-mono-selected py-1 px-[5px] text-left w-full", as: "div", children: "ON" })) : (jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-mono-subtle-default py-1 px-0.5 text-right w-full", as: "div", children: "OFF" }))] }));
+                    "size-5 left-1 data-[state=checked]:left-[35px]", checked ? "bg-page-accent-l0" : "bg-page-l3", thumbClassName) }), checked ? (jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-mono-default py-1 px-[5px] text-left w-full", as: "div", children: "ON" })) : (jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-mono-subtle-default py-1 px-0.5 text-right w-full", as: "div", children: "OFF" })), jsxRuntime.jsx(StateColorContainer, { className: "rounded-lg" })] }));
 };
 const OutlinedSwitch = (props) => {
     const { size, checked, thumbClassName, ...rest } = props;
-    return (jsxRuntime.jsxs(Root, { className: cn("group border shadow-inner p-1 relative rounded-[20px]", checked
-            ? "bg-fill-accent-default hover:bg-fill-accent-hovered border-transparent"
-            : "bg-fill-mono-default hover:bg-fill-mono-hovered border-border-divider hover:border-border-bound", size === SWITCH_SIZES.REGULAR && "w-[74px] h-9", size === SWITCH_SIZES.SMALL && "w-[60px] h-7"), checked: checked, ...rest, children: [jsxRuntime.jsx(Thumb, { className: cn("absolute transition-all duration-100 top-[3px] rounded-full left-1 bg-border-divider data-[state=checked]:bg-comp-accent-default shadow-basic group-hover:bg-border-bound data-[state=checked]:group-hover:bg-comp-accent-hovered", size === SWITCH_SIZES.REGULAR &&
-                    "size-7 data-[state=checked]:left-[42px] group-hover:shadow-large", size === SWITCH_SIZES.SMALL &&
-                    "size-5 data-[state=checked]:left-[36px] group-hover:shadow-basic", thumbClassName) }), checked ? (jsxRuntime.jsx(Text, { variant: size === SWITCH_SIZES.REGULAR
+    return (jsxRuntime.jsxs(Root, { className: cn("group/state border shadow-inner p-1 relative rounded-[20px]", checked
+            ? "bg-page-accent-l0 border-transparent"
+            : "bg-page-l-null border-border-divider", size === SWITCH_SIZES.REGULAR && "w-[74px] h-9", size === SWITCH_SIZES.SMALL && "w-[60px] h-7"), checked: checked, ...rest, children: [jsxRuntime.jsx(Thumb, { className: cn("absolute transition-all duration-100 top-[3px] rounded-full left-1 bg-page-l3 border border-border-bound shadow-basic", size === SWITCH_SIZES.REGULAR &&
+                    "size-7 data-[state=checked]:left-[42px]", size === SWITCH_SIZES.SMALL &&
+                    "size-5 data-[state=checked]:left-[36px]", thumbClassName) }), checked ? (jsxRuntime.jsx(Text, { variant: size === SWITCH_SIZES.REGULAR
                     ? "boldBodyBoldCompact"
-                    : "boldLabelBoldCompact", className: "text-comp-accent-default pl-2 text-left group-hover:text-comp-accent-hovered", as: "div", children: "ON" })) : (jsxRuntime.jsx(Text, { variant: size === SWITCH_SIZES.REGULAR
+                    : "boldLabelBoldCompact", className: "text-comp-accent-default pl-2 text-left", as: "div", children: "ON" })) : (jsxRuntime.jsx(Text, { variant: size === SWITCH_SIZES.REGULAR
                     ? "medBodyMedCompact"
-                    : "medLabelMedCompact", className: cn("text-comp-mono-subtle-default text-right group-hover:text-comp-mono-subtle-hovered", size === SWITCH_SIZES.REGULAR && "pr-1.5", size === SWITCH_SIZES.SMALL && "pr-[3px]"), as: "div", children: "OFF" }))] }));
+                    : "medLabelMedCompact", className: cn("text-comp-mono-subtle-default text-right", size === SWITCH_SIZES.REGULAR && "pr-1.5", size === SWITCH_SIZES.SMALL && "pr-[3px]"), as: "div", children: "OFF" })), jsxRuntime.jsx(StateColorContainer, { className: "rounded-[20px]" })] }));
 };
 const SlideSwitch = (props) => {
     const { size, checked, thumbClassName, leftIcon, rightIcon, ...rest } = props;
-    return (jsxRuntime.jsxs(Root, { className: cn("group border shadow-inner p-1 relative rounded-[20px] border-border-bound bg-fill-mono-default hover:bg-fill-mono-hovered", size === SWITCH_SIZES.REGULAR && "w-[70px] h-9", size === SWITCH_SIZES.SMALL && "w-[54px] h-7"), checked: checked, ...rest, children: [jsxRuntime.jsx(Thumb, { className: cn("absolute transition-all duration-100 top-[3px] rounded-full left-1 bg-page-l2 shadow-medium border border-border-bound", size === SWITCH_SIZES.REGULAR &&
+    return (jsxRuntime.jsxs(Root, { className: cn("group/state border shadow-inner p-1 relative rounded-[20px] border-border-bound bg-page-l-null", size === SWITCH_SIZES.REGULAR && "w-[70px] h-9", size === SWITCH_SIZES.SMALL && "w-[54px] h-7"), checked: checked, ...rest, children: [jsxRuntime.jsx(Thumb, { className: cn("absolute transition-all duration-100 top-[3px] rounded-full left-1 bg-page-l3 shadow-basic border border-border-bound", size === SWITCH_SIZES.REGULAR &&
                     "size-7 data-[state=checked]:left-[36px]", size === SWITCH_SIZES.SMALL &&
-                    "size-5 data-[state=checked]:left-[28px]", thumbClassName) }), leftIcon && (jsxRuntime.jsx("div", { className: cn("absolute top-1/2 -translate-y-1/2 transition-opacity text-comp-mono-subtle-default", size === SWITCH_SIZES.SMALL && "left-[8px] size-4", size === SWITCH_SIZES.REGULAR && "left-[10px] size-5", checked ? "opacity-100" : "opacity-0"), children: leftIcon })), rightIcon && (jsxRuntime.jsx("div", { className: cn("absolute top-1/2 -translate-y-1/2 transition-opacity text-comp-mono-subtle-default", size === SWITCH_SIZES.SMALL && "right-[8px] size-4", size === SWITCH_SIZES.REGULAR && "right-[10px] size-5", !checked ? "opacity-100" : "opacity-0"), children: rightIcon }))] }));
+                    "size-5 data-[state=checked]:left-[28px]", thumbClassName) }), leftIcon && (jsxRuntime.jsx("div", { className: cn("absolute top-1/2 -translate-y-1/2 transition-opacity text-comp-mono-subtle-default", size === SWITCH_SIZES.SMALL && "left-[8px] size-4", size === SWITCH_SIZES.REGULAR && "left-[10px] size-5", checked ? "opacity-100" : "opacity-0"), children: leftIcon })), rightIcon && (jsxRuntime.jsx("div", { className: cn("absolute top-1/2 -translate-y-1/2 transition-opacity text-comp-mono-subtle-default", size === SWITCH_SIZES.SMALL && "right-[8px] size-4", size === SWITCH_SIZES.REGULAR && "right-[10px] size-5", !checked ? "opacity-100" : "opacity-0"), children: rightIcon })), jsxRuntime.jsx(StateColorContainer, { className: "rounded-[20px]" })] }));
 };
 const Switch = (props) => {
     const { defaultChecked, checked: isChecked } = props;

package/dist/cjs/index.d.ts

@@ -13,3 +13,4 @@ export { Tag } from "./tag";
 export { TAG_SIZES, TAG_VARIANTS } from "./tag/types";
 export type { TagSize, TagVariant } from "./tag/types";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./pagination";
+export { StateColorContainer } from "./state-color-container";