@bichon/ds 0.0.0 → 0.0.2

package/dist/index.js

@@ -1,8 +1,8 @@
 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 { forwardRef, useMemo, createContext, useContext, useState } from 'react';
+import styled18 from '@emotion/styled';
+import isPropValid8 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';
@@ -13,6 +13,8 @@ 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';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 // src/BichonThemeProvider.tsx
 
@@ -88,144 +90,110 @@ var colors = {
   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/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
@@ -446,7 +414,7 @@ var globalStyles = css`
 `;
 var theme = {
   colors,
-  typography,
+  typo,
   spacing,
   radius,
   shadows
@@ -471,8 +439,8 @@ var sizeStyles = {
     height: "24px"
   }
 };
-var propFilter = (prop) => !["$size"].includes(prop) && isPropValid(prop);
-var StyledAvatarRoot = styled8(RadixAvatar.Root, {
+var propFilter = (prop) => !["$size"].includes(prop) && isPropValid8(prop);
+var StyledAvatarRoot = styled18(RadixAvatar.Root, {
   shouldForwardProp: propFilter
 })`
   display: inline-flex;
@@ -487,13 +455,13 @@ var StyledAvatarRoot = styled8(RadixAvatar.Root, {
   border: 1px solid ${({ theme: theme2 }) => theme2.colors.lineDefault};
   background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
 `;
-var StyledAvatarImage = styled8(RadixAvatar.Image)`
+var StyledAvatarImage = styled18(RadixAvatar.Image)`
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
 `;
-var StyledAvatarFallback = styled8(RadixAvatar.Fallback)`
+var StyledAvatarFallback = styled18(RadixAvatar.Fallback)`
   width: 100%;
   height: 100%;
   display: flex;
@@ -555,22 +523,19 @@ Avatar.displayName = "Avatar";
 var sizeStyles2 = {
   large: {
     padding: "3.5px 12px",
-    typography: "bodyBaseMedium"
-    // md14 (14px)
+    typography: "Md_14"
   },
   medium: {
     padding: "2px 10px",
-    typography: "bodySmMedium"
-    // md13 (13px)
+    typography: "Md_13"
   },
   small: {
     padding: "1px 8px",
-    typography: "bodyXsMedium"
-    // md12 (12px)
+    typography: "Md_12"
   }
 };
-var propFilter2 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid(prop);
-var StyledBadge = styled8("span", {
+var propFilter2 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid8(prop);
+var StyledBadge = styled18("span", {
   shouldForwardProp: propFilter2
 })`
   display: inline-flex;
@@ -583,12 +548,8 @@ var StyledBadge = styled8("span", {
 
   ${({ $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};
+      ${theme2.typo[spec.typography]}
       padding: ${spec.padding};
     `;
 }}
@@ -646,8 +607,8 @@ var sizeStyles3 = {
     height: "2px"
   }
 };
-var propFilter3 = (prop) => !["$size", "$width"].includes(prop) && isPropValid(prop);
-var StyledProgressRoot = styled8(RadixProgress.Root, {
+var propFilter3 = (prop) => !["$size", "$width"].includes(prop) && isPropValid8(prop);
+var StyledProgressRoot = styled18(RadixProgress.Root, {
   shouldForwardProp: propFilter3
 })`
   position: relative;
@@ -671,7 +632,7 @@ var StyledProgressRoot = styled8(RadixProgress.Root, {
     }
   }
 `;
-var StyledProgressIndicator = styled8(RadixProgress.Indicator)`
+var StyledProgressIndicator = styled18(RadixProgress.Indicator)`
   background-color: ${({ theme: theme2 }) => theme2.colors.bgAccent};
   width: 100%;
   height: 100%;
@@ -705,76 +666,28 @@ var Progress = forwardRef(
 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"
-    }
+    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: "bodyLgMedium",
-      padding: "12px 16px"
-    },
-    medium: {
-      borderRadius: "lg",
-      typography: "bodyMdMedium",
-      padding: "8.5px 16px"
-    },
-    small: {
-      borderRadius: "lg",
-      typography: "bodyBaseMedium",
-      padding: "5.5px 12px"
-    }
+    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: "bodyLgMedium",
-      padding: "12px 16px"
-    },
-    medium: {
-      borderRadius: "lg",
-      typography: "bodyMdMedium",
-      padding: "8.5px 16px"
-    },
-    small: {
-      borderRadius: "lg",
-      typography: "bodyBaseMedium",
-      padding: "5.5px 12px"
-    }
+    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: "bodyLgMedium",
-      padding: "12px 8px"
-    },
-    medium: {
-      borderRadius: "lg",
-      typography: "bodyMdMedium",
-      padding: "8.5px 8px"
-    },
-    small: {
-      borderRadius: "lg",
-      typography: "bodyBaseMedium",
-      padding: "8px 6px"
-    }
+    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"].includes(prop) && isPropValid(prop);
-var StyledButton = styled8("button", {
+var propFilter4 = (prop) => !["$variant", "$size", "$width", "$active"].includes(prop) && isPropValid8(prop);
+var StyledButton = styled18("button", {
   shouldForwardProp: propFilter4
 })`
   display: inline-flex;
@@ -796,26 +709,21 @@ var StyledButton = styled8("button", {
   ${({ $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};
+      ${theme2.typo[spec.typography]}
       padding: ${spec.padding};
       ${borderRadius ? `border-radius: ${borderRadius};` : ""}
     `;
 }}
 
-  ${({ $variant, theme: theme2 }) => {
+  ${({ $variant, $active, theme: theme2 }) => {
+  const activeSelector = $active ? `&, ` : "";
+  const hoverActive = `&:hover:not(:disabled), &:active:not(:disabled)`;
   if ($variant === "filled") {
     return `
-        background-color: ${theme2.colors.bgAccent};
+        background-color: ${$active ? theme2.colors.bgAccentDark : theme2.colors.bgAccent};
         color: ${theme2.colors.bgWhite};
-        
-        /* Pressed & Hovered \uB3D9\uC77C \uCC98\uB9AC */
-        &:hover:not(:disabled),
-        &:active:not(:disabled) {
+        ${activeSelector}${hoverActive} {
           background-color: ${theme2.colors.bgAccentDark};
           color: ${theme2.colors.bgWhite};
         }
@@ -823,11 +731,9 @@ var StyledButton = styled8("button", {
   }
   if ($variant === "warning") {
     return `
-        background-color: ${theme2.colors.bgWarning};
+        background-color: ${$active ? theme2.colors.bgWarningDark : theme2.colors.bgWarning};
         color: ${theme2.colors.bgWhite};
-        
-        &:hover:not(:disabled),
-        &:active:not(:disabled) {
+        ${activeSelector}${hoverActive} {
           background-color: ${theme2.colors.bgWarningDark};
           color: ${theme2.colors.bgWhite};
         }
@@ -835,13 +741,10 @@ var StyledButton = styled8("button", {
   }
   if ($variant === "outlined") {
     return `
-        background-color: ${theme2.colors.bgWhite};
+        background-color: ${$active ? theme2.colors.bgMediumGrey : theme2.colors.bgWhite};
         border: 1px solid ${theme2.colors.lineDefault};
         color: ${theme2.colors.textPrimary};
-        
-        /* Pressed & Hovered: bg-medium-gray */
-        &:hover:not(:disabled),
-        &:active:not(:disabled) {
+        ${activeSelector}${hoverActive} {
           background-color: ${theme2.colors.bgMediumGrey};
           border: 1px solid ${theme2.colors.lineDefault};
           color: ${theme2.colors.textPrimary};
@@ -849,11 +752,9 @@ var StyledButton = styled8("button", {
       `;
   }
   return `
-      background-color: transparent;
+      background-color: ${$active ? theme2.colors.bgMediumGrey : "transparent"};
       color: ${theme2.colors.textPrimary};
-      
-      &:hover:not(:disabled),
-      &:active:not(:disabled) {
+      ${activeSelector}${hoverActive} {
         background-color: ${theme2.colors.bgMediumGrey};
         color: ${theme2.colors.textPrimary};
       }
@@ -871,6 +772,7 @@ var Button = forwardRef(
     variant = "filled",
     size = "medium",
     width,
+    active,
     children,
     type = "button",
     ...props
@@ -882,6 +784,7 @@ var Button = forwardRef(
         $variant: variant,
         $size: size,
         $width: width,
+        $active: active,
         type,
         ...props,
         children
@@ -890,7 +793,7 @@ var Button = forwardRef(
   }
 );
 Button.displayName = "Button";
-var StyledFlex = styled8.div`
+var StyledFlex = styled18.div`
   display: flex;
   flex-direction: ${({ direction }) => direction || "row"};
   justify-content: ${({ justify }) => justify || "flex-start"};
@@ -906,7 +809,7 @@ var Flex = forwardRef(
   }
 );
 Flex.displayName = "Flex";
-var StyledTextFieldInput = styled8.input`
+var StyledTextFieldInput = styled18.input`
   width: 100%;
   padding: 12.5px 16px;
   border: 1px solid
@@ -918,10 +821,7 @@ var StyledTextFieldInput = styled8.input`
   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};
+  ${({ theme: theme2 }) => theme2.typo.Rg_16}
   opacity: ${({ $variant }) => $variant === "disabled" ? 0.5 : 1};
 
   &::placeholder {
@@ -941,8 +841,8 @@ var StyledTextFieldInput = styled8.input`
     opacity: 0.5;
   }
 `;
-var StyledTextFieldTextarea = styled8(TextareaAutosize, {
-  shouldForwardProp: (prop) => isPropValid(prop) || prop === "minRows" || prop === "maxRows"
+var StyledTextFieldTextarea = styled18(TextareaAutosize, {
+  shouldForwardProp: (prop) => isPropValid8(prop) || prop === "minRows" || prop === "maxRows"
 })`
   width: 100%;
   padding: 12.5px 16px;
@@ -955,10 +855,7 @@ var StyledTextFieldTextarea = styled8(TextareaAutosize, {
   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};
+  ${({ theme: theme2 }) => theme2.typo.Rg_16}
   opacity: ${({ $variant }) => $variant === "disabled" ? 0.5 : 1};
   resize: none;
   font-family: inherit;
@@ -980,9 +877,8 @@ var StyledTextFieldTextarea = styled8(TextareaAutosize, {
     opacity: 0.5;
   }
 `;
-var StyledHelperText = styled8.div`
-  font-size: ${({ theme: theme2 }) => theme2.typography.bodyXsRegular.fontSize};
-  line-height: ${({ theme: theme2 }) => theme2.typography.bodyXsRegular.lineHeight};
+var StyledHelperText = styled18.div`
+  ${({ theme: theme2 }) => theme2.typo.Rg_12}
   margin-top: 6px;
   color: ${({ theme: theme2, $variant }) => {
   if ($variant === "warning") return theme2.colors.textWarning;
@@ -1046,7 +942,7 @@ var TextField = forwardRef(
   }
 );
 TextField.displayName = "TextField";
-var StyledToastViewport = styled8(ToastPrimitive.Viewport)`
+var StyledToastViewport = styled18(ToastPrimitive.Viewport)`
   position: fixed;
   ${({ $position, $viewportOffset }) => $position === "top" ? `top: ${$viewportOffset}px;` : `bottom: ${$viewportOffset}px;`}
   left: 50%;
@@ -1058,7 +954,7 @@ var StyledToastViewport = styled8(ToastPrimitive.Viewport)`
   max-width: 90vw;
   z-index: 9999;
 `;
-var StyledToastRoot = styled8(ToastPrimitive.Root)`
+var StyledToastRoot = styled18(ToastPrimitive.Root)`
   background-color: ${({ theme: theme2 }) => theme2.colors.bgDarkGrey};
   color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
   border-radius: ${({ theme: theme2 }) => theme2.radius.lg};
@@ -1095,10 +991,8 @@ var StyledToastRoot = styled8(ToastPrimitive.Root)`
     }
   }
 `;
-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 StyledToastDescription = styled18(ToastPrimitive.Description)`
+  ${({ theme: theme2 }) => theme2.typo.Md_14}
 `;
 var ToastContext = createContext(null);
 function ToastProvider({
@@ -1145,7 +1039,7 @@ function useToast() {
   };
   return { showToast };
 }
-var StyledOverlay = styled8(DialogPrimitive.Overlay)`
+var StyledOverlay = styled18(DialogPrimitive.Overlay)`
   background-color: ${({ theme: theme2 }) => theme2.colors.basic.black30};
   position: fixed;
   inset: 0;
@@ -1169,7 +1063,7 @@ var StyledOverlay = styled8(DialogPrimitive.Overlay)`
     to { opacity: 0; }
   }
 `;
-var StyledContent = styled8(DialogPrimitive.Content)`
+var StyledContent = styled18(DialogPrimitive.Content)`
   background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
   border-radius: ${({ theme: theme2 }) => theme2.radius["2xl"]};
   box-shadow: ${({ theme: theme2 }) => theme2.shadows.modal};
@@ -1202,20 +1096,18 @@ var StyledContent = styled8(DialogPrimitive.Content)`
     outline: none;
   }
 `;
-var StyledHeader = styled8.div`
+var StyledHeader = styled18.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};
+var StyledTitle = styled18(DialogPrimitive.Title)`
+  ${({ theme: theme2 }) => theme2.typo.Sb_18}
   color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
   margin: 0;
 `;
-var StyledCloseButton = styled8.button`
+var StyledCloseButton = styled18.button`
   background: transparent;
   border: none;
   cursor: pointer;
@@ -1230,13 +1122,12 @@ var StyledCloseButton = styled8.button`
     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};
+var StyledBody = styled18.div`
+  ${({ theme: theme2 }) => theme2.typo.Md_14}
   color: ${({ theme: theme2 }) => theme2.colors.textSecondary};
   margin-bottom: ${({ theme: theme2 }) => theme2.spacing[6]};
 `;
-var StyledFooter = styled8.div`
+var StyledFooter = styled18.div`
   display: flex;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
   justify-content: flex-end;
@@ -1264,16 +1155,14 @@ var Dialog = DialogRoot;
 Dialog.Title = DialogTitle;
 Dialog.Content = DialogContent;
 Dialog.Footer = DialogFooter;
-var StyledChatBubble = styled8.div`
+var StyledChatBubble = styled18.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};
+  ${({ theme: theme2 }) => theme2.typo.Md_14}
 
   ${({ $variant, theme: theme2 }) => {
   if ($variant === "user") {
@@ -1358,8 +1247,8 @@ var iconButtonSizeStyles = {
     }
   }
 };
-var propFilter5 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid(prop);
-var StyledIconButton = styled8("button", {
+var propFilter5 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid8(prop);
+var StyledIconButton = styled18("button", {
   shouldForwardProp: propFilter5
 })`
   display: inline-flex;
@@ -1387,12 +1276,8 @@ var StyledIconButton = styled8("button", {
   ${({ $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};
+      ${theme2.typo[spec.typography]}
       padding: ${spec.padding};
       ${borderRadius ? `border-radius: ${borderRadius};` : ""}
     `;
@@ -1473,18 +1358,18 @@ var IconButton = forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-var PaginationContainer = styled8.div`
+var PaginationContainer = styled18.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: theme2 }) => theme2.spacing[1]};
 `;
-var PaginationPages = styled8.div`
+var PaginationPages = styled18.div`
   display: flex;
   align-items: center;
   gap: 0;
 `;
-var StyledPaginationButton = styled8("button", {
-  shouldForwardProp: (prop) => prop !== "$active" && isPropValid(prop)
+var StyledPaginationButton = styled18("button", {
+  shouldForwardProp: (prop) => prop !== "$active" && isPropValid8(prop)
 })`
   display: inline-flex;
   align-items: center;
@@ -1505,9 +1390,7 @@ var StyledPaginationButton = styled8("button", {
     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};
+    ${({ theme: theme2 }) => theme2.typo.Md_14}
     color: ${({ theme: theme2, $active }) => $active ? theme2.colors.textPrimary : theme2.colors.textTertiary};
   }
 
@@ -1624,7 +1507,7 @@ function Pagination({
     )
   ] });
 }
-var StyledCheckbox = styled8(CheckboxPrimitive.Root)`
+var StyledCheckbox = styled18(CheckboxPrimitive.Root)`
   width: 20px;
   height: 20px;
   border-radius: ${({ theme: theme2 }) => theme2.radius.sm};
@@ -1650,20 +1533,19 @@ var StyledCheckbox = styled8(CheckboxPrimitive.Root)`
     cursor: not-allowed;
   }
 `;
-var StyledIndicator = styled8(CheckboxPrimitive.Indicator)`
+var StyledIndicator = styled18(CheckboxPrimitive.Indicator)`
   color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var CheckboxContainer = styled8.div`
+var CheckboxContainer = styled18.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};
+var Label = styled18.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;
@@ -1676,17 +1558,17 @@ var Checkbox = forwardRef(({ label, disabled, id, ...props }, ref) => {
   ] });
 });
 Checkbox.displayName = "Checkbox";
-var StyledRadioGroup = styled8(RadioGroupPrimitive.Root)`
+var StyledRadioGroup = styled18(RadioGroupPrimitive.Root)`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
 `;
-var RadioItem = styled8.div`
+var RadioItem = styled18.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
 `;
-var StyledRadioButton = styled8(RadioGroupPrimitive.Item)`
+var StyledRadioButton = styled18(RadioGroupPrimitive.Item)`
   width: 20px;
   height: 20px;
   border-radius: ${({ theme: theme2 }) => theme2.radius.full};
@@ -1711,15 +1593,14 @@ var StyledRadioButton = styled8(RadioGroupPrimitive.Item)`
     cursor: not-allowed;
   }
 `;
-var StyledIndicator2 = styled8(RadioGroupPrimitive.Indicator)`
+var StyledIndicator2 = styled18(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};
+var Label2 = styled18.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;
@@ -1742,7 +1623,7 @@ var RadioButton = forwardRef(({ options, ...props }, ref) => {
   }) });
 });
 RadioButton.displayName = "RadioButton";
-var StyledMenuContent = styled8(DropdownMenu2.Content)`
+var StyledMenuContent = styled18(DropdownMenu2.Content)`
   min-width: 200px;
   background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
   border-radius: ${({ theme: theme2 }) => theme2.radius.lg};
@@ -1765,14 +1646,13 @@ var StyledMenuContent = styled8(DropdownMenu2.Content)`
     }
   }
 `;
-var StyledMenuItem = styled8(DropdownMenu2.Item)`
+var StyledMenuItem = styled18(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};
+  ${({ theme: theme2 }) => theme2.typo.Md_14}
   color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
   cursor: pointer;
   outline: none;
@@ -1789,20 +1669,20 @@ var StyledMenuItem = styled8(DropdownMenu2.Item)`
     pointer-events: none;
   }
 `;
-var MenuItemLeft = styled8.div`
+var MenuItemLeft = styled18.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
 `;
-var MenuItemText = styled8.span``;
-var MenuLeadingIcon = styled8.span`
+var MenuItemText = styled18.span``;
+var MenuLeadingIcon = styled18.span`
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
 `;
-var MenuTrailingIcon = styled8.span`
+var MenuTrailingIcon = styled18.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1825,13 +1705,12 @@ var MenuItem = forwardRef(
   ] })
 );
 MenuItem.displayName = "MenuItem";
-var StyledTooltipContent = styled8(TooltipPrimitive2.Content)`
+var StyledTooltipContent = styled18(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};
+  ${({ theme: theme2 }) => theme2.typo.Md_12}
   box-shadow: ${({ theme: theme2 }) => theme2.shadows.base};
   z-index: 9999;
   max-width: 300px;
@@ -1851,7 +1730,7 @@ var StyledTooltipContent = styled8(TooltipPrimitive2.Content)`
     }
   }
 `;
-var StyledArrow = styled8(TooltipPrimitive2.Arrow)`
+var StyledArrow = styled18(TooltipPrimitive2.Arrow)`
   fill: ${({ theme: theme2 }) => theme2.colors.bgDarkGrey};
 `;
 var TooltipProvider = forwardRef(
@@ -1868,5 +1747,331 @@ var TooltipContent = forwardRef(
   ] }) })
 );
 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(prop);
+var StyledSegmentedControlRoot = styled18(
+  ToggleGroup.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(prop);
+var StyledSegmentedControlItem = styled18(
+  ToggleGroup.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 = createContext("large");
+var SegmentedControlRoot = forwardRef(({ size = "large", children, ...props }, ref) => /* @__PURE__ */ jsx(SegmentedControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+  StyledSegmentedControlRoot,
+  {
+    ref,
+    type: "single",
+    $size: size,
+    ...props,
+    children
+  }
+) }));
+SegmentedControlRoot.displayName = "SegmentedControlRoot";
+var SegmentedControlItem = forwardRef(({ children, ...props }, ref) => {
+  const size = useContext(SegmentedControlSizeContext);
+  return /* @__PURE__ */ jsx(StyledSegmentedControlItem, { ref, $size: size, ...props, children });
+});
+SegmentedControlItem.displayName = "SegmentedControlItem";
+var propFilter6 = (prop) => isPropValid8(prop);
+var StyledTabList = styled18(TabsPrimitive.List, {
+  shouldForwardProp: propFilter6
+})`
+  display: flex;
+  border-bottom: 1px solid ${({ theme: theme2 }) => theme2.colors.lineDefault};
+  width: fit-content;
+`;
+var StyledTabTrigger = styled18(TabsPrimitive.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(TabsPrimitive.Content, {
+  shouldForwardProp: propFilter6
+})`
+  outline: none;
+`;
+var TabRoot = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children })
+);
+TabRoot.displayName = "TabRoot";
+var TabList = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTabList, { ref, ...props, children })
+);
+TabList.displayName = "TabList";
+var TabTrigger = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTabTrigger, { ref, ...props, children })
+);
+TabTrigger.displayName = "TabTrigger";
+var TabContent = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTabContent, { ref, ...props, children })
+);
+TabContent.displayName = "TabContent";
+var propFilter7 = (prop) => isPropValid8(prop);
+var StyledTableRoot = styled18("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("table", {
+  shouldForwardProp: propFilter7
+})`
+  width: 100%;
+  border-collapse: collapse;
+`;
+var StyledTableHeader = styled18("thead", {
+  shouldForwardProp: propFilter7
+})``;
+var StyledTableBody = styled18("tbody", {
+  shouldForwardProp: propFilter7
+})``;
+var StyledTableHeaderRow = styled18("tr", {
+  shouldForwardProp: propFilter7
+})``;
+var StyledTableBodyRow = styled18("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("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("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 = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTableRoot, { ref, ...props, children })
+);
+TableRoot.displayName = "TableRoot";
+var Table = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTable, { ref, ...props, children })
+);
+Table.displayName = "Table";
+var TableHeader = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTableHeader, { ref, ...props, children }));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTableBody, { ref, ...props, children })
+);
+TableBody.displayName = "TableBody";
+var TableHeaderRow = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTableHeaderRow, { ref, ...props, children }));
+TableHeaderRow.displayName = "TableHeaderRow";
+var TableBodyRow = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTableBodyRow, { ref, ...props, children })
+);
+TableBodyRow.displayName = "TableBodyRow";
+var TableHeaderCell = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(StyledTableHeaderCell, { ref, ...props, children }));
+TableHeaderCell.displayName = "TableHeaderCell";
+var TableBodyCell = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ 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("span", {
+  shouldForwardProp: (prop) => ![
+    "$width",
+    "$minWidth",
+    "$maxWidth",
+    "$height",
+    "$minHeight",
+    "$maxHeight",
+    "$loading"
+  ].includes(prop) && isPropValid8(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 = forwardRef(
+  ({
+    loading = true,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    StyledSkeleton,
+    {
+      ref,
+      $loading: loading,
+      $width: width,
+      $minWidth: minWidth,
+      $maxWidth: maxWidth,
+      $height: height,
+      $minHeight: minHeight,
+      $maxHeight: maxHeight,
+      ...props,
+      children
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
 
-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 };
+export { Avatar, Badge, BichonThemeProvider, Button, ChatBubble, Checkbox, Dialog, Flex, IconButton, Menu, MenuContent, MenuItem, MenuTrigger, Pagination, Progress, RadioButton, SegmentedControlItem, SegmentedControlRoot, Skeleton, TabContent, TabList, TabRoot, TabTrigger, Table, TableBody, TableBodyCell, TableBodyRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRoot, TextField, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, colors, componentSize, radius, semanticSpacing, shadows, spacing, typo, useToast };