@telepix-lab/telepix-ui 0.6.8 → 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",
@@ -12884,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/>
@@ -12896,6 +12902,7 @@ Text.displayName = "Text";
  * ```tsx
  * <Input
  *   size="large"
+ *   variant="outlined"
  *   leftIcon={<SearchIcon />}
  *   rightIcon={<ClearIcon />}
  *   placeholder="Search..."
@@ -12903,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")
@@ -12912,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" &&
@@ -13041,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) => {
@@ -13090,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 }));
@@ -13130,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 }));
@@ -13265,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;
@@ -13405,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;
@@ -13417,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";

package/dist/cjs/index.js

@@ -3350,7 +3350,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) }));
 };
 
 /**
@@ -3410,6 +3410,41 @@ const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWid
 });
 Button.displayName = "Button";
 
+/**
+ * 카드 컴포넌트는 콘텐츠를 그룹화하고 시각적으로 구분하는 데 사용됩니다.<br/>
+ * 카드 내부에는 헤더, 본문, 푸터 등의 섹션을 포함할 수 있습니다.<br/>
+ * content 내의 padding을 적용하기 위해서는 `CardBody` 컴포넌트를 사용해야 합니다.<br/>
+ * 기본적으로 카드 container의 스타일은 배경색, 테두리 등을 포함합니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <Card>
+ *   <CardBody>
+ *      <CardHeader>카드 제목</CardHeader>
+ *      <CardContent>
+ *          카드 내용
+ *      </CardContent>
+ *   <CardFooter>
+ *     카드 푸터
+ *   </CardFooter>
+ * </Card>
+ */
+const Card = react.forwardRef(({ className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("flex flex-col rounded-2xl border border-border-divider bg-page-l0", className), children: rest.children }));
+});
+const CardBody = react.forwardRef(({ className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("p-6", className), children: rest.children }));
+});
+const CardHeader = react.forwardRef(({ className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("text-comp-mono-default font-bold text-xl leading-xl-compact mb-2", className), children: rest.children }));
+});
+const CardContent = react.forwardRef((rest, ref) => {
+    return (jsxRuntime.jsx("div", { ...rest, ref: ref, children: rest.children }));
+});
+const CardFooter = react.forwardRef(({ className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("py-4 px-6", className), children: rest.children }));
+});
+
 const TEXT_SIZES = {
     XSMALL: "xsmall",
     LABEL: "label",
@@ -3646,14 +3681,20 @@ 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/>
@@ -3662,6 +3703,7 @@ const INPUT_SIZES = {
  * ```tsx
  * <Input
  *   size="large"
+ *   variant="outlined"
  *   leftIcon={<SearchIcon />}
  *   rightIcon={<ClearIcon />}
  *   placeholder="Search..."
@@ -3669,7 +3711,7 @@ const INPUT_SIZES = {
  * />
  * ```
  */
-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")
@@ -3678,13 +3720,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" &&
@@ -3693,62 +3739,6 @@ const Input = react.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapper
 });
 Input.displayName = "Input";
 
-/**
- * 텍스트 영역 컴포넌트입니다.<br/>
- * 사용자는 크기, disabled 상태 등을 지정할 수 있습니다.<br/>
- * 기본적으로 regular 크기를 가지며, disabled 상태에서는 스타일이 변경됩니다.<br/>
- * 텍스트 영역의 너비는 부모 요소에 따라 결정됩니다.<br/>
- * className 속성을 통해 추가적인 스타일을 적용할 수 있습니다.<br/>
- * <br/>
- * ### 사용 예시
- * ```tsx
- * <TextArea
- *   placeholder="Enter your text here..."
- *   className="custom-textarea"
- *   disabled={false}
- * />
- * ```
- */
-const TextArea = react.forwardRef((rest, ref) => {
-    return (jsxRuntime.jsx("div", { className: "py-3 px-4 flex-1 h-full", children: jsxRuntime.jsx("textarea", { ref: ref, className: cn("w-full h-full flex-1 p-0 text-body leading-body font-medium border-none resize-none outline-none text-comp-mono-default disabled:text-comp-disabled disabled:placeholder:text-comp-disabled placeholder:text-comp-mono-subtle-default", rest.className), ...rest }) }));
-});
-TextArea.displayName = "TextArea";
-
-/**
- * 카드 컴포넌트는 콘텐츠를 그룹화하고 시각적으로 구분하는 데 사용됩니다.<br/>
- * 카드 내부에는 헤더, 본문, 푸터 등의 섹션을 포함할 수 있습니다.<br/>
- * content 내의 padding을 적용하기 위해서는 `CardBody` 컴포넌트를 사용해야 합니다.<br/>
- * 기본적으로 카드 container의 스타일은 배경색, 테두리 등을 포함합니다.<br/>
- * <br/>
- * ### 사용 예시
- * ```tsx
- * <Card>
- *   <CardBody>
- *      <CardHeader>카드 제목</CardHeader>
- *      <CardContent>
- *          카드 내용
- *      </CardContent>
- *   <CardFooter>
- *     카드 푸터
- *   </CardFooter>
- * </Card>
- */
-const Card = react.forwardRef(({ className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("flex flex-col rounded-2xl border border-border-divider bg-page-l0", className), children: rest.children }));
-});
-const CardBody = react.forwardRef(({ className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("p-6", className), children: rest.children }));
-});
-const CardHeader = react.forwardRef(({ className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("text-comp-mono-default font-bold text-xl leading-xl-compact mb-2", className), children: rest.children }));
-});
-const CardContent = react.forwardRef((rest, ref) => {
-    return (jsxRuntime.jsx("div", { ...rest, ref: ref, children: rest.children }));
-});
-const CardFooter = react.forwardRef(({ className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("py-4 px-6", className), children: rest.children }));
-});
-
 /**
  * @license lucide-react v0.513.0 - ISC
  *
@@ -3909,6 +3899,28 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
+const Pagination = ({ className, ...rest }) => {
+    return (jsxRuntime.jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto my-0 flex justify-center w-full", className), ...rest }));
+};
+const PaginationContent = ({ className, ...rest }) => {
+    return (jsxRuntime.jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...rest }));
+};
+const PaginationItem = (props) => {
+    return jsxRuntime.jsx("li", { "data-slot": "pagination-item", ...props });
+};
+const PaginationLink = ({ className, isActive, size = "regular", variant = "ghost", ...rest }) => {
+    return (jsxRuntime.jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: cn("h-9 min-h-9", isActive && "bg-fill-selected text-comp-mono-default", className), ...rest }));
+};
+const PaginationPrevious = ({ className, ...rest }) => {
+    return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to previous page", className: cn("flex items-center justify-center mr-4", className), leftIcon: jsxRuntime.jsx(ChevronLeft, { size: 20 }), ...rest }));
+};
+const PaginationNext = ({ className, ...rest }) => {
+    return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to next page", className: cn("ml-4", className), leftIcon: jsxRuntime.jsx(ChevronRight, { size: 20 }), ...rest }));
+};
+const PaginationEllipsis = ({ className, ...rest }) => {
+    return (jsxRuntime.jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex items-center justify-center size-9 rounded-md hover:bg-fill-mono-hovered", className), ...rest, children: jsxRuntime.jsx(Ellipsis, { className: "size-4 stroke-comp-mono-subtle-default" }) }));
+};
+
 const Tag = react.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, useSelectedStyle = false, ...props }, ref) => {
     const [isSelected, setIsSelected] = react.useState(false);
     const handleClick = (event) => {
@@ -3924,7 +3936,7 @@ 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" })] }));
 });
@@ -3939,27 +3951,26 @@ const TAG_SIZES = {
     SMALL: "small",
 };
 
-const Pagination = ({ className, ...rest }) => {
-    return (jsxRuntime.jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto my-0 flex justify-center w-full", className), ...rest }));
-};
-const PaginationContent = ({ className, ...rest }) => {
-    return (jsxRuntime.jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...rest }));
-};
-const PaginationItem = (props) => {
-    return jsxRuntime.jsx("li", { "data-slot": "pagination-item", ...props });
-};
-const PaginationLink = ({ className, isActive, size = "regular", variant = "ghost", ...rest }) => {
-    return (jsxRuntime.jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: cn("h-9 min-h-9", isActive && "bg-fill-selected text-comp-mono-default", className), ...rest }));
-};
-const PaginationPrevious = ({ className, ...rest }) => {
-    return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to previous page", className: cn("flex items-center justify-center mr-4", className), leftIcon: jsxRuntime.jsx(ChevronLeft, { size: 20 }), ...rest }));
-};
-const PaginationNext = ({ className, ...rest }) => {
-    return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to next page", className: cn("ml-4", className), leftIcon: jsxRuntime.jsx(ChevronRight, { size: 20 }), ...rest }));
-};
-const PaginationEllipsis = ({ className, ...rest }) => {
-    return (jsxRuntime.jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex items-center justify-center size-9 rounded-md hover:bg-fill-mono-hovered", className), ...rest, children: jsxRuntime.jsx(Ellipsis, { className: "size-4 stroke-comp-mono-subtle-default" }) }));
-};
+/**
+ * 텍스트 영역 컴포넌트입니다.<br/>
+ * 사용자는 크기, disabled 상태 등을 지정할 수 있습니다.<br/>
+ * 기본적으로 regular 크기를 가지며, disabled 상태에서는 스타일이 변경됩니다.<br/>
+ * 텍스트 영역의 너비는 부모 요소에 따라 결정됩니다.<br/>
+ * className 속성을 통해 추가적인 스타일을 적용할 수 있습니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <TextArea
+ *   placeholder="Enter your text here..."
+ *   className="custom-textarea"
+ *   disabled={false}
+ * />
+ * ```
+ */
+const TextArea = react.forwardRef((rest, ref) => {
+    return (jsxRuntime.jsx("div", { className: "py-3 px-4 flex-1 h-full", children: jsxRuntime.jsx("textarea", { ref: ref, className: cn("w-full h-full flex-1 p-0 text-body leading-body font-medium border-none resize-none outline-none text-comp-mono-default disabled:text-comp-disabled disabled:placeholder:text-comp-disabled placeholder:text-comp-mono-subtle-default", rest.className), ...rest }) }));
+});
+TextArea.displayName = "TextArea";
 
 exports.BUTTON_SIZES = BUTTON_SIZES;
 exports.BUTTON_VARIANTS = BUTTON_VARIANTS;
@@ -3971,6 +3982,7 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.FONT_WEIGHTS = FONT_WEIGHTS;
 exports.INPUT_SIZES = INPUT_SIZES;
+exports.INPUT_VARIANTS = INPUT_VARIANTS;
 exports.Input = Input;
 exports.Pagination = Pagination;
 exports.PaginationContent = PaginationContent;

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

@@ -1,7 +1,8 @@
 import React, { ReactNode } from "react";
-import { InputSize } from "./types";
+import { InputSize, InputVariant } from "./types";
 export interface InputProps extends React.DetailedHTMLProps<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, HTMLInputElement> {
     size?: InputSize;
+    variant?: InputVariant;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     wrapperClassName?: string;
@@ -12,8 +13,9 @@ export interface InputProps extends React.DetailedHTMLProps<Omit<React.InputHTML
 }
 /**
  * 다양한 크기와 아이콘을 지원하는 입력 필드 컴포넌트입니다.<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/>
@@ -22,6 +24,7 @@ export interface InputProps extends React.DetailedHTMLProps<Omit<React.InputHTML
  * ```tsx
  * <Input
  *   size="large"
+ *   variant="outlined"
  *   leftIcon={<SearchIcon />}
  *   rightIcon={<ClearIcon />}
  *   placeholder="Search..."

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

@@ -1,5 +1,11 @@
 export declare const INPUT_SIZES: {
+    readonly SMALL: "small";
     readonly REGULAR: "regular";
     readonly LARGE: "large";
 };
 export type InputSize = (typeof INPUT_SIZES)[keyof typeof INPUT_SIZES];
+export declare const INPUT_VARIANTS: {
+    readonly OUTLINED: "outlined";
+    readonly FILLED: "filled";
+};
+export type InputVariant = (typeof INPUT_VARIANTS)[keyof typeof INPUT_VARIANTS];