@bichon/ds 0.0.3 → 0.0.4

package/dist/index.cjs

@@ -1,2186 +0,0 @@
-'use strict';
-
-var react = require('@emotion/react');
-var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('react');
-var styled18 = require('@emotion/styled');
-var isPropValid8 = require('@emotion/is-prop-valid');
-var RadixAvatar = require('@radix-ui/react-avatar');
-var RadixProgress = require('@radix-ui/react-progress');
-var lucideReact = require('lucide-react');
-var TextareaAutosize = require('react-textarea-autosize');
-var ToastPrimitive = require('@radix-ui/react-toast');
-var DialogPrimitive = require('@radix-ui/react-dialog');
-var CheckboxPrimitive = require('@radix-ui/react-checkbox');
-var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
-var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
-var TooltipPrimitive2 = require('@radix-ui/react-tooltip');
-var ToggleGroup = require('@radix-ui/react-toggle-group');
-var TabsPrimitive = require('@radix-ui/react-tabs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var styled18__default = /*#__PURE__*/_interopDefault(styled18);
-var isPropValid8__default = /*#__PURE__*/_interopDefault(isPropValid8);
-var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
-var RadixProgress__namespace = /*#__PURE__*/_interopNamespace(RadixProgress);
-var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
-var ToastPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
-var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
-var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
-var DropdownMenu2__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu2);
-var TooltipPrimitive2__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive2);
-var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
-var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
-
-// 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/typo.ts
-var typo = {
-  Sb_32: `
-    font-size: 32px;
-    line-height: 42px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  `,
-  Sb_24: `
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  `,
-  Sb_20: `
-    font-size: 20px;
-    line-height: 29px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  `,
-  Sb_18: `
-    font-size: 18px;
-    line-height: 27px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  `,
-  Sb_16: `
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  `,
-  Sb_14: `
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  `,
-  Md_18: `
-    font-size: 18px;
-    line-height: 27px;
-    font-weight: 500;
-    letter-spacing: -0.02em;
-  `,
-  Md_16: `
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-    letter-spacing: -0.02em;
-  `,
-  Md_15: `
-    font-size: 15px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: -0.02em;
-  `,
-  Md_14: `
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 500;
-    letter-spacing: -0.02em;
-  `,
-  Md_13: `
-    font-size: 13px;
-    line-height: 19.5px;
-    font-weight: 500;
-    letter-spacing: -0.02em;
-  `,
-  Md_12: `
-    font-size: 12px;
-    line-height: 18px;
-    font-weight: 500;
-    letter-spacing: -0.02em;
-  `,
-  Rg_16: `
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    letter-spacing: -0.02em;
-  `,
-  Rg_15: `
-    font-size: 15px;
-    line-height: 22.5px;
-    font-weight: 400;
-    letter-spacing: -0.02em;
-  `,
-  Rg_14: `
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 400;
-    letter-spacing: -0.02em;
-  `,
-  Rg_13: `
-    font-size: 13px;
-    line-height: 19.5px;
-    font-weight: 400;
-    letter-spacing: -0.02em;
-  `,
-  Rg_12: `
-    font-size: 12px;
-    line-height: 18px;
-    font-weight: 400;
-    letter-spacing: -0.02em;
-  `
-};
-
-// 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 = react.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,
-  typo,
-  spacing,
-  radius,
-  shadows
-};
-function BichonThemeProvider({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.ThemeProvider, { theme, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.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) && isPropValid8__default.default(prop);
-var StyledAvatarRoot = styled18__default.default(RadixAvatar__namespace.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 = styled18__default.default(RadixAvatar__namespace.Image)`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: inherit;
-`;
-var StyledAvatarFallback = styled18__default.default(RadixAvatar__namespace.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__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "mask",
-          {
-            id: "mask0_156_7568",
-            style: { maskType: "alpha" },
-            maskUnits: "userSpaceOnUse",
-            x: "5",
-            y: "8",
-            width: "22",
-            height: "35",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "14", r: "6", fill: "#6E7687" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "32", r: "11", fill: "#6E7687" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("g", { mask: "url(#mask0_156_7568)", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "16", fill: "#B5B9C4" }) })
-      ]
-    }
-  );
-};
-var Avatar = react$1.forwardRef(
-  ({ size = "medium", src, alt, fallback, ...props }, ref) => {
-    const sizeMap = {
-      large: 40,
-      medium: 32,
-      small: 24
-    };
-    const iconSize = sizeMap[size];
-    return /* @__PURE__ */ jsxRuntime.jsxs(StyledAvatarRoot, { ref, $size: size, ...props, children: [
-      src && /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarImage, { src, alt }),
-      /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarFallback, { children: fallback || /* @__PURE__ */ jsxRuntime.jsx(AvatarFallbackIcon, { size: iconSize }) })
-    ] });
-  }
-);
-Avatar.displayName = "Avatar";
-var sizeStyles2 = {
-  large: {
-    padding: "3.5px 12px",
-    typography: "Md_14"
-  },
-  medium: {
-    padding: "2px 10px",
-    typography: "Md_13"
-  },
-  small: {
-    padding: "1px 8px",
-    typography: "Md_12"
-  }
-};
-var propFilter2 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid8__default.default(prop);
-var StyledBadge = styled18__default.default("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];
-  return `
-      ${theme2.typo[spec.typography]}
-      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 = react$1.forwardRef(
-  ({
-    variant = "neutral",
-    size = "medium",
-    children,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.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) && isPropValid8__default.default(prop);
-var StyledProgressRoot = styled18__default.default(RadixProgress__namespace.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 = styled18__default.default(RadixProgress__namespace.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 = react$1.forwardRef(
-  ({ size = "medium", value, width = "100%", duration, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledProgressRoot,
-      {
-        ref,
-        value,
-        $size: size,
-        $width: width,
-        style: {
-          ...duration && { "--progress-duration": duration }
-        },
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          StyledProgressIndicator,
-          {
-            style: {
-              transform: `translateX(-${100 - (value ?? 0)}%)`
-            }
-          }
-        )
-      }
-    );
-  }
-);
-Progress.displayName = "Progress";
-var sizeStyles4 = {
-  filled: {
-    large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
-    medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
-    small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
-  },
-  warning: {
-    large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
-    medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
-    small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
-  },
-  outlined: {
-    large: { borderRadius: "xl", typography: "Md_16", padding: "12px 16px" },
-    medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 16px" },
-    small: { borderRadius: "lg", typography: "Md_14", padding: "5.5px 12px" }
-  },
-  text: {
-    large: { borderRadius: "xl", typography: "Md_16", padding: "12px 8px" },
-    medium: { borderRadius: "lg", typography: "Md_15", padding: "8.5px 8px" },
-    small: { borderRadius: "lg", typography: "Md_14", padding: "8px 6px" }
-  }
-};
-var propFilter4 = (prop) => !["$variant", "$size", "$width", "$active"].includes(prop) && isPropValid8__default.default(prop);
-var StyledButton = styled18__default.default("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] : "";
-  return `
-      ${theme2.typo[spec.typography]}
-      padding: ${spec.padding};
-      ${borderRadius ? `border-radius: ${borderRadius};` : ""}
-    `;
-}}
-
-  ${({ $variant, $active, theme: theme2 }) => {
-  const activeSelector = $active ? `&, ` : "";
-  const hoverActive = `&:hover:not(:disabled), &:active:not(:disabled)`;
-  if ($variant === "filled") {
-    return `
-        background-color: ${$active ? theme2.colors.bgAccentDark : theme2.colors.bgAccent};
-        color: ${theme2.colors.bgWhite};
-        ${activeSelector}${hoverActive} {
-          background-color: ${theme2.colors.bgAccentDark};
-          color: ${theme2.colors.bgWhite};
-        }
-      `;
-  }
-  if ($variant === "warning") {
-    return `
-        background-color: ${$active ? theme2.colors.bgWarningDark : theme2.colors.bgWarning};
-        color: ${theme2.colors.bgWhite};
-        ${activeSelector}${hoverActive} {
-          background-color: ${theme2.colors.bgWarningDark};
-          color: ${theme2.colors.bgWhite};
-        }
-      `;
-  }
-  if ($variant === "outlined") {
-    return `
-        background-color: ${$active ? theme2.colors.bgMediumGrey : theme2.colors.bgWhite};
-        border: 1px solid ${theme2.colors.lineDefault};
-        color: ${theme2.colors.textPrimary};
-        ${activeSelector}${hoverActive} {
-          background-color: ${theme2.colors.bgMediumGrey};
-          border: 1px solid ${theme2.colors.lineDefault};
-          color: ${theme2.colors.textPrimary};
-        }
-      `;
-  }
-  return `
-      background-color: ${$active ? theme2.colors.bgMediumGrey : "transparent"};
-      color: ${theme2.colors.textPrimary};
-      ${activeSelector}${hoverActive} {
-        background-color: ${theme2.colors.bgMediumGrey};
-        color: ${theme2.colors.textPrimary};
-      }
-    `;
-}}
-
-  /* Disabled 공통 처리 (opacity 50%) */
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-var Button = react$1.forwardRef(
-  ({
-    variant = "filled",
-    size = "medium",
-    width,
-    active,
-    children,
-    type = "button",
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledButton,
-      {
-        ref,
-        $variant: variant,
-        $size: size,
-        $width: width,
-        $active: active,
-        type,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var StyledFlex = styled18__default.default.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 = react$1.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(StyledFlex, { ref, ...props, children });
-  }
-);
-Flex.displayName = "Flex";
-var StyledTextFieldInputWrapper = styled18__default.default.div`
-  position: relative;
-  width: 100%;
-`;
-var StyledLeadingIconWrapper = styled18__default.default.div`
-  position: absolute;
-  left: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-`;
-var StyledTextFieldInput = styled18__default.default.input`
-  width: 100%;
-  padding: ${({ $hasLeadingIcon }) => $hasLeadingIcon ? "12.5px 16px 12.5px 44px" : "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};
-  ${({ theme: theme2 }) => theme2.typo.Rg_16}
-  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 = styled18__default.default(TextareaAutosize__default.default, {
-  shouldForwardProp: (prop) => isPropValid8__default.default(prop) || prop === "minRows" || prop === "maxRows"
-})`
-  width: 100%;
-  padding: ${({ $hasLeadingIcon }) => $hasLeadingIcon ? "12.5px 16px 12.5px 44px" : "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};
-  ${({ theme: theme2 }) => theme2.typo.Rg_16}
-  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 = styled18__default.default.div`
-  ${({ theme: theme2 }) => theme2.typo.Rg_12}
-  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 = react$1.forwardRef(
-  ({
-    multiline = false,
-    variant = "default",
-    width = "375px",
-    searchField = false,
-    minRows = 2,
-    maxRows,
-    helperText,
-    showHelperText,
-    disabled,
-    ...props
-  }, ref) => {
-    const enableSearch = !multiline && searchField;
-    const effectiveVariant = react$1.useMemo(() => {
-      if (disabled) return "disabled";
-      return variant;
-    }, [disabled, variant]);
-    const shouldShowHelperText = react$1.useMemo(() => {
-      if (showHelperText === false) return false;
-      return Boolean(helperText);
-    }, [showHelperText, helperText]);
-    const inputProps = react$1.useMemo(() => {
-      const baseProps = {
-        ...props,
-        $variant: effectiveVariant,
-        $width: "100%",
-        $multiline: multiline,
-        $hasLeadingIcon: enableSearch,
-        disabled: effectiveVariant === "disabled" || disabled
-      };
-      if (multiline) {
-        return {
-          ...baseProps,
-          minRows,
-          maxRows
-        };
-      }
-      return baseProps;
-    }, [
-      props,
-      effectiveVariant,
-      multiline,
-      minRows,
-      maxRows,
-      disabled,
-      enableSearch
-    ]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", width, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(StyledTextFieldInputWrapper, { children: [
-        enableSearch && /* @__PURE__ */ jsxRuntime.jsx(StyledLeadingIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 20 }) }),
-        multiline ? /* @__PURE__ */ jsxRuntime.jsx(
-          StyledTextFieldTextarea,
-          {
-            ref,
-            ...inputProps
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          StyledTextFieldInput,
-          {
-            ref,
-            ...inputProps
-          }
-        )
-      ] }),
-      shouldShowHelperText && /* @__PURE__ */ jsxRuntime.jsx(StyledHelperText, { $variant: effectiveVariant, children: helperText })
-    ] });
-  }
-);
-TextField.displayName = "TextField";
-var StyledToastViewport = styled18__default.default(ToastPrimitive__namespace.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 = styled18__default.default(ToastPrimitive__namespace.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 = styled18__default.default(ToastPrimitive__namespace.Description)`
-  ${({ theme: theme2 }) => theme2.typo.Md_14}
-`;
-var ToastContext = react$1.createContext(null);
-function ToastProvider({
-  children,
-  position: defaultPosition = "bottom",
-  viewportOffset = 20,
-  ...props
-}) {
-  const [open, setOpen] = react$1.useState(false);
-  const [content, setContent] = react$1.useState("");
-  const [duration, setDuration] = react$1.useState(3e3);
-  const [position, setPosition] = react$1.useState(defaultPosition);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToastContext.Provider,
-    {
-      value: {
-        open,
-        setOpen,
-        content,
-        setContent,
-        duration,
-        setDuration,
-        position,
-        setPosition
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ToastPrimitive__namespace.Provider, { swipeDirection: "down", ...props, children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(StyledToastRoot, { open, onOpenChange: setOpen, duration, $position: position, children: /* @__PURE__ */ jsxRuntime.jsx(StyledToastDescription, { children: content }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(StyledToastViewport, { $position: position, $viewportOffset: viewportOffset })
-      ] })
-    }
-  );
-}
-function useToast() {
-  const context = react$1.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 = styled18__default.default(DialogPrimitive__namespace.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 = styled18__default.default(DialogPrimitive__namespace.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 = styled18__default.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: ${({ theme: theme2 }) => theme2.spacing[4]};
-`;
-var StyledTitle = styled18__default.default(DialogPrimitive__namespace.Title)`
-  ${({ theme: theme2 }) => theme2.typo.Sb_18}
-  color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
-  margin: 0;
-`;
-var StyledCloseButton = styled18__default.default.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 = styled18__default.default.div`
-  ${({ theme: theme2 }) => theme2.typo.Md_14}
-  color: ${({ theme: theme2 }) => theme2.colors.textSecondary};
-  margin-bottom: ${({ theme: theme2 }) => theme2.spacing[6]};
-`;
-var StyledFooter = styled18__default.default.div`
-  display: flex;
-  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
-  justify-content: flex-end;
-`;
-function DialogRoot({ isOpen, onClose, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(StyledContent, { children })
-  ] }) });
-}
-function DialogTitle({ children }) {
-  const theme2 = react.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledHeader, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledTitle, { children }),
-    /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCloseButton, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 24, color: theme2.colors.textSecondary }) }) })
-  ] });
-}
-function DialogContent({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { children });
-}
-function DialogFooter({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledFooter, { children });
-}
-var Dialog = DialogRoot;
-Dialog.Title = DialogTitle;
-Dialog.Content = DialogContent;
-Dialog.Footer = DialogFooter;
-var StyledChatBubble = styled18__default.default.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;
-  
-  ${({ theme: theme2 }) => theme2.typo.Md_14}
-
-  ${({ $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__ */ jsxRuntime.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) && isPropValid8__default.default(prop);
-var StyledIconButton = styled18__default.default("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] : "";
-  return `
-      ${theme2.typo[spec.typography]}
-      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 = react$1.forwardRef(
-  ({ variant = "filled", size = "medium", children, type = "button", ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledIconButton,
-      {
-        ref,
-        $variant: variant,
-        $size: size,
-        type,
-        ...props,
-        children
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
-var PaginationContainer = styled18__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme2 }) => theme2.spacing[1]};
-`;
-var PaginationPages = styled18__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: 0;
-`;
-var StyledPaginationButton = styled18__default.default("button", {
-  shouldForwardProp: (prop) => prop !== "$active" && isPropValid8__default.default(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;
-    ${({ theme: theme2 }) => theme2.typo.Md_14}
-    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 = react$1.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__ */ jsxRuntime.jsxs(PaginationContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        type: "button",
-        variant: "text",
-        size: "small",
-        onClick: handlePrevPage,
-        disabled: currentPage === 1,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 24 })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(PaginationPages, { children: paginationRange.map((pageNumber, index) => {
-      if (pageNumber === DOTS) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton,
-          {
-            type: "button",
-            variant: "text",
-            size: "small",
-            disabled: true,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { size: 24, strokeWidth: 1.5 })
-          },
-          `dots-${index}`
-        );
-      }
-      const isCurrent = pageNumber === currentPage;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        StyledPaginationButton,
-        {
-          type: "button",
-          $active: isCurrent,
-          onClick: () => onPageChange(pageNumber),
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pagination-button-inner", children: pageNumber })
-        },
-        pageNumber
-      );
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        type: "button",
-        variant: "text",
-        size: "small",
-        onClick: handleNextPage,
-        disabled: currentPage === totalPage,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 24 })
-      }
-    )
-  ] });
-}
-var StyledCheckbox = styled18__default.default(CheckboxPrimitive__namespace.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 = styled18__default.default(CheckboxPrimitive__namespace.Indicator)`
-  color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-var CheckboxContainer = styled18__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
-`;
-var Label = styled18__default.default.label`
-  ${({ theme: theme2 }) => theme2.typo.Md_14}
-  color: ${({ theme: theme2, $disabled }) => $disabled ? theme2.colors.textDisabled : theme2.colors.textPrimary};
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  user-select: none;
-`;
-var Checkbox = react$1.forwardRef(({ label, disabled, id, ...props }, ref) => {
-  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(CheckboxContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledCheckbox, { ref, id: checkboxId, disabled, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(StyledIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16, strokeWidth: 3 }) }) }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: checkboxId, $disabled: disabled, children: label })
-  ] });
-});
-Checkbox.displayName = "Checkbox";
-var StyledRadioGroup = styled18__default.default(RadioGroupPrimitive__namespace.Root)`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
-`;
-var RadioItem = styled18__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
-`;
-var StyledRadioButton = styled18__default.default(RadioGroupPrimitive__namespace.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 = styled18__default.default(RadioGroupPrimitive__namespace.Indicator)`
-  width: 10px;
-  height: 10px;
-  border-radius: ${({ theme: theme2 }) => theme2.radius.full};
-  background-color: ${({ theme: theme2 }) => theme2.colors.bgAccent};
-`;
-var Label2 = styled18__default.default.label`
-  ${({ theme: theme2 }) => theme2.typo.Md_14}
-  color: ${({ theme: theme2, $disabled }) => $disabled ? theme2.colors.textDisabled : theme2.colors.textPrimary};
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  user-select: none;
-`;
-var RadioButton = react$1.forwardRef(({ options, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledRadioGroup, { ref, ...props, children: options.map((option) => {
-    const radioId = `radio-${option.value}`;
-    return /* @__PURE__ */ jsxRuntime.jsxs(RadioItem, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StyledRadioButton,
-        {
-          value: option.value,
-          id: radioId,
-          disabled: option.disabled,
-          children: /* @__PURE__ */ jsxRuntime.jsx(StyledIndicator2, {})
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: radioId, $disabled: option.disabled, children: option.label })
-    ] }, option.value);
-  }) });
-});
-RadioButton.displayName = "RadioButton";
-var StyledMenuContent = styled18__default.default(DropdownMenu2__namespace.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 = styled18__default.default(DropdownMenu2__namespace.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};
-  ${({ theme: theme2 }) => theme2.typo.Md_14}
-  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 = styled18__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
-`;
-var MenuItemText = styled18__default.default.span``;
-var MenuLeadingIcon = styled18__default.default.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-`;
-var MenuTrailingIcon = styled18__default.default.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
-`;
-var Menu = DropdownMenu2__namespace.Root;
-var MenuTrigger = react$1.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Trigger, { ref, ...props, asChild: true, children }));
-MenuTrigger.displayName = "MenuTrigger";
-var MenuContent = react$1.forwardRef(({ children, sideOffset = 5, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledMenuContent, { ref, sideOffset, ...props, children }) }));
-MenuContent.displayName = "MenuContent";
-var MenuItem = react$1.forwardRef(
-  ({ leadingIcon, trailingIcon, width, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(StyledMenuItem, { ref, $width: width, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(MenuItemLeft, { children: [
-      leadingIcon && /* @__PURE__ */ jsxRuntime.jsx(MenuLeadingIcon, { children: leadingIcon }),
-      /* @__PURE__ */ jsxRuntime.jsx(MenuItemText, { children })
-    ] }),
-    trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(MenuTrailingIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 }) })
-  ] })
-);
-MenuItem.displayName = "MenuItem";
-var StyledTooltipContent = styled18__default.default(TooltipPrimitive2__namespace.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]}`};
-  ${({ theme: theme2 }) => theme2.typo.Md_12}
-  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 = styled18__default.default(TooltipPrimitive2__namespace.Arrow)`
-  fill: ${({ theme: theme2 }) => theme2.colors.bgDarkGrey};
-`;
-var TooltipProvider = react$1.forwardRef(
-  ({ children, delayDuration = 300, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive2__namespace.Provider, { delayDuration, ...props, children })
-);
-TooltipProvider.displayName = "TooltipProvider";
-var Tooltip = TooltipPrimitive2__namespace.Root;
-var TooltipTrigger = react$1.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive2__namespace.Trigger, { ref, ...props, asChild: true, children }));
-TooltipTrigger.displayName = "TooltipTrigger";
-var TooltipContent = react$1.forwardRef(
-  ({ children, sideOffset = 5, showArrow = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledTooltipContent, { ref, sideOffset, ...props, children: [
-    children,
-    showArrow && /* @__PURE__ */ jsxRuntime.jsx(StyledArrow, {})
-  ] }) })
-);
-TooltipContent.displayName = "TooltipContent";
-var itemSizeStyles = {
-  large: {
-    padding: "8.5px 17.5px",
-    typography: "Md_15"
-  },
-  small: {
-    padding: "3.5px 19.5px",
-    typography: "Md_14"
-  }
-};
-var rootPropFilter = (prop) => !["$size"].includes(prop) && isPropValid8__default.default(prop);
-var StyledSegmentedControlRoot = styled18__default.default(
-  ToggleGroup__namespace.Root,
-  { shouldForwardProp: rootPropFilter }
-)`
-  display: inline-flex;
-  padding: 4px;
-  border-radius: 12px;
-  background-color: ${({ theme: theme2 }) => theme2.colors.bgMediumGrey};
-  box-shadow: ${({ theme: theme2 }) => theme2.shadows.base};
-  width: fit-content;
-`;
-var itemPropFilter = (prop) => !["$size"].includes(prop) && isPropValid8__default.default(prop);
-var StyledSegmentedControlItem = styled18__default.default(
-  ToggleGroup__namespace.Item,
-  { shouldForwardProp: itemPropFilter }
-)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  border-radius: 12px;
-  white-space: nowrap;
-  font-family: inherit;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease;
-
-  ${({ $size, theme: theme2 }) => {
-  const spec = itemSizeStyles[$size];
-  return `
-      padding: ${spec.padding};
-      ${theme2.typo[spec.typography]}
-    `;
-}}
-
-  color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
-  background-color: transparent;
-
-  &[data-state='on'] {
-    color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
-    background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
-  }
-
-  &:hover:not([data-state='on']) {
-    color: ${({ theme: theme2 }) => theme2.colors.textSecondary};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-var SegmentedControlSizeContext = react$1.createContext("large");
-var SegmentedControlRoot = react$1.forwardRef(({ size = "large", children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
-  StyledSegmentedControlRoot,
-  {
-    ref,
-    type: "single",
-    $size: size,
-    ...props,
-    children
-  }
-) }));
-SegmentedControlRoot.displayName = "SegmentedControlRoot";
-var SegmentedControlItem = react$1.forwardRef(({ children, ...props }, ref) => {
-  const size = react$1.useContext(SegmentedControlSizeContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledSegmentedControlItem, { ref, $size: size, ...props, children });
-});
-SegmentedControlItem.displayName = "SegmentedControlItem";
-var propFilter6 = (prop) => isPropValid8__default.default(prop);
-var StyledTabList = styled18__default.default(TabsPrimitive__namespace.List, {
-  shouldForwardProp: propFilter6
-})`
-  display: flex;
-  border-bottom: 1px solid ${({ theme: theme2 }) => theme2.colors.lineDefault};
-  width: fit-content;
-`;
-var StyledTabTrigger = styled18__default.default(TabsPrimitive__namespace.Trigger, {
-  shouldForwardProp: propFilter6
-})`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 16px;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  background: transparent;
-  font-family: inherit;
-  ${({ theme: theme2 }) => theme2.typo.Sb_16}
-  color: ${({ theme: theme2 }) => theme2.colors.textTertiary};
-  position: relative;
-  transition: color 0.2s ease;
-
-  &[data-state="active"] {
-    color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
-  }
-
-  &[data-state="active"]::after {
-    content: "";
-    position: absolute;
-    bottom: -1px;
-    left: 4px;
-    right: 4px;
-    height: 2px;
-    background-color: ${({ theme: theme2 }) => theme2.colors.bgBlack};
-    border-radius: 100px;
-  }
-
-  &:hover:not([data-state="active"]) {
-    color: ${({ theme: theme2 }) => theme2.colors.textSecondary};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-var StyledTabContent = styled18__default.default(TabsPrimitive__namespace.Content, {
-  shouldForwardProp: propFilter6
-})`
-  outline: none;
-`;
-var TabRoot = react$1.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props, children })
-);
-TabRoot.displayName = "TabRoot";
-var TabList = react$1.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTabList, { ref, ...props, children })
-);
-TabList.displayName = "TabList";
-var TabTrigger = react$1.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTabTrigger, { ref, ...props, children })
-);
-TabTrigger.displayName = "TabTrigger";
-var TabContent = react$1.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTabContent, { ref, ...props, children })
-);
-TabContent.displayName = "TabContent";
-var propFilter7 = (prop) => isPropValid8__default.default(prop);
-var StyledTableRoot = styled18__default.default("div", {
-  shouldForwardProp: propFilter7
-})`
-  background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
-  border-radius: ${({ theme: theme2 }) => theme2.radius.lg};
-  overflow: hidden;
-  width: fit-content;
-`;
-var StyledTable = styled18__default.default("table", {
-  shouldForwardProp: propFilter7
-})`
-  width: 100%;
-  border-collapse: collapse;
-`;
-var StyledTableHeader = styled18__default.default("thead", {
-  shouldForwardProp: propFilter7
-})``;
-var StyledTableBody = styled18__default.default("tbody", {
-  shouldForwardProp: propFilter7
-})``;
-var StyledTableHeaderRow = styled18__default.default("tr", {
-  shouldForwardProp: propFilter7
-})``;
-var StyledTableBodyRow = styled18__default.default("tr", {
-  shouldForwardProp: propFilter7
-})`
-  background: transparent;
-  border-radius: 0;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background-color: ${({ theme: theme2 }) => theme2.colors.bgLightGrey};
-  }
-`;
-var StyledTableHeaderCell = styled18__default.default("th", {
-  shouldForwardProp: propFilter7
-})`
-  ${({ theme: theme2 }) => theme2.typo.Md_14}
-  color: ${({ theme: theme2 }) => theme2.colors.textSecondary};
-  height: 36px;
-  padding: 0 16px;
-  background-color: ${({ theme: theme2 }) => theme2.colors.bgMediumGrey};
-  border: none;
-  font-family: inherit;
-  text-align: left;
-  vertical-align: middle;
-
-  &:first-of-type {
-    border-radius: ${({ theme: theme2 }) => theme2.radius.lg} 0 0
-      ${({ theme: theme2 }) => theme2.radius.lg};
-  }
-
-  &:last-of-type {
-    border-radius: 0 ${({ theme: theme2 }) => theme2.radius.lg}
-      ${({ theme: theme2 }) => theme2.radius.lg} 0;
-  }
-`;
-var StyledTableBodyCell = styled18__default.default("td", {
-  shouldForwardProp: propFilter7
-})`
-  height: 56px;
-  padding: 0 16px;
-  background: transparent;
-  border: none;
-  border-top: 1px solid ${({ theme: theme2 }) => theme2.colors.lineDefault};
-  border-radius: 0;
-  font-family: inherit;
-  text-align: left;
-  vertical-align: middle;
-
-  tr:first-of-type & {
-    border-top: none;
-  }
-`;
-var TableRoot = react$1.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTableRoot, { ref, ...props, children })
-);
-TableRoot.displayName = "TableRoot";
-var Table = react$1.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTable, { ref, ...props, children })
-);
-Table.displayName = "Table";
-var TableHeader = react$1.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTableHeader, { ref, ...props, children }));
-TableHeader.displayName = "TableHeader";
-var TableBody = react$1.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTableBody, { ref, ...props, children })
-);
-TableBody.displayName = "TableBody";
-var TableHeaderRow = react$1.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTableHeaderRow, { ref, ...props, children }));
-TableHeaderRow.displayName = "TableHeaderRow";
-var TableBodyRow = react$1.forwardRef(
-  ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTableBodyRow, { ref, ...props, children })
-);
-TableBodyRow.displayName = "TableBodyRow";
-var TableHeaderCell = react$1.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTableHeaderCell, { ref, ...props, children }));
-TableHeaderCell.displayName = "TableHeaderCell";
-var TableBodyCell = react$1.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledTableBodyCell, { ref, ...props, children }));
-TableBodyCell.displayName = "TableBodyCell";
-var dim = (v) => v === void 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
-var StyledSkeleton = styled18__default.default("span", {
-  shouldForwardProp: (prop) => ![
-    "$width",
-    "$minWidth",
-    "$maxWidth",
-    "$height",
-    "$minHeight",
-    "$maxHeight",
-    "$loading"
-  ].includes(prop) && isPropValid8__default.default(prop)
-})`
-  display: inline-block;
-  position: relative;
-  border-radius: ${({ theme: theme2 }) => theme2.radius.sm};
-
-  ${({ $width }) => $width !== void 0 && `width: ${dim($width)};`}
-  ${({ $minWidth }) => $minWidth !== void 0 && `min-width: ${dim($minWidth)};`}
-  ${({ $maxWidth }) => $maxWidth !== void 0 && `max-width: ${dim($maxWidth)};`}
-  ${({ $height }) => $height !== void 0 && `height: ${dim($height)};`}
-  ${({ $minHeight }) => $minHeight !== void 0 && `min-height: ${dim($minHeight)};`}
-  ${({ $maxHeight }) => $maxHeight !== void 0 && `max-height: ${dim($maxHeight)};`}
-
-  ${({ $loading, theme: theme2 }) => $loading && `
-    background-color: ${theme2.colors.bgMediumGrey};
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-
-    & > * {
-      visibility: hidden;
-      pointer-events: none;
-    }
-  `}
-
-  ${({ $loading }) => !$loading && `
-    background-color: transparent;
-  `}
-
-  @keyframes skeleton-pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.6;
-    }
-  }
-`;
-var Skeleton = react$1.forwardRef(
-  ({
-    loading = true,
-    children,
-    width,
-    minWidth,
-    maxWidth,
-    height,
-    minHeight,
-    maxHeight,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    StyledSkeleton,
-    {
-      ref,
-      $loading: loading,
-      $width: width,
-      $minWidth: minWidth,
-      $maxWidth: maxWidth,
-      $height: height,
-      $minHeight: minHeight,
-      $maxHeight: maxHeight,
-      ...props,
-      children
-    }
-  )
-);
-Skeleton.displayName = "Skeleton";
-
-exports.Avatar = Avatar;
-exports.Badge = Badge;
-exports.BichonThemeProvider = BichonThemeProvider;
-exports.Button = Button;
-exports.ChatBubble = ChatBubble;
-exports.Checkbox = Checkbox;
-exports.Dialog = Dialog;
-exports.Flex = Flex;
-exports.IconButton = IconButton;
-exports.Menu = Menu;
-exports.MenuContent = MenuContent;
-exports.MenuItem = MenuItem;
-exports.MenuTrigger = MenuTrigger;
-exports.Pagination = Pagination;
-exports.Progress = Progress;
-exports.RadioButton = RadioButton;
-exports.SegmentedControlItem = SegmentedControlItem;
-exports.SegmentedControlRoot = SegmentedControlRoot;
-exports.Skeleton = Skeleton;
-exports.TabContent = TabContent;
-exports.TabList = TabList;
-exports.TabRoot = TabRoot;
-exports.TabTrigger = TabTrigger;
-exports.Table = Table;
-exports.TableBody = TableBody;
-exports.TableBodyCell = TableBodyCell;
-exports.TableBodyRow = TableBodyRow;
-exports.TableHeader = TableHeader;
-exports.TableHeaderCell = TableHeaderCell;
-exports.TableHeaderRow = TableHeaderRow;
-exports.TableRoot = TableRoot;
-exports.TextField = TextField;
-exports.ToastProvider = ToastProvider;
-exports.Tooltip = Tooltip;
-exports.TooltipContent = TooltipContent;
-exports.TooltipProvider = TooltipProvider;
-exports.TooltipTrigger = TooltipTrigger;
-exports.colors = colors;
-exports.componentSize = componentSize;
-exports.radius = radius;
-exports.semanticSpacing = semanticSpacing;
-exports.shadows = shadows;
-exports.spacing = spacing;
-exports.typo = typo;
-exports.useToast = useToast;