@telepix-lab/telepix-ui 0.6.7 → 0.6.9

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,7 +12345,7 @@ 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
+    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(disabled
                     ? "bg-fill-default group-hover/state:bg-fill-default group-active/state:bg-fill-default"
                     : "") })] }));
 });
@@ -12469,7 +12469,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 +12486,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 +12536,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 +12573,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 +12603,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 +12665,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",
@@ -12691,6 +12686,10 @@ const TEXT_VARIANTS = {
     BOLDLABELBOLDCOMPACT: "boldLabelBoldCompact",
     BOLDLABELBOLD: "boldLabelBold",
     BOLDXSMALLBOLD: "boldXSmallBold",
+    SEMIBOLDXLARGESEMIBOLDCOMPACT: "semiBoldXLargeSemiBoldCompact",
+    SEMIBOLDXLARGESEMIBOLD: "semiBoldXLargeSemiBold",
+    SEMIBOLDLARGESEMIBOLDCOMPACT: "semiBoldLargeSemiBoldCompact",
+    SEMIBOLDLARGESEMIBOLD: "semiBoldLargeSemiBold",
     SEMIBOLDBASESEMIBOLDCOMPACT: "semiBoldBaseSemiBoldCompact",
     SEMIBOLDBASESEMIBOLD: "semiBoldBaseSemiBold",
     SEMIBOLDBODYSEMIBOLDCOMPACT: "semiBoldBodySemiBoldCompact",
@@ -12698,6 +12697,7 @@ const TEXT_VARIANTS = {
     SEMIBOLDLABELSEMIBOLDCOMPACT: "semiBoldLabelSemiBoldCompact",
     MED3XLARGEMED: "med3XLargeMed",
     MEDXLARGEMED: "medXLargeMed",
+    MEDLARGEMEDCOMPACT: "medLargeMedCompact",
     MEDLARGEMED: "medLargeMed",
     MEDBASEMEDCOMPACT: "medBaseMedCompact",
     MEDBASEMED: "medBaseMed",
@@ -12807,6 +12807,14 @@ const Text = ({ children, className, size, weight, align, variant = "regularBase
                 return "text-label font-bold leading-label";
             case TEXT_VARIANTS.BOLDXSMALLBOLD:
                 return "text-xsmall font-bold leading-xsmall";
+            case TEXT_VARIANTS.SEMIBOLDXLARGESEMIBOLDCOMPACT:
+                return "text-xl font-semibold leading-xl-compact";
+            case TEXT_VARIANTS.SEMIBOLDXLARGESEMIBOLD:
+                return "text-xl font-semibold leading-xl";
+            case TEXT_VARIANTS.SEMIBOLDLARGESEMIBOLDCOMPACT:
+                return "text-large font-semibold leading-large-compact";
+            case TEXT_VARIANTS.SEMIBOLDLARGESEMIBOLD:
+                return "text-large font-semibold leading-large";
             case TEXT_VARIANTS.SEMIBOLDBASESEMIBOLDCOMPACT:
                 return "text-base font-semibold leading-base-compact";
             case TEXT_VARIANTS.SEMIBOLDBASESEMIBOLD:
@@ -12823,6 +12831,8 @@ const Text = ({ children, className, size, weight, align, variant = "regularBase
                 return "text-xl font-medium leading-xl";
             case TEXT_VARIANTS.MEDLARGEMED:
                 return "text-large font-medium leading-large";
+            case TEXT_VARIANTS.MEDLARGEMEDCOMPACT:
+                return "text-large font-medium leading-large-compact";
             case TEXT_VARIANTS.MEDBASEMEDCOMPACT:
                 return "text-base font-medium leading-base-compact";
             case TEXT_VARIANTS.MEDBASEMED:
@@ -12869,10 +12879,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/>
@@ -12881,6 +12902,7 @@ Text.displayName = "Text";
  * ```tsx
  * <Input
  *   size="large"
+ *   variant="outlined"
  *   leftIcon={<SearchIcon />}
  *   rightIcon={<ClearIcon />}
  *   placeholder="Search..."
@@ -12888,7 +12910,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")
@@ -12897,13 +12919,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" &&
@@ -13026,7 +13052,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) => {
@@ -13075,7 +13101,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 }));
@@ -13115,7 +13141,7 @@ 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 }));
@@ -13250,7 +13276,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;
@@ -13390,7 +13416,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;
@@ -13402,13 +13428,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/index.d.ts

@@ -1,17 +1,17 @@
 export { Button } 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";