@bichon/ds 0.0.0

package/dist/index.js

@@ -0,0 +1,1872 @@
+import { css, ThemeProvider, Global, useTheme } from '@emotion/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, createContext, useState, useContext } from 'react';
+import styled8 from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import * as RadixProgress from '@radix-ui/react-progress';
+import TextareaAutosize from 'react-textarea-autosize';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Check, ChevronRight, ChevronLeft, Ellipsis, X } from 'lucide-react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
+import * as TooltipPrimitive2 from '@radix-ui/react-tooltip';
+
+// src/BichonThemeProvider.tsx
+
+// src/tokens/colors.ts
+var basicColor = {
+  blue: {
+    100: "#EAF3FF",
+    300: "#ABCDFF",
+    500: "#2C81FC",
+    700: "#0C52B8",
+    900: "#002F74"
+  },
+  grey: {
+    50: "#FAFAFC",
+    100: "#F1F1F4",
+    200: "#E3E4E8",
+    300: "#B5B9C4",
+    400: "#949AA8",
+    500: "#6E7687",
+    600: "#596070",
+    700: "#4B505D",
+    800: "#3F434D",
+    900: "#25262C"
+  },
+  black: "#25262C",
+  white: "#FFFFFF",
+  black30: "rgba(37, 38, 44, 0.3)",
+  // black 30% opacity
+  red: {
+    100: "#FFECEE",
+    500: "#F04452",
+    700: "#AC202B"
+  }
+};
+var colors = {
+  basic: basicColor,
+  // Semantic Colors
+  none: "transparent",
+  // Chart
+  chartBlack: basicColor.grey[900],
+  chartRed: basicColor.red[500],
+  chartOrange: "#F98A00",
+  chartYellow: "#EDB100",
+  chartGreen: "#31A96B",
+  chartBlue: basicColor.blue[500],
+  chartPurple: "#8B4EDD",
+  chartPink: "#F05C96",
+  // Font
+  textPrimary: basicColor.grey[900],
+  textSecondary: basicColor.grey[600],
+  textTertiary: basicColor.grey[500],
+  textDisabled: basicColor.grey[300],
+  textPlaceholder: basicColor.grey[300],
+  // Line
+  lineLight: basicColor.grey[100],
+  lineDefault: basicColor.grey[200],
+  lineAccent: basicColor.blue[500],
+  lineWarning: basicColor.red[500],
+  // Background
+  bgWhite: basicColor.white,
+  bgLightGrey: basicColor.grey[50],
+  bgMediumGrey: basicColor.grey[100],
+  bgDarkGrey: basicColor.grey[800],
+  bgBlack: basicColor.grey[900],
+  bgAccent: basicColor.blue[500],
+  bgAccentDark: basicColor.blue[700],
+  bgAccentSubtle: basicColor.blue[100],
+  bgWarning: basicColor.red[500],
+  bgWarningDark: basicColor.red[700],
+  bgWarningSubtle: basicColor.red[100],
+  // Status
+  textAccent: basicColor.blue[500],
+  textWarning: basicColor.red[500]
+};
+
+// src/tokens/typography.ts
+var fontSize = {
+  xs: "12px",
+  sm: "13px",
+  base: "14px",
+  md: "15px",
+  lg: "16px",
+  xl: "18px",
+  "2xl": "20px",
+  "3xl": "24px",
+  "4xl": "32px"
+};
+var fontWeight = {
+  regular: 400,
+  medium: 500,
+  semibold: 600
+};
+var lineHeight = {
+  xs: "18px",
+  sm: "19.5px",
+  base: "21px",
+  md: "22.5px",
+  lg: "24px",
+  xl: "27px",
+  "2xl": "29px",
+  "3xl": "32px",
+  "4xl": "42px"
+};
+var letterSpacing = {
+  tight: "-0.02em",
+  normal: "0em"
+};
+var typography = {
+  // Headings
+  heading4xl: {
+    fontSize: fontSize["4xl"],
+    lineHeight: lineHeight["4xl"],
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.tight
+  },
+  heading3xl: {
+    fontSize: fontSize["3xl"],
+    lineHeight: lineHeight["3xl"],
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.tight
+  },
+  heading2xl: {
+    fontSize: fontSize["2xl"],
+    lineHeight: lineHeight["2xl"],
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.tight
+  },
+  headingXl: {
+    fontSize: fontSize.xl,
+    lineHeight: lineHeight.xl,
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.tight
+  },
+  headingLg: {
+    fontSize: fontSize.lg,
+    lineHeight: lineHeight.lg,
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.tight
+  },
+  headingBase: {
+    fontSize: fontSize.base,
+    lineHeight: lineHeight.base,
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.tight
+  },
+  // Body Text - Medium
+  bodyXlMedium: {
+    fontSize: fontSize.xl,
+    lineHeight: lineHeight.xl,
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.tight
+  },
+  bodyLgMedium: {
+    fontSize: fontSize.lg,
+    lineHeight: lineHeight.lg,
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.tight
+  },
+  bodyMdMedium: {
+    fontSize: fontSize.md,
+    lineHeight: lineHeight.md,
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.tight
+  },
+  bodyBaseMedium: {
+    fontSize: fontSize.base,
+    lineHeight: lineHeight.base,
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.tight
+  },
+  bodySmMedium: {
+    fontSize: fontSize.sm,
+    lineHeight: lineHeight.sm,
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.tight
+  },
+  bodyXsMedium: {
+    fontSize: fontSize.xs,
+    lineHeight: lineHeight.xs,
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.tight
+  },
+  // Body Text - Regular
+  bodyLgRegular: {
+    fontSize: fontSize.lg,
+    lineHeight: lineHeight.lg,
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.tight
+  },
+  bodyMdRegular: {
+    fontSize: fontSize.md,
+    lineHeight: lineHeight.md,
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.tight
+  },
+  bodyBaseRegular: {
+    fontSize: fontSize.base,
+    lineHeight: lineHeight.base,
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.tight
+  },
+  bodySmRegular: {
+    fontSize: fontSize.sm,
+    lineHeight: lineHeight.sm,
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.tight
+  },
+  bodyXsRegular: {
+    fontSize: fontSize.xs,
+    lineHeight: lineHeight.xs,
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.tight
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  0: "0px",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px",
+  20: "80px",
+  24: "96px"
+};
+var semanticSpacing = {
+  xs: spacing[1],
+  sm: spacing[2],
+  md: spacing[3],
+  lg: spacing[4],
+  xl: spacing[5],
+  "2xl": spacing[6],
+  "3xl": spacing[8]
+};
+var componentSize = {
+  cardWidth: "286px",
+  cardContainerWidth: "334px",
+  modalWidth: "400px",
+  inputHeight: {
+    small: "32px",
+    medium: "40px",
+    large: "48px"
+  }
+};
+
+// src/tokens/radius.ts
+var radius = {
+  none: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px",
+  "2xl": "12px",
+  "3xl": "20px",
+  full: "9999px"
+};
+
+// src/tokens/shadows.ts
+var shadows = {
+  none: "none",
+  sm: "0px 1px 2px 0px rgba(0, 27, 55, 0.08)",
+  base: "0px 2px 4px 0px rgba(0, 27, 55, 0.10)",
+  md: "0px 4px 8px 0px rgba(0, 27, 55, 0.12)",
+  lg: "0px 8px 16px 0px rgba(0, 27, 55, 0.15)",
+  xl: "0px 12px 24px 0px rgba(0, 27, 55, 0.18)",
+  modal: "0px 4px 12px 0px rgba(0, 27, 55, 0.15)"
+};
+
+// src/assets/fonts/woff2/Pretendard-Thin.woff2
+var Pretendard_Thin_default = "./Pretendard-Thin-7QVSFVOF.woff2";
+
+// src/assets/fonts/woff2/Pretendard-ExtraLight.woff2
+var Pretendard_ExtraLight_default = "./Pretendard-ExtraLight-W2EFW6U4.woff2";
+
+// src/assets/fonts/woff2/Pretendard-Light.woff2
+var Pretendard_Light_default = "./Pretendard-Light-44S62PI7.woff2";
+
+// src/assets/fonts/woff2/Pretendard-Regular.woff2
+var Pretendard_Regular_default = "./Pretendard-Regular-CGOPAG2E.woff2";
+
+// src/assets/fonts/woff2/Pretendard-Medium.woff2
+var Pretendard_Medium_default = "./Pretendard-Medium-CLYKZXFO.woff2";
+
+// src/assets/fonts/woff2/Pretendard-SemiBold.woff2
+var Pretendard_SemiBold_default = "./Pretendard-SemiBold-Z6RJ4TYK.woff2";
+
+// src/assets/fonts/woff2/Pretendard-Bold.woff2
+var Pretendard_Bold_default = "./Pretendard-Bold-4AHBL5CN.woff2";
+
+// src/assets/fonts/woff2/Pretendard-ExtraBold.woff2
+var Pretendard_ExtraBold_default = "./Pretendard-ExtraBold-3U7HNRI4.woff2";
+
+// src/assets/fonts/woff2/Pretendard-Black.woff2
+var Pretendard_Black_default = "./Pretendard-Black-JLVK6ESK.woff2";
+
+// src/styles/globalStyles.ts
+var globalStyles = css`
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_Thin_default}) format('woff2');
+    font-weight: 100;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_ExtraLight_default}) format('woff2');
+    font-weight: 200;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_Light_default}) format('woff2');
+    font-weight: 300;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_Regular_default}) format('woff2');
+    font-weight: 400;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_Medium_default}) format('woff2');
+    font-weight: 500;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_SemiBold_default}) format('woff2');
+    font-weight: 600;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_Bold_default}) format('woff2');
+    font-weight: 700;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_ExtraBold_default}) format('woff2');
+    font-weight: 800;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Pretendard';
+    src: url(${Pretendard_Black_default}) format('woff2');
+    font-weight: 900;
+    font-display: swap;
+  }
+
+  :root {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  * {
+    font-family:
+      'Pretendard',
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      'Helvetica Neue',
+      'Segoe UI',
+      'Apple SD Gothic Neo',
+      'Noto Sans KR',
+      'Malgun Gothic',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      sans-serif;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html,
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  button {
+    font-family: inherit;
+    border: 0;
+    outline: none;
+  }
+
+  input,
+  textarea {
+    outline: none;
+  }
+
+  textarea {
+    resize: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+`;
+var theme = {
+  colors,
+  typography,
+  spacing,
+  radius,
+  shadows
+};
+function BichonThemeProvider({ children }) {
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx(Global, { styles: globalStyles }),
+    children
+  ] });
+}
+var sizeStyles = {
+  large: {
+    width: "40px",
+    height: "40px"
+  },
+  medium: {
+    width: "32px",
+    height: "32px"
+  },
+  small: {
+    width: "24px",
+    height: "24px"
+  }
+};
+var propFilter = (prop) => !["$size"].includes(prop) && isPropValid(prop);
+var StyledAvatarRoot = styled8(RadixAvatar.Root, {
+  shouldForwardProp: propFilter
+})`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  width: ${({ $size }) => sizeStyles[$size].width};
+  height: ${({ $size }) => sizeStyles[$size].height};
+  border-radius: 50%;
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.lineDefault};
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+`;
+var StyledAvatarImage = styled8(RadixAvatar.Image)`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+`;
+var StyledAvatarFallback = styled8(RadixAvatar.Fallback)`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgLightGrey};
+  color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  text-transform: uppercase;
+`;
+var AvatarFallbackIcon = ({ size = 32 }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "mask",
+          {
+            id: "mask0_156_7568",
+            style: { maskType: "alpha" },
+            maskUnits: "userSpaceOnUse",
+            x: "5",
+            y: "8",
+            width: "22",
+            height: "35",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "16", cy: "14", r: "6", fill: "#6E7687" }),
+              /* @__PURE__ */ jsx("circle", { cx: "16", cy: "32", r: "11", fill: "#6E7687" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("g", { mask: "url(#mask0_156_7568)", children: /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "16", fill: "#B5B9C4" }) })
+      ]
+    }
+  );
+};
+var Avatar = forwardRef(
+  ({ size = "medium", src, alt, fallback, ...props }, ref) => {
+    const sizeMap = {
+      large: 40,
+      medium: 32,
+      small: 24
+    };
+    const iconSize = sizeMap[size];
+    return /* @__PURE__ */ jsxs(StyledAvatarRoot, { ref, $size: size, ...props, children: [
+      src && /* @__PURE__ */ jsx(StyledAvatarImage, { src, alt }),
+      /* @__PURE__ */ jsx(StyledAvatarFallback, { children: fallback || /* @__PURE__ */ jsx(AvatarFallbackIcon, { size: iconSize }) })
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+var sizeStyles2 = {
+  large: {
+    padding: "3.5px 12px",
+    typography: "bodyBaseMedium"
+    // md14 (14px)
+  },
+  medium: {
+    padding: "2px 10px",
+    typography: "bodySmMedium"
+    // md13 (13px)
+  },
+  small: {
+    padding: "1px 8px",
+    typography: "bodyXsMedium"
+    // md12 (12px)
+  }
+};
+var propFilter2 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid(prop);
+var StyledBadge = styled8("span", {
+  shouldForwardProp: propFilter2
+})`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  height: fit-content;
+  border-radius: 999px;
+  white-space: nowrap;
+
+  ${({ $size, theme: theme2 }) => {
+  const spec = sizeStyles2[$size];
+  const typo = theme2.typography[spec.typography];
+  return `
+      font-size: ${typo.fontSize};
+      line-height: ${typo.lineHeight};
+      font-weight: ${typo.fontWeight};
+      letter-spacing: ${typo.letterSpacing};
+      padding: ${spec.padding};
+    `;
+}}
+
+  ${({ $variant, theme: theme2 }) => {
+  if ($variant === "active") {
+    return `
+        background-color: ${theme2.colors.bgAccentSubtle};
+        color: ${theme2.colors.bgAccent};
+      `;
+  }
+  if ($variant === "neutral") {
+    return `
+        background-color: ${theme2.colors.bgMediumGrey};
+        color: ${theme2.colors.textSecondary};
+      `;
+  }
+  if ($variant === "warning") {
+    return `
+        background-color: ${theme2.colors.bgWarningSubtle};
+        color: ${theme2.colors.textWarning};
+      `;
+  }
+  return "";
+}}
+`;
+var Badge = forwardRef(
+  ({
+    variant = "neutral",
+    size = "medium",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      StyledBadge,
+      {
+        ref,
+        $variant: variant,
+        $size: size,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var sizeStyles3 = {
+  large: {
+    height: "8px"
+  },
+  medium: {
+    height: "5px"
+  },
+  small: {
+    height: "2px"
+  }
+};
+var propFilter3 = (prop) => !["$size", "$width"].includes(prop) && isPropValid(prop);
+var StyledProgressRoot = styled8(RadixProgress.Root, {
+  shouldForwardProp: propFilter3
+})`
+  position: relative;
+  overflow: hidden;
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgMediumGrey};
+  border-radius: 999px;
+  width: ${({ $width }) => $width ? typeof $width === "number" ? `${$width}px` : $width : "100%"};
+  height: ${({ $size }) => sizeStyles3[$size].height};
+
+  /* Indeterminate animation support */
+  &[data-state='indeterminate'] {
+    animation: progress-indeterminate 1.5s ease-in-out infinite;
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+`;
+var StyledProgressIndicator = styled8(RadixProgress.Indicator)`
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgAccent};
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+`;
+var Progress = forwardRef(
+  ({ size = "medium", value, width = "100%", duration, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      StyledProgressRoot,
+      {
+        ref,
+        value,
+        $size: size,
+        $width: width,
+        style: {
+          ...duration && { "--progress-duration": duration }
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          StyledProgressIndicator,
+          {
+            style: {
+              transform: `translateX(-${100 - (value ?? 0)}%)`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var sizeStyles4 = {
+  filled: {
+    large: {
+      borderRadius: "xl",
+      typography: "bodyLgMedium",
+      padding: "12px 16px"
+    },
+    medium: {
+      borderRadius: "lg",
+      typography: "bodyMdMedium",
+      padding: "8.5px 16px"
+    },
+    small: {
+      borderRadius: "lg",
+      typography: "bodyBaseMedium",
+      padding: "5.5px 12px"
+    }
+  },
+  warning: {
+    large: {
+      borderRadius: "xl",
+      typography: "bodyLgMedium",
+      padding: "12px 16px"
+    },
+    medium: {
+      borderRadius: "lg",
+      typography: "bodyMdMedium",
+      padding: "8.5px 16px"
+    },
+    small: {
+      borderRadius: "lg",
+      typography: "bodyBaseMedium",
+      padding: "5.5px 12px"
+    }
+  },
+  outlined: {
+    large: {
+      borderRadius: "xl",
+      typography: "bodyLgMedium",
+      padding: "12px 16px"
+    },
+    medium: {
+      borderRadius: "lg",
+      typography: "bodyMdMedium",
+      padding: "8.5px 16px"
+    },
+    small: {
+      borderRadius: "lg",
+      typography: "bodyBaseMedium",
+      padding: "5.5px 12px"
+    }
+  },
+  text: {
+    large: {
+      borderRadius: "xl",
+      typography: "bodyLgMedium",
+      padding: "12px 8px"
+    },
+    medium: {
+      borderRadius: "lg",
+      typography: "bodyMdMedium",
+      padding: "8.5px 8px"
+    },
+    small: {
+      borderRadius: "lg",
+      typography: "bodyBaseMedium",
+      padding: "8px 6px"
+    }
+  }
+};
+var propFilter4 = (prop) => !["$variant", "$size", "$width"].includes(prop) && isPropValid(prop);
+var StyledButton = styled8("button", {
+  shouldForwardProp: propFilter4
+})`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
+  width: ${({ $width }) => $width ? typeof $width === "number" ? `${$width}px` : $width : "fit-content"};
+  height: fit-content;
+
+  border: none;
+  outline: none;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+
+  transition: background-color 0.2s ease, color 0.2s ease,
+    border-color 0.2s ease, opacity 0.2s ease;
+
+  ${({ $variant, $size, theme: theme2 }) => {
+  const spec = sizeStyles4[$variant][$size];
+  const borderRadius = "borderRadius" in spec ? theme2.radius[spec.borderRadius] : "";
+  const typo = theme2.typography[spec.typography];
+  return `
+      font-size: ${typo.fontSize};
+      line-height: ${typo.lineHeight};
+      font-weight: ${typo.fontWeight};
+      letter-spacing: ${typo.letterSpacing};
+      padding: ${spec.padding};
+      ${borderRadius ? `border-radius: ${borderRadius};` : ""}
+    `;
+}}
+
+  ${({ $variant, theme: theme2 }) => {
+  if ($variant === "filled") {
+    return `
+        background-color: ${theme2.colors.bgAccent};
+        color: ${theme2.colors.bgWhite};
+        
+        /* Pressed & Hovered \uB3D9\uC77C \uCC98\uB9AC */
+        &:hover:not(:disabled),
+        &:active:not(:disabled) {
+          background-color: ${theme2.colors.bgAccentDark};
+          color: ${theme2.colors.bgWhite};
+        }
+      `;
+  }
+  if ($variant === "warning") {
+    return `
+        background-color: ${theme2.colors.bgWarning};
+        color: ${theme2.colors.bgWhite};
+        
+        &:hover:not(:disabled),
+        &:active:not(:disabled) {
+          background-color: ${theme2.colors.bgWarningDark};
+          color: ${theme2.colors.bgWhite};
+        }
+      `;
+  }
+  if ($variant === "outlined") {
+    return `
+        background-color: ${theme2.colors.bgWhite};
+        border: 1px solid ${theme2.colors.lineDefault};
+        color: ${theme2.colors.textPrimary};
+        
+        /* Pressed & Hovered: bg-medium-gray */
+        &:hover:not(:disabled),
+        &:active:not(:disabled) {
+          background-color: ${theme2.colors.bgMediumGrey};
+          border: 1px solid ${theme2.colors.lineDefault};
+          color: ${theme2.colors.textPrimary};
+        }
+      `;
+  }
+  return `
+      background-color: transparent;
+      color: ${theme2.colors.textPrimary};
+      
+      &:hover:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: ${theme2.colors.bgMediumGrey};
+        color: ${theme2.colors.textPrimary};
+      }
+    `;
+}}
+
+  /* Disabled 공통 처리 (opacity 50%) */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var Button = forwardRef(
+  ({
+    variant = "filled",
+    size = "medium",
+    width,
+    children,
+    type = "button",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      StyledButton,
+      {
+        ref,
+        $variant: variant,
+        $size: size,
+        $width: width,
+        type,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var StyledFlex = styled8.div`
+  display: flex;
+  flex-direction: ${({ direction }) => direction || "row"};
+  justify-content: ${({ justify }) => justify || "flex-start"};
+  align-items: ${({ alignItems }) => alignItems || "stretch"};
+  gap: ${({ gap }) => typeof gap === "number" ? `${gap}px` : gap || "0"};
+  width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "auto"};
+  height: ${({ height }) => typeof height === "number" ? `${height}px` : height || "auto"};
+  padding: ${({ padding }) => padding || "0"};
+`;
+var Flex = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(StyledFlex, { ref, ...props, children });
+  }
+);
+Flex.displayName = "Flex";
+var StyledTextFieldInput = styled8.input`
+  width: 100%;
+  padding: 12.5px 16px;
+  border: 1px solid
+    ${({ theme: theme2, $variant }) => {
+  if ($variant === "focus") return theme2.colors.lineAccent;
+  if ($variant === "warning") return theme2.colors.lineWarning;
+  return theme2.colors.lineDefault;
+}};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.xl};
+  background: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyLgRegular.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyLgRegular.lineHeight};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.bodyLgRegular.fontWeight};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.bodyLgRegular.letterSpacing};
+  opacity: ${({ $variant }) => $variant === "disabled" ? 0.5 : 1};
+
+  &::placeholder {
+    color: ${({ theme: theme2 }) => theme2.colors.textDisabled};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme: theme2, $variant }) => {
+  if ($variant === "warning") return theme2.colors.lineWarning;
+  return theme2.colors.lineAccent;
+}};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+var StyledTextFieldTextarea = styled8(TextareaAutosize, {
+  shouldForwardProp: (prop) => isPropValid(prop) || prop === "minRows" || prop === "maxRows"
+})`
+  width: 100%;
+  padding: 12.5px 16px;
+  border: 1px solid
+    ${({ theme: theme2, $variant }) => {
+  if ($variant === "focus") return theme2.colors.lineAccent;
+  if ($variant === "warning") return theme2.colors.lineWarning;
+  return theme2.colors.lineDefault;
+}};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.xl};
+  background: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyLgRegular.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyLgRegular.lineHeight};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.bodyLgRegular.fontWeight};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.bodyLgRegular.letterSpacing};
+  opacity: ${({ $variant }) => $variant === "disabled" ? 0.5 : 1};
+  resize: none;
+  font-family: inherit;
+
+  &::placeholder {
+    color: ${({ theme: theme2 }) => theme2.colors.textDisabled};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme: theme2, $variant }) => {
+  if ($variant === "warning") return theme2.colors.lineWarning;
+  return theme2.colors.lineAccent;
+}};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+var StyledHelperText = styled8.div`
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyXsRegular.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyXsRegular.lineHeight};
+  margin-top: 6px;
+  color: ${({ theme: theme2, $variant }) => {
+  if ($variant === "warning") return theme2.colors.textWarning;
+  return theme2.colors.textTertiary;
+}};
+  opacity: ${({ $variant }) => $variant === "disabled" ? 0.5 : 1};
+`;
+var TextField = forwardRef(
+  ({
+    multiline = false,
+    variant = "default",
+    width = "375px",
+    minRows = 2,
+    maxRows,
+    helperText,
+    showHelperText,
+    disabled,
+    ...props
+  }, ref) => {
+    const effectiveVariant = useMemo(() => {
+      if (disabled) return "disabled";
+      return variant;
+    }, [disabled, variant]);
+    const shouldShowHelperText = useMemo(() => {
+      if (showHelperText === false) return false;
+      return Boolean(helperText);
+    }, [showHelperText, helperText]);
+    const inputProps = useMemo(() => {
+      const baseProps = {
+        ...props,
+        $variant: effectiveVariant,
+        $width: "100%",
+        $multiline: multiline,
+        disabled: effectiveVariant === "disabled" || disabled
+      };
+      if (multiline) {
+        return {
+          ...baseProps,
+          minRows,
+          maxRows
+        };
+      }
+      return baseProps;
+    }, [props, effectiveVariant, multiline, minRows, maxRows, disabled]);
+    return /* @__PURE__ */ jsxs(Flex, { direction: "column", width, children: [
+      multiline ? /* @__PURE__ */ jsx(
+        StyledTextFieldTextarea,
+        {
+          ref,
+          ...inputProps
+        }
+      ) : /* @__PURE__ */ jsx(
+        StyledTextFieldInput,
+        {
+          ref,
+          ...inputProps
+        }
+      ),
+      shouldShowHelperText && /* @__PURE__ */ jsx(StyledHelperText, { $variant: effectiveVariant, children: helperText })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+var StyledToastViewport = styled8(ToastPrimitive.Viewport)`
+  position: fixed;
+  ${({ $position, $viewportOffset }) => $position === "top" ? `top: ${$viewportOffset}px;` : `bottom: ${$viewportOffset}px;`}
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
+  width: max-content;
+  max-width: 90vw;
+  z-index: 9999;
+`;
+var StyledToastRoot = styled8(ToastPrimitive.Root)`
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgDarkGrey};
+  color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.lg};
+  padding: ${({ theme: theme2 }) => `${theme2.spacing[3]} ${theme2.spacing[4]}`};
+  box-shadow: ${({ theme: theme2 }) => theme2.shadows.lg};
+  
+  &[data-state='open'] {
+    animation: slideIn 200ms ease-out;
+  }
+  
+  &[data-state='closed'] {
+    animation: slideOut 200ms ease-in;
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(${({ $position }) => $position === "top" ? "-100%" : "100%"});
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideOut {
+    from {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(${({ $position }) => $position === "top" ? "-100%" : "100%"});
+      opacity: 0;
+    }
+  }
+`;
+var StyledToastDescription = styled8(ToastPrimitive.Description)`
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontWeight};
+`;
+var ToastContext = createContext(null);
+function ToastProvider({
+  children,
+  position: defaultPosition = "bottom",
+  viewportOffset = 20,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const [content, setContent] = useState("");
+  const [duration, setDuration] = useState(3e3);
+  const [position, setPosition] = useState(defaultPosition);
+  return /* @__PURE__ */ jsx(
+    ToastContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        content,
+        setContent,
+        duration,
+        setDuration,
+        position,
+        setPosition
+      },
+      children: /* @__PURE__ */ jsxs(ToastPrimitive.Provider, { swipeDirection: "down", ...props, children: [
+        children,
+        /* @__PURE__ */ jsx(StyledToastRoot, { open, onOpenChange: setOpen, duration, $position: position, children: /* @__PURE__ */ jsx(StyledToastDescription, { children: content }) }),
+        /* @__PURE__ */ jsx(StyledToastViewport, { $position: position, $viewportOffset: viewportOffset })
+      ] })
+    }
+  );
+}
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+  const showToast = (message, options) => {
+    context.setContent(message);
+    if (options?.duration) context.setDuration(options.duration);
+    if (options?.position) context.setPosition(options.position);
+    context.setOpen(true);
+  };
+  return { showToast };
+}
+var StyledOverlay = styled8(DialogPrimitive.Overlay)`
+  background-color: ${({ theme: theme2 }) => theme2.colors.basic.black30};
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  
+  &[data-state='open'] {
+    animation: fadeIn 200ms ease-out;
+  }
+  
+  &[data-state='closed'] {
+    animation: fadeOut 200ms ease-in;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+`;
+var StyledContent = styled8(DialogPrimitive.Content)`
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  border-radius: ${({ theme: theme2 }) => theme2.radius["2xl"]};
+  box-shadow: ${({ theme: theme2 }) => theme2.shadows.modal};
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 400px;
+  max-height: 85vh;
+  padding: ${({ theme: theme2 }) => theme2.spacing[6]};
+  z-index: 9999;
+
+  &[data-state='open'] {
+    animation: contentShow 200ms ease-out;
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+var StyledHeader = styled8.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: ${({ theme: theme2 }) => theme2.spacing[4]};
+`;
+var StyledTitle = styled8(DialogPrimitive.Title)`
+  font-size: ${({ theme: theme2 }) => theme2.typography.headingXl.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.headingXl.lineHeight};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.headingXl.fontWeight};
+  color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
+  margin: 0;
+`;
+var StyledCloseButton = styled8.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme: theme2 }) => theme2.colors.textSecondary};
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
+  }
+`;
+var StyledBody = styled8.div`
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+  color: ${({ theme: theme2 }) => theme2.colors.textSecondary};
+  margin-bottom: ${({ theme: theme2 }) => theme2.spacing[6]};
+`;
+var StyledFooter = styled8.div`
+  display: flex;
+  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
+  justify-content: flex-end;
+`;
+function DialogRoot({ isOpen, onClose, children }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(StyledOverlay, {}),
+    /* @__PURE__ */ jsx(StyledContent, { children })
+  ] }) });
+}
+function DialogTitle({ children }) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ jsxs(StyledHeader, { children: [
+    /* @__PURE__ */ jsx(StyledTitle, { children }),
+    /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(StyledCloseButton, { children: /* @__PURE__ */ jsx(X, { size: 24, color: theme2.colors.textSecondary }) }) })
+  ] });
+}
+function DialogContent({ children }) {
+  return /* @__PURE__ */ jsx(StyledBody, { children });
+}
+function DialogFooter({ children }) {
+  return /* @__PURE__ */ jsx(StyledFooter, { children });
+}
+var Dialog = DialogRoot;
+Dialog.Title = DialogTitle;
+Dialog.Content = DialogContent;
+Dialog.Footer = DialogFooter;
+var StyledChatBubble = styled8.div`
+  padding: ${({ theme: theme2 }) => `${theme2.spacing[3]} ${theme2.spacing[4]}`};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.xl};
+  max-width: 70%;
+  width: fit-content;
+  word-wrap: break-word;
+  
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontWeight};
+
+  ${({ $variant, theme: theme2 }) => {
+  if ($variant === "user") {
+    return `
+        background-color: ${theme2.colors.bgAccent};
+        color: ${theme2.colors.bgWhite};
+        align-self: flex-end;
+        border-bottom-right-radius: ${theme2.radius.sm};
+      `;
+  }
+  return `
+      background-color: ${theme2.colors.bgMediumGrey};
+      color: ${theme2.colors.textPrimary};
+      align-self: flex-start;
+      border-bottom-left-radius: ${theme2.radius.sm};
+    `;
+}}
+`;
+function ChatBubble({ variant = "assistant", children }) {
+  return /* @__PURE__ */ jsx(StyledChatBubble, { $variant: variant, children });
+}
+var ICON_BUTTON_PADDING = {
+  large: "12px",
+  medium: "10px",
+  small: "8px"
+};
+var iconButtonSizeStyles = {
+  filled: {
+    large: {
+      ...sizeStyles4.filled.large,
+      padding: `${ICON_BUTTON_PADDING.large} ${ICON_BUTTON_PADDING.large}`
+    },
+    medium: {
+      ...sizeStyles4.filled.medium,
+      padding: `${ICON_BUTTON_PADDING.medium} ${ICON_BUTTON_PADDING.medium}`
+    },
+    small: {
+      ...sizeStyles4.filled.small,
+      padding: `${ICON_BUTTON_PADDING.small} ${ICON_BUTTON_PADDING.small}`
+    }
+  },
+  warning: {
+    large: {
+      ...sizeStyles4.warning.large,
+      padding: `${ICON_BUTTON_PADDING.large} ${ICON_BUTTON_PADDING.large}`
+    },
+    medium: {
+      ...sizeStyles4.warning.medium,
+      padding: `${ICON_BUTTON_PADDING.medium} ${ICON_BUTTON_PADDING.medium}`
+    },
+    small: {
+      ...sizeStyles4.warning.small,
+      padding: `${ICON_BUTTON_PADDING.small} ${ICON_BUTTON_PADDING.small}`
+    }
+  },
+  outlined: {
+    large: {
+      ...sizeStyles4.outlined.large,
+      padding: `${ICON_BUTTON_PADDING.large} ${ICON_BUTTON_PADDING.large}`
+    },
+    medium: {
+      ...sizeStyles4.outlined.medium,
+      padding: `${ICON_BUTTON_PADDING.medium} ${ICON_BUTTON_PADDING.medium}`
+    },
+    small: {
+      ...sizeStyles4.outlined.small,
+      padding: `${ICON_BUTTON_PADDING.small} ${ICON_BUTTON_PADDING.small}`
+    }
+  },
+  text: {
+    large: {
+      ...sizeStyles4.text.large,
+      padding: `${ICON_BUTTON_PADDING.large} ${ICON_BUTTON_PADDING.large}`
+    },
+    medium: {
+      ...sizeStyles4.text.medium,
+      padding: `${ICON_BUTTON_PADDING.medium} ${ICON_BUTTON_PADDING.medium}`
+    },
+    small: {
+      ...sizeStyles4.text.small,
+      padding: `${ICON_BUTTON_PADDING.small} ${ICON_BUTTON_PADDING.small}`
+    }
+  }
+};
+var propFilter5 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid(prop);
+var StyledIconButton = styled8("button", {
+  shouldForwardProp: propFilter5
+})`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+  width: fit-content;
+  height: fit-content;
+
+  /* 기본 초기화 */
+  border: none;
+  outline: none;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+
+  /* 애니메이션 */
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    opacity 0.2s ease;
+
+  /* 사이즈 & 타이포그래피 (Button과 동일, padding만 변환) */
+  ${({ $variant, $size, theme: theme2 }) => {
+  const spec = iconButtonSizeStyles[$variant][$size];
+  const borderRadius = "borderRadius" in spec ? theme2.radius[spec.borderRadius] : "";
+  const typo = theme2.typography[spec.typography];
+  return `
+      font-size: ${typo.fontSize};
+      line-height: ${typo.lineHeight};
+      font-weight: ${typo.fontWeight};
+      letter-spacing: ${typo.letterSpacing};
+      padding: ${spec.padding};
+      ${borderRadius ? `border-radius: ${borderRadius};` : ""}
+    `;
+}}
+
+  /* 색상 Variants (Button과 동일) */
+  ${({ $variant, theme: theme2 }) => {
+  if ($variant === "filled") {
+    return `
+        background-color: ${theme2.colors.bgAccent};
+        color: ${theme2.colors.bgWhite};
+        
+        &:hover:not(:disabled),
+        &:active:not(:disabled) {
+          background-color: ${theme2.colors.bgAccentDark};
+          color: ${theme2.colors.bgWhite};
+        }
+      `;
+  }
+  if ($variant === "warning") {
+    return `
+        background-color: ${theme2.colors.bgWarning};
+        color: ${theme2.colors.bgWhite};
+        
+        &:hover:not(:disabled),
+        &:active:not(:disabled) {
+          background-color: ${theme2.colors.bgWarningDark};
+          color: ${theme2.colors.bgWhite};
+        }
+      `;
+  }
+  if ($variant === "outlined") {
+    return `
+        background-color: ${theme2.colors.bgWhite};
+        border: 1px solid ${theme2.colors.lineDefault};
+        color: ${theme2.colors.textPrimary};
+        
+        /* Pressed & Hovered: bg-medium-gray */
+        &:hover:not(:disabled),
+        &:active:not(:disabled) {
+          background-color: ${theme2.colors.bgMediumGrey};
+          border: 1px solid ${theme2.colors.lineDefault};
+          color: ${theme2.colors.textPrimary};
+        }
+      `;
+  }
+  return `
+      background-color: transparent;
+      color: ${theme2.colors.textPrimary};
+      
+      &:hover:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: ${theme2.colors.bgMediumGrey};
+        color: ${theme2.colors.textPrimary};
+      }
+    `;
+}}
+
+  /* Disabled 공통 처리 */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var IconButton = forwardRef(
+  ({ variant = "filled", size = "medium", children, type = "button", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      StyledIconButton,
+      {
+        ref,
+        $variant: variant,
+        $size: size,
+        type,
+        ...props,
+        children
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var PaginationContainer = styled8.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme2 }) => theme2.spacing[1]};
+`;
+var PaginationPages = styled8.div`
+  display: flex;
+  align-items: center;
+  gap: 0;
+`;
+var StyledPaginationButton = styled8("button", {
+  shouldForwardProp: (prop) => prop !== "$active" && isPropValid(prop)
+})`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 8.5px;
+  border: none;
+  border-radius: ${({ theme: theme2 }) => theme2.radius.lg};
+  background-color: ${({ theme: theme2, $active }) => $active ? theme2.colors.bgMediumGrey : "transparent"};
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+
+  .pagination-button-inner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 23px;
+    height: 23px;
+    font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
+    line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+    font-weight: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontWeight};
+    color: ${({ theme: theme2, $active }) => $active ? theme2.colors.textPrimary : theme2.colors.textTertiary};
+  }
+
+  &:hover:not(:disabled) {
+    background-color: ${({ theme: theme2, $active }) => $active ? theme2.colors.bgMediumGrey : theme2.colors.bgLightGrey};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`;
+var DOTS = "...";
+var range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, idx) => idx + start);
+};
+function Pagination({
+  currentPage,
+  totalPage,
+  onPageChange,
+  siblingCount = 1
+}) {
+  const paginationRange = useMemo(() => {
+    if (totalPage <= 1) return [];
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= totalPage) {
+      return range(1, totalPage);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPage);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPage - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPage;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = range(1, leftItemCount);
+      return [...leftRange, DOTS, totalPage];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = range(totalPage - rightItemCount + 1, totalPage);
+      return [firstPageIndex, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+    return [];
+  }, [totalPage, currentPage, siblingCount]);
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleNextPage = () => {
+    if (currentPage < totalPage) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  if (currentPage === 0 || paginationRange.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        type: "button",
+        variant: "text",
+        size: "small",
+        onClick: handlePrevPage,
+        disabled: currentPage === 1,
+        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 24 })
+      }
+    ),
+    /* @__PURE__ */ jsx(PaginationPages, { children: paginationRange.map((pageNumber, index) => {
+      if (pageNumber === DOTS) {
+        return /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            variant: "text",
+            size: "small",
+            disabled: true,
+            children: /* @__PURE__ */ jsx(Ellipsis, { size: 24, strokeWidth: 1.5 })
+          },
+          `dots-${index}`
+        );
+      }
+      const isCurrent = pageNumber === currentPage;
+      return /* @__PURE__ */ jsx(
+        StyledPaginationButton,
+        {
+          type: "button",
+          $active: isCurrent,
+          onClick: () => onPageChange(pageNumber),
+          children: /* @__PURE__ */ jsx("span", { className: "pagination-button-inner", children: pageNumber })
+        },
+        pageNumber
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        type: "button",
+        variant: "text",
+        size: "small",
+        onClick: handleNextPage,
+        disabled: currentPage === totalPage,
+        children: /* @__PURE__ */ jsx(ChevronRight, { size: 24 })
+      }
+    )
+  ] });
+}
+var StyledCheckbox = styled8(CheckboxPrimitive.Root)`
+  width: 20px;
+  height: 20px;
+  border-radius: ${({ theme: theme2 }) => theme2.radius.sm};
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.lineDefault};
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${({ theme: theme2 }) => theme2.colors.lineAccent};
+  }
+
+  &[data-state='checked'] {
+    background-color: ${({ theme: theme2 }) => theme2.colors.bgAccent};
+    border-color: ${({ theme: theme2 }) => theme2.colors.bgAccent};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var StyledIndicator = styled8(CheckboxPrimitive.Indicator)`
+  color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var CheckboxContainer = styled8.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
+`;
+var Label = styled8.label`
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+  color: ${({ theme: theme2, $disabled }) => $disabled ? theme2.colors.textDisabled : theme2.colors.textPrimary};
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
+  user-select: none;
+`;
+var Checkbox = forwardRef(({ label, disabled, id, ...props }, ref) => {
+  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  return /* @__PURE__ */ jsxs(CheckboxContainer, { children: [
+    /* @__PURE__ */ jsx(StyledCheckbox, { ref, id: checkboxId, disabled, ...props, children: /* @__PURE__ */ jsx(StyledIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 3 }) }) }),
+    label && /* @__PURE__ */ jsx(Label, { htmlFor: checkboxId, $disabled: disabled, children: label })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+var StyledRadioGroup = styled8(RadioGroupPrimitive.Root)`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
+`;
+var RadioItem = styled8.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
+`;
+var StyledRadioButton = styled8(RadioGroupPrimitive.Item)`
+  width: 20px;
+  height: 20px;
+  border-radius: ${({ theme: theme2 }) => theme2.radius.full};
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.lineDefault};
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${({ theme: theme2 }) => theme2.colors.lineAccent};
+  }
+
+  &[data-state='checked'] {
+    border-color: ${({ theme: theme2 }) => theme2.colors.bgAccent};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var StyledIndicator2 = styled8(RadioGroupPrimitive.Indicator)`
+  width: 10px;
+  height: 10px;
+  border-radius: ${({ theme: theme2 }) => theme2.radius.full};
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgAccent};
+`;
+var Label2 = styled8.label`
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+  color: ${({ theme: theme2, $disabled }) => $disabled ? theme2.colors.textDisabled : theme2.colors.textPrimary};
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
+  user-select: none;
+`;
+var RadioButton = forwardRef(({ options, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(StyledRadioGroup, { ref, ...props, children: options.map((option) => {
+    const radioId = `radio-${option.value}`;
+    return /* @__PURE__ */ jsxs(RadioItem, { children: [
+      /* @__PURE__ */ jsx(
+        StyledRadioButton,
+        {
+          value: option.value,
+          id: radioId,
+          disabled: option.disabled,
+          children: /* @__PURE__ */ jsx(StyledIndicator2, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(Label2, { htmlFor: radioId, $disabled: option.disabled, children: option.label })
+    ] }, option.value);
+  }) });
+});
+RadioButton.displayName = "RadioButton";
+var StyledMenuContent = styled8(DropdownMenu2.Content)`
+  min-width: 200px;
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.lg};
+  padding: ${({ theme: theme2 }) => theme2.spacing[1]};
+  box-shadow: ${({ theme: theme2 }) => theme2.shadows.lg};
+  z-index: 9999;
+
+  &[data-state='open'] {
+    animation: fadeIn 200ms ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+var StyledMenuItem = styled8(DropdownMenu2.Item)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme: theme2 }) => `${theme2.spacing[2]} ${theme2.spacing[3]}`};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.md};
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+  color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  width: ${({ $width }) => $width ? typeof $width === "number" ? `${$width}px` : $width : "auto"};
+
+  &:hover,
+  &:focus {
+    background-color: ${({ theme: theme2 }) => theme2.colors.bgMediumGrey};
+  }
+
+  &[data-disabled] {
+    color: ${({ theme: theme2 }) => theme2.colors.textDisabled};
+    pointer-events: none;
+  }
+`;
+var MenuItemLeft = styled8.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
+`;
+var MenuItemText = styled8.span``;
+var MenuLeadingIcon = styled8.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+`;
+var MenuTrailingIcon = styled8.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
+`;
+var Menu = DropdownMenu2.Root;
+var MenuTrigger = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { ref, ...props, asChild: true, children }));
+MenuTrigger.displayName = "MenuTrigger";
+var MenuContent = forwardRef(({ children, sideOffset = 5, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(StyledMenuContent, { ref, sideOffset, ...props, children }) }));
+MenuContent.displayName = "MenuContent";
+var MenuItem = forwardRef(
+  ({ leadingIcon, trailingIcon, width, children, ...props }, ref) => /* @__PURE__ */ jsxs(StyledMenuItem, { ref, $width: width, ...props, children: [
+    /* @__PURE__ */ jsxs(MenuItemLeft, { children: [
+      leadingIcon && /* @__PURE__ */ jsx(MenuLeadingIcon, { children: leadingIcon }),
+      /* @__PURE__ */ jsx(MenuItemText, { children })
+    ] }),
+    trailingIcon && /* @__PURE__ */ jsx(MenuTrailingIcon, { children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 }) })
+  ] })
+);
+MenuItem.displayName = "MenuItem";
+var StyledTooltipContent = styled8(TooltipPrimitive2.Content)`
+  background-color: ${({ theme: theme2 }) => theme2.colors.bgDarkGrey};
+  color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.md};
+  padding: ${({ theme: theme2 }) => `${theme2.spacing[1]} ${theme2.spacing[2]}`};
+  font-size: ${({ theme: theme2 }) => theme2.typography.bodyXsMedium.fontSize};
+  line-height: ${({ theme: theme2 }) => theme2.typography.bodyXsMedium.lineHeight};
+  box-shadow: ${({ theme: theme2 }) => theme2.shadows.base};
+  z-index: 9999;
+  max-width: 300px;
+
+  &[data-state='delayed-open'] {
+    animation: fadeIn 200ms ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+var StyledArrow = styled8(TooltipPrimitive2.Arrow)`
+  fill: ${({ theme: theme2 }) => theme2.colors.bgDarkGrey};
+`;
+var TooltipProvider = forwardRef(
+  ({ children, delayDuration = 300, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive2.Provider, { delayDuration, ...props, children })
+);
+TooltipProvider.displayName = "TooltipProvider";
+var Tooltip = TooltipPrimitive2.Root;
+var TooltipTrigger = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive2.Trigger, { ref, ...props, asChild: true, children }));
+TooltipTrigger.displayName = "TooltipTrigger";
+var TooltipContent = forwardRef(
+  ({ children, sideOffset = 5, showArrow = true, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive2.Portal, { children: /* @__PURE__ */ jsxs(StyledTooltipContent, { ref, sideOffset, ...props, children: [
+    children,
+    showArrow && /* @__PURE__ */ jsx(StyledArrow, {})
+  ] }) })
+);
+TooltipContent.displayName = "TooltipContent";
+
+export { Avatar, Badge, BichonThemeProvider, Button, ChatBubble, Checkbox, Dialog, Flex, IconButton, Menu, MenuContent, MenuItem, MenuTrigger, Pagination, Progress, RadioButton, TextField, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, colors, componentSize, fontSize, fontWeight, letterSpacing, lineHeight, radius, semanticSpacing, shadows, spacing, typography, useToast };