insystem-atoms 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1770 @@
+import React3, { useId, useState, useEffect } from 'react';
+import styled2, { keyframes, css } from 'styled-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/Button/index.tsx
+
+// src/styles/tokens.ts
+var defaultTokens = {
+  color: {
+    primary: "#3B82F6",
+    primaryHover: "#2563EB",
+    primaryLight: "#EFF6FF",
+    secondary: "#6B7280",
+    secondaryHover: "#4B5563",
+    secondaryLight: "#F3F4F6",
+    success: "#10B981",
+    successLight: "#ECFDF5",
+    warning: "#F59E0B",
+    warningLight: "#FFFBEB",
+    danger: "#EF4444",
+    dangerHover: "#DC2626",
+    dangerLight: "#FEF2F2",
+    text: {
+      primary: "#111827",
+      secondary: "#6B7280",
+      disabled: "#9CA3AF",
+      inverse: "#FFFFFF",
+      placeholder: "#9CA3AF",
+      error: "#EF4444",
+      hint: "#6B7280"
+    },
+    border: {
+      default: "#D1D5DB",
+      focus: "#3B82F6",
+      error: "#EF4444",
+      disabled: "#E5E7EB"
+    },
+    background: {
+      default: "#FFFFFF",
+      disabled: "#F9FAFB",
+      hover: "#F3F4F6",
+      subtle: "#F9FAFB"
+    }
+  },
+  font: {
+    size: {
+      xs: "12px",
+      sm: "13px",
+      md: "14px",
+      lg: "16px"
+    },
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600
+    },
+    family: "'Pretendard', 'Apple SD Gothic Neo', sans-serif"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "20px",
+    xxl: "24px"
+  },
+  radius: {
+    none: "0",
+    sm: "4px",
+    md: "6px",
+    lg: "8px",
+    xl: "12px",
+    full: "9999px"
+  },
+  shadow: {
+    sm: "0 1px 2px 0 rgba(0,0,0,0.05)",
+    md: "0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)",
+    lg: "0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)",
+    popup: "0px 2px 10px 0px rgba(0,0,0,0.1)",
+    modal: "0px 8px 24px 0px rgba(0,0,0,0.14)",
+    field: "0px 6px 16px 0px rgba(0,0,0,0.06)",
+    card: "0px 12px 12px 0px rgba(0,0,0,0.10)"
+  },
+  transition: {
+    fast: "0.15s ease",
+    base: "0.2s ease",
+    slow: "0.3s ease"
+  }
+};
+var tokens = deepClone(defaultTokens);
+function configureTokens(overrides) {
+  deepMergeInPlace(tokens, overrides);
+}
+function resetTokens() {
+  deepMergeInPlace(tokens, defaultTokens);
+}
+function deepClone(obj) {
+  if (obj === null || typeof obj !== "object") return obj;
+  if (Array.isArray(obj)) return obj.map(deepClone);
+  const result = {};
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      result[key] = deepClone(obj[key]);
+    }
+  }
+  return result;
+}
+function deepMergeInPlace(target, source) {
+  for (const key in source) {
+    if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+    const val = source[key];
+    if (val === void 0) continue;
+    if (val !== null && typeof val === "object" && !Array.isArray(val)) {
+      if (typeof target[key] === "object") {
+        deepMergeInPlace(
+          target[key],
+          val
+        );
+      } else {
+        target[key] = deepClone(val);
+      }
+    } else {
+      target[key] = val;
+    }
+  }
+}
+
+// src/styles/t.ts
+var t = {
+  // ─── Color — Brand ─────────────────────────────────────────────────────────
+  primary: () => tokens.color.primary,
+  primaryHover: () => tokens.color.primaryHover,
+  primaryLight: () => tokens.color.primaryLight,
+  secondary: () => tokens.color.secondary,
+  secondaryHover: () => tokens.color.secondaryHover,
+  secondaryLight: () => tokens.color.secondaryLight,
+  // ─── Color — Status ─────────────────────────────────────────────────────────
+  success: () => tokens.color.success,
+  successLight: () => tokens.color.successLight,
+  warning: () => tokens.color.warning,
+  warningLight: () => tokens.color.warningLight,
+  danger: () => tokens.color.danger,
+  dangerHover: () => tokens.color.dangerHover,
+  dangerLight: () => tokens.color.dangerLight,
+  // ─── Color — Text ───────────────────────────────────────────────────────────
+  textPrimary: () => tokens.color.text.primary,
+  textSecondary: () => tokens.color.text.secondary,
+  textDisabled: () => tokens.color.text.disabled,
+  textInverse: () => tokens.color.text.inverse,
+  textPlaceholder: () => tokens.color.text.placeholder,
+  textError: () => tokens.color.text.error,
+  textHint: () => tokens.color.text.hint,
+  // ─── Color — Border ─────────────────────────────────────────────────────────
+  borderDefault: () => tokens.color.border.default,
+  borderFocus: () => tokens.color.border.focus,
+  borderError: () => tokens.color.border.error,
+  borderDisabled: () => tokens.color.border.disabled,
+  // ─── Color — Background ─────────────────────────────────────────────────────
+  bgDefault: () => tokens.color.background.default,
+  bgDisabled: () => tokens.color.background.disabled,
+  bgHover: () => tokens.color.background.hover,
+  bgSubtle: () => tokens.color.background.subtle,
+  // ─── Font ───────────────────────────────────────────────────────────────────
+  fontFamily: () => tokens.font.family,
+  fontXs: () => tokens.font.size.xs,
+  fontSm: () => tokens.font.size.sm,
+  fontMd: () => tokens.font.size.md,
+  fontLg: () => tokens.font.size.lg,
+  weightRegular: () => tokens.font.weight.regular,
+  weightMedium: () => tokens.font.weight.medium,
+  weightSemibold: () => tokens.font.weight.semibold,
+  // ─── Spacing ─────────────────────────────────────────────────────────────────
+  spacingXs: () => tokens.spacing.xs,
+  spacingSm: () => tokens.spacing.sm,
+  spacingMd: () => tokens.spacing.md,
+  spacingLg: () => tokens.spacing.lg,
+  spacingXl: () => tokens.spacing.xl,
+  spacingXxl: () => tokens.spacing.xxl,
+  // ─── Radius ──────────────────────────────────────────────────────────────────
+  radiusNone: () => tokens.radius.none,
+  radiusSm: () => tokens.radius.sm,
+  radiusMd: () => tokens.radius.md,
+  radiusLg: () => tokens.radius.lg,
+  radiusXl: () => tokens.radius.xl,
+  radiusFull: () => tokens.radius.full,
+  // ─── Shadow ──────────────────────────────────────────────────────────────────
+  shadowSm: () => tokens.shadow.sm,
+  shadowMd: () => tokens.shadow.md,
+  shadowLg: () => tokens.shadow.lg,
+  shadowPopup: () => tokens.shadow.popup,
+  shadowModal: () => tokens.shadow.modal,
+  shadowField: () => tokens.shadow.field,
+  shadowCard: () => tokens.shadow.card,
+  // ─── Transition ──────────────────────────────────────────────────────────────
+  transitionFast: () => tokens.transition.fast,
+  transitionBase: () => tokens.transition.base,
+  transitionSlow: () => tokens.transition.slow,
+  // ─── Composite (자주 쓰는 alpha 조합) ────────────────────────────────────────
+  /** primary 20% 투명도 — 포커스 링 outline 색상 */
+  primaryAlpha20: () => `${tokens.color.primary}33`,
+  /** danger 20% 투명도 — 에러 포커스 링 */
+  dangerAlpha20: () => `${tokens.color.danger}33`
+};
+var Button = React3.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading = false,
+    fullWidth = false,
+    width,
+    leftIcon,
+    rightIcon,
+    iconOnly = false,
+    disabled,
+    children,
+    borderRadius,
+    borderColor,
+    textColor,
+    backgroundColor,
+    padding,
+    ...rest
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsx(
+      StyledButton,
+      {
+        ref,
+        variant,
+        $size: size,
+        $fullWidth: fullWidth,
+        $width: width,
+        $iconOnly: iconOnly,
+        $borderRadius: borderRadius,
+        $borderColor: borderColor,
+        $textColor: textColor,
+        $backgroundColor: backgroundColor,
+        $padding: padding,
+        disabled: isDisabled,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading,
+        ...rest,
+        children: loading ? /* @__PURE__ */ jsx(Spinner, { size }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          leftIcon && /* @__PURE__ */ jsx(IconWrapper, { position: "left", children: leftIcon }),
+          !iconOnly && children,
+          rightIcon && /* @__PURE__ */ jsx(IconWrapper, { position: "right", children: rightIcon })
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var spin = keyframes`to { transform: rotate(360deg); }`;
+var spinnerSizeMap = {
+  xs: "10px",
+  sm: "12px",
+  md: "14px",
+  lg: "16px"
+};
+var Spinner = ({ size }) => /* @__PURE__ */ jsx(SpinnerCircle, { $size: spinnerSizeMap[size] });
+var SpinnerCircle = styled2.span`
+  display: inline-block;
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ${spin} 0.6s linear infinite;
+`;
+var IconWrapper = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  ${({ position }) => position === "left" ? "margin-right: 6px;" : "margin-left: 6px;"}
+  svg { width: 1em; height: 1em; }
+`;
+var sizeStyles = {
+  xs: css`
+    height: 26px;
+    padding: 0 8px;
+    font-size: ${t.fontXs};
+    border-radius: ${t.radiusSm};
+  `,
+  sm: css`
+    height: 32px;
+    padding: 0 ${t.spacingSm};
+    font-size: ${t.fontSm};
+    border-radius: ${t.radiusSm};
+  `,
+  md: css`
+    height: 38px;
+    padding: 0 ${t.spacingLg};
+    font-size: ${t.fontMd};
+    border-radius: ${t.radiusMd};
+  `,
+  lg: css`
+    height: 46px;
+    padding: 0 ${t.spacingXl};
+    font-size: ${t.fontLg};
+    border-radius: ${t.radiusLg};
+  `
+};
+var variantStyles = {
+  primary: css`
+    background: ${t.primary};
+    color: ${t.textInverse};
+    border: 1px solid transparent;
+    &:hover:not(:disabled) { background: ${t.primaryHover}; }
+  `,
+  secondary: css`
+    background: ${t.bgDefault};
+    color: ${t.secondary};
+    border: 1px solid ${t.borderDefault};
+    &:hover:not(:disabled) {
+      background: ${t.bgHover};
+      border-color: ${t.secondary};
+    }
+  `,
+  success: css`
+    background: ${t.success};
+    color: ${t.textInverse};
+    border: 1px solid transparent;
+    &:hover:not(:disabled) { filter: brightness(0.92); }
+  `,
+  warning: css`
+    background: ${t.warning};
+    color: ${t.textInverse};
+    border: 1px solid transparent;
+    &:hover:not(:disabled) { filter: brightness(0.92); }
+  `,
+  danger: css`
+    background: transparent;
+    color: ${t.danger};
+    border: 1px solid ${t.danger};
+    &:hover:not(:disabled) {
+      background: ${t.dangerLight};
+      border-color: ${t.dangerHover};
+      color: ${t.dangerHover};
+    }
+  `,
+  ghost: css`
+    background: transparent;
+    color: ${t.primary};
+    border: 1px solid transparent;
+    &:hover:not(:disabled) { background: ${t.bgHover}; }
+  `,
+  admin: css`
+    background: #333;
+    color: #fff;
+    border: 1px solid transparent;
+    &:hover:not(:disabled) { background: #111; }
+  `,
+  neutral: css`
+    background: #999;
+    color: #fff;
+    border: 1px solid transparent;
+    &:hover:not(:disabled) { background: #666; }
+  `,
+  conversion: css`
+    background: transparent;
+    color: ${t.primary};
+    border: 1px solid ${t.primary};
+    &:hover:not(:disabled) { background: ${t.bgHover}; }
+  `,
+  icon: css`
+    background: transparent;
+    color: ${t.textPrimary};
+    border: none;
+    padding: 0;
+    &:hover:not(:disabled) { background: ${t.bgHover}; }
+  `
+};
+var StyledButton = styled2.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: ${t.fontFamily};
+  font-weight: ${t.weightMedium};
+  line-height: 1;
+  white-space: nowrap;
+  transition: background ${t.transitionFast}, border-color ${t.transitionFast},
+    filter ${t.transitionFast}, opacity ${t.transitionFast};
+  user-select: none;
+  outline: none;
+
+  ${({ $size }) => sizeStyles[$size]}
+  ${({ variant }) => variantStyles[variant]}
+
+  ${({ $fullWidth }) => $fullWidth && css`width: 100%;`}
+
+  ${({ $width }) => $width !== void 0 && css`width: ${typeof $width === "number" ? `${$width}px` : $width};`}
+
+  ${({ $iconOnly, $size }) => $iconOnly && css`
+      padding: 0;
+      width: ${$size === "xs" ? "26px" : $size === "sm" ? "32px" : $size === "lg" ? "46px" : "38px"};
+    `}
+
+  ${({ $borderRadius }) => $borderRadius && `border-radius: ${$borderRadius};`}
+  ${({ $borderColor }) => $borderColor && `border-color: ${$borderColor}; border-style: solid;`}
+  ${({ $textColor }) => $textColor && `color: ${$textColor};`}
+  ${({ $backgroundColor }) => $backgroundColor && `background: ${$backgroundColor};`}
+  ${({ $padding }) => $padding && `padding: ${$padding};`}
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${t.primary};
+    outline-offset: 2px;
+  }
+`;
+var Input = React3.forwardRef(
+  ({
+    size = "md",
+    error,
+    hint,
+    prefix,
+    suffix,
+    clearable = false,
+    onClear,
+    fullWidth = true,
+    width,
+    label,
+    required,
+    disabled,
+    value,
+    onChange,
+    id: externalId,
+    borderRadius,
+    borderColor,
+    textColor,
+    backgroundColor,
+    padding,
+    ...rest
+  }, ref) => {
+    const autoId = useId();
+    const id = externalId ?? autoId;
+    const [internalValue, setInternalValue] = useState("");
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const showClear = clearable && !!currentValue && !disabled;
+    const handleChange = (e) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!isControlled) setInternalValue("");
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsxs(Wrapper, { $fullWidth: fullWidth, $width: width, children: [
+      label && /* @__PURE__ */ jsx(InputLabel, { htmlFor: id, $required: !!required, children: label }),
+      /* @__PURE__ */ jsxs(
+        InputWrapper,
+        {
+          $size: size,
+          $hasError: !!error,
+          $disabled: !!disabled,
+          $borderRadius: borderRadius,
+          $borderColor: borderColor,
+          $backgroundColor: backgroundColor,
+          children: [
+            prefix && /* @__PURE__ */ jsx(Adornment, { position: "left", children: prefix }),
+            /* @__PURE__ */ jsx(
+              StyledInput,
+              {
+                ref,
+                id,
+                $size: size,
+                $hasPrefix: !!prefix,
+                $hasSuffix: !!suffix || showClear,
+                $textColor: textColor,
+                $padding: padding,
+                disabled,
+                value: currentValue,
+                onChange: handleChange,
+                "aria-invalid": !!error,
+                "aria-describedby": error ? `${id}-error` : hint ? `${id}-hint` : void 0,
+                ...rest
+              }
+            ),
+            showClear && /* @__PURE__ */ jsx(ClearButton, { type: "button", onClick: handleClear, "aria-label": "\uC785\uB825\uAC12 \uC9C0\uC6B0\uAE30", children: /* @__PURE__ */ jsx(ClearIcon, {}) }),
+            suffix && /* @__PURE__ */ jsx(Adornment, { position: "right", children: suffix })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx(HelperText, { id: `${id}-error`, role: "alert", $isError: true, children: error }),
+      !error && hint && /* @__PURE__ */ jsx(HelperText, { id: `${id}-hint`, children: hint })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var ClearIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    )
+  }
+);
+var heightMap = { sm: "30px", md: "36px", lg: "44px" };
+var fontSizeMap = { sm: t.fontSm, md: t.fontMd, lg: t.fontLg };
+var paddingMap = { sm: "0 8px", md: "0 12px", lg: "0 16px" };
+var Wrapper = styled2.div`
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  ${({ $fullWidth, $width }) => {
+  if ($width !== void 0)
+    return `width: ${typeof $width === "number" ? `${$width}px` : $width};`;
+  return $fullWidth ? "width: 100%;" : "";
+}}
+`;
+var InputLabel = styled2.label`
+  font-size: ${t.fontSm};
+  font-weight: ${t.weightMedium};
+  color: ${t.textPrimary};
+  font-family: ${t.fontFamily};
+
+  ${({ $required }) => $required && css`
+      &::after {
+        content: ' *';
+        color: ${t.danger};
+      }
+    `}
+`;
+var InputWrapper = styled2.div`
+  display: flex;
+  align-items: center;
+  height: ${({ $size }) => heightMap[$size]};
+  border: 1px solid
+    ${({ $hasError, $borderColor }) => $hasError ? t.borderError() : $borderColor ?? t.borderDefault()};
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? t.radiusMd()};
+  background: ${({ $disabled, $backgroundColor }) => $disabled ? t.bgDisabled() : $backgroundColor ?? t.bgDefault()};
+  transition: border-color ${t.transitionFast};
+  overflow: hidden;
+
+  &:focus-within {
+    border-color: ${({ $hasError }) => $hasError ? t.borderError() : t.borderFocus()};
+    outline: 2px solid
+      ${({ $hasError }) => $hasError ? t.dangerAlpha20() : t.primaryAlpha20()};
+    outline-offset: 0;
+  }
+`;
+var StyledInput = styled2.input`
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: ${t.fontFamily};
+  font-size: ${({ $size }) => fontSizeMap[$size]()};
+  color: ${({ $textColor }) => $textColor ?? t.textPrimary()};
+  padding: ${({ $size, $padding }) => $padding ?? paddingMap[$size]};
+  ${({ $hasPrefix }) => $hasPrefix && "padding-left: 4px;"}
+  ${({ $hasSuffix }) => $hasSuffix && "padding-right: 4px;"}
+
+  &::placeholder {
+    color: ${t.textPlaceholder};
+  }
+
+  &:disabled {
+    color: ${t.textDisabled};
+    cursor: not-allowed;
+  }
+`;
+var Adornment = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: ${t.textSecondary};
+  ${({ position }) => position === "left" ? "padding-left: 10px;" : "padding-right: 10px;"}
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var ClearButton = styled2.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: ${t.textSecondary};
+  cursor: pointer;
+  padding: 0;
+  transition: color ${t.transitionFast};
+
+  &:hover {
+    color: ${t.textPrimary};
+  }
+`;
+var HelperText = styled2.span`
+  font-size: ${t.fontXs};
+  font-family: ${t.fontFamily};
+  color: ${({ $isError }) => $isError ? t.textError() : t.textHint()};
+`;
+var Checkbox = React3.forwardRef(
+  ({
+    label,
+    size = "md",
+    indeterminate = false,
+    error = false,
+    disabled,
+    id: externalId,
+    checkColor,
+    borderColor,
+    borderRadius,
+    ...rest
+  }, ref) => {
+    const autoId = useId();
+    const id = externalId ?? autoId;
+    const internalRef = React3.useCallback(
+      (node) => {
+        if (node) node.indeterminate = indeterminate;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [indeterminate, ref]
+    );
+    return /* @__PURE__ */ jsxs(Wrapper2, { disabled: !!disabled, children: [
+      /* @__PURE__ */ jsx(
+        HiddenInput,
+        {
+          ref: internalRef,
+          type: "checkbox",
+          id,
+          disabled,
+          "aria-invalid": error,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CheckMark,
+        {
+          size,
+          $hasError: error,
+          $checkColor: checkColor,
+          $borderColor: borderColor,
+          $borderRadius: borderRadius,
+          "aria-hidden": "true",
+          children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateLine, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+        }
+      ),
+      label && /* @__PURE__ */ jsx(CheckLabel, { size, children: label })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M1 4L3.5 6.5L9 1",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var IndeterminateLine = () => /* @__PURE__ */ jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 1H9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+var boxSize = { sm: "14px", md: "16px", lg: "20px" };
+var fontSizeMap2 = { sm: t.fontSm, md: t.fontMd, lg: t.fontLg };
+var Wrapper2 = styled2.label`
+  display: inline-flex;
+  align-items: center;
+  gap: ${t.spacingSm};
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  user-select: none;
+  opacity: ${({ disabled }) => disabled ? 0.45 : 1};
+`;
+var HiddenInput = styled2.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+var CheckMark = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${({ size }) => boxSize[size]};
+  height: ${({ size }) => boxSize[size]};
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? t.radiusSm()};
+  border: 1.5px solid
+    ${({ $hasError, $borderColor }) => $hasError ? t.borderError() : $borderColor ?? t.borderDefault()};
+  background: ${t.bgDefault};
+  color: transparent;
+  transition: all ${t.transitionFast};
+
+  ${HiddenInput}:checked + &,
+  ${HiddenInput}:indeterminate + & {
+    background: ${({ $checkColor }) => $checkColor ?? t.primary()};
+    border-color: ${({ $checkColor }) => $checkColor ?? t.primary()};
+    color: ${t.textInverse};
+  }
+
+  ${HiddenInput}:focus-visible + & {
+    outline: 2px solid ${({ $checkColor }) => $checkColor ?? t.primary()};
+    outline-offset: 2px;
+  }
+`;
+var CheckLabel = styled2.span`
+  font-family: ${t.fontFamily};
+  font-size: ${({ size }) => fontSizeMap2[size]()};
+  color: ${t.textPrimary};
+  line-height: 1.4;
+`;
+var Radio = React3.forwardRef(
+  ({ label, size = "md", error = false, disabled, id: externalId, checkColor, borderColor, ...rest }, ref) => {
+    const autoId = useId();
+    const id = externalId ?? autoId;
+    return /* @__PURE__ */ jsxs(Wrapper3, { disabled: !!disabled, children: [
+      /* @__PURE__ */ jsx(
+        HiddenInput2,
+        {
+          ref,
+          type: "radio",
+          id,
+          disabled,
+          "aria-invalid": error,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RadioMark,
+        {
+          size,
+          $hasError: error,
+          $checkColor: checkColor,
+          $borderColor: borderColor,
+          "aria-hidden": "true"
+        }
+      ),
+      label && /* @__PURE__ */ jsx(RadioLabel, { size, children: label })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = ({
+  options,
+  value,
+  onChange,
+  name,
+  size = "md",
+  direction = "row",
+  gridColumns = 3,
+  gap,
+  disabled = false,
+  error = false,
+  errorMessage,
+  checkColor,
+  borderColor
+}) => {
+  return /* @__PURE__ */ jsxs(GroupWrapper, { direction, $gridColumns: gridColumns, $gap: gap, role: "radiogroup", children: [
+    options.map((option) => /* @__PURE__ */ jsx(
+      Radio,
+      {
+        name,
+        value: option.value,
+        label: option.label,
+        size,
+        checked: value === option.value,
+        disabled: disabled || option.disabled,
+        error,
+        checkColor,
+        borderColor,
+        onChange: () => onChange?.(option.value)
+      },
+      option.value
+    )),
+    error && errorMessage && /* @__PURE__ */ jsx(ErrorText, { role: "alert", children: errorMessage })
+  ] });
+};
+RadioGroup.displayName = "RadioGroup";
+var dotSize = { sm: "14px", md: "16px", lg: "20px" };
+var fontSizeMap3 = { sm: t.fontSm, md: t.fontMd, lg: t.fontLg };
+var Wrapper3 = styled2.label`
+  display: inline-flex;
+  align-items: center;
+  gap: ${t.spacingSm};
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  user-select: none;
+  opacity: ${({ disabled }) => disabled ? 0.45 : 1};
+`;
+var HiddenInput2 = styled2.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+var RadioMark = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${({ size }) => dotSize[size]};
+  height: ${({ size }) => dotSize[size]};
+  border-radius: 50%;
+  border: 1.5px solid
+    ${({ $hasError, $borderColor }) => $hasError ? t.borderError() : $borderColor ?? t.borderDefault()};
+  background: ${t.bgDefault};
+  transition: all ${t.transitionFast};
+
+  &::after {
+    content: '';
+    display: block;
+    width: 50%;
+    height: 50%;
+    border-radius: 50%;
+    background: transparent;
+    transition: background ${t.transitionFast};
+  }
+
+  ${HiddenInput2}:checked + & {
+    border-color: ${({ $checkColor }) => $checkColor ?? t.primary()};
+    &::after {
+      background: ${({ $checkColor }) => $checkColor ?? t.primary()};
+    }
+  }
+
+  ${HiddenInput2}:focus-visible + & {
+    outline: 2px solid ${({ $checkColor }) => $checkColor ?? t.primary()};
+    outline-offset: 2px;
+  }
+`;
+var RadioLabel = styled2.span`
+  font-family: ${t.fontFamily};
+  font-size: ${({ size }) => fontSizeMap3[size]()};
+  color: ${t.textPrimary};
+  line-height: 1.4;
+`;
+var GroupWrapper = styled2.div`
+  display: ${({ direction }) => direction === "grid" ? "grid" : "flex"};
+
+  ${({ direction, $gridColumns }) => direction === "grid" && `grid-template-columns: repeat(${$gridColumns}, auto); justify-content: start;`}
+
+  ${({ direction }) => direction !== "grid" && `flex-direction: ${direction === "column" ? "column" : "row"};`}
+
+  gap: ${({ direction, $gap }) => $gap ?? (direction === "row" ? t.spacingLg() : direction === "grid" ? "12px 20px" : t.spacingSm())};
+
+  flex-wrap: wrap;
+`;
+var ErrorText = styled2.span`
+  width: 100%;
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontXs};
+  color: ${t.textError};
+`;
+var Select = React3.forwardRef(
+  ({
+    options,
+    placeholder,
+    size = "md",
+    variant = "default",
+    error,
+    hint,
+    label,
+    required,
+    fullWidth = true,
+    width,
+    disabled,
+    id: externalId,
+    borderRadius,
+    borderColor,
+    textColor,
+    backgroundColor,
+    padding,
+    ...rest
+  }, ref) => {
+    const autoId = useId();
+    const id = externalId ?? autoId;
+    return /* @__PURE__ */ jsxs(Wrapper4, { $fullWidth: fullWidth, $width: width, children: [
+      label && /* @__PURE__ */ jsx(SelectLabel, { htmlFor: id, $required: !!required, children: label }),
+      /* @__PURE__ */ jsxs(
+        SelectWrapper,
+        {
+          $size: size,
+          $hasError: !!error,
+          $disabled: !!disabled,
+          $variant: variant,
+          $borderRadius: borderRadius,
+          $borderColor: borderColor,
+          $backgroundColor: backgroundColor,
+          children: [
+            /* @__PURE__ */ jsxs(
+              StyledSelect,
+              {
+                ref,
+                id,
+                $size: size,
+                $textColor: textColor,
+                $padding: padding,
+                disabled,
+                "aria-invalid": !!error,
+                "aria-describedby": error ? `${id}-error` : hint ? `${id}-hint` : void 0,
+                defaultValue: placeholder ? "" : void 0,
+                ...rest,
+                children: [
+                  placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+                  options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronIcon, { "aria-hidden": "true" })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx(HelperText2, { id: `${id}-error`, role: "alert", $isError: true, children: error }),
+      !error && hint && /* @__PURE__ */ jsx(HelperText2, { id: `${id}-hint`, children: hint })
+    ] });
+  }
+);
+Select.displayName = "Select";
+var ChevronIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M3 5L7 9L11 5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var heightMap2 = { sm: "30px", md: "36px", lg: "44px" };
+var fontSizeMap4 = { sm: t.fontSm, md: t.fontMd, lg: t.fontLg };
+var paddingMap2 = { sm: "0 8px", md: "0 12px", lg: "0 16px" };
+var getVariantBg = (variant) => ({ default: t.bgDefault(), outlined: t.bgDefault(), filled: "#F9FAFB" })[variant];
+var Wrapper4 = styled2.div`
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  ${({ $fullWidth, $width }) => {
+  if ($width !== void 0)
+    return `width: ${typeof $width === "number" ? `${$width}px` : $width};`;
+  return $fullWidth ? "width: 100%;" : "";
+}}
+`;
+var SelectLabel = styled2.label`
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontSm};
+  font-weight: ${t.weightMedium};
+  color: ${t.textPrimary};
+
+  ${({ $required }) => $required && `&::after {
+      content: ' *';
+      color: ${t.danger()};
+    }`}
+`;
+var SelectWrapper = styled2.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: ${({ $size }) => heightMap2[$size]};
+  border: 1px solid
+    ${({ $hasError, $borderColor }) => $hasError ? t.borderError() : $borderColor ?? t.borderDefault()};
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? t.radiusMd()};
+  background: ${({ $disabled, $variant, $backgroundColor }) => $disabled ? t.bgDisabled() : $backgroundColor ?? getVariantBg($variant)};
+  transition: border-color ${t.transitionFast};
+
+  &:focus-within {
+    border-color: ${({ $hasError }) => $hasError ? t.borderError() : t.borderFocus()};
+    outline: 2px solid
+      ${({ $hasError }) => $hasError ? t.dangerAlpha20() : t.primaryAlpha20()};
+  }
+
+  svg {
+    position: absolute;
+    right: 10px;
+    pointer-events: none;
+    color: ${t.textSecondary};
+    flex-shrink: 0;
+  }
+`;
+var StyledSelect = styled2.select`
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  appearance: none;
+  font-family: ${t.fontFamily};
+  font-size: ${({ $size }) => fontSizeMap4[$size]()};
+  color: ${({ $textColor }) => $textColor ?? t.textPrimary()};
+  padding: ${({ $size, $padding }) => $padding ?? paddingMap2[$size]};
+  padding-right: 32px;
+  cursor: pointer;
+
+  &:disabled {
+    color: ${t.textDisabled};
+    cursor: not-allowed;
+  }
+`;
+var HelperText2 = styled2.span`
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontXs};
+  color: ${({ $isError }) => $isError ? t.textError() : t.textHint()};
+`;
+var TextArea = React3.forwardRef(
+  ({
+    size = "md",
+    error,
+    hint,
+    label,
+    required,
+    fullWidth = true,
+    width,
+    maxLength,
+    resize = "vertical",
+    disabled,
+    value,
+    onChange,
+    rows = 4,
+    id: externalId,
+    borderRadius,
+    borderColor,
+    textColor,
+    backgroundColor,
+    padding,
+    ...rest
+  }, ref) => {
+    const autoId = useId();
+    const id = externalId ?? autoId;
+    const [internalValue, setInternalValue] = useState("");
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const handleChange = (e) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    return /* @__PURE__ */ jsxs(Wrapper5, { $fullWidth: fullWidth, $width: width, children: [
+      label && /* @__PURE__ */ jsx(TextAreaLabel, { htmlFor: id, $required: !!required, children: label }),
+      /* @__PURE__ */ jsx(
+        StyledTextArea,
+        {
+          ref,
+          id,
+          $size: size,
+          rows,
+          $resize: resize,
+          disabled,
+          $hasError: !!error,
+          maxLength,
+          value: currentValue,
+          onChange: handleChange,
+          $borderRadius: borderRadius,
+          $borderColor: borderColor,
+          $textColor: textColor,
+          $backgroundColor: backgroundColor,
+          $padding: padding,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${id}-error` : hint ? `${id}-hint` : void 0,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsxs(Footer, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          error && /* @__PURE__ */ jsx(HelperText3, { id: `${id}-error`, role: "alert", $isError: true, children: error }),
+          !error && hint && /* @__PURE__ */ jsx(HelperText3, { id: `${id}-hint`, children: hint })
+        ] }),
+        maxLength !== void 0 && /* @__PURE__ */ jsxs(Counter, { $isOver: currentValue.length > maxLength, children: [
+          currentValue.length,
+          " / ",
+          maxLength
+        ] })
+      ] })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+var fontSizeMap5 = { sm: t.fontSm, md: t.fontMd, lg: t.fontLg };
+var paddingMap3 = { sm: "6px 8px", md: "8px 12px", lg: "10px 16px" };
+var Wrapper5 = styled2.div`
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  ${({ $fullWidth, $width }) => {
+  if ($width !== void 0)
+    return `width: ${typeof $width === "number" ? `${$width}px` : $width};`;
+  return $fullWidth ? "width: 100%;" : "";
+}}
+`;
+var TextAreaLabel = styled2.label`
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontSm};
+  font-weight: ${t.weightMedium};
+  color: ${t.textPrimary};
+
+  ${({ $required }) => $required && `&::after {
+      content: ' *';
+      color: ${t.danger()};
+    }`}
+`;
+var StyledTextArea = styled2.textarea`
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid
+    ${({ $hasError, $borderColor }) => $hasError ? t.borderError() : $borderColor ?? t.borderDefault()};
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? t.radiusMd()};
+  background: ${({ $backgroundColor }) => $backgroundColor ?? t.bgDefault()};
+  font-family: ${t.fontFamily};
+  font-size: ${({ $size }) => fontSizeMap5[$size]()};
+  color: ${({ $textColor }) => $textColor ?? t.textPrimary()};
+  padding: ${({ $size, $padding }) => $padding ?? paddingMap3[$size]};
+  resize: ${({ $resize }) => $resize};
+  outline: none;
+  transition: border-color ${t.transitionFast};
+  line-height: 1.6;
+
+  &::placeholder {
+    color: ${t.textPlaceholder};
+  }
+
+  &:focus {
+    border-color: ${({ $hasError }) => $hasError ? t.borderError() : t.borderFocus()};
+    outline: 2px solid
+      ${({ $hasError }) => $hasError ? t.dangerAlpha20() : t.primaryAlpha20()};
+    outline-offset: 0;
+  }
+
+  &:disabled {
+    background: ${t.bgDisabled};
+    color: ${t.textDisabled};
+    cursor: not-allowed;
+    resize: none;
+  }
+`;
+var Footer = styled2.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+var HelperText3 = styled2.span`
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontXs};
+  color: ${({ $isError }) => $isError ? t.textError() : t.textHint()};
+`;
+var Counter = styled2.span`
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontXs};
+  color: ${({ $isOver }) => $isOver ? t.textError() : t.textSecondary()};
+  white-space: nowrap;
+  margin-left: auto;
+`;
+var Label = React3.forwardRef(
+  ({ required, optional, size = "md", disabled, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs(StyledLabel, { ref, size, disabled: !!disabled, ...rest, children: [
+      children,
+      required && /* @__PURE__ */ jsx(RequiredMark, { "aria-label": "\uD544\uC218", children: "*" }),
+      !required && optional && /* @__PURE__ */ jsx(OptionalMark, { children: "(\uC120\uD0DD)" })
+    ] });
+  }
+);
+Label.displayName = "Label";
+var fontSizeMap6 = { sm: t.fontXs, md: t.fontSm, lg: t.fontMd };
+var StyledLabel = styled2.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-family: ${t.fontFamily};
+  font-size: ${({ size }) => fontSizeMap6[size]()};
+  font-weight: ${t.weightMedium};
+  color: ${({ disabled }) => disabled ? t.textDisabled() : t.textPrimary()};
+  cursor: ${({ disabled, htmlFor }) => disabled ? "not-allowed" : htmlFor ? "pointer" : "default"};
+  user-select: none;
+`;
+var RequiredMark = styled2.span`
+  color: ${t.danger};
+  font-size: inherit;
+  line-height: 1;
+`;
+var OptionalMark = styled2.span`
+  font-size: ${t.fontXs};
+  font-weight: ${t.weightRegular};
+  color: ${t.textSecondary};
+`;
+var Badge = React3.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    outline = false,
+    icon,
+    dot = false,
+    children,
+    borderRadius,
+    textColor,
+    backgroundColor,
+    borderColor,
+    ...rest
+  }, ref) => {
+    if (dot) {
+      return /* @__PURE__ */ jsx(
+        DotBadge,
+        {
+          ref,
+          variant,
+          $backgroundColor: backgroundColor,
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledBadge,
+      {
+        ref,
+        variant,
+        size,
+        $outline: outline,
+        $borderRadius: borderRadius,
+        $textColor: textColor,
+        $backgroundColor: backgroundColor,
+        $borderColor: borderColor,
+        ...rest,
+        children: [
+          icon && /* @__PURE__ */ jsx(IconWrapper2, { children: icon }),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var getVariantColor = () => ({
+  primary: { bg: "#EFF6FF", text: "#1D4ED8", border: "#BFDBFE" },
+  secondary: { bg: "#F3F4F6", text: "#374151", border: "#D1D5DB" },
+  success: { bg: "#ECFDF5", text: "#065F46", border: "#A7F3D0" },
+  warning: { bg: "#FFFBEB", text: "#92400E", border: "#FDE68A" },
+  danger: { bg: "#FEF2F2", text: "#991B1B", border: "#FECACA" },
+  ghost: { bg: "transparent", text: t.textSecondary(), border: t.borderDefault() }
+});
+var sizeStyles2 = {
+  sm: css`
+    padding: 1px 6px;
+    font-size: ${t.fontXs};
+    border-radius: ${t.radiusSm};
+  `,
+  md: css`
+    padding: 2px 8px;
+    font-size: ${t.fontSm};
+    border-radius: ${t.radiusMd};
+  `,
+  lg: css`
+    padding: 3px 10px;
+    font-size: ${t.fontMd};
+    border-radius: ${t.radiusMd};
+  `
+};
+var StyledBadge = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: ${t.fontFamily};
+  font-weight: ${t.weightMedium};
+  line-height: 1.4;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  ${({ size }) => sizeStyles2[size]}
+
+  background: ${({ variant, $outline, $backgroundColor }) => $backgroundColor ?? ($outline ? "transparent" : getVariantColor()[variant].bg)};
+  color: ${({ variant, $textColor }) => $textColor ?? getVariantColor()[variant].text};
+  border: 1px solid
+    ${({ variant, $outline, $borderColor }) => $borderColor ?? ($outline ? getVariantColor()[variant].border : "transparent")};
+
+  ${({ $borderRadius }) => $borderRadius && `border-radius: ${$borderRadius};`}
+`;
+var DotBadge = styled2.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: ${({ variant, $backgroundColor }) => {
+  if ($backgroundColor) return $backgroundColor;
+  const map = {
+    primary: t.primary(),
+    secondary: t.secondary(),
+    success: t.success(),
+    warning: t.warning(),
+    danger: t.danger(),
+    ghost: t.borderDefault()
+  };
+  return map[variant];
+}};
+`;
+var IconWrapper2 = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+`;
+var Chip = React3.forwardRef(
+  ({
+    label,
+    active = false,
+    count,
+    activeColor,
+    borderRadius,
+    borderColor,
+    textColor,
+    backgroundColor,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      StyledChip,
+      {
+        ref,
+        type: "button",
+        $active: active,
+        $activeColor: activeColor,
+        $borderRadius: borderRadius,
+        $borderColor: borderColor,
+        $textColor: textColor,
+        $backgroundColor: backgroundColor,
+        "aria-pressed": active,
+        ...rest,
+        children: [
+          label,
+          count !== void 0 && /* @__PURE__ */ jsx(CountBadge, { children: count })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var StyledChip = styled2.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 5px 14px;
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? t.radiusFull()};
+  border: 1px solid
+    ${({ $active, $activeColor, $borderColor }) => $active ? $activeColor ?? t.primary() : $borderColor ?? t.borderDefault()};
+  background: ${({ $backgroundColor }) => $backgroundColor ?? t.bgDefault()};
+  color: ${({ $active, $activeColor, $textColor }) => $active ? $activeColor ?? t.primary() : $textColor ?? t.textSecondary()};
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontMd};
+  font-weight: ${t.weightMedium};
+  cursor: pointer;
+  transition: all ${t.transitionBase};
+  white-space: nowrap;
+  user-select: none;
+
+  &:hover:not(:disabled) {
+    border-color: ${({ $activeColor }) => $activeColor ?? t.primary()};
+    color: ${({ $activeColor }) => $activeColor ?? t.primary()};
+    ${({ $active }) => !$active && "background: #f5f8ff;"}
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ $activeColor }) => $activeColor ?? t.primary()};
+    outline-offset: 2px;
+  }
+`;
+var CountBadge = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${t.fontXs};
+  font-weight: ${t.weightSemibold};
+`;
+var Loading = ({
+  size = "md",
+  text,
+  fullscreen = false,
+  color,
+  overlayColor
+}) => {
+  const content = /* @__PURE__ */ jsxs(Inner, { children: [
+    /* @__PURE__ */ jsx(Spinner2, { $size: size, $color: color, "aria-hidden": true }),
+    text && /* @__PURE__ */ jsx(LoadingText, { children: text })
+  ] });
+  if (fullscreen) {
+    return /* @__PURE__ */ jsx(Overlay, { $overlayColor: overlayColor, role: "status", "aria-label": text ?? "\uB85C\uB529 \uC911", children: content });
+  }
+  return /* @__PURE__ */ jsx(Inline, { role: "status", "aria-label": text ?? "\uB85C\uB529 \uC911", children: content });
+};
+Loading.displayName = "Loading";
+var spin2 = keyframes`
+  to { transform: rotate(360deg); }
+`;
+var spinnerSizeMap2 = {
+  xs: "16px",
+  sm: "20px",
+  md: "32px",
+  lg: "48px"
+};
+var borderSizeMap = {
+  xs: "2px",
+  sm: "2px",
+  md: "3px",
+  lg: "4px"
+};
+var Spinner2 = styled2.div`
+  width: ${({ $size }) => spinnerSizeMap2[$size]};
+  height: ${({ $size }) => spinnerSizeMap2[$size]};
+  border: ${({ $size }) => borderSizeMap[$size]} solid #f0f0f0;
+  border-top-color: ${({ $color }) => $color ?? t.primary()};
+  border-radius: 50%;
+  animation: ${spin2} 0.8s linear infinite;
+  flex-shrink: 0;
+`;
+var Inner = styled2.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${t.spacingSm};
+`;
+var LoadingText = styled2.span`
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontSm};
+  color: ${t.textSecondary};
+`;
+var Overlay = styled2.div`
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${({ $overlayColor }) => $overlayColor ?? "rgba(255,255,255,0.85)"};
+  z-index: 9999;
+`;
+var Inline = styled2.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  maxVisible = 5,
+  activeColor,
+  borderRadius
+}) => {
+  const pages = generatePageNumbers(currentPage, totalPages, maxVisible);
+  return /* @__PURE__ */ jsxs(Wrapper6, { children: [
+    /* @__PURE__ */ jsx(
+      NavButton,
+      {
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: currentPage <= 1,
+        "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
+        $borderRadius: borderRadius,
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(PageList, { children: pages.map(
+      (page, i) => page === "ellipsis" ? /* @__PURE__ */ jsx(Ellipsis, { children: "\u2026" }, `e-${i}`) : /* @__PURE__ */ jsx(
+        PageButton,
+        {
+          onClick: () => onPageChange(page),
+          $active: page === currentPage,
+          $activeColor: activeColor,
+          $borderRadius: borderRadius,
+          "aria-current": page === currentPage ? "page" : void 0,
+          children: page
+        },
+        page
+      )
+    ) }),
+    /* @__PURE__ */ jsx(
+      NavButton,
+      {
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage >= totalPages,
+        "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
+        $borderRadius: borderRadius,
+        children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      }
+    )
+  ] });
+};
+Pagination.displayName = "Pagination";
+function generatePageNumbers(current, total, maxVisible) {
+  if (total <= maxVisible) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const half = Math.floor(maxVisible / 2);
+  let start = Math.max(1, current - half);
+  const end = Math.min(total, start + maxVisible - 1);
+  if (end - start < maxVisible - 1) {
+    start = Math.max(1, end - maxVisible + 1);
+  }
+  const pages = [];
+  if (start > 1) {
+    pages.push(1);
+    if (start > 2) pages.push("ellipsis");
+  }
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  if (end < total) {
+    if (end < total - 1) pages.push("ellipsis");
+    pages.push(total);
+  }
+  return pages;
+}
+var ChevronLeftIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Wrapper6 = styled2.nav`
+  display: flex;
+  align-items: center;
+  gap: ${t.spacingXs};
+`;
+var PageList = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.spacingXs};
+`;
+var baseButtonStyles = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 4px;
+  border: 1px solid ${t.borderDefault};
+  background: ${t.bgDefault};
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontSm};
+  cursor: pointer;
+  transition: all ${t.transitionFast};
+  user-select: none;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${t.primary};
+    outline-offset: 2px;
+  }
+`;
+var NavButton = styled2.button`
+  ${baseButtonStyles}
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? t.radiusMd()};
+  color: ${t.textSecondary};
+
+  &:hover:not(:disabled) {
+    background: ${t.bgHover};
+    color: ${t.textPrimary};
+  }
+`;
+var PageButton = styled2.button`
+  ${baseButtonStyles}
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? t.radiusMd()};
+  font-weight: ${({ $active }) => $active ? t.weightSemibold() : t.weightRegular()};
+  background: ${({ $active, $activeColor }) => $active ? $activeColor ?? t.primary() : t.bgDefault()};
+  color: ${({ $active }) => $active ? t.textInverse() : t.textPrimary()};
+  border-color: ${({ $active, $activeColor }) => $active ? $activeColor ?? t.primary() : t.borderDefault()};
+
+  &:hover:not(:disabled) {
+    background: ${({ $active, $activeColor }) => $active ? $activeColor ?? t.primaryHover() : t.bgHover()};
+  }
+`;
+var Ellipsis = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontSm};
+  color: ${t.textSecondary};
+  user-select: none;
+`;
+var Toast = ({
+  message,
+  type = "info",
+  duration = 3e3,
+  onClose,
+  position = "bottom-center",
+  backgroundColor,
+  textColor,
+  borderRadius
+}) => {
+  const [isClosing, setIsClosing] = useState(false);
+  useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(() => {
+      setIsClosing(true);
+      setTimeout(onClose, 300);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(onClose, 300);
+  };
+  return /* @__PURE__ */ jsxs(
+    ToastContainer,
+    {
+      $type: type,
+      $position: position,
+      $isClosing: isClosing,
+      $backgroundColor: backgroundColor,
+      $textColor: textColor,
+      $borderRadius: borderRadius,
+      role: "alert",
+      "aria-live": "assertive",
+      children: [
+        /* @__PURE__ */ jsx(TypeIcon, { type }),
+        /* @__PURE__ */ jsx(ToastMessage, { children: message }),
+        /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      ]
+    }
+  );
+};
+Toast.displayName = "Toast";
+var TypeIcon = ({ type }) => {
+  const icons = {
+    info: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 7v5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "4.5", r: "0.75", fill: "currentColor" })
+    ] }),
+    success: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M5 8l2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] }),
+    error: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] }),
+    warning: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 2L14.5 13H1.5L8 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 6v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.5", r: "0.75", fill: "currentColor" })
+    ] })
+  };
+  return /* @__PURE__ */ jsx(IconWrapper3, { children: icons[type] });
+};
+var CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+var slideUpIn = keyframes`
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+`;
+var slideDownOut = keyframes`
+  from { transform: translateY(0);    opacity: 1; }
+  to   { transform: translateY(100%); opacity: 0; }
+`;
+var slideDownIn = keyframes`
+  from { transform: translateY(-100%); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
+`;
+var slideUpOut = keyframes`
+  from { transform: translateY(0);     opacity: 1; }
+  to   { transform: translateY(-100%); opacity: 0; }
+`;
+var typeColor = {
+  info: { bg: "#1D4ED8", text: "#fff" },
+  success: { bg: "#065F46", text: "#fff" },
+  error: { bg: "#991B1B", text: "#fff" },
+  warning: { bg: "#92400E", text: "#fff" }
+};
+var positionStyles = {
+  "top-center": "top: 24px; left: 50%; transform: translateX(-50%);",
+  "top-right": "top: 24px; right: 24px;",
+  "bottom-center": "bottom: 24px; left: 50%; transform: translateX(-50%);",
+  "bottom-right": "bottom: 24px; right: 24px;"
+};
+var ToastContainer = styled2.div`
+  position: fixed;
+  ${({ $position }) => positionStyles[$position]}
+  display: flex;
+  align-items: center;
+  gap: ${t.spacingSm};
+  padding: 12px 16px;
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? t.radiusLg()};
+  background: ${({ $type, $backgroundColor }) => $backgroundColor ?? typeColor[$type].bg};
+  color: ${({ $type, $textColor }) => $textColor ?? typeColor[$type].text};
+  font-family: ${t.fontFamily};
+  font-size: ${t.fontMd};
+  min-width: 240px;
+  max-width: 420px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+
+  ${({ $position, $isClosing }) => {
+  const isBottom = $position.startsWith("bottom");
+  if ($isClosing) {
+    return css`animation: ${isBottom ? slideDownOut : slideUpOut} 0.3s ease-out forwards;`;
+  }
+  return css`animation: ${isBottom ? slideUpIn : slideDownIn} 0.3s ease-out;`;
+}}
+`;
+var IconWrapper3 = styled2.span`
+  display: inline-flex;
+  flex-shrink: 0;
+`;
+var ToastMessage = styled2.span`
+  flex: 1;
+  line-height: 1.4;
+`;
+var CloseButton = styled2.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.7;
+  transition: opacity ${t.transitionFast};
+  margin-left: 4px;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+export { Badge, Button, Checkbox, Chip, Input, Label, Loading, Pagination, Radio, RadioGroup, Select, TextArea, Toast, configureTokens, defaultTokens, resetTokens };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map