@bichon/ds 0.0.0 → 0.0.2

package/dist/index.cjs

@@ -3,8 +3,8 @@
 var react = require('@emotion/react');
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('react');
-var styled8 = require('@emotion/styled');
-var isPropValid = require('@emotion/is-prop-valid');
+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 TextareaAutosize = require('react-textarea-autosize');
@@ -15,6 +15,8 @@ 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 }; }
 
@@ -36,8 +38,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var styled8__default = /*#__PURE__*/_interopDefault(styled8);
-var isPropValid__default = /*#__PURE__*/_interopDefault(isPropValid);
+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);
@@ -47,6 +49,8 @@ var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimit
 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
 
@@ -122,144 +126,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
@@ -480,7 +450,7 @@ var globalStyles = react.css`
 `;
 var theme = {
   colors,
-  typography,
+  typo,
   spacing,
   radius,
   shadows
@@ -505,8 +475,8 @@ var sizeStyles = {
     height: "24px"
   }
 };
-var propFilter = (prop) => !["$size"].includes(prop) && isPropValid__default.default(prop);
-var StyledAvatarRoot = styled8__default.default(RadixAvatar__namespace.Root, {
+var propFilter = (prop) => !["$size"].includes(prop) && isPropValid8__default.default(prop);
+var StyledAvatarRoot = styled18__default.default(RadixAvatar__namespace.Root, {
   shouldForwardProp: propFilter
 })`
   display: inline-flex;
@@ -521,13 +491,13 @@ var StyledAvatarRoot = styled8__default.default(RadixAvatar__namespace.Root, {
   border: 1px solid ${({ theme: theme2 }) => theme2.colors.lineDefault};
   background-color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
 `;
-var StyledAvatarImage = styled8__default.default(RadixAvatar__namespace.Image)`
+var StyledAvatarImage = styled18__default.default(RadixAvatar__namespace.Image)`
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
 `;
-var StyledAvatarFallback = styled8__default.default(RadixAvatar__namespace.Fallback)`
+var StyledAvatarFallback = styled18__default.default(RadixAvatar__namespace.Fallback)`
   width: 100%;
   height: 100%;
   display: flex;
@@ -589,22 +559,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__default.default(prop);
-var StyledBadge = styled8__default.default("span", {
+var propFilter2 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid8__default.default(prop);
+var StyledBadge = styled18__default.default("span", {
   shouldForwardProp: propFilter2
 })`
   display: inline-flex;
@@ -617,12 +584,8 @@ var StyledBadge = styled8__default.default("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};
     `;
 }}
@@ -680,8 +643,8 @@ var sizeStyles3 = {
     height: "2px"
   }
 };
-var propFilter3 = (prop) => !["$size", "$width"].includes(prop) && isPropValid__default.default(prop);
-var StyledProgressRoot = styled8__default.default(RadixProgress__namespace.Root, {
+var propFilter3 = (prop) => !["$size", "$width"].includes(prop) && isPropValid8__default.default(prop);
+var StyledProgressRoot = styled18__default.default(RadixProgress__namespace.Root, {
   shouldForwardProp: propFilter3
 })`
   position: relative;
@@ -705,7 +668,7 @@ var StyledProgressRoot = styled8__default.default(RadixProgress__namespace.Root,
     }
   }
 `;
-var StyledProgressIndicator = styled8__default.default(RadixProgress__namespace.Indicator)`
+var StyledProgressIndicator = styled18__default.default(RadixProgress__namespace.Indicator)`
   background-color: ${({ theme: theme2 }) => theme2.colors.bgAccent};
   width: 100%;
   height: 100%;
@@ -739,76 +702,28 @@ var Progress = react$1.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__default.default(prop);
-var StyledButton = styled8__default.default("button", {
+var propFilter4 = (prop) => !["$variant", "$size", "$width", "$active"].includes(prop) && isPropValid8__default.default(prop);
+var StyledButton = styled18__default.default("button", {
   shouldForwardProp: propFilter4
 })`
   display: inline-flex;
@@ -830,26 +745,21 @@ var StyledButton = styled8__default.default("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};
         }
@@ -857,11 +767,9 @@ var StyledButton = styled8__default.default("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};
         }
@@ -869,13 +777,10 @@ var StyledButton = styled8__default.default("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};
@@ -883,11 +788,9 @@ var StyledButton = styled8__default.default("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};
       }
@@ -905,6 +808,7 @@ var Button = react$1.forwardRef(
     variant = "filled",
     size = "medium",
     width,
+    active,
     children,
     type = "button",
     ...props
@@ -916,6 +820,7 @@ var Button = react$1.forwardRef(
         $variant: variant,
         $size: size,
         $width: width,
+        $active: active,
         type,
         ...props,
         children
@@ -924,7 +829,7 @@ var Button = react$1.forwardRef(
   }
 );
 Button.displayName = "Button";
-var StyledFlex = styled8__default.default.div`
+var StyledFlex = styled18__default.default.div`
   display: flex;
   flex-direction: ${({ direction }) => direction || "row"};
   justify-content: ${({ justify }) => justify || "flex-start"};
@@ -940,7 +845,7 @@ var Flex = react$1.forwardRef(
   }
 );
 Flex.displayName = "Flex";
-var StyledTextFieldInput = styled8__default.default.input`
+var StyledTextFieldInput = styled18__default.default.input`
   width: 100%;
   padding: 12.5px 16px;
   border: 1px solid
@@ -952,10 +857,7 @@ var StyledTextFieldInput = styled8__default.default.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 {
@@ -975,8 +877,8 @@ var StyledTextFieldInput = styled8__default.default.input`
     opacity: 0.5;
   }
 `;
-var StyledTextFieldTextarea = styled8__default.default(TextareaAutosize__default.default, {
-  shouldForwardProp: (prop) => isPropValid__default.default(prop) || prop === "minRows" || prop === "maxRows"
+var StyledTextFieldTextarea = styled18__default.default(TextareaAutosize__default.default, {
+  shouldForwardProp: (prop) => isPropValid8__default.default(prop) || prop === "minRows" || prop === "maxRows"
 })`
   width: 100%;
   padding: 12.5px 16px;
@@ -989,10 +891,7 @@ var StyledTextFieldTextarea = styled8__default.default(TextareaAutosize__default
   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;
@@ -1014,9 +913,8 @@ var StyledTextFieldTextarea = styled8__default.default(TextareaAutosize__default
     opacity: 0.5;
   }
 `;
-var StyledHelperText = styled8__default.default.div`
-  font-size: ${({ theme: theme2 }) => theme2.typography.bodyXsRegular.fontSize};
-  line-height: ${({ theme: theme2 }) => theme2.typography.bodyXsRegular.lineHeight};
+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;
@@ -1080,7 +978,7 @@ var TextField = react$1.forwardRef(
   }
 );
 TextField.displayName = "TextField";
-var StyledToastViewport = styled8__default.default(ToastPrimitive__namespace.Viewport)`
+var StyledToastViewport = styled18__default.default(ToastPrimitive__namespace.Viewport)`
   position: fixed;
   ${({ $position, $viewportOffset }) => $position === "top" ? `top: ${$viewportOffset}px;` : `bottom: ${$viewportOffset}px;`}
   left: 50%;
@@ -1092,7 +990,7 @@ var StyledToastViewport = styled8__default.default(ToastPrimitive__namespace.Vie
   max-width: 90vw;
   z-index: 9999;
 `;
-var StyledToastRoot = styled8__default.default(ToastPrimitive__namespace.Root)`
+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};
@@ -1129,10 +1027,8 @@ var StyledToastRoot = styled8__default.default(ToastPrimitive__namespace.Root)`
     }
   }
 `;
-var StyledToastDescription = styled8__default.default(ToastPrimitive__namespace.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__default.default(ToastPrimitive__namespace.Description)`
+  ${({ theme: theme2 }) => theme2.typo.Md_14}
 `;
 var ToastContext = react$1.createContext(null);
 function ToastProvider({
@@ -1179,7 +1075,7 @@ function useToast() {
   };
   return { showToast };
 }
-var StyledOverlay = styled8__default.default(DialogPrimitive__namespace.Overlay)`
+var StyledOverlay = styled18__default.default(DialogPrimitive__namespace.Overlay)`
   background-color: ${({ theme: theme2 }) => theme2.colors.basic.black30};
   position: fixed;
   inset: 0;
@@ -1203,7 +1099,7 @@ var StyledOverlay = styled8__default.default(DialogPrimitive__namespace.Overlay)
     to { opacity: 0; }
   }
 `;
-var StyledContent = styled8__default.default(DialogPrimitive__namespace.Content)`
+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};
@@ -1236,20 +1132,18 @@ var StyledContent = styled8__default.default(DialogPrimitive__namespace.Content)
     outline: none;
   }
 `;
-var StyledHeader = styled8__default.default.div`
+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 = styled8__default.default(DialogPrimitive__namespace.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__default.default(DialogPrimitive__namespace.Title)`
+  ${({ theme: theme2 }) => theme2.typo.Sb_18}
   color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
   margin: 0;
 `;
-var StyledCloseButton = styled8__default.default.button`
+var StyledCloseButton = styled18__default.default.button`
   background: transparent;
   border: none;
   cursor: pointer;
@@ -1264,13 +1158,12 @@ var StyledCloseButton = styled8__default.default.button`
     color: ${({ theme: theme2 }) => theme2.colors.textPrimary};
   }
 `;
-var StyledBody = styled8__default.default.div`
-  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
-  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+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 = styled8__default.default.div`
+var StyledFooter = styled18__default.default.div`
   display: flex;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
   justify-content: flex-end;
@@ -1298,16 +1191,14 @@ var Dialog = DialogRoot;
 Dialog.Title = DialogTitle;
 Dialog.Content = DialogContent;
 Dialog.Footer = DialogFooter;
-var StyledChatBubble = styled8__default.default.div`
+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;
   
-  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") {
@@ -1392,8 +1283,8 @@ var iconButtonSizeStyles = {
     }
   }
 };
-var propFilter5 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid__default.default(prop);
-var StyledIconButton = styled8__default.default("button", {
+var propFilter5 = (prop) => !["$variant", "$size"].includes(prop) && isPropValid8__default.default(prop);
+var StyledIconButton = styled18__default.default("button", {
   shouldForwardProp: propFilter5
 })`
   display: inline-flex;
@@ -1421,12 +1312,8 @@ var StyledIconButton = styled8__default.default("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};` : ""}
     `;
@@ -1507,18 +1394,18 @@ var IconButton = react$1.forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-var PaginationContainer = styled8__default.default.div`
+var PaginationContainer = styled18__default.default.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: theme2 }) => theme2.spacing[1]};
 `;
-var PaginationPages = styled8__default.default.div`
+var PaginationPages = styled18__default.default.div`
   display: flex;
   align-items: center;
   gap: 0;
 `;
-var StyledPaginationButton = styled8__default.default("button", {
-  shouldForwardProp: (prop) => prop !== "$active" && isPropValid__default.default(prop)
+var StyledPaginationButton = styled18__default.default("button", {
+  shouldForwardProp: (prop) => prop !== "$active" && isPropValid8__default.default(prop)
 })`
   display: inline-flex;
   align-items: center;
@@ -1539,9 +1426,7 @@ var StyledPaginationButton = styled8__default.default("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};
   }
 
@@ -1658,7 +1543,7 @@ function Pagination({
     )
   ] });
 }
-var StyledCheckbox = styled8__default.default(CheckboxPrimitive__namespace.Root)`
+var StyledCheckbox = styled18__default.default(CheckboxPrimitive__namespace.Root)`
   width: 20px;
   height: 20px;
   border-radius: ${({ theme: theme2 }) => theme2.radius.sm};
@@ -1684,20 +1569,19 @@ var StyledCheckbox = styled8__default.default(CheckboxPrimitive__namespace.Root)
     cursor: not-allowed;
   }
 `;
-var StyledIndicator = styled8__default.default(CheckboxPrimitive__namespace.Indicator)`
+var StyledIndicator = styled18__default.default(CheckboxPrimitive__namespace.Indicator)`
   color: ${({ theme: theme2 }) => theme2.colors.bgWhite};
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var CheckboxContainer = styled8__default.default.div`
+var CheckboxContainer = styled18__default.default.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
 `;
-var Label = styled8__default.default.label`
-  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
-  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+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;
@@ -1710,17 +1594,17 @@ var Checkbox = react$1.forwardRef(({ label, disabled, id, ...props }, ref) => {
   ] });
 });
 Checkbox.displayName = "Checkbox";
-var StyledRadioGroup = styled8__default.default(RadioGroupPrimitive__namespace.Root)`
+var StyledRadioGroup = styled18__default.default(RadioGroupPrimitive__namespace.Root)`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
 `;
-var RadioItem = styled8__default.default.div`
+var RadioItem = styled18__default.default.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
 `;
-var StyledRadioButton = styled8__default.default(RadioGroupPrimitive__namespace.Item)`
+var StyledRadioButton = styled18__default.default(RadioGroupPrimitive__namespace.Item)`
   width: 20px;
   height: 20px;
   border-radius: ${({ theme: theme2 }) => theme2.radius.full};
@@ -1745,15 +1629,14 @@ var StyledRadioButton = styled8__default.default(RadioGroupPrimitive__namespace.
     cursor: not-allowed;
   }
 `;
-var StyledIndicator2 = styled8__default.default(RadioGroupPrimitive__namespace.Indicator)`
+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 = styled8__default.default.label`
-  font-size: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.fontSize};
-  line-height: ${({ theme: theme2 }) => theme2.typography.bodyBaseMedium.lineHeight};
+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;
@@ -1776,7 +1659,7 @@ var RadioButton = react$1.forwardRef(({ options, ...props }, ref) => {
   }) });
 });
 RadioButton.displayName = "RadioButton";
-var StyledMenuContent = styled8__default.default(DropdownMenu2__namespace.Content)`
+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};
@@ -1799,14 +1682,13 @@ var StyledMenuContent = styled8__default.default(DropdownMenu2__namespace.Conten
     }
   }
 `;
-var StyledMenuItem = styled8__default.default(DropdownMenu2__namespace.Item)`
+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};
-  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;
@@ -1823,20 +1705,20 @@ var StyledMenuItem = styled8__default.default(DropdownMenu2__namespace.Item)`
     pointer-events: none;
   }
 `;
-var MenuItemLeft = styled8__default.default.div`
+var MenuItemLeft = styled18__default.default.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: theme2 }) => theme2.spacing[2]};
 `;
-var MenuItemText = styled8__default.default.span``;
-var MenuLeadingIcon = styled8__default.default.span`
+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 = styled8__default.default.span`
+var MenuTrailingIcon = styled18__default.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1859,13 +1741,12 @@ var MenuItem = react$1.forwardRef(
   ] })
 );
 MenuItem.displayName = "MenuItem";
-var StyledTooltipContent = styled8__default.default(TooltipPrimitive2__namespace.Content)`
+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]}`};
-  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;
@@ -1885,7 +1766,7 @@ var StyledTooltipContent = styled8__default.default(TooltipPrimitive2__namespace
     }
   }
 `;
-var StyledArrow = styled8__default.default(TooltipPrimitive2__namespace.Arrow)`
+var StyledArrow = styled18__default.default(TooltipPrimitive2__namespace.Arrow)`
   fill: ${({ theme: theme2 }) => theme2.colors.bgDarkGrey};
 `;
 var TooltipProvider = react$1.forwardRef(
@@ -1902,6 +1783,332 @@ var TooltipContent = react$1.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__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;
@@ -1919,6 +2126,21 @@ 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;
@@ -1927,13 +2149,9 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.colors = colors;
 exports.componentSize = componentSize;
-exports.fontSize = fontSize;
-exports.fontWeight = fontWeight;
-exports.letterSpacing = letterSpacing;
-exports.lineHeight = lineHeight;
 exports.radius = radius;
 exports.semanticSpacing = semanticSpacing;
 exports.shadows = shadows;
 exports.spacing = spacing;
-exports.typography = typography;
+exports.typo = typo;
 exports.useToast = useToast;