@telepix-lab/telepix-ui 0.6.8 → 0.6.10

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

@@ -24,3 +24,15 @@ export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAtt
  * ```
  */
 export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
+ * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <ButtonTextDim>자세히 보기</ButtonTextDim>
+ * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * ```
+ */
+export declare const ButtonTextDim: React.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "variant">, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -15,5 +15,6 @@ export declare const BUTTON_VARIANTS: {
     readonly OUTLINE_ACCENT: "outline_accent";
     readonly GHOST_ACCENT: "ghost_accent";
     readonly GHOST_DIM: "ghost_dim";
+    readonly TEXT_DIM: "text_dim";
 };
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];

package/dist/cjs/client.js

@@ -12099,7 +12099,7 @@ const StateColorContainer = ({ groupName = "state", isInverted, className, }) =>
     const group = groupName || "state";
     const mode = isInverted ? "invert" : "normal";
     const actionClass = fillClassMap[group]?.[mode] ?? fillClassMap.state[mode];
-    return (jsxRuntime.jsx("div", { className: cn("absolute left-0 top-0 right-0 bottom-0 inset-0 pointer-events-none z-0", actionClass, className) }));
+    return (jsxRuntime.jsx("div", { className: cn("absolute left-0 top-0 right-0 bottom-0 inset-0 pointer-events-none z-0 rounded-[inherit]", actionClass, className) }));
 };
 
 const RadioGroupContext = React.createContext({ value: "", disabled: false });
@@ -12129,7 +12129,7 @@ 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 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 &&
+    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(isDisabled &&
                     "bg-fill-disabled group-hover/state:bg-fill-disabled group-active/state:bg-fill-disabled") })] }));
 });
 RadioGroup.displayName = "RadioGroup";
@@ -12345,11 +12345,19 @@ const Checkbox = React.forwardRef(({ label, labelClassName, wrapperClassName, ..
         setChecked(value);
         onChange?.(value);
     };
-    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pl-1.5 py-1 relative group/state", !label ? "pr-1.5 rounded-sm" : "pr-3 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) }), label && (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(label ? "rounded-lg" : "rounded-sm", disabled
+    const handleWrapperClick = (e) => {
+        // CheckboxRadix.Root와 label은 자체 클릭 핸들러를 가지고 있으므로
+        // wrapper 영역(StateColorContainer 포함)을 직접 클릭한 경우에만 토글
+        if (disabled || e.target !== e.currentTarget)
+            return;
+        const currentChecked = defaultChecked ? checked : isChecked;
+        const newValue = !currentChecked;
+        onCheckedChange(newValue);
+    };
+    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pl-1.5 py-1 relative group/state", !label ? "pr-1.5 rounded-sm" : "pr-3 rounded-lg", !disabled && "cursor-pointer", wrapperClassName), onClick: handleWrapperClick, 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) }), label && (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(disabled
                     ? "bg-fill-default group-hover/state:bg-fill-default group-active/state:bg-fill-default"
                     : "") })] }));
 });
-Checkbox.displayName = "Checkbox";
 
 /**
  * 카드 컴포넌트는 콘텐츠를 그룹화하고 시각적으로 구분하는 데 사용됩니다.<br/>
@@ -12469,7 +12477,7 @@ const SelectTrigger = ({ placeholder, textValue, variant = "outline", size = "re
             "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, asChild: !!textValue, children: textValue && jsxRuntime.jsx("span", { children: textValue }) }), 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 group-data-disabled/state:bg-fill-default" })] }));
+            "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, asChild: !!textValue, children: textValue && jsxRuntime.jsx("span", { children: textValue }) }), 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: "group-data-disabled/state:bg-fill-default" })] }));
 };
 const SelectContent = ({ children, viewportClassName, viewportWrapperClassName, ...rest }) => {
     const { className, position, sideOffset, ...otherProps } = rest;
@@ -12486,7 +12494,7 @@ const SelectItem = ({ indicator, ...rest }) => {
     const { className, textValue, ...otherProps } = rest;
     return (jsxRuntime.jsxs(Item, { className: cn(`relative group/state flex items-center justify-between gap-2 py-1.5 px-2 cursor-pointer text-comp-mono-default text-body font-medium leading-body-compact outline-none rounded-sm 
         [&:is([data-disabled])]:text-comp-disabled [&:is([data-disabled])]:cursor-not-allowed
-        `, className), ...otherProps, children: [jsxRuntime.jsx(ItemText, { children: textValue ?? otherProps.value }), indicator && (jsxRuntime.jsx(ItemIndicator, { className: "w-4 flex items-center justify-center", children: indicator })), jsxRuntime.jsx(StateColorContainer, { className: "rounded-sm group-data-disabled/state:bg-fill-default" })] }));
+        `, className), ...otherProps, children: [jsxRuntime.jsx(ItemText, { children: textValue ?? otherProps.value }), indicator && (jsxRuntime.jsx(ItemIndicator, { className: "w-4 flex items-center justify-center", children: indicator })), jsxRuntime.jsx(StateColorContainer, { className: "group-data-disabled/state:bg-fill-default" })] }));
 };
 Select.displayName = "Select";
 SelectTrigger.displayName = "SelectTrigger";
@@ -12536,7 +12544,7 @@ const VerticalMenu = React.forwardRef(({ disabled, value, label, icon, variant =
         rest.onClick?.(e);
     };
     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 &&
+            `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("group-disabled/state:bg-fill-default", variant === VERTICAL_MENU_VARIANTS.ACCENT &&
                     "group-aria-selected:bg-fill-default") })] }));
 });
 VerticalMenu.displayName = "VerticalMenu";
@@ -12573,7 +12581,7 @@ const HorizontalTab = React.forwardRef(({ value, label, className, icon, size =
             return;
         setSelectedTab(value);
     };
-    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" })] }));
+    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" })] }));
 });
 
 const ModeTabContext = React.createContext({
@@ -12603,7 +12611,7 @@ const ModeTab = React.forwardRef(({ label, icon, value, className, ...rest }, re
             return;
         setSelectedTab(value);
     };
-    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" })] }));
+    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, {})] }));
 });
 
 const TOOLTIP_SHORT_VARIANTS = {
@@ -12665,17 +12673,12 @@ const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular
             `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
+            "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(useSelectedStyle
                     ? ""
                     : "group-active/state:bg-fill-default group-active/state:border-transparent group-disabled/state:bg-fill-default"), isInverted: variant === "accent" })] }));
 });
 Tag.displayName = "Tag";
 
-const INPUT_SIZES = {
-    REGULAR: "regular",
-    LARGE: "large",
-};
-
 const TEXT_VARIANTS = {
     BOLD3XLARGEBOLD: "bold3XLargeBold",
     BOLD2XLARGEBOLDCOMPACT: "bold2XLargeBoldCompact",
@@ -12884,10 +12887,21 @@ const Text = ({ children, className, size, weight, align, variant = "regularBase
 };
 Text.displayName = "Text";
 
+const INPUT_SIZES = {
+    SMALL: "small",
+    REGULAR: "regular",
+    LARGE: "large",
+};
+const INPUT_VARIANTS = {
+    OUTLINED: "outlined",
+    FILLED: "filled",
+};
+
 /**
  * 다양한 크기와 아이콘을 지원하는 입력 필드 컴포넌트입니다.<br/>
- * 사용자는 크기(size), 왼쪽 아이콘(leftIcon), 오른쪽 아이콘(rightIcon) 등을 지정할 수 있습니다.<br/>
+ * 사용자는 크기(size), 변형(variant), 왼쪽 아이콘(leftIcon), 오른쪽 아이콘(rightIcon) 등을 지정할 수 있습니다.<br/>
  * 기본적으로 regular 크기를 가지며, large 크기도 선택할 수 있습니다.<br/>
+ * 기본적으로 outlined 변형을 가지며, filled 변형도 선택할 수 있습니다.<br/>
  * input의 너비는 부모 요소에 따라 결정됩니다.<br/>
  * input 자체의 클래스는 `className` 속성을 통해 추가할 수 있습니다.<br/>
  * wrapperClassName을 통해 input을 감싸는 div의 클래스도 추가할 수 있습니다.<br/>
@@ -12896,6 +12910,7 @@ Text.displayName = "Text";
  * ```tsx
  * <Input
  *   size="large"
+ *   variant="outlined"
  *   leftIcon={<SearchIcon />}
  *   rightIcon={<ClearIcon />}
  *   placeholder="Search..."
@@ -12903,7 +12918,7 @@ Text.displayName = "Text";
  * />
  * ```
  */
-const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, isError = false, useHoverStyle = true, errorMessage, useIndicator = false, ...rest }, ref) => {
+const Input = React.forwardRef(({ size = "regular", variant = "outlined", leftIcon, rightIcon, wrapperClassName, isError = false, useHoverStyle = true, errorMessage, useIndicator = false, ...rest }, ref) => {
     const innerRef = React.useRef(null);
     const mergedRef = (node) => {
         if (typeof ref === "function")
@@ -12912,13 +12927,17 @@ const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapper
             ref.current = node;
         innerRef.current = node;
     };
-    return (jsxRuntime.jsxs(React.Fragment, { 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 &&
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("relative group/state flex items-center justify-center rounded-lg border bg-Page-l-null border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", variant === INPUT_VARIANTS.OUTLINED &&
+                    "border border-border-bound focus-within:border-border-focused", variant === INPUT_VARIANTS.FILLED &&
+                    "bg-page-l3 border-transparent focus-within:border-transparent", size === INPUT_SIZES.SMALL &&
+                    "py-1.5 px-2 text-label leading-label-compact font-medium gap-1", 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), 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 min-w-0 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 &&
+                            "hover:placeholder:text-comp-mono-subtle-hovered", size === INPUT_SIZES.SMALL &&
+                            "text-label leading-label-compact font-medium", size === INPUT_SIZES.REGULAR &&
                             "text-body leading-body-compact font-medium", size === INPUT_SIZES.LARGE &&
                             "text-base leading-base-compact font-medium", isError &&
                             "placeholder:text-comp-chroma-error text-comp-chroma-error hover:placeholder:text-comp-error focus:placeholder:text-comp-error", rest.type === "number" &&
@@ -13041,7 +13060,7 @@ const MultipleSelectItem = React.forwardRef(({ option, indicator, className, ...
         setSelectedValues(newValues);
     };
     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" })] }));
+            "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, {})] }));
 });
 
 const Table = React.forwardRef(({ className, ...rest }, ref) => {
@@ -13090,7 +13109,7 @@ const InteractiveListItemContext = React.createContext({
 });
 const InteractiveListItem = React.forwardRef(({ isSelected, disabled, showHoverActions = true, children, className, ...rest }, ref) => {
     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/wrapper flex items-center gap-1 p-1.5 rounded-sm cursor-pointer text-comp-mono-default bg-page-l-null order border-transparent", 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, { className: "rounded-sm", groupName: "wrapper" })] }) }));
+                "cursor-not-allowed text-comp-disabled bg-fill-disabled", className), ...rest, children: [children, jsxRuntime.jsx(StateColorContainer, { groupName: "wrapper" })] }) }));
 });
 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 }));
@@ -13117,6 +13136,7 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
             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-hovered focus:outline-none text-body leading-3.5 font-medium text-comp-mono-default cursor-pointer",
+            disabled: "[&_button]:text-comp-disabled [&_button]:cursor-not-allowed [&_button]:hover:bg-transparent",
             selected: cn("[&_button]:bg-page-accent-l0 bg-transparent", props.mode === "single" &&
                 "[&_button]:text-comp-accent-default [&_button]:hover:bg-page-accent-l0"),
             outside: "[&_button]:text-comp-disabled",
@@ -13130,12 +13150,21 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
             Dropdown: (props) => {
                 const { options, className, classNames, components, ...rest } = props;
                 const selectedOption = options?.find(({ value }) => value === rest.value);
-                return (jsxRuntime.jsxs("div", { className: cn("group/state flex px-2 py-1 rounded-lg relative cursor-pointer", props["aria-label"]?.includes("Month") ? "w-28" : "w-20"), children: [jsxRuntime.jsx("select", { ...rest, className: cn("text-body leading-body-compact font-medium text-comp-mono-default focus:outline-none z-[1] opacity-0 appearance-none absolute inset-0 w-full", className), name: props["aria-label"], children: options?.map((option) => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }), jsxRuntime.jsxs(Text, { variant: "medBodyMedCompact", className: "flex gap-0.5 items-center justify-end w-full text-comp-mono-default leading-3.5 cursor-pointer", "aria-hidden": true, children: [jsxRuntime.jsx("span", { className: "inline-block px-1 py-1.5 flex-1 text-right", children: selectedOption?.label }), jsxRuntime.jsx(ChevronDown, { size: 16 })] }), jsxRuntime.jsx(StateColorContainer, { className: "rounded-lg" })] }));
+                return (jsxRuntime.jsxs("div", { className: cn("group/state flex px-2 py-1 rounded-lg relative cursor-pointer", props["aria-label"]?.includes("Month") ? "w-28" : "w-20"), children: [jsxRuntime.jsx("select", { ...rest, className: cn("text-body leading-body-compact font-medium text-comp-mono-default focus:outline-none z-[1] opacity-0 appearance-none absolute inset-0 w-full", className), name: props["aria-label"], children: options?.map((option) => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }), jsxRuntime.jsxs(Text, { variant: "medBodyMedCompact", className: "flex gap-0.5 items-center justify-end w-full text-comp-mono-default leading-3.5 cursor-pointer", "aria-hidden": true, children: [jsxRuntime.jsx("span", { className: "inline-block px-1 py-1.5 flex-1 text-right", children: selectedOption?.label }), jsxRuntime.jsx(ChevronDown, { size: 16 })] }), jsxRuntime.jsx(StateColorContainer, {})] }));
             },
             Chevron: (args) => (jsxRuntime.jsx(ChevronLeft, { ...args, size: 20, "data-orientation": args.orientation, className: "text-comp-mono-default [&:is([data-orientation='right'])]:rotate-180 [&:is([data-orientation='up'])]:rotate-90 [&:is([data-orientation='down'])]:-rotate-90" })),
         }, ...props }));
 };
 
+var dayjs_min = {exports: {}};
+
+(function (module, exports) {
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+} (dayjs_min));
+
+var dayjs_minExports = dayjs_min.exports;
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
 const BUTTON_SIZES = {
     REGULAR: "regular",
     SMALL: "small",
@@ -13143,7 +13172,9 @@ const BUTTON_SIZES = {
 };
 const BUTTON_VARIANTS = {
     ACCENT: "accent",
-    THUMBNAIL_GHOST: "thumbnail_ghost"};
+    THUMBNAIL_GHOST: "thumbnail_ghost",
+    TEXT_DIM: "text_dim",
+};
 
 /**
  * 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>
@@ -13161,6 +13192,13 @@ const BUTTON_VARIANTS = {
  */
 const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
     const getClassName = (size, variant) => {
+        // text_dim variant는 size에 관계없이 고정된 스타일 사용
+        if (variant === BUTTON_VARIANTS.TEXT_DIM) {
+            return [
+                "h-auto py-0.5 px-0 text-body leading-body-compact gap-1.5",
+                "bg-page-l-null text-comp-mono-subtle-default hover:text-comp-mono-default aria-selected:text-comp-mono-default disabled:bg-page-l-null disabled:text-comp-disabled disabled:hover:text-comp-disabled",
+            ];
+        }
         const sizeClassName = {
             small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
             regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
@@ -13177,6 +13215,7 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
             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",
+            text_dim: "", // 위에서 처리되므로 여기서는 빈 문자열
         }[variant];
         return [sizeClassName, variantClassName];
     };
@@ -13194,46 +13233,91 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
             return "size-5";
         return "size-6"; // 기본값은 regular 크기
     };
-    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", 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 &&
+    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", className), ...rest, children: [variant !== BUTTON_VARIANTS.TEXT_DIM && (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 &&
                     "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
 });
 Button.displayName = "Button";
-
-var dayjs_min = {exports: {}};
-
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
-} (dayjs_min));
-
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
-const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, ...rest }) => {
-    const [inputValue, setInputValue] = React.useState(value);
-    const [open, setOpen] = React.useState(openProp || false);
+/**
+ * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
+ * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <ButtonTextDim>자세히 보기</ButtonTextDim>
+ * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * ```
+ */
+const ButtonTextDim = React.forwardRef((props, ref) => {
+    return jsxRuntime.jsx(Button, { ref: ref, variant: "text_dim", ...props });
+});
+ButtonTextDim.displayName = "ButtonTextDim";
+
+const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, minDate, maxDate, disabledDates, ...rest }) => {
+    // Determine if component is in controlled mode
+    // Using useRef to track initial controlled state (React's recommended approach)
+    const isControlledRef = React.useRef(value !== undefined);
+    const isControlled = isControlledRef.current;
+    const [internalValue, setInternalValue] = React.useState(value);
+    const [internalOpen, setInternalOpen] = React.useState(openProp ?? false);
+    // Use controlled value if provided, otherwise use internal state
+    const displayValue = isControlled ? value : internalValue;
+    const displayOpen = openProp !== undefined ? openProp : internalOpen;
     const handleSelect = (date) => {
-        if (mode === "single") {
-            const value = date;
-            onChange?.(value);
-        }
-        else if (mode === "multiple") {
-            const value = date;
-            onChange?.(value);
-        }
-        else if (mode === "range") {
-            const value = date;
-            onChange?.(value);
+        // Always call onChange to notify parent
+        onChange?.(date);
+        // Only update internal state in uncontrolled mode
+        if (!isControlled) {
+            setInternalValue(date);
         }
-        setInputValue(date);
+        // Close popover if instant close is enabled (single mode only)
         if (isInstantClose && mode === "single") {
             handleOpenChange(false);
         }
     };
+    // Calculate disabled dates based on minDate, maxDate, range validation, and custom disabled dates
+    // Using react-day-picker's native Matcher format for better performance
+    const isCalendarDisabled = React.useMemo(() => {
+        const matchers = [];
+        // Add minDate constraint using native 'before' matcher
+        if (minDate) {
+            matchers.push({ before: minDate });
+        }
+        // Add maxDate constraint using native 'after' matcher
+        if (maxDate) {
+            matchers.push({ after: maxDate });
+        }
+        // Range mode: when only 'from' is selected, disable all dates before it
+        if (mode === "range" &&
+            displayValue &&
+            typeof displayValue === "object" &&
+            "from" in displayValue) {
+            const rangeValue = displayValue;
+            if (rangeValue.from && !rangeValue.to) {
+                matchers.push({ before: rangeValue.from });
+            }
+        }
+        // Add custom disabled dates
+        if (disabledDates) {
+            if (Array.isArray(disabledDates)) {
+                matchers.push(...disabledDates);
+            }
+            else {
+                matchers.push(disabledDates);
+            }
+        }
+        // Return combined matchers (react-day-picker handles OR logic automatically)
+        return matchers.length > 0 ? matchers : undefined;
+    }, [minDate, maxDate, mode, displayValue, disabledDates]);
     const handleOpenChange = (open) => {
-        setOpen(open);
+        // Update internal state only in uncontrolled mode
+        if (openProp === undefined) {
+            setInternalOpen(open);
+        }
+        // Always notify parent
         onOpenChangeProp?.(open);
     };
     const getDateToFormatString = (date) => {
@@ -13243,15 +13327,17 @@ const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "Y
         else if (Array.isArray(date)) {
             return date.map((d) => dayjs(d).format(format)).join(", ");
         }
-        else if (date &&
-            typeof date === "object" &&
-            "from" in date &&
-            "to" in date) {
-            return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
+        else if (date && typeof date === "object" && "from" in date) {
+            if (date.to) {
+                return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
+            }
+            return dayjs(date.from).format(format);
         }
         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", "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 })) })] }));
+    return (jsxRuntime.jsxs(Root2$2, { open: displayOpen, 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": displayOpen, disabled: disabled, stateContainerClassName: displayOpen
+                        ? "group-aria-selected/state:bg-fill-default"
+                        : undefined, children: getDateToFormatString(displayValue) }) }), jsxRuntime.jsx(Content2$2, { sideOffset: 10, align: "start", className: cn("z-10", popoverContentClassName), ...rest, children: mode === "single" ? (jsxRuntime.jsx(Calendar, { mode: "single", ...rest, selected: displayValue, onSelect: handleSelect, disabled: isCalendarDisabled })) : mode === "multiple" ? (jsxRuntime.jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(displayValue) ? displayValue : [], onSelect: handleSelect, disabled: isCalendarDisabled })) : (jsxRuntime.jsx(Calendar, { mode: "range", ...rest, selected: displayValue, onSelect: handleSelect, disabled: isCalendarDisabled })) })] }));
 };
 
 const ContextMenu = Root2$3;
@@ -13265,7 +13351,7 @@ const ContextMenuLabel = (props) => {
 };
 const ContextMenuItem = ({ leftIcon, rightSlot, textValue, ...rest }) => {
     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" })] }));
+        [&: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: "group-aria-disabled/state:bg-fill-default group-[data-state='open']/state:bg-fill-selected" })] }));
 };
 const ContextMenuGroup = Group2;
 const ContextMenuSub = Sub2;
@@ -13405,7 +13491,7 @@ const FilledSwitch = (props) => {
     const { size, checked, thumbClassName, ...rest } = props;
     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-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" })] }));
+                    "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, {})] }));
 };
 const OutlinedSwitch = (props) => {
     const { size, checked, thumbClassName, ...rest } = props;
@@ -13417,13 +13503,13 @@ const OutlinedSwitch = (props) => {
                     ? "boldBodyBoldCompact"
                     : "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", size === SWITCH_SIZES.REGULAR && "pr-1.5", size === SWITCH_SIZES.SMALL && "pr-[3px]"), as: "div", children: "OFF" })), jsxRuntime.jsx(StateColorContainer, { className: "rounded-[20px]" })] }));
+                    : "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, {})] }));
 };
 const SlideSwitch = (props) => {
     const { size, checked, thumbClassName, leftIcon, rightIcon, ...rest } = props;
     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 })), jsxRuntime.jsx(StateColorContainer, { className: "rounded-[20px]" })] }));
+                    "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, {})] }));
 };
 const Switch = (props) => {
     const { defaultChecked, checked: isChecked } = props;

package/dist/cjs/date-picker/index.d.ts

@@ -1,6 +1,6 @@
 import { Popover } from "radix-ui";
+import { DateRange, Matcher } from "react-day-picker";
 import { CalendarProps } from "../calendar";
-import { DateRange } from "react-day-picker";
 type AllDatePickerTypes = Date | undefined | DateRange | Date[];
 interface DatePicker {
     size: "regular" | "large";
@@ -11,7 +11,21 @@ interface DatePicker {
     isInstantClose?: boolean;
     disabled?: boolean;
     popoverContentClassName?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    /**
+     * Custom disabled dates matcher.
+     * Note: For optimal performance, memoize this prop in the parent component
+     * to avoid unnecessary recalculations.
+     *
+     * @example
+     * const disabledDates = useMemo(() => [
+     *   new Date(2025, 0, 15),
+     *   { from: new Date(2025, 1, 10), to: new Date(2025, 1, 15) }
+     * ], []);
+     */
+    disabledDates?: Matcher | Matcher[];
 }
-export type DatePickerProps = DatePicker & CalendarProps & Popover.PopoverProps & Omit<Popover.PopoverContentProps, "className">;
-export declare const DatePicker: ({ size, placeholder, format, value, mode, onChange, isInstantClose, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export type DatePickerProps = DatePicker & Omit<CalendarProps, "disabled" | "selected" | "onSelect"> & Popover.PopoverProps & Omit<Popover.PopoverContentProps, "className">;
+export declare const DatePicker: ({ size, placeholder, format, value, mode, onChange, isInstantClose, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, minDate, maxDate, disabledDates, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/index.d.ts

@@ -1,17 +1,17 @@
-export { Button } from "./button";
+export { Button, ButtonTextDim } from "./button";
 export { BUTTON_SIZES, BUTTON_VARIANTS } from "./button/types";
 export type { ButtonSize, ButtonVariant } from "./button/types";
-export { Text } from "./text";
-export { TEXT_SIZES, TEXT_VARIANTS, TEXT_ALIGNMENTS, FONT_WEIGHTS, } from "./text/types";
-export type { TextSize, FontWeight, TextAlignment, TextVariant, } from "./text/types";
-export { Input } from "./input";
-export { INPUT_SIZES } from "./input/types";
-export type { InputSize } from "./input/types";
-export { TextArea } from "./textarea";
 export { Card, CardBody, CardContent, CardFooter, CardHeader } from "./card";
+export { Input } from "./input";
+export { INPUT_SIZES, INPUT_VARIANTS } from "./input/types";
+export type { InputSize, InputVariant } from "./input/types";
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
+export { StateColorContainer } from "./state-color-container";
+export type { StateGroupName } from "./state-color-container/types";
 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";
-export type { StateGroupName } from "./state-color-container/types";
+export { Text } from "./text";
+export { FONT_WEIGHTS, TEXT_ALIGNMENTS, TEXT_SIZES, TEXT_VARIANTS, } from "./text/types";
+export type { FontWeight, TextAlignment, TextSize, TextVariant, } from "./text/types";
+export { TextArea } from "./textarea";