@telepix-lab/telepix-ui 0.4.12 → 0.5.0

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

@@ -8,5 +8,8 @@ export declare const BUTTON_VARIANTS: {
     readonly ACCENT: "accent";
     readonly OUTLINE: "outline";
     readonly GHOST: "ghost";
+    readonly THUMBNAIL_GHOST: "thumbnail_ghost";
+    readonly SUBTLE_FILLED: "subtle_filled";
+    readonly ACCENT_GHOST: "accent_ghost";
 };
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];

package/dist/cjs/client.js

@@ -12381,7 +12381,7 @@ const DialogTrigger = (props) => {
 const DialogPortal = Portal$3;
 const DialogClose = Close;
 const DialogContent = ({ className, overlayClassName, children, ...rest }) => {
-    return (jsxRuntime.jsxs(Portal$3, { children: [jsxRuntime.jsx(Overlay, { className: cn("fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in", overlayClassName) }), jsxRuntime.jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] transform -translate-x-1/2 -translate-y-1/2 animate-content-fade-in", className), ...rest, children: [jsxRuntime.jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsxRuntime.jsx(Root$4, {}) }), jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, { children: children })] })] }));
+    return (jsxRuntime.jsxs(Portal$3, { children: [jsxRuntime.jsx(Overlay, { className: cn("fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in", overlayClassName) }), jsxRuntime.jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] animate-content-fade-in", className), ...rest, children: [jsxRuntime.jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsxRuntime.jsx(Root$4, {}) }), jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, { children: children })] })] }));
 };
 const DialogDescription = (props) => {
     return jsxRuntime.jsx(CardBody, { ...props, children: props.children });
@@ -12624,10 +12624,11 @@ const TooltipFooter = React.forwardRef((props, ref) => {
     return (jsxRuntime.jsx("div", { className: cn("flex items-center justify-between pt-4", className), ...otherProps, ref: ref, children: props.children }));
 });
 
-const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
+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) => {
-        setIsSelected((prev) => !prev);
+        if (useSelectedStyle)
+            setIsSelected((prev) => !prev);
         onClick?.(event);
     };
     const handleDeleteClick = (event) => {
@@ -12637,13 +12638,15 @@ const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular
     return (jsxRuntime.jsxs("button", { ref: ref, className: cn("flex items-center justify-center rounded-sm bg-transparent", variant === "filled" &&
             `bg-fill-mono-subtle-default text-comp-mono-subtle-default border border-fill-mono-subtle-default 
             hover:bg-fill-mono-subtle-hovered hover:comp-mono-subtle-hovered hover:border-fill-mono-subtle-hovered 
-            active:fill-mono-subtle-pressed active:comp-mono-subtle-pressed active:border-fill-mono-subtle-pressed 
             disabled:bg-fill-disabled disabled:text-comp-disabled disabled:border-fill-disabled`, variant === "filled" &&
+            useSelectedStyle &&
+            "active:fill-mono-subtle-pressed active:comp-mono-subtle-pressed active:border-fill-mono-subtle-pressed", variant === "filled" &&
             isSelected &&
             `bg-fill-mono-subtle-selected text-comp-mono-subtle-selected border-border-selected`, variant === "accent" &&
             `bg-fill-accent-default text-comp-accent-default hover:bg-fill-accent-hovered hover:text-comp-accent-hovered 
-            active:bg-fill-accent-pressed active:text-comp-accent-pressed 
             disabled:bg-fill-disabled disabled:text-comp-disabled`, variant === "accent" &&
+            useSelectedStyle &&
+            "active:bg-fill-accent-pressed active:text-comp-accent-pressed", variant === "accent" &&
             isSelected &&
             `bg-fill-accent-selected text-comp-accent-selected`, size === "regular" &&
             "text-body font-medium leading-body-compact px-1 py-0.5 gap-2", size === "small" &&
@@ -12656,6 +12659,199 @@ const INPUT_SIZES = {
     LARGE: "large",
 };
 
+const TEXT_VARIANTS = {
+    BOLD3XLARGEBOLD: "bold3XLargeBold",
+    BOLD2XLARGEBOLDCOMPACT: "bold2XLargeBoldCompact",
+    BOLD2XLARGEBOLD: "bold2XLargeBold",
+    BOLDXLARGEBOLDCOMPACT: "boldXLargeBoldCompact",
+    BOLDXLARGEBOLD: "boldXLargeBold",
+    BOLDLARGEBOLDCOMPACT: "boldLargeBoldCompact",
+    BOLDLARGEBOLD: "boldLargeBold",
+    BOLDBASEBOLDCOMPACT: "boldBaseBoldCompact",
+    BOLDBASEBOLD: "boldBaseBold",
+    BOLDBODYBOLDCOMPACT: "boldBodyBoldCompact",
+    BOLDBODYBOLD: "boldBodyBold",
+    BOLDLABELBOLDCOMPACT: "boldLabelBoldCompact",
+    BOLDLABELBOLD: "boldLabelBold",
+    BOLDXSMALLBOLD: "boldXSmallBold",
+    SEMIBOLDBASESEMIBOLDCOMPACT: "semiBoldBaseSemiBoldCompact",
+    SEMIBOLDBASESEMIBOLD: "semiBoldBaseSemiBold",
+    SEMIBOLDBODYSEMIBOLDCOMPACT: "semiBoldBodySemiBoldCompact",
+    SEMIBOLDBODYSEMIBOLD: "semiBoldBodySemiBold",
+    SEMIBOLDLABELSEMIBOLDCOMPACT: "semiBoldLabelSemiBoldCompact",
+    MED3XLARGEMED: "med3XLargeMed",
+    MEDXLARGEMED: "medXLargeMed",
+    MEDLARGEMED: "medLargeMed",
+    MEDBASEMEDCOMPACT: "medBaseMedCompact",
+    MEDBASEMED: "medBaseMed",
+    MEDBODYMEDCOMPACT: "medBodyMedCompact",
+    MEDBODYMED: "medBodyMed",
+    MEDLABELMEDCOMPACT: "medLabelMedCompact",
+    MEDLABELMED: "medLabelMed",
+    MEDXSMALLMED: "medXSmallMed",
+    REGULAR3XLARGE: "regular3XLarge",
+    REGULAR2XLARGE: "regular2XLarge",
+    REGULARXLARGE: "regularXLarge",
+    REGULARLARGECOMPACT: "regularLargeCompact",
+    REGULARLARGE: "regularLarge",
+    REGULARBASECOMPACT: "regularBaseCompact",
+    REGULARBASE: "regularBase",
+    REGULARBODYCOMPACT: "regularBodyCompact",
+    REGULARBODY: "regularBody",
+    REGULARLABELCOMPACT: "regularLabelCompact",
+    REGULARLABEL: "regularLabel",
+    REGULARXSMALL: "regularXSmall",
+};
+
+const Text = ({ children, className, size, weight, align, variant = "regularBase", color, as: Component = "p", }) => {
+    const getFontWeightClass = (weight) => {
+        switch (weight) {
+            case "bold":
+                return "font-bold";
+            case "semibold":
+                return "font-semibold";
+            case "medium":
+                return "font-medium";
+            case "regular":
+                return "font-normal";
+            case "light":
+                return "font-light";
+            case "extralight":
+                return "font-extralight";
+            case "thin":
+                return "font-thin";
+            default:
+                return "font-normal";
+        }
+    };
+    const getSizeClass = (size) => {
+        switch (size) {
+            case "xxxl":
+                return "text-xxxl";
+            case "xxl":
+                return "text-xxl";
+            case "xl":
+                return "text-xl";
+            case "large":
+                return "text-large";
+            case "base":
+                return "text-base";
+            case "body":
+                return "text-body";
+            case "label":
+                return "text-label";
+            case "xsmall":
+                return "text-xsmall";
+            default:
+                return "text-base";
+        }
+    };
+    const getAlignClass = (align) => {
+        switch (align) {
+            case "left":
+                return "text-left";
+            case "center":
+                return "text-center";
+            case "right":
+                return "text-right";
+            case "justify":
+                return "text-justify";
+            default:
+                return "text-left";
+        }
+    };
+    const getVariantClass = (variant) => {
+        switch (variant) {
+            case TEXT_VARIANTS.BOLD3XLARGEBOLD:
+                return "text-xxxl font-bold leading-xxxl";
+            case TEXT_VARIANTS.BOLD2XLARGEBOLDCOMPACT:
+                return "text-xxl font-bold leading-xxl-compact";
+            case TEXT_VARIANTS.BOLD2XLARGEBOLD:
+                return "text-xxl font-bold leading-xxl";
+            case TEXT_VARIANTS.BOLDXLARGEBOLDCOMPACT:
+                return "text-xl font-bold leading-xl-compact";
+            case TEXT_VARIANTS.BOLDXLARGEBOLD:
+                return "text-xl font-bold leading-xl";
+            case TEXT_VARIANTS.BOLDLARGEBOLDCOMPACT:
+                return "text-large font-bold leading-large-compact";
+            case TEXT_VARIANTS.BOLDLARGEBOLD:
+                return "text-large font-bold leading-large";
+            case TEXT_VARIANTS.BOLDBASEBOLDCOMPACT:
+                return "text-base font-bold leading-base-compact";
+            case TEXT_VARIANTS.BOLDBASEBOLD:
+                return "text-base font-bold leading-base";
+            case TEXT_VARIANTS.BOLDBODYBOLDCOMPACT:
+                return "text-body font-bold leading-body-compact";
+            case TEXT_VARIANTS.BOLDBODYBOLD:
+                return "text-body font-bold leading-body";
+            case TEXT_VARIANTS.BOLDLABELBOLDCOMPACT:
+                return "text-label font-bold leading-label-compact";
+            case TEXT_VARIANTS.BOLDLABELBOLD:
+                return "text-label font-bold leading-label";
+            case TEXT_VARIANTS.BOLDXSMALLBOLD:
+                return "text-xsmall font-bold leading-xsmall";
+            case TEXT_VARIANTS.SEMIBOLDBASESEMIBOLDCOMPACT:
+                return "text-base font-semibold leading-base-compact";
+            case TEXT_VARIANTS.SEMIBOLDBASESEMIBOLD:
+                return "text-base font-semibold leading-base";
+            case TEXT_VARIANTS.SEMIBOLDBODYSEMIBOLDCOMPACT:
+                return "text-body font-semibold leading-body-compact";
+            case TEXT_VARIANTS.SEMIBOLDBODYSEMIBOLD:
+                return "text-body font-semibold leading-body";
+            case TEXT_VARIANTS.SEMIBOLDLABELSEMIBOLDCOMPACT:
+                return "text-label font-semibold leading-label-compact";
+            case TEXT_VARIANTS.MED3XLARGEMED:
+                return "text-xxxl font-medium leading-xxxl";
+            case TEXT_VARIANTS.MEDXLARGEMED:
+                return "text-xl font-medium leading-xl";
+            case TEXT_VARIANTS.MEDLARGEMED:
+                return "text-large font-medium leading-large";
+            case TEXT_VARIANTS.MEDBASEMEDCOMPACT:
+                return "text-base font-medium leading-base-compact";
+            case TEXT_VARIANTS.MEDBASEMED:
+                return "text-base font-medium leading-base";
+            case TEXT_VARIANTS.MEDBODYMEDCOMPACT:
+                return "text-body font-medium leading-body-compact";
+            case TEXT_VARIANTS.MEDBODYMED:
+                return "text-body font-medium leading-body";
+            case TEXT_VARIANTS.MEDLABELMEDCOMPACT:
+                return "text-label font-medium leading-label-compact";
+            case TEXT_VARIANTS.MEDLABELMED:
+                return "text-label font-medium leading-label";
+            case TEXT_VARIANTS.MEDXSMALLMED:
+                return "text-xsmall font-medium leading-xsmall";
+            case TEXT_VARIANTS.REGULAR3XLARGE:
+                return "text-xxxl font-normal leading-xxxl";
+            case TEXT_VARIANTS.REGULAR2XLARGE:
+                return "text-xxl font-normal leading-xxl";
+            case TEXT_VARIANTS.REGULARXLARGE:
+                return "text-xl font-normal leading-xl";
+            case TEXT_VARIANTS.REGULARLARGE:
+                return "text-large font-normal leading-large";
+            case TEXT_VARIANTS.REGULARLARGECOMPACT:
+                return "text-large font-normal leading-large-compact";
+            case TEXT_VARIANTS.REGULARBASE:
+                return "text-base font-normal leading-base";
+            case TEXT_VARIANTS.REGULARBASECOMPACT:
+                return "text-base font-normal leading-base-compact";
+            case TEXT_VARIANTS.REGULARBODY:
+                return "text-body font-normal leading-body";
+            case TEXT_VARIANTS.REGULARBODYCOMPACT:
+                return "text-body font-normal leading-body-compact";
+            case TEXT_VARIANTS.REGULARLABEL:
+                return "text-label font-normal leading-label";
+            case TEXT_VARIANTS.REGULARLABELCOMPACT:
+                return "text-label font-normal leading-label-compact";
+            case TEXT_VARIANTS.REGULARXSMALL:
+                return "text-xsmall font-normal leading-xsmall";
+            default:
+                return "text-base font-normal leading-base";
+        }
+    };
+    return (jsxRuntime.jsx(Component, { style: color ? { color } : undefined, className: cn("m-0 p-0 text-comp-mono-default", getVariantClass(variant), size && getSizeClass(size), weight && getFontWeightClass(weight), align && getAlignClass(align), className), children: children }));
+};
+Text.displayName = "Text";
+
 /**
  * 다양한 크기와 아이콘을 지원하는 입력 필드 컴포넌트입니다.<br/>
  * 사용자는 크기(size), 왼쪽 아이콘(leftIcon), 오른쪽 아이콘(rightIcon) 등을 지정할 수 있습니다.<br/>
@@ -12675,12 +12871,15 @@ const INPUT_SIZES = {
  * />
  * ```
  */
-const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
-    return (jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("flex itesm-center justify-center rounded-lg bg-fill-mono-default hover:bg-fill-mono-hovered focus-within:bg-fill-mono-default border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", size === INPUT_SIZES.REGULAR &&
-            "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
-            "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", wrapperClassName), children: [leftIcon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center", children: leftIcon })), jsxRuntime.jsx("input", { ref: ref, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default hover:placeholder:text-comp-mono-subtle-hovered focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", size === INPUT_SIZES.REGULAR &&
-                    "text-body leading-body-compact font-medium", size === INPUT_SIZES.LARGE &&
-                    "text-base leading-base-compact font-medium", rest.className), ...rest }), rightIcon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center", children: rightIcon }))] }));
+const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, isError = false, useHoverStyle = true, errorMessage, ...rest }, ref) => {
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("flex items-center justify-center rounded-lg bg-fill-mono-default focus-within:bg-fill-mono-default border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", useHoverStyle && "hover:bg-fill-mono-hovered", size === INPUT_SIZES.REGULAR &&
+                    "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
+                    "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", isError &&
+                    "border-comp-chroma-error focus-within:border-comp-chroma-error", wrapperClassName), children: [leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsxRuntime.jsx("input", { ref: ref, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", useHoverStyle &&
+                            "hover:placeholder:text-comp-mono-subtle-hovered", size === INPUT_SIZES.REGULAR &&
+                            "text-body leading-body-compact font-medium", size === INPUT_SIZES.LARGE &&
+                            "text-base leading-base-compact font-medium", isError &&
+                            "placeholder:text-comp-chroma-error text-comp-chroma-error hover:placeholder:text-comp-error focus:placeholder:text-comp-error", rest.className), ...rest }), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: rightIcon }))] }), errorMessage && (jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-chroma-error", children: errorMessage }))] }));
 });
 Input.displayName = "Input";
 
@@ -12865,22 +13064,30 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
             "--rdp-day-height": "32px",
             "--rdp-day_button-height": "32px",
             "--rdp-day_button-width": "32px",
-        }, className: className, classNames: {
-            months: "p-3 bg-page-l1 border border-border-overlay shadow-medium rounded-lg relative flex flex-wrap gap-[var(--rdp-months-gap)] max-w-fit",
+            "--rdp-nav-height": "36px",
+        }, captionLayout: "dropdown", className: className, classNames: {
+            months: "p-3 bg-page-l1-translucent glass-shadow-medium border border-border-overlay rounded-lg relative flex flex-wrap gap-[var(--rdp-months-gap)] max-w-fit",
             month_caption: "flex items-center justify-center mb-4 h-[var(--rdp-nav-height)] font-bold text-lg mx-[var(--rdp-nav_button-width)] relative",
             caption_label: "h-7 inline-flex items-center justify-center text-comp-mono-default text-body font-medium leading-body-compact z-[1] relative whitespace-nowrap border-0",
-            month_grid: "border-separate border-spacing-x-0 border-spacing-y-2",
-            weekday: "text-comp-mono-subtle-default text-body font-normal leading-body size-8",
-            day: "hover:rounded-sm text-body font-normal leading-body hover:[&:not(:is([data-selected='true']))]:bg-fill-mono-hovered cursor-pointer [&:not(:is([data-selected='true'])):not(.day-outside)]:text-comp-mono-default",
-            selected: cn("font-normal text-body leading-body text-comp-accent-default bg-fill-accent-selected", props.mode === "single" && "rounded-sm text-comp-accent-selected"),
-            today: "text-body font-normal leading-body cursor-pointer",
-            range_start: "day-range day-range-start rounded-sm [&:not(.day-range-end)]:rounded-r-none",
-            range_middle: "day-range day-range-middle bg-fill-mono-subtle-selected text-comp-mono-default rounded-none",
-            range_end: "day-range day-range-end rounded-sm [&:not(.day-range-start)]:rounded-l-none",
-            outside: "day-outside text-comp-mono-subtle-default [&:is([data-selected='true']):not(.day-range-middle)]:text-comp-accent-selected hover:[&:not(:is([data-selected='true']))]:bg-fill-mono-hovered cursor-pointer",
+            month_grid: "border-separate border-spacing-0",
+            weekday: "text-comp-mono-subtle-default text-body font-normal leading-body size-9 p-1",
+            day: "p-1 bg-transparent",
+            day_button: "size-8 rounded-md hover:bg-fill-mono-subtle-hovered focus:outline-none text-body leading-3.5 font-medium text-comp-mono-default cursor-pointer",
+            selected: cn("[&_button]:bg-fill-accent-selected bg-transparent", props.mode === "single" &&
+                "[&_button]:text-comp-accent-default [&_button]:hover:bg-fill-accent-selected"),
+            range_start: "[&_button]:bg-fill-accent-selected bg-transparent [&_button]:text-comp-accent-default [&_button]:hover:bg-fill-accent-selected",
+            range_middle: "[&_button]:bg-fill-mono-subtle-default bg-transparent [&_button]:hover:bg-fill-mono-subtle-default",
+            range_end: "[&_button]:bg-fill-accent-selected bg-transparent [&_button]:text-comp-accent-default [&_button]:hover:bg-fill-accent-selected",
+            button_next: cn(reactDayPicker.getDefaultClassNames().button_next, "h-9 py-0 px-2 text-body leading-body-compact !bg-fill-mono-default hover:!bg-fill-mono-hovered active:!bg-fill-mono-pressed disabled:!bg-fill-disabled disabled:text-comp-disabled rounded-md"),
+            button_previous: cn(reactDayPicker.getDefaultClassNames().button_previous, "h-9 py-0 px-2 text-body leading-body-compact !bg-fill-mono-default hover:!bg-fill-mono-hovered active:!bg-fill-mono-pressed disabled:!bg-fill-disabled disabled:text-comp-disabled rounded-md"),
             ...classNames,
         }, components: {
-            Chevron: (args) => (jsxRuntime.jsx(ChevronLeft, { size: 16, ...args, "data-orientation": args.orientation, className: "stroke-comp-mono-default [&:is([data-orientation='right'])]:rotate-180" })),
+            Dropdown: (props) => {
+                const { options, className, classNames, components, ...rest } = props;
+                const selectedOption = options?.find(({ value }) => value === rest.value);
+                return (jsxRuntime.jsxs("div", { className: cn("flex px-2 py-1 rounded-lg bg-fill-mono-subtle-default relative", 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", "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 })] })] }));
+            },
+            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 }));
 };
 
@@ -12890,10 +13097,7 @@ const BUTTON_SIZES = {
     LARGE: "large",
 };
 const BUTTON_VARIANTS = {
-    ACCENT: "accent",
-    OUTLINE: "outline",
-    GHOST: "ghost",
-};
+    THUMBNAIL_GHOST: "thumbnail_ghost"};
 
 /**
  * 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>
@@ -12910,16 +13114,57 @@ const BUTTON_VARIANTS = {
  * ```
  */
 const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
-    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", size === BUTTON_SIZES.SMALL &&
-            "h-7 py-0 px-1.5 text-label leading-label-compact", size === BUTTON_SIZES.REGULAR &&
-            "h-9 py-0 px-2 text-body leading-body-compact", size === BUTTON_SIZES.LARGE &&
-            "h-12 py-0 px-3 text-body leading-body-compact", variant === BUTTON_VARIANTS.ACCENT &&
-            "bg-fill-accent-default hover:bg-fill-accent-hovered active:bg-fill-accent-pressed disabled:bg-fill-disabled text-comp-accent-default hover:text-comp-accent-hovered active:text-comp-accent-pressed disabled:text-comp-disabled", variant === BUTTON_VARIANTS.OUTLINE &&
-            "bg-fill-mono-default hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default hover:text-comp-mono-hovered active:text-comp-mono-pressed disabled:text-comp-disabled border border-border-bound", variant === BUTTON_VARIANTS.GHOST &&
-            "bg-fill-mono-default hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default hover:text-comp-mono-hovered active:text-comp-mono-pressed disabled:text-comp-disabled", fullWidth && "w-full", leftIcon || rightIcon ? "gap-2" : "", className), ...rest, children: [isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
+    const getClassName = (size, variant) => {
+        const sizeClassName = {
+            small: "h-7 py-0 px-1.5 text-label leading-label-compact",
+            regular: "h-9 py-0 px-2 text-body leading-body-compact",
+            large: "h-12 py-0 px-3 text-body leading-body-compact",
+        }[size];
+        const thumbnailGhostSizeClassName = {
+            small: "px-1",
+            regular: "px-1",
+            large: "px-1.5",
+        }[size];
+        const variantClassName = {
+            accent: "bg-fill-accent-default hover:bg-fill-accent-hovered active:bg-fill-accent-pressed disabled:bg-fill-disabled text-comp-accent-default disabled:text-comp-disabled",
+            outline: "bg-fill-mono-default hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent",
+            ghost: "bg-fill-mono-default hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
+            thumbnail_ghost: "bg-transparent hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
+            subtle_filled: "bg-fill-mono-subtle-default hover:bg-fill-mono-subtle-hovered active:bg-fill-mono-subtle-pressed disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled",
+            accent_ghost: "bg-fill-mono-default hover:bg-fill-accent-hovered active:bg-fill-accent-pressed disabled:bg-fill-disabled text-comp-accent-default disabled:text-comp-disabled",
+        }[variant];
+        return [
+            sizeClassName,
+            variant === "thumbnail_ghost" && thumbnailGhostSizeClassName,
+            variantClassName,
+        ];
+    };
+    const getThumbnailSize = (variant, size) => {
+        if (variant !== BUTTON_VARIANTS.THUMBNAIL_GHOST) {
+            if (size === BUTTON_SIZES.LARGE)
+                return "size-6";
+            if (size === BUTTON_SIZES.SMALL)
+                return "size-4";
+            return "size-5"; // 기본값은 regular 크기
+        }
+        if (size === BUTTON_SIZES.LARGE)
+            return "size-9";
+        if (size === BUTTON_SIZES.SMALL)
+            return "size-5";
+        return "size-7"; // 기본값은 regular 크기
+    };
+    const getPaddingOnlyIcon = (size) => {
+        if (size === BUTTON_SIZES.LARGE)
+            return "px-3";
+        if (size === BUTTON_SIZES.SMALL)
+            return "px-1.5";
+        return "px-2"; // 기본값은 regular 크기
+    };
+    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", !children && (leftIcon || rightIcon) && getPaddingOnlyIcon(size), className), ...rest, children: [isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
                     "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
                     "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
-                    "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center", children: leftIcon })), children && (jsxRuntime.jsx("span", { className: "button-text", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center", children: rightIcon }))] }));
+                    "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
+                    "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("span", { className: "px-2", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
 });
 Button.displayName = "Button";
 
@@ -13119,205 +13364,13 @@ const Autocomplete = ({ placeholder, data, value, displayValue, onSelect, onChan
 const SWITCH_VARIANTS = {
     FILLED: "filled",
     OUTLINED: "outlined",
+    SLIDE: "slide",
 };
 const SWITCH_SIZES = {
     SMALL: "small",
     REGULAR: "regular",
 };
 
-const TEXT_VARIANTS = {
-    BOLD3XLARGEBOLD: "bold3XLargeBold",
-    BOLD2XLARGEBOLDCOMPACT: "bold2XLargeBoldCompact",
-    BOLD2XLARGEBOLD: "bold2XLargeBold",
-    BOLDXLARGEBOLDCOMPACT: "boldXLargeBoldCompact",
-    BOLDXLARGEBOLD: "boldXLargeBold",
-    BOLDLARGEBOLDCOMPACT: "boldLargeBoldCompact",
-    BOLDLARGEBOLD: "boldLargeBold",
-    BOLDBASEBOLDCOMPACT: "boldBaseBoldCompact",
-    BOLDBASEBOLD: "boldBaseBold",
-    BOLDBODYBOLDCOMPACT: "boldBodyBoldCompact",
-    BOLDBODYBOLD: "boldBodyBold",
-    BOLDLABELBOLDCOMPACT: "boldLabelBoldCompact",
-    BOLDLABELBOLD: "boldLabelBold",
-    BOLDXSMALLBOLD: "boldXSmallBold",
-    SEMIBOLDBASESEMIBOLDCOMPACT: "semiBoldBaseSemiBoldCompact",
-    SEMIBOLDBASESEMIBOLD: "semiBoldBaseSemiBold",
-    SEMIBOLDBODYSEMIBOLDCOMPACT: "semiBoldBodySemiBoldCompact",
-    SEMIBOLDBODYSEMIBOLD: "semiBoldBodySemiBold",
-    SEMIBOLDLABELSEMIBOLDCOMPACT: "semiBoldLabelSemiBoldCompact",
-    MED3XLARGEMED: "med3XLargeMed",
-    MEDXLARGEMED: "medXLargeMed",
-    MEDLARGEMED: "medLargeMed",
-    MEDBASEMEDCOMPACT: "medBaseMedCompact",
-    MEDBASEMED: "medBaseMed",
-    MEDBODYMEDCOMPACT: "medBodyMedCompact",
-    MEDBODYMED: "medBodyMed",
-    MEDLABELMEDCOMPACT: "medLabelMedCompact",
-    MEDLABELMED: "medLabelMed",
-    MEDXSMALLMED: "medXSmallMed",
-    REGULAR3XLARGE: "regular3XLarge",
-    REGULAR2XLARGE: "regular2XLarge",
-    REGULARXLARGE: "regularXLarge",
-    REGULARLARGECOMPACT: "regularLargeCompact",
-    REGULARLARGE: "regularLarge",
-    REGULARBASECOMPACT: "regularBaseCompact",
-    REGULARBASE: "regularBase",
-    REGULARBODYCOMPACT: "regularBodyCompact",
-    REGULARBODY: "regularBody",
-    REGULARLABELCOMPACT: "regularLabelCompact",
-    REGULARLABEL: "regularLabel",
-    REGULARXSMALL: "regularXSmall",
-};
-
-const Text = ({ children, className, size, weight, align, variant = "regularBase", color, as: Component = "p", }) => {
-    const getFontWeightClass = (weight) => {
-        switch (weight) {
-            case "bold":
-                return "font-bold";
-            case "semibold":
-                return "font-semibold";
-            case "medium":
-                return "font-medium";
-            case "regular":
-                return "font-normal";
-            case "light":
-                return "font-light";
-            case "extralight":
-                return "font-extralight";
-            case "thin":
-                return "font-thin";
-            default:
-                return "font-normal";
-        }
-    };
-    const getSizeClass = (size) => {
-        switch (size) {
-            case "xxxl":
-                return "text-xxxl";
-            case "xxl":
-                return "text-xxl";
-            case "xl":
-                return "text-xl";
-            case "large":
-                return "text-large";
-            case "base":
-                return "text-base";
-            case "body":
-                return "text-body";
-            case "label":
-                return "text-label";
-            case "xsmall":
-                return "text-xsmall";
-            default:
-                return "text-base";
-        }
-    };
-    const getAlignClass = (align) => {
-        switch (align) {
-            case "left":
-                return "text-left";
-            case "center":
-                return "text-center";
-            case "right":
-                return "text-right";
-            case "justify":
-                return "text-justify";
-            default:
-                return "text-left";
-        }
-    };
-    const getVariantClass = (variant) => {
-        switch (variant) {
-            case TEXT_VARIANTS.BOLD3XLARGEBOLD:
-                return "text-xxxl font-bold leading-xxxl";
-            case TEXT_VARIANTS.BOLD2XLARGEBOLDCOMPACT:
-                return "text-xxl font-bold leading-xxl-compact";
-            case TEXT_VARIANTS.BOLD2XLARGEBOLD:
-                return "text-xxl font-bold leading-xxl";
-            case TEXT_VARIANTS.BOLDXLARGEBOLDCOMPACT:
-                return "text-xl font-bold leading-xl-compact";
-            case TEXT_VARIANTS.BOLDXLARGEBOLD:
-                return "text-xl font-bold leading-xl";
-            case TEXT_VARIANTS.BOLDLARGEBOLDCOMPACT:
-                return "text-large font-bold leading-large-compact";
-            case TEXT_VARIANTS.BOLDLARGEBOLD:
-                return "text-large font-bold leading-large";
-            case TEXT_VARIANTS.BOLDBASEBOLDCOMPACT:
-                return "text-base font-bold leading-base-compact";
-            case TEXT_VARIANTS.BOLDBASEBOLD:
-                return "text-base font-bold leading-base";
-            case TEXT_VARIANTS.BOLDBODYBOLDCOMPACT:
-                return "text-body font-bold leading-body-compact";
-            case TEXT_VARIANTS.BOLDBODYBOLD:
-                return "text-body font-bold leading-body";
-            case TEXT_VARIANTS.BOLDLABELBOLDCOMPACT:
-                return "text-label font-bold leading-label-compact";
-            case TEXT_VARIANTS.BOLDLABELBOLD:
-                return "text-label font-bold leading-label";
-            case TEXT_VARIANTS.BOLDXSMALLBOLD:
-                return "text-xsmall font-bold leading-xsmall";
-            case TEXT_VARIANTS.SEMIBOLDBASESEMIBOLDCOMPACT:
-                return "text-base font-semibold leading-base-compact";
-            case TEXT_VARIANTS.SEMIBOLDBASESEMIBOLD:
-                return "text-base font-semibold leading-base";
-            case TEXT_VARIANTS.SEMIBOLDBODYSEMIBOLDCOMPACT:
-                return "text-body font-semibold leading-body-compact";
-            case TEXT_VARIANTS.SEMIBOLDBODYSEMIBOLD:
-                return "text-body font-semibold leading-body";
-            case TEXT_VARIANTS.SEMIBOLDLABELSEMIBOLDCOMPACT:
-                return "text-label font-semibold leading-label-compact";
-            case TEXT_VARIANTS.MED3XLARGEMED:
-                return "text-xxxl font-medium leading-xxxl";
-            case TEXT_VARIANTS.MEDXLARGEMED:
-                return "text-xl font-medium leading-xl";
-            case TEXT_VARIANTS.MEDLARGEMED:
-                return "text-large font-medium leading-large";
-            case TEXT_VARIANTS.MEDBASEMEDCOMPACT:
-                return "text-base font-medium leading-base-compact";
-            case TEXT_VARIANTS.MEDBASEMED:
-                return "text-base font-medium leading-base";
-            case TEXT_VARIANTS.MEDBODYMEDCOMPACT:
-                return "text-body font-medium leading-body-compact";
-            case TEXT_VARIANTS.MEDBODYMED:
-                return "text-body font-medium leading-body";
-            case TEXT_VARIANTS.MEDLABELMEDCOMPACT:
-                return "text-label font-medium leading-label-compact";
-            case TEXT_VARIANTS.MEDLABELMED:
-                return "text-label font-medium leading-label";
-            case TEXT_VARIANTS.MEDXSMALLMED:
-                return "text-xsmall font-medium leading-xsmall";
-            case TEXT_VARIANTS.REGULAR3XLARGE:
-                return "text-xxxl font-normal leading-xxxl";
-            case TEXT_VARIANTS.REGULAR2XLARGE:
-                return "text-xxl font-normal leading-xxl";
-            case TEXT_VARIANTS.REGULARXLARGE:
-                return "text-xl font-normal leading-xl";
-            case TEXT_VARIANTS.REGULARLARGE:
-                return "text-large font-normal leading-large";
-            case TEXT_VARIANTS.REGULARLARGECOMPACT:
-                return "text-large font-normal leading-large-compact";
-            case TEXT_VARIANTS.REGULARBASE:
-                return "text-base font-normal leading-base";
-            case TEXT_VARIANTS.REGULARBASECOMPACT:
-                return "text-base font-normal leading-base-compact";
-            case TEXT_VARIANTS.REGULARBODY:
-                return "text-body font-normal leading-body";
-            case TEXT_VARIANTS.REGULARBODYCOMPACT:
-                return "text-body font-normal leading-body-compact";
-            case TEXT_VARIANTS.REGULARLABEL:
-                return "text-label font-normal leading-label";
-            case TEXT_VARIANTS.REGULARLABELCOMPACT:
-                return "text-label font-normal leading-label-compact";
-            case TEXT_VARIANTS.REGULARXSMALL:
-                return "text-xsmall font-normal leading-xsmall";
-            default:
-                return "text-base font-normal leading-base";
-        }
-    };
-    return (jsxRuntime.jsx(Component, { style: color ? { color } : undefined, className: cn("m-0 p-0 text-comp-mono-default", getVariantClass(variant), size && getSizeClass(size), weight && getFontWeightClass(weight), align && getAlignClass(align), className), children: children }));
-};
-Text.displayName = "Text";
-
 const FilledSwitch = (props) => {
     const { size, checked, thumbClassName, ...rest } = props;
     return (jsxRuntime.jsxs(Root, { className: cn("flex items-center gap-1 bg-page-l2 rounded-lg relative", size === SWITCH_SIZES.REGULAR && "p-1.5 w-[68px] h-9", size === SWITCH_SIZES.SMALL && "p-1 w-[59px] h-7"), checked: checked, ...rest, children: [jsxRuntime.jsx(Thumb, { className: cn("rounded-sm absolute transition-all duration-100", size === SWITCH_SIZES.REGULAR &&
@@ -13336,13 +13389,23 @@ const OutlinedSwitch = (props) => {
                     ? "medBodyMedCompact"
                     : "medLabelMedCompact", className: cn("text-comp-mono-subtle-default text-right group-hover:text-comp-mono-subtle-hovered", size === SWITCH_SIZES.REGULAR && "pr-1.5", size === SWITCH_SIZES.SMALL && "pr-[3px]"), as: "div", children: "OFF" }))] }));
 };
+const SlideSwitch = (props) => {
+    const { size, checked, thumbClassName, leftIcon, rightIcon, ...rest } = props;
+    return (jsxRuntime.jsxs(Root, { className: cn("group border shadow-inner p-1 relative rounded-[20px] border-border-bound bg-fill-mono-default hover:bg-fill-mono-hovered", size === SWITCH_SIZES.REGULAR && "w-[70px] h-9", size === SWITCH_SIZES.SMALL && "w-[54px] h-7"), checked: checked, ...rest, children: [jsxRuntime.jsx(Thumb, { className: cn("absolute transition-all duration-100 top-[3px] rounded-full left-1 bg-page-l2 shadow-medium border border-border-bound", size === SWITCH_SIZES.REGULAR &&
+                    "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 }))] }));
+};
 const Switch = (props) => {
-    const [checked, setChecked] = React.useState(props.checked);
+    const { defaultChecked, checked: isChecked } = props;
+    const [checked, setChecked] = React.useState(isChecked ?? defaultChecked ?? false);
+    React.useEffect(() => {
+        setChecked(isChecked ?? defaultChecked ?? false);
+    }, [isChecked, defaultChecked]);
     const handleCheckedChange = (value) => {
         setChecked(value);
         props.onCheckedChange?.(value);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsxRuntime.jsx(FilledSwitch, { checked: checked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsxRuntime.jsx(OutlinedSwitch, { checked: checked, onCheckedChange: handleCheckedChange, ...props }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsxRuntime.jsx(FilledSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsxRuntime.jsx(OutlinedSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.SLIDE && (jsxRuntime.jsx(SlideSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props }))] }));
 };
 
 exports.Autocomplete = Autocomplete;