@grandbazar/ui-baza 1.4.1 → 1.5.0

package/dist/index.cjs

@@ -63,7 +63,7 @@ const green = "_green_1s8y9_43";
 const neutral$3 = "_neutral_1s8y9_48";
 const lg$7 = "_lg_1s8y9_53";
 const md$a = "_md_1s8y9_60";
-const styles$y = {
+const styles$D = {
 	badge: badge,
 	primary: primary$4,
 	secondary: secondary$5,
@@ -79,13 +79,13 @@ const styles$y = {
 };
 
 function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$y.badge, styles$y[size], styles$y[color], styles$y[mode], className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$D.badge, styles$D[size], styles$D[color], styles$D[mode], className), ...props, children });
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
 const primary$3 = "_primary_10lit_18";
 const secondary$4 = "_secondary_10lit_36";
-const styles$x = {
+const styles$C = {
 	badgeTabsItem: badgeTabsItem,
 	primary: primary$3,
 	secondary: secondary$4
@@ -98,7 +98,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
       type: "button",
       role: "tab",
       "aria-selected": Boolean(isActive),
-      className: classNames(styles$x.badgeTabsItem, styles$x[mode], className),
+      className: classNames(styles$C.badgeTabsItem, styles$C[mode], className),
       ...props,
       children
     }
@@ -106,12 +106,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
 }
 
 const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
-const styles$w = {
+const styles$B = {
 	badgeTabsRoot: badgeTabsRoot
 };
 
 function BadgeTabsRoot({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$w.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$B.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -1136,7 +1136,7 @@ function IconXMarkCircle(props) {
 const breadcrumbs = "_breadcrumbs_1bfmb_2";
 const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
 const defaultSeparator = "_defaultSeparator_1bfmb_14";
-const styles$v = {
+const styles$A = {
 	breadcrumbs: breadcrumbs,
 	breadcrumbsItem: breadcrumbsItem,
 	defaultSeparator: defaultSeparator
@@ -1185,7 +1185,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$u = {
+const styles$z = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1196,7 +1196,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
     {
       "data-active": isActive,
       "data-disabled": props.disabled,
-      className: classNames(styles$u.breadcrumbItem, className),
+      className: classNames(styles$z.breadcrumbItem, className),
       ...isActive && { "aria-current": "page" },
       ...!asChild && { type: "button" },
       ...props,
@@ -1208,13 +1208,13 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$v.defaultSeparator })
+  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$A.defaultSeparator })
 }) {
   const childrenArray = Array.isArray(children) ? children : [children];
   const lastIndex = childrenArray.length - 1;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$v.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$v.breadcrumbsItem, children: item }),
-    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$v.breadcrumbsItem, "aria-hidden": "true", children: separator })
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$A.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$A.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$A.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
@@ -1229,7 +1229,7 @@ const neutral$2 = "_neutral_1waqk_78";
 const lg$6 = "_lg_1waqk_145";
 const md$9 = "_md_1waqk_153";
 const sm$4 = "_sm_1waqk_161";
-const styles$t = {
+const styles$y = {
 	button: button,
 	accent: accent$3,
 	primary: primary$2,
@@ -1247,7 +1247,7 @@ const accent$2 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
 const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
-const styles$s = {
+const styles$x = {
 	buttonFunction: buttonFunction,
 	accent: accent$2,
 	neutral: neutral$1,
@@ -1267,7 +1267,7 @@ function ButtonFunction({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$s.buttonFunction, styles$s[color], styles$s[size], className),
+      className: classNames(styles$x.buttonFunction, styles$x[color], styles$x[size], className),
       ...props.disabled && { "data-disabled": true },
       ...!asChild && { type: "button" },
       ...props,
@@ -1289,7 +1289,7 @@ function Button({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$t.button, styles$t[color], styles$t[size], styles$t[mode], className),
+      className: classNames(styles$y.button, styles$y[color], styles$y[size], styles$y[mode], className),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1301,7 +1301,7 @@ Button.Function = ButtonFunction;
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
-const styles$r = {
+const styles$w = {
 	checkboxWrapper: checkboxWrapper,
 	icon: icon$2,
 	checkbox: checkbox
@@ -1314,11 +1314,11 @@ function Checkbox({ className, label, indeterminate, ...props }) {
     {
       "data-disabled": `${Boolean(props.disabled)}`,
       "data-state": dataState,
-      className: classNames(styles$r.checkboxWrapper, className),
+      className: classNames(styles$w.checkboxWrapper, className),
       children: [
-        dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$r.icon }),
-        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$r.icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$r.checkbox, ...props }),
+        dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$w.icon }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$w.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$w.checkbox, ...props }),
         label
       ]
     }
@@ -1326,7 +1326,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$q = {
+const styles$v = {
 	chip: chip
 };
 
@@ -1334,7 +1334,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$q.chip, className),
+      className: classNames(styles$v.chip, className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
@@ -1352,7 +1352,7 @@ const accent$1 = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
-const styles$p = {
+const styles$u = {
 	root: root$1,
 	lg: lg$4,
 	md: md$7,
@@ -1364,7 +1364,7 @@ const styles$p = {
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$p.root, styles$p[size], styles$p[color], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$u.root, styles$u[size], styles$u[color], className), ...props });
 }
 
 const LOCALE_FIRST_DAY_OF_WEEK = {
@@ -1374,7 +1374,7 @@ const LOCALE_FIRST_DAY_OF_WEEK = {
 
 const datePickerCellWrapper = "_datePickerCellWrapper_np1gx_2";
 const datePickerCell = "_datePickerCell_np1gx_2";
-const styles$o = {
+const styles$t = {
 	datePickerCellWrapper: datePickerCellWrapper,
 	datePickerCell: datePickerCell,
 	"radius-none": "_radius-none_np1gx_83",
@@ -1384,10 +1384,10 @@ const styles$o = {
 };
 
 function DatePickerCell({ children, className, state, isCurrent, radius = "both", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$o.datePickerCellWrapper, styles$o[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$t.datePickerCellWrapper, styles$t[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
-      className: classNames(styles$o.datePickerCell, styles$o[`radius-${radius}`], className),
+      className: classNames(styles$t.datePickerCell, styles$t[`radius-${radius}`], className),
       type: "button",
       role: "gridcell",
       "aria-selected": state === "selected",
@@ -1457,7 +1457,7 @@ function normalizeDateRange(firstDate, secondDate) {
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
-const styles$n = {
+const styles$s = {
 	datePickerField: datePickerField,
 	datePickerFieldCalendar: datePickerFieldCalendar,
 	datePickerFieldWeek: datePickerFieldWeek
@@ -1472,9 +1472,9 @@ function DatePickerField({
   firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru
 }) {
   const weeks = React.useMemo(() => getCalendarGrid(month, year, firstDayOfWeek), [month, year, firstDayOfWeek]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$n.datePickerField, className), role: "grid", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$s.datePickerField, className), role: "grid", children: [
     renderWeekdays?.(),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$n.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$n.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsxRuntime.jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$s.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$s.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsxRuntime.jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
   ] });
 }
 
@@ -1515,13 +1515,13 @@ const I18N_MONTH_LABELS = {
 
 const datePickerWeekdays = "_datePickerWeekdays_p8tsm_2";
 const datePickerWeekday = "_datePickerWeekday_p8tsm_2";
-const styles$m = {
+const styles$r = {
 	datePickerWeekdays: datePickerWeekdays,
 	datePickerWeekday: datePickerWeekday
 };
 
 function DatePickerWeekDays({ className, locale = "ru" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$m.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$m.datePickerWeekday, role: "columnheader", children: label }, label)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$r.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$r.datePickerWeekday, role: "columnheader", children: label }, label)) });
 }
 
 function DatePicker() {
@@ -1757,21 +1757,21 @@ const DROPDOWN_PORTAL_SIDE_CONFIG = {
 };
 
 const dropdownContent = "_dropdownContent_12tkb_2";
-const styles$l = {
+const styles$q = {
 	dropdownContent: dropdownContent
 };
 
 function DropdownContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$l.dropdownContent, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$q.dropdownContent, className), ...props, children });
 }
 
 const dropdownItem = "_dropdownItem_msc4i_2";
-const styles$k = {
+const styles$p = {
 	dropdownItem: dropdownItem
 };
 
 function DropdownItem({ className, children, disabled, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$k.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$p.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
 }
 
 const CLICK_OUTSIDE_IGNORE_DATA_NAME = "data-clickoutside-ignore";
@@ -2199,7 +2199,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$j = {
+const styles$o = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2239,7 +2239,7 @@ function DropdownPortal({
           ...style
         },
         ref: portalRef,
-        className: classNames(styles$j.dropdownPortal, className),
+        className: classNames(styles$o.dropdownPortal, className),
         ...handlersByTrigger[triggerEvent],
         ...isNested && { [CLICK_OUTSIDE_IGNORE_DATA_NAME]: "true" },
         children
@@ -2296,7 +2296,7 @@ const closeButton = "_closeButton_1kerp_74";
 const closeIcon = "_closeIcon_1kerp_95";
 const description = "_description_1kerp_100";
 const actions = "_actions_1kerp_108";
-const styles$i = {
+const styles$n = {
 	notificationInline: notificationInline,
 	accent: accent,
 	negative: negative,
@@ -2331,15 +2331,15 @@ function NotificationInline({
   ...props
 }) {
   const StatusIcon = STATUS_ICONS[color];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$i.notificationInline, styles$i[color], styles$i[mode], className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: styles$i.statusIcon, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$i.body, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$i.titleRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$i.title, children: title }),
-        onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close", className: styles$i.closeButton, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(IconXMark.Small, { className: styles$i.closeIcon, "aria-hidden": "true" }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$n.notificationInline, styles$n[color], styles$n[mode], className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: styles$n.statusIcon, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$n.body, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$n.titleRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$n.title, children: title }),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close", className: styles$n.closeButton, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(IconXMark.Small, { className: styles$n.closeIcon, "aria-hidden": "true" }) })
       ] }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$i.description, children: description }),
-      children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$i.actions, children })
+      description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$n.description, children: description }),
+      children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$n.actions, children })
     ] })
   ] });
 }
@@ -2355,7 +2355,7 @@ const BOUNDARY_PAGES = 2;
 const paginationItem = "_paginationItem_1ll6p_2";
 const md$6 = "_md_1ll6p_46";
 const sm$3 = "_sm_1ll6p_60";
-const styles$h = {
+const styles$m = {
 	paginationItem: paginationItem,
 	md: md$6,
 	sm: sm$3
@@ -2367,7 +2367,7 @@ function PaginationItem({ className, children, size = "md", isCurrent, ...props
     {
       type: "button",
       ...isCurrent && { "aria-current": "page" },
-      className: classNames(styles$h.paginationItem, styles$h[size], className),
+      className: classNames(styles$m.paginationItem, styles$m[size], className),
       ...props,
       children
     }
@@ -2404,7 +2404,7 @@ function getVisiblePages(totalPages, maxVisiblePagesWithEllipsis, currentPage) {
 const paginationRoot = "_paginationRoot_c5fwx_2";
 const paginationList = "_paginationList_c5fwx_7";
 const arrowLeft = "_arrowLeft_c5fwx_13";
-const styles$g = {
+const styles$l = {
 	paginationRoot: paginationRoot,
 	paginationList: paginationList,
 	arrowLeft: arrowLeft
@@ -2431,9 +2431,9 @@ function PaginationRoot({
     {
       "aria-label": "pagination navigation",
       role: "navigation",
-      className: classNames(styles$g.paginationRoot, className),
+      className: classNames(styles$l.paginationRoot, className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$g.paginationList, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$l.paginationList, children: [
         showArrows && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           PaginationItem$1,
           {
@@ -2441,7 +2441,7 @@ function PaginationRoot({
             onClick: () => onPageChange(currentPage - 1),
             disabled: isFirstPage,
             size,
-            children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$g.arrowLeft })
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$l.arrowLeft })
           }
         ) }),
         visiblePages.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: page === ELLIPSIS_SYMBOL ? /* @__PURE__ */ jsxRuntime.jsx(PaginationItem$1, { "aria-label": "More pages", disabled: true, size, children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -2481,7 +2481,7 @@ const fill$1 = "_fill_33gbh_23";
 const trail = "_trail_33gbh_28";
 const sm$2 = "_sm_33gbh_32";
 const md$5 = "_md_33gbh_36";
-const styles$f = {
+const styles$k = {
 	root: root,
 	segment: segment,
 	flexGrow: flexGrow,
@@ -2502,7 +2502,7 @@ function ProgressBarLinear({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames(styles$f.root, styles$f[size], className),
+      className: classNames(styles$k.root, styles$k[size], className),
       role: "progressbar",
       "aria-valuenow": clampedPercent,
       "aria-valuemin": 0,
@@ -2514,14 +2514,14 @@ function ProgressBarLinear({
         (Boolean(clampedPercent) || showFillOnZero) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames(styles$f.segment, styles$f.fill),
+            className: classNames(styles$k.segment, styles$k.fill),
             style: {
               "--clamped-percent": `${clampedPercent}%`
             },
             "aria-hidden": "true"
           }
         ),
-        clampedPercent < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$f.segment, styles$f.flexGrow, styles$f.trail), "aria-hidden": "true" })
+        clampedPercent < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$k.segment, styles$k.flexGrow, styles$k.trail), "aria-hidden": "true" })
       ]
     }
   );
@@ -2541,7 +2541,7 @@ function ProgressBarSteps({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames(styles$f.segment, styles$f.flexGrow, isFilled ? styles$f.fill : styles$f.trail),
+        className: classNames(styles$k.segment, styles$k.flexGrow, isFilled ? styles$k.fill : styles$k.trail),
         "aria-hidden": "true"
       },
       index
@@ -2550,7 +2550,7 @@ function ProgressBarSteps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$f.root, styles$f[size], className),
+      className: classNames(styles$k.root, styles$k[size], className),
       role: "progressbar",
       "aria-valuenow": clampedCurrent,
       "aria-valuemin": 0,
@@ -2570,14 +2570,14 @@ ProgressBar.Steps = ProgressBarSteps;
 
 const radioWrapper = "_radioWrapper_13xie_2";
 const radio = "_radio_13xie_2";
-const styles$e = {
+const styles$j = {
 	radioWrapper: radioWrapper,
 	radio: radio
 };
 
 function RadioButton({ className, label, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$e.radioWrapper, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: styles$e.radio, ...props }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$j.radioWrapper, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: styles$j.radio, ...props }),
     label
   ] });
 }
@@ -2588,7 +2588,7 @@ const textFieldAreaWrapper = "_textFieldAreaWrapper_pia91_2";
 const textFieldAreaLabel = "_textFieldAreaLabel_pia91_14";
 const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_pia91_24";
 const textFieldArea = "_textFieldArea_pia91_2";
-const styles$d = {
+const styles$i = {
 	textFieldAreaWrapper: textFieldAreaWrapper,
 	textFieldAreaLabel: textFieldAreaLabel,
 	textFieldAreaLabelSuffix: textFieldAreaLabelSuffix,
@@ -2609,14 +2609,14 @@ function TextFieldArea({
       "data-invalid": isInvalid,
       "aria-invalid": isInvalid,
       "data-element": "field",
-      className: classNames(styles$d.textFieldArea, className),
+      className: classNames(styles$i.textFieldArea, className),
       placeholder,
       ...props
     }
   );
-  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$d.textFieldAreaWrapper, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$d.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
-    floatingLabelSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$d.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
+  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$i.textFieldAreaWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$i.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
+    floatingLabelSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$i.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
     textFieldArea
   ] }) : textFieldArea;
 }
@@ -2624,7 +2624,7 @@ function TextFieldArea({
 const textFieldInputWrapper = "_textFieldInputWrapper_1m8sa_2";
 const textFieldInputLabel = "_textFieldInputLabel_1m8sa_9";
 const textFieldInput = "_textFieldInput_1m8sa_2";
-const styles$c = {
+const styles$h = {
 	textFieldInputWrapper: textFieldInputWrapper,
 	textFieldInputLabel: textFieldInputLabel,
 	textFieldInput: textFieldInput
@@ -2643,37 +2643,37 @@ function TextFieldInput({
       "data-invalid": isInvalid,
       "aria-invalid": isInvalid,
       "data-element": "field",
-      className: classNames(styles$c.textFieldInput, className),
+      className: classNames(styles$h.textFieldInput, className),
       placeholder,
       ...props
     }
   );
-  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$c.textFieldInputWrapper, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$c.textFieldInputLabel, "data-element": "label", children: floatingLabel }),
+  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$h.textFieldInputWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$h.textFieldInputLabel, "data-element": "label", children: floatingLabel }),
     textFieldInput
   ] }) : textFieldInput;
 }
 
 const textFieldLabel = "_textFieldLabel_1xy6x_2";
-const styles$b = {
+const styles$g = {
 	textFieldLabel: textFieldLabel
 };
 
 function TextFieldLabel({ className, children, isRequired, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$b.textFieldLabel, className), "data-required": isRequired, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$g.textFieldLabel, className), "data-required": isRequired, ...props, children });
 }
 
 const textFieldRoot = "_textFieldRoot_cs7mv_2";
 const lg$3 = "_lg_cs7mv_38";
 const md$4 = "_md_cs7mv_70";
-const styles$a = {
+const styles$f = {
 	textFieldRoot: textFieldRoot,
 	lg: lg$3,
 	md: md$4
 };
 
 function TextFieldRoot({ className, size = "lg", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$a.textFieldRoot, styles$a[size], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$f.textFieldRoot, styles$f[size], className), ...props });
 }
 
 function TextField() {
@@ -2688,7 +2688,7 @@ const custom = "_custom_gh87y_15";
 const icon$1 = "_icon_gh87y_25";
 const inputCustomWrapper = "_inputCustomWrapper_gh87y_34";
 const customButton = "_customButton_gh87y_49";
-const styles$9 = {
+const styles$e = {
 	search: search,
 	"default": "_default_gh87y_10",
 	custom: custom,
@@ -2714,7 +2714,7 @@ function Search(props) {
     value && /* @__PURE__ */ jsxRuntime.jsx(
       IconXMark.Small,
       {
-        className: styles$9.icon,
+        className: styles$e.icon,
         "aria-label": "clear search",
         role: "button",
         onClick: () => {
@@ -2728,13 +2728,13 @@ function Search(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(TextField.Root, { size: "md", className: classNames(styles$9.search, styles$9[mode], className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(TextField.Root, { size: "md", className: classNames(styles$e.search, styles$e[mode], className), children: [
     mode === "default" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: styles$9.icon, "data-element": "icon" }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: styles$e.icon, "data-element": "icon" }),
       inputField
     ] }),
     mode === "custom" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$9.inputCustomWrapper, children: inputField }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$e.inputCustomWrapper, children: inputField }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -2742,11 +2742,11 @@ function Search(props) {
           type: "button",
           onClick: props.onSearch,
           "data-element": "custom-button",
-          className: styles$9.customButton,
+          className: styles$e.customButton,
           style: {
             "--custom-button-width": `${props.buttonWidth ?? DEFAULT_CUSTOM_SEARCH_BUTTON_WIDTH}px`
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: classNames(styles$9.icon), "data-element": "icon" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: classNames(styles$e.icon), "data-element": "icon" })
         }
       )
     ] })
@@ -2772,7 +2772,7 @@ function useSegmentControlContext() {
 const segmentControlItem = "_segmentControlItem_178px_2";
 const lg$2 = "_lg_178px_23";
 const md$3 = "_md_178px_28";
-const styles$8 = {
+const styles$d = {
 	segmentControlItem: segmentControlItem,
 	lg: lg$2,
 	md: md$3
@@ -2788,7 +2788,7 @@ function SegmentControlItem({ className, children, value, ...props }) {
       "aria-checked": value === activeValue,
       "data-state": value === activeValue ? "on" : "off",
       "data-value": value,
-      className: classNames(styles$8.segmentControlItem, styles$8[size], className),
+      className: classNames(styles$d.segmentControlItem, styles$d[size], className),
       ...props,
       children
     }
@@ -2825,7 +2825,7 @@ const showAfterDelay = "_showAfterDelay_pulca_1";
 const lg$1 = "_lg_pulca_19";
 const md$2 = "_md_pulca_23";
 const indicator$1 = "_indicator_pulca_28";
-const styles$7 = {
+const styles$c = {
 	segmentControlRoot: segmentControlRoot,
 	showAfterDelay: showAfterDelay,
 	lg: lg$1,
@@ -2840,11 +2840,11 @@ function SegmentControlRoot({ className, children, value, size = "md", ...props
     {
       ref: rootRef,
       role: "radiogroup",
-      className: classNames(styles$7.segmentControlRoot, styles$7[size], className),
+      className: classNames(styles$c.segmentControlRoot, styles$c[size], className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$7.indicator, styles$7[size]), style: indicatorStyle })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$c.indicator, styles$c[size]), style: indicatorStyle })
       ]
     }
   ) });
@@ -2939,7 +2939,7 @@ const mark = "_mark_vuele_39";
 const markDot = "_markDot_vuele_43";
 const track = "_track_vuele_56";
 const marks = "_marks_vuele_106";
-const styles$6 = {
+const styles$b = {
 	slider: slider,
 	fill: fill,
 	rail: rail,
@@ -2951,16 +2951,16 @@ const styles$6 = {
 };
 
 function SliderMarks({ marks, min, max, activeFrom, activeTo }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$6.marks, children: marks.map(({ value, label }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$b.marks, children: marks.map(({ value, label }) => {
     const isActive = value >= activeFrom && value <= activeTo;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         "data-state": isActive ? "active" : "default",
-        className: styles$6.mark,
+        className: styles$b.mark,
         style: { insetInlineStart: `${getPercent(value, { min, max })}%` },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$6.markDot }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$b.markDot }),
           label
         ]
       },
@@ -3083,7 +3083,7 @@ function SliderBase({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$6.slider, className),
+      className: classNames(styles$b.slider, className),
       "data-disabled": disabled,
       "data-marks": Boolean(marks?.length),
       ...props,
@@ -3091,18 +3091,18 @@ function SliderBase({
         "div",
         {
           ref: railRef,
-          className: styles$6.rail,
+          className: styles$b.rail,
           onPointerDown: handlePointerDown,
           onPointerMove: handlePointerMove,
           onPointerUp: stopDragging,
           onPointerCancel: stopDragging,
           onLostPointerCapture: handleLostPointerCapture,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$6.track }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$b.track }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: styles$6.fill,
+                className: styles$b.fill,
                 style: { insetInlineStart: `${toPercent(fillFrom)}%`, insetInlineEnd: `${100 - toPercent(fillTo)}%` }
               }
             ),
@@ -3124,7 +3124,7 @@ function SliderBase({
                 "aria-describedby": ariaDescribedBy,
                 "aria-disabled": disabled,
                 "aria-orientation": "horizontal",
-                className: styles$6.handle,
+                className: styles$b.handle,
                 style: { insetInlineStart: `${toPercent(value)}%` },
                 onKeyDown: (event) => handleKeyDown(event, index)
               },
@@ -3158,7 +3158,7 @@ const lg = "_lg_103n3_24";
 const primary$1 = "_primary_103n3_31";
 const secondary$1 = "_secondary_103n3_41";
 const value = "_value_103n3_50";
-const styles$5 = {
+const styles$a = {
 	stepper: stepper,
 	sm: sm$1,
 	md: md$1,
@@ -3199,7 +3199,7 @@ function Stepper({
     {
       role: "group",
       "aria-label": "Stepper",
-      className: classNames(styles$5.stepper, styles$5[size], styles$5[mode], className),
+      className: classNames(styles$a.stepper, styles$a[size], styles$a[mode], className),
       "data-disabled": disabled,
       ...props,
       children: [
@@ -3215,7 +3215,7 @@ function Stepper({
             children: /* @__PURE__ */ jsxRuntime.jsx(IconMinus, {})
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$5.value, "aria-live": "polite", children: value }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$a.value, "aria-live": "polite", children: value }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -3235,7 +3235,7 @@ function Stepper({
 
 const switchWrapper = "_switchWrapper_1yukb_2";
 const icon = "_icon_1yukb_25";
-const styles$4 = {
+const styles$9 = {
 	switchWrapper: switchWrapper,
 	icon: icon,
 	"switch": "_switch_1yukb_2"
@@ -3248,16 +3248,111 @@ function Switch({ className, label, indeterminate, ...props }) {
     {
       "data-disabled": `${Boolean(props.disabled)}`,
       "data-state": dataState,
-      className: classNames(styles$4.switchWrapper, className),
+      className: classNames(styles$9.switchWrapper, className),
       children: [
-        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$4.icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", role: "switch", className: styles$4.switch, ...props }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$9.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", role: "switch", className: styles$9.switch, ...props }),
         label
       ]
     }
   );
 }
 
+function TableBody({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className, ...props, children });
+}
+
+const tableCaption = "_tableCaption_fn9c1_2";
+const styles$8 = {
+	tableCaption: tableCaption
+};
+
+function TableCaption({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("caption", { className: classNames(styles$8.tableCaption, className), ...props, children });
+}
+
+const tableCell = "_tableCell_fsw3w_2";
+const left$1 = "_left_fsw3w_6";
+const center$1 = "_center_fsw3w_10";
+const right$1 = "_right_fsw3w_14";
+const styles$7 = {
+	tableCell: tableCell,
+	left: left$1,
+	center: center$1,
+	right: right$1
+};
+
+function TableCell({ className, children, align = "left", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: classNames(styles$7.tableCell, styles$7[align], className), ...props, children });
+}
+
+function TableHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className, ...props, children });
+}
+
+const tableHeaderCell = "_tableHeaderCell_1ubwo_2";
+const left = "_left_1ubwo_10";
+const center = "_center_1ubwo_14";
+const right = "_right_1ubwo_18";
+const styles$6 = {
+	tableHeaderCell: tableHeaderCell,
+	left: left,
+	center: center,
+	right: right
+};
+
+function TableHeaderCell({
+  className,
+  children,
+  align = "left",
+  scope = "col",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { scope, className: classNames(styles$6.tableHeaderCell, styles$6[align], className), ...props, children });
+}
+
+const scrollContainer = "_scrollContainer_3qaei_2";
+const table = "_table_3qaei_10";
+const styles$5 = {
+	scrollContainer: scrollContainer,
+	table: table
+};
+
+function TableRoot({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$5.scrollContainer, children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: classNames(styles$5.table, className), ...props, children }) });
+}
+
+const tableRow = "_tableRow_1p3oc_2";
+const group = "_group_1p3oc_16";
+const current = "_current_1p3oc_23";
+const styles$4 = {
+	tableRow: tableRow,
+	"default": "_default_1p3oc_12",
+	group: group,
+	current: current
+};
+
+function TableRow({ className, children, mode = "default", isCurrent = false, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: classNames(styles$4.tableRow, styles$4[mode], isCurrent ? styles$4.current : void 0, className),
+      ...props,
+      children
+    }
+  );
+}
+
+function Table(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRoot, { ...props });
+}
+Table.Caption = TableCaption;
+Table.Header = TableHeader;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+
 const TabsContext = React.createContext(null);
 
 function TabsProvider({ children, value }) {
@@ -3554,6 +3649,7 @@ exports.SegmentControl = SegmentControl;
 exports.Slider = Slider;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
+exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.TextField = TextField;