@crossangle-org/cs-ui 0.1.0 → 0.1.1

package/dist/index.es.js

@@ -5,6 +5,7 @@ import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { Slot } from "@radix-ui/react-slot";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
@@ -3322,7 +3323,7 @@ function CsAccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn$1(
-        "flex flex-1 items-center justify-between text-left typo-body-md transition-all outline-none hover:underline disabled:pointer-events-none disabled:opacity-(--opacity-state-disabled) [&[data-state=open]>svg]:rotate-180",
+        "typo-body-sm-bold flex flex-1 items-center justify-between text-left typo-body-md transition-all outline-none hover:underline disabled:pointer-events-none disabled:opacity-(--opacity-state-disabled) [&[data-state=open]>svg]:rotate-180",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-200",
         // default
         "group-data-[variant=default]/accordion:py-(--accordion-default-padding-y) group-data-[variant=default]/accordion:gap-(--accordion-default-gap)",
@@ -3396,9 +3397,10 @@ const csButtonVariants = cva(
           "disabled:text-(--button-ghost-disabled-font) disabled:[&_svg]:text-(--button-ghost-disabled-icon)"
         ].join(" "),
         link: [
-          "text-(--button-link-default-font) [&_svg]:text-(--button-link-default-icon)",
-          "hover:bg-(--button-link-hover-bg) hover:text-(--button-link-hover-font) hover:[&_svg]:text-(--button-link-hover-icon)",
+          "p-0! text-(--button-link-default-font) [&_svg]:text-(--button-link-default-icon)",
+          "hover:underline hover:text-(--button-link-hover-font) hover:[&_svg]:text-(--button-link-hover-icon)",
           "disabled:text-(--button-link-disabled-font) disabled:[&_svg]:text-(--button-link-disabled-icon)"
+          // 'hover:bg-(--button-link-hover-bg) '
         ].join(" "),
         gradient: [
           "gradient-primary-vertical text-(--button-gradient-default-font) [&_svg]:text-(--button-gradient-default-icon)",
@@ -3508,7 +3510,7 @@ function CsAlertDialogHeader({
     "div",
     {
       "data-slot": "alert-dialog-header",
-      className: cn$1("flex flex-col gap-(--dialog-container-header-gap) mobile:text-center text-left", className),
+      className: cn$1("flex flex-col gap-(--dialog-container-header-gap) max-mobile:text-center text-left", className),
       ...props
     }
   );
@@ -3522,7 +3524,7 @@ function CsAlertDialogFooter({
     {
       "data-slot": "alert-dialog-footer",
       className: cn$1(
-        "flex flex-col-reverse gap-(--dialog-container-footer-gap) mobile:flex-row mobile:justify-end",
+        "flex flex-col-reverse gap-(--dialog-container-footer-gap) max-mobile:flex-row max-mobile:justify-end",
         className
       ),
       ...props
@@ -3579,6 +3581,39 @@ function CsAlertDialogCancel({
     }
   );
 }
+const CsAvatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn$1(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden",
+      className
+    ),
+    ...props
+  }
+));
+CsAvatar.displayName = AvatarPrimitive.Root.displayName;
+const CsAvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn$1("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+CsAvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const CsAvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn$1(
+      "flex h-full w-full items-center justify-center",
+      className
+    ),
+    ...props
+  }
+));
+CsAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 const csBadgeVariants = cva(
   "inline-flex items-center justify-center rounded-(--badge-common-radius) border-(length:--badge-outline-border-width) px-(--badge-common-padding-x) py-(--badge-common-padding-y) gap-(--badge-common-gap) typo-productive-label-sm w-fit whitespace-nowrap shrink-0 [&>svg]:size-(--badge-common-icon-size) [&>svg]:pointer-events-none focus-visible:ring-0 transition-[color,box-shadow] overflow-hidden",
   {
@@ -3615,8 +3650,8 @@ const csBoxVariants = cva(
   {
     variants: {
       variant: {
-        solid: "rounded-(--box-solid-radius) bg-(--box-solid-bg) gap-(--box-solid-gap) mobile:gap-(--box-solid-gap-mobile) py-(--box-solid-padding-y) mobile:py-(--box-solid-padding-y-mobile) px-(--box-solid-padding-x) mobile:px-(--box-solid-padding-x-mobile)",
-        outline: "rounded-(--box-outline-radius) bg-(--box-outline-bg) border-(--box-outline-border) border-(length:--box-outline-border-width) gap-(--box-outline-gap) mobile:gap-(--box-outline-gap-mobile) py-(--box-outline-padding-y) mobile:py-(--box-outline-padding-y-mobile) px-(--box-outline-padding-x) mobile:px-(--box-outline-padding-x-mobile)"
+        solid: "rounded-(--box-solid-radius) bg-(--box-solid-bg) gap-(--box-solid-gap) max-mobile:gap-(--box-solid-gap-mobile) py-(--box-solid-padding-y) max-mobile:py-(--box-solid-padding-y-mobile) px-(--box-solid-padding-x) max-mobile:px-(--box-solid-padding-x-mobile)",
+        outline: "rounded-(--box-outline-radius) bg-(--box-outline-bg) border-(--box-outline-border) border-(length:--box-outline-border-width) gap-(--box-outline-gap) max-mobile:gap-(--box-outline-gap-mobile) py-(--box-outline-padding-y) max-mobile:py-(--box-outline-padding-y-mobile) px-(--box-outline-padding-x) max-mobile:px-(--box-outline-padding-x-mobile)"
       }
     },
     defaultVariants: {
@@ -4578,7 +4613,7 @@ const match = {
     defaultParseWidth: "any"
   })
 };
-const enUS$1 = {
+const enUS = {
   code: "en-US",
   formatDistance,
   formatLong,
@@ -5422,7 +5457,7 @@ const doubleQuoteRegExp = /''/g;
 const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
 function format$2(date, formatStr, options) {
   const defaultOptions2 = getDefaultOptions();
-  const locale = options?.locale ?? defaultOptions2.locale ?? enUS$1;
+  const locale = options?.locale ?? defaultOptions2.locale ?? enUS;
   const firstWeekContainsDate = options?.firstWeekContainsDate ?? options?.locale?.options?.firstWeekContainsDate ?? defaultOptions2.firstWeekContainsDate ?? defaultOptions2.locale?.options?.firstWeekContainsDate ?? 1;
   const weekStartsOn = options?.weekStartsOn ?? options?.locale?.options?.weekStartsOn ?? defaultOptions2.weekStartsOn ?? defaultOptions2.locale?.options?.weekStartsOn ?? 0;
   const originalDate = toDate(date, options?.in);
@@ -5560,63 +5595,6 @@ function endOfBroadcastWeek(date, dateLib) {
   const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
   return endDate;
 }
-const enUS = {
-  ...enUS$1,
-  labels: {
-    labelDayButton: (date, modifiers, options, dateLib) => {
-      let formatDate;
-      if (dateLib && typeof dateLib.format === "function") {
-        formatDate = dateLib.format.bind(dateLib);
-      } else {
-        formatDate = (d, pattern) => format$2(d, pattern, { locale: enUS$1, ...options });
-      }
-      let label = formatDate(date, "PPPP");
-      if (modifiers.today)
-        label = `Today, ${label}`;
-      if (modifiers.selected)
-        label = `${label}, selected`;
-      return label;
-    },
-    labelMonthDropdown: "Choose the Month",
-    labelNext: "Go to the Next Month",
-    labelPrevious: "Go to the Previous Month",
-    labelWeekNumber: (weekNumber) => `Week ${weekNumber}`,
-    labelYearDropdown: "Choose the Year",
-    labelGrid: (date, options, dateLib) => {
-      let formatDate;
-      if (dateLib && typeof dateLib.format === "function") {
-        formatDate = dateLib.format.bind(dateLib);
-      } else {
-        formatDate = (d, pattern) => format$2(d, pattern, { locale: enUS$1, ...options });
-      }
-      return formatDate(date, "LLLL yyyy");
-    },
-    labelGridcell: (date, modifiers, options, dateLib) => {
-      let formatDate;
-      if (dateLib && typeof dateLib.format === "function") {
-        formatDate = dateLib.format.bind(dateLib);
-      } else {
-        formatDate = (d, pattern) => format$2(d, pattern, { locale: enUS$1, ...options });
-      }
-      let label = formatDate(date, "PPPP");
-      if (modifiers?.today) {
-        label = `Today, ${label}`;
-      }
-      return label;
-    },
-    labelNav: "Navigation bar",
-    labelWeekNumberHeader: "Week Number",
-    labelWeekday: (date, options, dateLib) => {
-      let formatDate;
-      if (dateLib && typeof dateLib.format === "function") {
-        formatDate = dateLib.format.bind(dateLib);
-      } else {
-        formatDate = (d, pattern) => format$2(d, pattern, { locale: enUS$1, ...options });
-      }
-      return formatDate(date, "cccc");
-    }
-  }
-};
 class DateLib {
   /**
    * Creates an instance of `DateLib`.
@@ -6175,7 +6153,7 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
       return isSameDay2(date, matcher);
     }
     if (isDatesArray(matcher, dateLib)) {
-      return matcher.some((matcherDate) => isSameDay2(date, matcherDate));
+      return matcher.includes(date);
     }
     if (isDateRange(matcher)) {
       return rangeIncludesDate(matcher, date, false, dateLib);
@@ -6379,6 +6357,60 @@ function getFormatters(customFormatters) {
     ...customFormatters
   };
 }
+function getMonthOptions(displayMonth, navStart, navEnd, formatters2, dateLib) {
+  const { startOfMonth: startOfMonth2, startOfYear: startOfYear2, endOfYear: endOfYear2, eachMonthOfInterval: eachMonthOfInterval2, getMonth: getMonth2 } = dateLib;
+  const months = eachMonthOfInterval2({
+    start: startOfYear2(displayMonth),
+    end: endOfYear2(displayMonth)
+  });
+  const options = months.map((month) => {
+    const label = formatters2.formatMonthDropdown(month, dateLib);
+    const value = getMonth2(month);
+    const disabled = navStart && month < startOfMonth2(navStart) || navEnd && month > startOfMonth2(navEnd) || false;
+    return { value, label, disabled };
+  });
+  return options;
+}
+function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {
+  let style = { ...styles?.[UI.Day] };
+  Object.entries(dayModifiers).filter(([, active]) => active === true).forEach(([modifier]) => {
+    style = {
+      ...style,
+      ...modifiersStyles?.[modifier]
+    };
+  });
+  return style;
+}
+function getWeekdays(dateLib, ISOWeek, broadcastCalendar, today) {
+  const referenceToday = today ?? dateLib.today();
+  const start2 = broadcastCalendar ? dateLib.startOfBroadcastWeek(referenceToday, dateLib) : ISOWeek ? dateLib.startOfISOWeek(referenceToday) : dateLib.startOfWeek(referenceToday);
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const day = dateLib.addDays(start2, i);
+    days.push(day);
+  }
+  return days;
+}
+function getYearOptions(navStart, navEnd, formatters2, dateLib, reverse2 = false) {
+  if (!navStart)
+    return void 0;
+  if (!navEnd)
+    return void 0;
+  const { startOfYear: startOfYear2, endOfYear: endOfYear2, eachYearOfInterval: eachYearOfInterval2, getYear: getYear2 } = dateLib;
+  const firstNavYear = startOfYear2(navStart);
+  const lastNavYear = endOfYear2(navEnd);
+  const years = eachYearOfInterval2({ start: firstNavYear, end: lastNavYear });
+  if (reverse2)
+    years.reverse();
+  return years.map((year) => {
+    const label = formatters2.formatYearDropdown(year, dateLib);
+    return {
+      value: getYear2(year),
+      label,
+      disabled: false
+    };
+  });
+}
 function labelDayButton(date, modifiers, options, dateLib) {
   let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
   if (modifiers.today)
@@ -6406,9 +6438,8 @@ function labelMonthDropdown(_options) {
 function labelNav() {
   return "";
 }
-const defaultLabel = "Go to the Next Month";
-function labelNext(_month, _options) {
-  return defaultLabel;
+function labelNext(_month) {
+  return "Go to the Next Month";
 }
 function labelPrevious(_month) {
   return "Go to the Previous Month";
@@ -6441,86 +6472,6 @@ const defaultLabels = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defin
   labelWeekday,
   labelYearDropdown
 }, Symbol.toStringTag, { value: "Module" }));
-const resolveLabel = (defaultLabel2, customLabel, localeLabel) => {
-  if (customLabel)
-    return customLabel;
-  if (localeLabel) {
-    return typeof localeLabel === "function" ? localeLabel : (..._args) => localeLabel;
-  }
-  return defaultLabel2;
-};
-function getLabels(customLabels, options) {
-  const localeLabels = options.locale?.labels ?? {};
-  return {
-    ...defaultLabels,
-    ...customLabels ?? {},
-    labelDayButton: resolveLabel(labelDayButton, customLabels?.labelDayButton, localeLabels.labelDayButton),
-    labelMonthDropdown: resolveLabel(labelMonthDropdown, customLabels?.labelMonthDropdown, localeLabels.labelMonthDropdown),
-    labelNext: resolveLabel(labelNext, customLabels?.labelNext, localeLabels.labelNext),
-    labelPrevious: resolveLabel(labelPrevious, customLabels?.labelPrevious, localeLabels.labelPrevious),
-    labelWeekNumber: resolveLabel(labelWeekNumber, customLabels?.labelWeekNumber, localeLabels.labelWeekNumber),
-    labelYearDropdown: resolveLabel(labelYearDropdown, customLabels?.labelYearDropdown, localeLabels.labelYearDropdown),
-    labelGrid: resolveLabel(labelGrid, customLabels?.labelGrid, localeLabels.labelGrid),
-    labelGridcell: resolveLabel(labelGridcell, customLabels?.labelGridcell, localeLabels.labelGridcell),
-    labelNav: resolveLabel(labelNav, customLabels?.labelNav, localeLabels.labelNav),
-    labelWeekNumberHeader: resolveLabel(labelWeekNumberHeader, customLabels?.labelWeekNumberHeader, localeLabels.labelWeekNumberHeader),
-    labelWeekday: resolveLabel(labelWeekday, customLabels?.labelWeekday, localeLabels.labelWeekday)
-  };
-}
-function getMonthOptions(displayMonth, navStart, navEnd, formatters2, dateLib) {
-  const { startOfMonth: startOfMonth2, startOfYear: startOfYear2, endOfYear: endOfYear2, eachMonthOfInterval: eachMonthOfInterval2, getMonth: getMonth2 } = dateLib;
-  const months = eachMonthOfInterval2({
-    start: startOfYear2(displayMonth),
-    end: endOfYear2(displayMonth)
-  });
-  const options = months.map((month) => {
-    const label = formatters2.formatMonthDropdown(month, dateLib);
-    const value = getMonth2(month);
-    const disabled = navStart && month < startOfMonth2(navStart) || navEnd && month > startOfMonth2(navEnd) || false;
-    return { value, label, disabled };
-  });
-  return options;
-}
-function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {
-  let style = { ...styles?.[UI.Day] };
-  Object.entries(dayModifiers).filter(([, active]) => active === true).forEach(([modifier]) => {
-    style = {
-      ...style,
-      ...modifiersStyles?.[modifier]
-    };
-  });
-  return style;
-}
-function getWeekdays(dateLib, ISOWeek, broadcastCalendar, today) {
-  const referenceToday = today ?? dateLib.today();
-  const start2 = broadcastCalendar ? dateLib.startOfBroadcastWeek(referenceToday, dateLib) : ISOWeek ? dateLib.startOfISOWeek(referenceToday) : dateLib.startOfWeek(referenceToday);
-  const days = [];
-  for (let i = 0; i < 7; i++) {
-    const day = dateLib.addDays(start2, i);
-    days.push(day);
-  }
-  return days;
-}
-function getYearOptions(navStart, navEnd, formatters2, dateLib, reverse2 = false) {
-  if (!navStart)
-    return void 0;
-  if (!navEnd)
-    return void 0;
-  const { startOfYear: startOfYear2, endOfYear: endOfYear2, eachYearOfInterval: eachYearOfInterval2, getYear: getYear2 } = dateLib;
-  const firstNavYear = startOfYear2(navStart);
-  const lastNavYear = endOfYear2(navEnd);
-  const years = eachYearOfInterval2({ start: firstNavYear, end: lastNavYear });
-  if (reverse2)
-    years.reverse();
-  return years.map((year) => {
-    const label = formatters2.formatYearDropdown(year, dateLib);
-    return {
-      value: getYear2(year),
-      label,
-      disabled: false
-    };
-  });
-}
 const asHtmlElement = (element) => {
   if (element instanceof HTMLElement)
     return element;
@@ -7353,7 +7304,7 @@ function DayPicker(initialProps) {
       dateLib: dateLib2,
       components: getComponents(props.components),
       formatters: getFormatters(props.formatters),
-      labels: getLabels(props.labels, dateLib2.options),
+      labels: { ...defaultLabels, ...props.labels },
       locale: locale2,
       classNames: { ...getDefaultClassNames(), ...props.classNames }
     };
@@ -7774,7 +7725,7 @@ function CsCard({ className, ...props }) {
     {
       "data-slot": "card",
       className: cn$1(
-        "bg-(--card-common-bg) flex flex-col rounded-(--card-common-radius) border-(length:--card-common-border-width) border-(--card-common-border) gap-(--card-common-gap) mobile:gap-(--card-common-gap-mobile) py-(--card-common-padding-y) mobile:py-(--card-common-padding-y-mobile) px-(--card-common-padding-x) mobile:px-(--card-common-padding-x-mobile) hover:bg-(--card-common-bg-hover) hover:border-(--card-common-border-hover)",
+        "bg-(--card-common-bg) flex flex-col rounded-(--card-common-radius) border-(length:--card-common-border-width) border-(--card-common-border) gap-(--card-common-gap) max-mobile:gap-(--card-common-gap-mobile) py-(--card-common-padding-y) max-mobile:py-(--card-common-padding-y-mobile) px-(--card-common-padding-x) max-mobile:px-(--card-common-padding-x-mobile) hover:bg-(--card-common-bg-hover) hover:border-(--card-common-border-hover)",
         className
       ),
       ...props
@@ -81928,16 +81879,16 @@ var hasRequiredId;
 function requireId() {
   if (hasRequiredId) return id;
   hasRequiredId = 1;
-  (function(exports$1) {
-    Object.defineProperty(exports$1, "__esModule", {
+  (function(exports) {
+    Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports$1["default"] = void 0;
+    exports["default"] = void 0;
     var id2 = 1;
     var _default = function _default2() {
       return "".concat(id2++);
     };
-    exports$1["default"] = _default;
+    exports["default"] = _default;
   })(id);
   return id;
 }
@@ -81948,11 +81899,11 @@ var hasRequiredDebounce;
 function requireDebounce() {
   if (hasRequiredDebounce) return debounce;
   hasRequiredDebounce = 1;
-  (function(exports$1) {
-    Object.defineProperty(exports$1, "__esModule", {
+  (function(exports) {
+    Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports$1["default"] = void 0;
+    exports["default"] = void 0;
     var _default = function _default2(fn) {
       var delay = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 60;
       var timer = null;
@@ -81967,7 +81918,7 @@ function requireDebounce() {
         }, delay);
       };
     };
-    exports$1["default"] = _default;
+    exports["default"] = _default;
   })(debounce);
   return debounce;
 }
@@ -82519,21 +82470,24 @@ function merge(target, source) {
     }
     const sourceValue = source[key];
     const targetValue = target[key];
-    if (isMergeableValue(sourceValue) && isMergeableValue(targetValue)) {
-      target[key] = merge(targetValue, sourceValue);
-    } else if (Array.isArray(sourceValue)) {
-      target[key] = merge([], sourceValue);
+    if (Array.isArray(sourceValue)) {
+      if (Array.isArray(targetValue)) {
+        target[key] = merge(targetValue, sourceValue);
+      } else {
+        target[key] = merge([], sourceValue);
+      }
     } else if (isPlainObject(sourceValue)) {
-      target[key] = merge({}, sourceValue);
+      if (isPlainObject(targetValue)) {
+        target[key] = merge(targetValue, sourceValue);
+      } else {
+        target[key] = merge({}, sourceValue);
+      }
     } else if (targetValue === void 0 || sourceValue !== void 0) {
       target[key] = sourceValue;
     }
   }
   return target;
 }
-function isMergeableValue(value) {
-  return isPlainObject(value) || Array.isArray(value);
-}
 function mergeWith(target, source, merge2) {
   const sourceKeys = Object.keys(source);
   for (let i = 0; i < sourceKeys.length; i++) {
@@ -82548,7 +82502,7 @@ function mergeWith(target, source, merge2) {
       target[key] = merged;
     } else if (Array.isArray(sourceValue)) {
       if (Array.isArray(targetValue)) {
-        target[key] = mergeWith(targetValue, sourceValue, merge2);
+        target[key] = mergeWith(targetValue ?? [], sourceValue, merge2);
       } else {
         target[key] = mergeWith([], sourceValue, merge2);
       }
@@ -82705,7 +82659,7 @@ const getFillerColor = () => {
   const fillerOpacity = getCssVariable("--opacity-state-muted");
   return addOpacityToColor(fillerColor, convertOpacity(fillerOpacity));
 };
-const tooltipBaseStyles = "typo-body-xs z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-(--tooltip-radius) px-(--tooltip-padding-x) py-(--tooltip-padding-y) text-balance text-(--tooltip-font) empty:hidden";
+const tooltipBaseStyles = "typo-body-sm z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-(--tooltip-radius) px-(--tooltip-padding-x) py-(--tooltip-padding-y) text-balance text-(--tooltip-font) empty:hidden";
 const tooltipVariants = {
   solid: "bg-(--tooltip-solid-bg) boxshadow-sm",
   outline: "bg-(--tooltip-outline-bg) border-(--tooltip-outline-border) border-(length:--tooltip-outline-border-width)"
@@ -82763,6 +82717,15 @@ function CsTooltipContent({
     }
   ) });
 }
+function CsSimpleTooltip({ children, tooltip, contentProps, variant, ...rootProps }) {
+  if (!tooltip) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(CsTooltipProvider, { children: /* @__PURE__ */ jsxs(CsTooltip, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(CsTooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(CsTooltipContent, { variant, ...contentProps, children: tooltip })
+  ] }) });
+}
 const CsChartBaseOptions = {
   tooltip: {
     className: csChartTooltipStyle,
@@ -83183,7 +83146,7 @@ function CsDialogHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-header",
-      className: cn$1("flex flex-col gap-(--dialog-container-header-gap) mobile:text-center text-left", className),
+      className: cn$1("flex flex-col gap-(--dialog-container-header-gap) max-mobile:text-center text-left", className),
       ...props
     }
   );
@@ -83194,7 +83157,7 @@ function CsDialogFooter({ className, ...props }) {
     {
       "data-slot": "dialog-footer",
       className: cn$1(
-        "flex flex-col-reverse gap-(--dialog-container-footer-gap) mobile:flex-row mobile:justify-end",
+        "flex flex-col-reverse gap-(--dialog-container-footer-gap) max-mobile:flex-row max-mobile:justify-end",
         className
       ),
       ...props
@@ -89096,13 +89059,13 @@ function CsNavigationMenuItem({
   );
 }
 const csNavigationMenuTriggerStyle = cva(
-  "typo-body-sm group inline-flex w-max items-center justify-center px-(--navigation-button-common-padding-x) py-(--navigation-button-common-padding-y) gap-(--navigation-button-common-gap) outline-none transition-[color,background-color] disabled:pointer-events-none disabled:opacity-(--opacity-state-disabled) [&_svg]:size-(--navigation-button-common-icon-size)",
+  "typo-body-sm group inline-flex w-max items-center justify-center px-(--navigation-button-common-padding-x) py-(--navigation-button-common-padding-y) gap-(--navigation-button-common-gap) outline-none transition-[color,background-color] disabled:pointer-events-none disabled:opacity-(--opacity-state-disabled) [&_svg]:size-(--navigation-button-common-icon-size) [&_svg]:transition-colors",
   {
     variants: {
       variant: {
-        "solid-ghost": "rounded-(--navigation-button-common-radius) text-(--navigation-button-solid-ghost-default-font) hover:bg-(--navigation-button-solid-ghost-active-bg) hover:text-(--navigation-button-solid-ghost-active-font) data-[state=open]:bg-(--navigation-button-solid-ghost-active-bg) data-[state=open]:text-(--navigation-button-solid-ghost-active-font) disabled:text-(--navigation-button-solid-ghost-disabled-font) [&_svg]:text-(--navigation-button-solid-ghost-default-icon) [&_svg]:hover:text-(--navigation-button-solid-ghost-active-icon) [&_svg]:disabled:text-(--navigation-button-solid-ghost-disabled-icon)",
-        "bottom-border": "text-(--navigation-button-bottom-border-default-font) hover:text-(--navigation-button-bottom-border-hover-font) data-[state=open]:text-(--navigation-button-bottom-border-active-font) disabled:text-(--navigation-button-bottom-border-disabled-font) [&_svg]:text-(--navigation-button-bottom-border-default-icon) [&_svg]:hover:text-(--navigation-button-bottom-border-hover-icon) [&_svg]:data-[state=open]:text-(--navigation-button-bottom-border-active-icon) [&_svg]:disabled:text-(--navigation-button-bottom-border-disabled-icon) border-b-transparent border-b-(length:--navigation-button-bottom-border-active-border-width) data-[state=open]:border-b-(--navigation-button-bottom-border-active-border)",
-        "gradient": "rounded-(--navigation-button-common-radius) text-(--navigation-button-gradient-default-font) hover:gradient-primary-vertical data-[state=open]:text-(--navigation-button-gradient-active-font) disabled:text-(--navigation-button-gradient-disabled-font) [&_svg]:text-(--navigation-button-gradient-default-icon) [&_svg]:data-[state=open]:text-(--navigation-button-gradient-active-icon) [&_svg]:disabled:text-(--navigation-button-gradient-disabled-icon)"
+        "solid-ghost": "rounded-(--navigation-button-common-radius) text-(--navigation-button-solid-ghost-default-font) hover:bg-(--navigation-button-solid-ghost-active-bg) hover:text-(--navigation-button-solid-ghost-active-font) data-[state=open]:bg-(--navigation-button-solid-ghost-active-bg) data-[state=open]:text-(--navigation-button-solid-ghost-active-font) disabled:text-(--navigation-button-solid-ghost-disabled-font) [&_svg]:text-(--navigation-button-solid-ghost-default-icon) hover:[&_svg]:text-(--navigation-button-solid-ghost-active-icon) data-[state=open]:[&_svg]:text-(--navigation-button-solid-ghost-active-icon) disabled:[&_svg]:text-(--navigation-button-solid-ghost-disabled-icon)",
+        "bottom-border": "text-(--navigation-button-bottom-border-default-font) hover:text-(--navigation-button-bottom-border-hover-font) data-[state=open]:text-(--navigation-button-bottom-border-active-font) disabled:text-(--navigation-button-bottom-border-disabled-font) [&_svg]:text-(--navigation-button-bottom-border-default-icon) hover:[&_svg]:text-(--navigation-button-bottom-border-hover-icon) data-[state=open]:[&_svg]:text-(--navigation-button-bottom-border-active-icon) disabled:[&_svg]:text-(--navigation-button-bottom-border-disabled-icon) border-b-transparent border-b-(length:--navigation-button-bottom-border-active-border-width) data-[state=open]:border-b-(--navigation-button-bottom-border-active-border)",
+        "gradient": "rounded-(--navigation-button-common-radius) text-(--navigation-button-gradient-default-font) hover:gradient-primary-vertical data-[state=open]:text-(--navigation-button-gradient-active-font) disabled:text-(--navigation-button-gradient-disabled-font) [&_svg]:text-(--navigation-button-gradient-default-icon) hover:[&_svg]:text-(--navigation-button-gradient-active-icon) data-[state=open]:[&_svg]:text-(--navigation-button-gradient-active-icon) disabled:[&_svg]:text-(--navigation-button-gradient-disabled-icon)"
       }
     },
     defaultVariants: {
@@ -89139,6 +89102,7 @@ function CsNavigationMenuTrigger({
     }
   );
 }
+const NavigationMenuInContentContext = React.createContext(false);
 function CsNavigationMenuContent({
   className,
   ...props
@@ -89148,9 +89112,9 @@ function CsNavigationMenuContent({
     {
       "data-slot": "navigation-menu-content",
       className: cn$1(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full bg-(--navigation-item-container-bg) text-(--font-color-primary-default) rounded-(--navigation-item-container-radius) border-(--navigation-item-container-border) border-(length:--navigation-item-container-border-width) px-(--navigation-item-container-padding-x) py-(--navigation-item-container-padding-y) gap-(--navigation-item-container-gap) absolute w-auto mobile:static mobile:w-full",
-        "group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:outline-none",
-        "boxshadow-lg",
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 bg-(--navigation-item-container-bg) text-(--font-color-primary-default) rounded-(--navigation-item-container-radius) border-(--navigation-item-container-border) border-(length:--navigation-item-container-border-width) px-(--navigation-item-container-padding-x) py-(--navigation-item-container-padding-y) gap-(--navigation-item-container-gap) absolute w-auto max-mobile:static max-mobile:!w-full",
+        "group-data-[viewport=false]/navigation-menu:z-[100] group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:outline-none",
+        "boxshadow-lg flex flex-col",
         className
       ),
       ...props
@@ -89165,14 +89129,14 @@ function CsNavigationMenuViewport({
     "div",
     {
       className: cn$1(
-        "absolute top-full left-0 isolate z-50 flex w-full justify-center"
+        "absolute top-full left-0 isolate z-[100] flex justify-center max-mobile:w-full!"
       ),
       children: /* @__PURE__ */ jsx(
         NavigationMenuPrimitive.Viewport,
         {
           "data-slot": "navigation-menu-viewport",
           className: cn$1(
-            "origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden laptop:w-[var(--radix-navigation-menu-viewport-width)]",
+            "origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1 h-[var(--radix-navigation-menu-viewport-height)] w-[var(--radix-navigation-menu-viewport-width)] max-mobile:w-full! overflow-hidden rounded-(--navigation-item-container-radius)",
             "boxshadow-lg",
             className
           ),
@@ -89183,12 +89147,12 @@ function CsNavigationMenuViewport({
   );
 }
 const csNavigationMenuLinkVariants = cva(
-  "typo-body-sm flex transition-all outline-none whitespace-nowrap",
+  "typo-body-sm flex transition-all outline-none whitespace-nowrap [&_svg]:transition-colors",
   {
     variants: {
       variant: {
-        item: "items-center gap-(--navigation-item-common-gap) rounded-(--navigation-item-common-radius) px-(--navigation-item-common-padding-x) py-(--navigation-item-common-padding-y) data-[active=true]:bg-(--navigation-item-hover-bg) data-[active=true]:text-(--navigation-item-hover-font) hover:bg-(--navigation-item-hover-bg) hover:text-(--navigation-item-hover-font) focus:bg-(--navigation-item-hover-bg) focus:text-(--navigation-item-hover-font) text-(--navigation-item-default-font) [&_svg:not([class*='text-'])]:text-(--navigation-item-default-icon) [&_svg:not([class*='size-'])]:size-(--navigation-item-common-icon-size)",
-        "item-content": "flex-col gap-(--navigation-item-content-common-gap) rounded-(--navigation-item-content-common-radius) px-(--navigation-item-content-common-padding-x) py-(--navigation-item-content-common-padding-y) data-[active=true]:bg-(--navigation-item-content-hover-bg) data-[active=true]:text-(--navigation-item-content-hover-title) hover:bg-(--navigation-item-content-hover-bg) hover:text-(--navigation-item-content-hover-title) focus:bg-(--navigation-item-content-hover-bg) focus:text-(--navigation-item-content-hover-title) text-(--navigation-item-content-default-title) [&_svg:not([class*='text-'])]:text-(--navigation-item-content-default-icon) [&_svg:not([class*='size-'])]:size-(--navigation-item-content-common-icon-size) [&_svg]:data-[active=true]:text-(--navigation-item-content-hover-icon) [&_svg]:hover:text-(--navigation-item-content-hover-icon)"
+        item: "items-center gap-(--navigation-item-common-gap) rounded-(--navigation-item-common-radius) px-(--navigation-item-common-padding-x) py-(--navigation-item-common-padding-y) data-[active=true]:bg-(--navigation-item-hover-bg) data-[active=true]:text-(--navigation-item-hover-font) hover:bg-(--navigation-item-hover-bg) hover:text-(--navigation-item-hover-font) focus:bg-(--navigation-item-hover-bg) focus:text-(--navigation-item-hover-font) text-(--navigation-item-default-font) [&_svg:not([class*='text-'])]:text-(--navigation-item-default-icon) [&_svg:not([class*='size-'])]:size-(--navigation-item-common-icon-size) hover:[&_svg:not([class*='text-'])]:text-(--navigation-item-hover-icon) data-[active=true]:[&_svg:not([class*='text-'])]:text-(--navigation-item-hover-icon)",
+        "item-content": "flex-col gap-(--navigation-item-content-common-gap) rounded-(--navigation-item-content-common-radius) px-(--navigation-item-content-common-padding-x) py-(--navigation-item-content-common-padding-y) data-[active=true]:bg-(--navigation-item-content-hover-bg) data-[active=true]:text-(--navigation-item-content-hover-title) hover:bg-(--navigation-item-content-hover-bg) hover:text-(--navigation-item-content-hover-title) focus:bg-(--navigation-item-content-hover-bg) focus:text-(--navigation-item-content-hover-title) text-(--navigation-item-content-default-title) [&_svg:not([class*='text-'])]:text-(--navigation-item-content-default-icon) [&_svg:not([class*='size-'])]:size-(--navigation-item-content-common-icon-size) data-[active=true]:[&_svg]:text-(--navigation-item-content-hover-icon) hover:[&_svg]:text-(--navigation-item-content-hover-icon)"
       }
     },
     defaultVariants: {
@@ -89201,12 +89165,14 @@ function CsNavigationMenuLink({
   variant = "item",
   ...props
 }) {
+  const contextVariant = React.useContext(NavigationMenuVariantContext);
+  const isInsideContent = React.useContext(NavigationMenuInContentContext);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Link,
     {
       "data-slot": "navigation-menu-link",
       className: cn$1(
-        csNavigationMenuLinkVariants({ variant }),
+        isInsideContent ? csNavigationMenuLinkVariants({ variant }) : csNavigationMenuTriggerStyle({ variant: contextVariant }),
         className
       ),
       ...props
@@ -89272,7 +89238,7 @@ function CsPaginationLink({
       className: cn$1(
         "typo-body-sm transition-colors cursor-pointer flex items-center justify-center h-(--pagination-common-item-size) min-w-(--pagination-common-item-size) rounded-(--pagination-common-radius) text-(--pagination-link-default-font) [&_svg]:size-(--pagination-common-icon-size)",
         "hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) aria-disabled:cursor-not-allowed aria-disabled:opacity-(--opacity-state-disabled)",
-        isActive && "bg-(--pagination-item-active-bg) text-(--pagination-item-active-font) border-(length:--pagination-item-active-border-width) border-(--pagination-item-active-border) hover:bg-(--pagination-item-active-hover-bg) hover:text-(--pagination-item-active-hover-font) hover:border-(length:--pagination-item-active-hover-border-width) hover:border-(--pagination-item-active-hover-border)",
+        isActive && "typo-body-sm-bold bg-(--pagination-item-active-bg) text-(--pagination-item-active-font) border-(length:--pagination-item-active-border-width) border-(--pagination-item-active-border) hover:bg-(--pagination-item-active-hover-bg) hover:text-(--pagination-item-active-hover-font) hover:border-(length:--pagination-item-active-hover-border-width) hover:border-(--pagination-item-active-hover-border)",
         className
       ),
       ...props
@@ -89289,14 +89255,14 @@ function CsPaginationPrevious({
     {
       "aria-label": "Go to previous page",
       className: cn$1(
-        "gap-(--pagination-common-gap) mobile:px-(--pagination-common-padding-sm) pr-(--pagination-common-padding-md) pl-(--pagination-common-padding-sm) text-(--pagination-link-default-font) [&_svg]:text-(--pagination-link-default-icon)",
-        "hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) [&_svg]:hover:text-(--pagination-link-hover-icon)",
+        "gap-(--pagination-common-gap) max-mobile:px-(--pagination-common-padding-sm) pr-(--pagination-common-padding-md) pl-(--pagination-common-padding-sm) text-(--pagination-link-default-font) [&_svg]:text-(--pagination-link-default-icon) [&_svg]:transition-colors",
+        "hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) hover:[&_svg]:text-(--pagination-link-hover-icon)",
         className
       ),
       ...props,
       children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsx(ChevronLeft, {}),
-        /* @__PURE__ */ jsx("span", { className: "mobile:hidden block", children: "Previous" })
+        /* @__PURE__ */ jsx("span", { className: "max-mobile:hidden block", children: "Previous" })
       ] })
     }
   );
@@ -89311,13 +89277,13 @@ function CsPaginationNext({
     {
       "aria-label": "Go to next page",
       className: cn$1(
-        "gap-(--pagination-common-gap) mobile:px-(--pagination-common-padding-sm) pl-(--pagination-common-padding-md) pr-(--pagination-common-padding-sm) text-(--pagination-link-default-font) [&_svg]:text-(--pagination-link-default-icon)",
-        "hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) [&_svg]:hover:text-(--pagination-link-hover-icon)",
+        "gap-(--pagination-common-gap) max-mobile:px-(--pagination-common-padding-sm) pl-(--pagination-common-padding-md) pr-(--pagination-common-padding-sm) text-(--pagination-link-default-font) [&_svg]:text-(--pagination-link-default-icon) [&_svg]:transition-colors",
+        "hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) hover:[&_svg]:text-(--pagination-link-hover-icon)",
         className
       ),
       ...props,
       children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx("span", { className: "mobile:hidden block", children: "Next" }),
+        /* @__PURE__ */ jsx("span", { className: "max-mobile:hidden block", children: "Next" }),
         /* @__PURE__ */ jsx(ChevronRight, {})
       ] })
     }
@@ -89408,11 +89374,11 @@ function CsSelectValue({
   return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 const csSelectTriggerVariants = cva(
-  "focus-visible:ring-0 flex w-fit items-center justify-between whitespace-nowrap transition-[color,box-shadow] outline-none disabled:cursor-not-allowed *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center rounded-(--select-default-common-radius) border-(length:--select-default-common-border-width) [&_svg:not([class*='size-'])]:size-(--select-default-common-icon-size) bg-(--select-default-default-bg) border-(--select-default-default-border) text-(--select-default-default-font) data-[placeholder]:text-(--font-color-primary-muted) [&_svg]:text-(--select-default-default-icon) hover:bg-(--select-default-hover-bg) hover:border-(--select-default-hover-border) hover:text-(--select-default-hover-font) hover:[&_svg]:text-(--select-default-hover-icon) disabled:bg-(--select-default-disabled-bg) disabled:border-(--select-default-disabled-border) disabled:text-(--select-default-disabled-font) disabled:[&_svg]:text-(--select-default-disabled-icon)",
+  "focus-visible:ring-0 flex w-fit items-center justify-between whitespace-nowrap transition-[color,box-shadow] outline-none disabled:cursor-not-allowed *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center rounded-(--select-base-common-radius) border-(length:--select-base-common-border-width) [&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) bg-(--select-base-default-bg) border-(--select-base-default-border) text-(--select-base-default-font) data-[placeholder]:text-(--font-color-primary-muted) [&_svg]:text-(--select-base-default-icon) hover:bg-(--select-base-hover-bg) hover:border-(--select-base-hover-border) hover:text-(--select-base-hover-font) hover:[&_svg]:text-(--select-base-hover-icon) disabled:bg-(--select-base-disabled-bg) disabled:border-(--select-base-disabled-border) disabled:text-(--select-base-disabled-font) disabled:[&_svg]:text-(--select-base-disabled-icon)",
   {
     variants: {
       size: {
-        default: "typo-body-sm h-(--select-default-common-height) px-(--select-default-common-padding-x) gap-(--select-default-common-gap) *:data-[slot=select-value]:gap-(--select-default-common-gap)",
+        default: "typo-body-sm h-(--select-base-common-height) px-(--select-base-common-padding-x) gap-(--select-base-common-gap) *:data-[slot=select-value]:gap-(--select-base-common-gap)",
         sm: "typo-body-xs h-(--select-small-common-height) px-(--select-small-common-padding-x) gap-(--select-small-common-gap) *:data-[slot=select-value]:gap-(--select-small-common-gap)"
       }
     },
@@ -89433,7 +89399,7 @@ const CsSelectTrigger = React.forwardRef(({ className, children, size = "default
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "text-(--select-base-default-icon) size-(--select-base-common-icon-size)" }) })
     ]
   }
 ));
@@ -89509,7 +89475,7 @@ function CsSelectItem({
       children: [
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "ml-auto", children: /* @__PURE__ */ jsx(Check, {}) }),
-        /* @__PURE__ */ jsx("div", { className: "ml-auto size-(--select-default-common-icon-size) group-data-[state=checked]:hidden" })
+        /* @__PURE__ */ jsx("div", { className: "ml-auto size-(--select-base-common-icon-size) group-data-[state=checked]:hidden" })
       ]
     }
   );
@@ -89538,7 +89504,7 @@ function CsSelectScrollUpButton({
       "data-slot": "select-scroll-up-button",
       className: cn$1(
         csDropdownMenuItemCommonClassName,
-        "[&_svg:not([class*='size-'])]:size-(--select-default-common-icon-size) [&_svg]:text-(--select-default-default-icon)",
+        "[&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) [&_svg]:text-(--select-base-default-icon)",
         className
       ),
       ...props,
@@ -89557,7 +89523,7 @@ function CsSelectScrollDownButton({
       "data-slot": "select-scroll-down-button",
       className: cn$1(
         csDropdownMenuItemCommonClassName,
-        "[&_svg:not([class*='size-'])]:size-(--select-default-common-icon-size) [&_svg]:text-(--select-default-default-icon)",
+        "[&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) [&_svg]:text-(--select-base-default-icon)",
         className
       ),
       ...props,
@@ -94096,7 +94062,7 @@ function CsTableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn$1(
-        "typo-body-sm text-(--table-item-header-font) px-(--table-item-common-padding-x) py-(--table-item-common-padding-y) text-left align-middle whitespace-nowrap border-b-(--table-item-header-border) border-b-(length:--table-item-header-boder-width) [&_svg]:size-(--table-item-common-icon-size) [&_svg]:text-(--table-item-header-icon)",
+        "typo-body-xs-bold text-(--table-item-header-font) px-(--table-item-common-padding-x) py-(--table-item-common-padding-y) text-left align-middle whitespace-nowrap border-b-(--table-item-header-border) border-b-(length:--table-item-header-boder-width) [&_svg]:size-(--table-item-common-icon-size) [&_svg]:text-(--table-item-header-icon)",
         "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       ),
@@ -94110,7 +94076,7 @@ function CsTableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn$1(
-        "typo-body-sm bg-(--table-item-cell-bg) text-(--table-item-cell-font) px-(--table-item-common-padding-x) py-(--table-item-common-padding-y) align-middle whitespace-nowrap [&_svg]:size-(--table-item-common-icon-size) [&_svg]:text-(--table-item-cell-icon)",
+        "typo-metric-sm bg-(--table-item-cell-bg) text-(--table-item-cell-font) px-(--table-item-common-padding-x) py-(--table-item-common-padding-y) align-middle whitespace-nowrap [&_svg]:size-(--table-item-common-icon-size) [&_svg]:text-(--table-item-cell-icon)",
         "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         "last:bg-(--table-item-cell-last-bg)",
         className
@@ -94319,7 +94285,7 @@ function CsTabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn$1(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-(--tabs-item-common-radius) px-(--tabs-item-common-padding-x) py-(--tabs-item-common-padding-y) gap-(--tabs-item-common-gap) transition-all focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none [&_svg]:size-(--tabs-item-common-icon-size) typo-body-sm",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-(--tabs-item-common-radius) px-(--tabs-item-common-padding-x) py-(--tabs-item-common-padding-y) gap-(--tabs-item-common-gap) transition-all focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none [&_svg]:size-(--tabs-item-common-icon-size) typo-body-sm-bold",
         // Solid
         "group-data-[variant=solid]:data-[state=active]:bg-(--tabs-item-solid-on-bg) group-data-[variant=solid]:data-[state=active]:text-(--tabs-item-solid-on-font) group-data-[variant=solid]:data-[state=active]:[&_svg]:text-(--tabs-item-solid-on-icon)",
         "group-data-[variant=solid]:bg-(--tabs-item-solid-off-bg) group-data-[variant=solid]:text-(--tabs-item-solid-off-font) group-data-[variant=solid]:[&_svg]:text-(--tabs-item-solid-off-icon)",
@@ -94535,6 +94501,9 @@ export {
   CsAlertDialogTitle,
   CsAlertDialogTrigger,
   CsAreaChart,
+  CsAvatar,
+  CsAvatarFallback,
+  CsAvatarImage,
   CsBadge,
   CsBarChart,
   CsBox,
@@ -94652,6 +94621,7 @@ export {
   CsSelectValue,
   CsSeparator,
   CsSimpleSelect,
+  CsSimpleTooltip,
   CsSkeleton,
   CsSonner,
   CsSpinner,
@@ -94710,6 +94680,7 @@ export {
   csNavigationMenuLinkVariants,
   csNavigationMenuTriggerStyle,
   csProgressVariants,
+  csSelectTriggerVariants,
   csTabsListVariants,
   csToggleVariants,
   csTooltipContentVariants,