@grandbazar/ui-baza 1.5.3 → 1.6.0

package/dist/index.cjs

@@ -51,41 +51,62 @@ function omit(object, ...keys) {
   return Object.fromEntries(filteredEntries);
 }
 
-const badge = "_badge_1s8y9_2";
-const primary$4 = "_primary_1s8y9_9";
-const secondary$5 = "_secondary_1s8y9_13";
-const accent$4 = "_accent_1s8y9_18";
-const violet = "_violet_1s8y9_23";
-const pink = "_pink_1s8y9_28";
-const red$1 = "_red_1s8y9_33";
-const orange = "_orange_1s8y9_38";
-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$D = {
+const badge = "_badge_x6ia4_2";
+const primary$4 = "_primary_x6ia4_9";
+const secondary$5 = "_secondary_x6ia4_13";
+const glass$1 = "_glass_x6ia4_18";
+const accent$5 = "_accent_x6ia4_23";
+const violet = "_violet_x6ia4_28";
+const pink = "_pink_x6ia4_33";
+const red$1 = "_red_x6ia4_38";
+const orange = "_orange_x6ia4_43";
+const green$1 = "_green_x6ia4_48";
+const neutral$3 = "_neutral_x6ia4_54";
+const lg$7 = "_lg_x6ia4_59";
+const md$a = "_md_x6ia4_66";
+const sm$5 = "_sm_x6ia4_73";
+const pill$2 = "_pill_x6ia4_80";
+const styles$E = {
 	badge: badge,
 	primary: primary$4,
 	secondary: secondary$5,
-	accent: accent$4,
+	glass: glass$1,
+	accent: accent$5,
 	violet: violet,
 	pink: pink,
 	red: red$1,
 	orange: orange,
-	green: green,
+	green: green$1,
 	neutral: neutral$3,
 	lg: lg$7,
-	md: md$a
+	md: md$a,
+	sm: sm$5,
+	pill: pill$2
 };
 
-function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$D.badge, styles$D[size], styles$D[color], styles$D[mode], className), ...props, children });
+function Badge({
+  children,
+  className,
+  size = "lg",
+  color = "accent",
+  mode = "primary",
+  shape = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames(styles$E.badge, styles$E[size], styles$E[color], styles$E[mode], styles$E[shape], className),
+      ...props,
+      children
+    }
+  );
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
 const primary$3 = "_primary_10lit_18";
 const secondary$4 = "_secondary_10lit_36";
-const styles$C = {
+const styles$D = {
 	badgeTabsItem: badgeTabsItem,
 	primary: primary$3,
 	secondary: secondary$4
@@ -98,7 +119,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
       type: "button",
       role: "tab",
       "aria-selected": Boolean(isActive),
-      className: classNames(styles$C.badgeTabsItem, styles$C[mode], className),
+      className: classNames(styles$D.badgeTabsItem, styles$D[mode], className),
       ...props,
       children
     }
@@ -106,12 +127,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
 }
 
 const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
-const styles$B = {
+const styles$C = {
 	badgeTabsRoot: badgeTabsRoot
 };
 
 function BadgeTabsRoot({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$B.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$C.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -1207,7 +1228,7 @@ function IconXMarkCircle(props) {
 const breadcrumbs = "_breadcrumbs_1bfmb_2";
 const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
 const defaultSeparator = "_defaultSeparator_1bfmb_14";
-const styles$A = {
+const styles$B = {
 	breadcrumbs: breadcrumbs,
 	breadcrumbsItem: breadcrumbsItem,
 	defaultSeparator: defaultSeparator
@@ -1256,7 +1277,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$z = {
+const styles$A = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1267,7 +1288,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
     {
       "data-active": isActive,
       "data-disabled": props.disabled,
-      className: classNames(styles$z.breadcrumbItem, className),
+      className: classNames(styles$A.breadcrumbItem, className),
       ...isActive && { "aria-current": "page" },
       ...!asChild && { type: "button" },
       ...props,
@@ -1279,48 +1300,59 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$A.defaultSeparator })
+  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$B.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$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 })
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$B.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$B.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$B.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
-const button = "_button_1waqk_2";
-const accent$3 = "_accent_1waqk_11";
-const primary$2 = "_primary_1waqk_12";
-const secondary$3 = "_secondary_1waqk_30";
-const tertiary = "_tertiary_1waqk_48";
-const line = "_line_1waqk_49";
-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$y = {
+const button = "_button_11nu9_2";
+const accent$4 = "_accent_11nu9_12";
+const primary$2 = "_primary_11nu9_13";
+const secondary$3 = "_secondary_11nu9_31";
+const tertiary = "_tertiary_11nu9_49";
+const line = "_line_11nu9_50";
+const neutral$2 = "_neutral_11nu9_79";
+const white$1 = "_white_11nu9_146";
+const lg$6 = "_lg_11nu9_213";
+const md$9 = "_md_11nu9_222";
+const sm$4 = "_sm_11nu9_240";
+const pill$1 = "_pill_11nu9_249";
+const circle = "_circle_11nu9_250";
+const square = "_square_11nu9_255";
+const elevated = "_elevated_11nu9_266";
+const styles$z = {
 	button: button,
-	accent: accent$3,
+	accent: accent$4,
 	primary: primary$2,
 	secondary: secondary$3,
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
+	white: white$1,
 	lg: lg$6,
 	md: md$9,
-	sm: sm$4
+	"md-sm": "_md-sm_11nu9_231",
+	sm: sm$4,
+	pill: pill$1,
+	circle: circle,
+	square: square,
+	elevated: elevated
 };
 
 const buttonFunction = "_buttonFunction_o8iku_2";
-const accent$2 = "_accent_o8iku_10";
+const accent$3 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
 const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
-const styles$x = {
+const styles$y = {
 	buttonFunction: buttonFunction,
-	accent: accent$2,
+	accent: accent$3,
 	neutral: neutral$1,
 	lg: lg$5,
 	md: md$8
@@ -1338,7 +1370,7 @@ function ButtonFunction({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$x.buttonFunction, styles$x[color], styles$x[size], className),
+      className: classNames(styles$y.buttonFunction, styles$y[color], styles$y[size], className),
       ...props.disabled && { "data-disabled": true },
       ...!asChild && { type: "button" },
       ...props,
@@ -1353,6 +1385,8 @@ function Button({
   color = "accent",
   size = "lg",
   mode = "primary",
+  shape = "default",
+  elevated,
   asChild,
   ...props
 }) {
@@ -1360,7 +1394,15 @@ function Button({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$y.button, styles$y[color], styles$y[size], styles$y[mode], className),
+      className: classNames(
+        styles$z.button,
+        styles$z[color],
+        styles$z[size],
+        styles$z[mode],
+        styles$z[shape],
+        elevated ? styles$z.elevated : void 0,
+        className
+      ),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1370,11 +1412,11 @@ function Button({
 Button.Function = ButtonFunction;
 
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
-const icon$2 = "_icon_k1shg_23";
+const icon$3 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
-const styles$w = {
+const styles$x = {
 	checkboxWrapper: checkboxWrapper,
-	icon: icon$2,
+	icon: icon$3,
 	checkbox: checkbox
 };
 
@@ -1385,32 +1427,59 @@ function Checkbox({ className, label, indeterminate, ...props }) {
     {
       "data-disabled": `${Boolean(props.disabled)}`,
       "data-state": dataState,
-      className: classNames(styles$w.checkboxWrapper, className),
+      className: classNames(styles$x.checkboxWrapper, className),
       children: [
-        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 }),
+        dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$x.icon }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$x.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$x.checkbox, ...props }),
         label
       ]
     }
   );
 }
 
-const chip = "_chip_dj4kw_2";
-const styles$v = {
-	chip: chip
+const chip = "_chip_nge5j_2";
+const glass = "_glass_nge5j_36";
+const pill = "_pill_nge5j_59";
+const icon$2 = "_icon_nge5j_63";
+const styles$w = {
+	chip: chip,
+	glass: glass,
+	pill: pill,
+	icon: icon$2
 };
 
-function Chip({ isSelected, children, className, disabled, ...props }) {
+function prependToChild(child, node) {
+  if (!node || !React.isValidElement(child)) {
+    return child;
+  }
+  return React.cloneElement(child, void 0, node, child.props.children);
+}
+function Chip({
+  isSelected,
+  children,
+  className,
+  disabled,
+  icon,
+  shape = "default",
+  mode = "default",
+  asChild,
+  ...props
+}) {
+  const Component = asChild ? Slot : "div";
+  const iconElement = icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$w.icon, "aria-hidden": "true", children: icon }) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Component,
     {
-      className: classNames(styles$v.chip, className),
+      className: classNames(styles$w.chip, styles$w[shape], styles$w[mode], className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
       ...props,
-      children
+      children: asChild ? prependToChild(children, iconElement) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        iconElement,
+        children
+      ] })
     }
   );
 }
@@ -1419,23 +1488,23 @@ const root$1 = "_root_ww0fb_2";
 const lg$4 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
-const accent$1 = "_accent_ww0fb_37";
+const accent$2 = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
-const styles$u = {
+const styles$v = {
 	root: root$1,
 	lg: lg$4,
 	md: md$7,
 	red: red,
-	accent: accent$1,
+	accent: accent$2,
 	neutral: neutral,
 	secondary: secondary$2,
 	white: white
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$u.root, styles$u[size], styles$u[color], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$v.root, styles$v[size], styles$v[color], className), ...props });
 }
 
 const LOCALE_FIRST_DAY_OF_WEEK = {
@@ -1445,7 +1514,7 @@ const LOCALE_FIRST_DAY_OF_WEEK = {
 
 const datePickerCellWrapper = "_datePickerCellWrapper_np1gx_2";
 const datePickerCell = "_datePickerCell_np1gx_2";
-const styles$t = {
+const styles$u = {
 	datePickerCellWrapper: datePickerCellWrapper,
 	datePickerCell: datePickerCell,
 	"radius-none": "_radius-none_np1gx_83",
@@ -1455,10 +1524,10 @@ const styles$t = {
 };
 
 function DatePickerCell({ children, className, state, isCurrent, radius = "both", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$t.datePickerCellWrapper, styles$t[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$u.datePickerCellWrapper, styles$u[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
-      className: classNames(styles$t.datePickerCell, styles$t[`radius-${radius}`], className),
+      className: classNames(styles$u.datePickerCell, styles$u[`radius-${radius}`], className),
       type: "button",
       role: "gridcell",
       "aria-selected": state === "selected",
@@ -1528,7 +1597,7 @@ function normalizeDateRange(firstDate, secondDate) {
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
-const styles$s = {
+const styles$t = {
 	datePickerField: datePickerField,
 	datePickerFieldCalendar: datePickerFieldCalendar,
 	datePickerFieldWeek: datePickerFieldWeek
@@ -1543,9 +1612,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$s.datePickerField, className), role: "grid", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$t.datePickerField, className), role: "grid", children: [
     renderWeekdays?.(),
-    /* @__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)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$t.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$t.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)) })
   ] });
 }
 
@@ -1586,13 +1655,13 @@ const I18N_MONTH_LABELS = {
 
 const datePickerWeekdays = "_datePickerWeekdays_p8tsm_2";
 const datePickerWeekday = "_datePickerWeekday_p8tsm_2";
-const styles$r = {
+const styles$s = {
 	datePickerWeekdays: datePickerWeekdays,
 	datePickerWeekday: datePickerWeekday
 };
 
 function DatePickerWeekDays({ className, locale = "ru" }) {
-  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)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$s.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$s.datePickerWeekday, role: "columnheader", children: label }, label)) });
 }
 
 function DatePicker() {
@@ -1828,21 +1897,21 @@ const DROPDOWN_PORTAL_SIDE_CONFIG = {
 };
 
 const dropdownContent = "_dropdownContent_12tkb_2";
-const styles$q = {
+const styles$r = {
 	dropdownContent: dropdownContent
 };
 
 function DropdownContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$q.dropdownContent, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$r.dropdownContent, className), ...props, children });
 }
 
 const dropdownItem = "_dropdownItem_msc4i_2";
-const styles$p = {
+const styles$q = {
 	dropdownItem: dropdownItem
 };
 
 function DropdownItem({ className, children, disabled, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$p.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$q.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
 }
 
 const CLICK_OUTSIDE_IGNORE_DATA_NAME = "data-clickoutside-ignore";
@@ -2270,7 +2339,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$o = {
+const styles$p = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2310,7 +2379,7 @@ function DropdownPortal({
           ...style
         },
         ref: portalRef,
-        className: classNames(styles$o.dropdownPortal, className),
+        className: classNames(styles$p.dropdownPortal, className),
         ...handlersByTrigger[triggerEvent],
         ...isNested && { [CLICK_OUTSIDE_IGNORE_DATA_NAME]: "true" },
         children
@@ -2353,7 +2422,7 @@ DropdownMenu.Item = DropdownItem;
 DropdownMenu.Portal = DropdownPortal;
 
 const notificationInline = "_notificationInline_1kerp_2";
-const accent = "_accent_1kerp_10";
+const accent$1 = "_accent_1kerp_10";
 const negative = "_negative_1kerp_16";
 const positive = "_positive_1kerp_22";
 const warning = "_warning_1kerp_28";
@@ -2367,9 +2436,9 @@ const closeButton = "_closeButton_1kerp_74";
 const closeIcon = "_closeIcon_1kerp_95";
 const description = "_description_1kerp_100";
 const actions = "_actions_1kerp_108";
-const styles$n = {
+const styles$o = {
 	notificationInline: notificationInline,
-	accent: accent,
+	accent: accent$1,
 	negative: negative,
 	positive: positive,
 	warning: warning,
@@ -2402,15 +2471,15 @@ function NotificationInline({
   ...props
 }) {
   const StatusIcon = STATUS_ICONS[color];
-  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" }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$o.notificationInline, styles$o[color], styles$o[mode], className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: styles$o.statusIcon, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$o.body, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$o.titleRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$o.title, children: title }),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close", className: styles$o.closeButton, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(IconXMark.Small, { className: styles$o.closeIcon, "aria-hidden": "true" }) })
       ] }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$n.description, children: description }),
-      children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$n.actions, children })
+      description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$o.description, children: description }),
+      children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$o.actions, children })
     ] })
   ] });
 }
@@ -2426,7 +2495,7 @@ const BOUNDARY_PAGES = 2;
 const paginationItem = "_paginationItem_1ll6p_2";
 const md$6 = "_md_1ll6p_46";
 const sm$3 = "_sm_1ll6p_60";
-const styles$m = {
+const styles$n = {
 	paginationItem: paginationItem,
 	md: md$6,
 	sm: sm$3
@@ -2438,7 +2507,7 @@ function PaginationItem({ className, children, size = "md", isCurrent, ...props
     {
       type: "button",
       ...isCurrent && { "aria-current": "page" },
-      className: classNames(styles$m.paginationItem, styles$m[size], className),
+      className: classNames(styles$n.paginationItem, styles$n[size], className),
       ...props,
       children
     }
@@ -2475,7 +2544,7 @@ function getVisiblePages(totalPages, maxVisiblePagesWithEllipsis, currentPage) {
 const paginationRoot = "_paginationRoot_c5fwx_2";
 const paginationList = "_paginationList_c5fwx_7";
 const arrowLeft = "_arrowLeft_c5fwx_13";
-const styles$l = {
+const styles$m = {
 	paginationRoot: paginationRoot,
 	paginationList: paginationList,
 	arrowLeft: arrowLeft
@@ -2502,9 +2571,9 @@ function PaginationRoot({
     {
       "aria-label": "pagination navigation",
       role: "navigation",
-      className: classNames(styles$l.paginationRoot, className),
+      className: classNames(styles$m.paginationRoot, className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$l.paginationList, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$m.paginationList, children: [
         showArrows && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           PaginationItem$1,
           {
@@ -2512,7 +2581,7 @@ function PaginationRoot({
             onClick: () => onPageChange(currentPage - 1),
             disabled: isFirstPage,
             size,
-            children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$l.arrowLeft })
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$m.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(
@@ -2545,26 +2614,33 @@ function Pagination(props) {
 }
 Pagination.Item = PaginationItem;
 
-const root = "_root_33gbh_2";
-const segment = "_segment_33gbh_10";
-const flexGrow = "_flexGrow_33gbh_19";
-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$k = {
+const root = "_root_1lyc4_2";
+const segment = "_segment_1lyc4_10";
+const flexGrow = "_flexGrow_1lyc4_19";
+const fill$1 = "_fill_1lyc4_23";
+const trail = "_trail_1lyc4_28";
+const xs = "_xs_1lyc4_32";
+const sm$2 = "_sm_1lyc4_36";
+const md$5 = "_md_1lyc4_40";
+const accent = "_accent_1lyc4_44";
+const green = "_green_1lyc4_48";
+const styles$l = {
 	root: root,
 	segment: segment,
 	flexGrow: flexGrow,
 	fill: fill$1,
 	trail: trail,
+	xs: xs,
 	sm: sm$2,
-	md: md$5
+	md: md$5,
+	accent: accent,
+	green: green
 };
 
 function ProgressBarLinear({
   className,
   size = "md",
+  color = "accent",
   percent,
   showFillOnZero,
   ...props
@@ -2573,7 +2649,7 @@ function ProgressBarLinear({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames(styles$k.root, styles$k[size], className),
+      className: classNames(styles$l.root, styles$l[size], styles$l[color], className),
       role: "progressbar",
       "aria-valuenow": clampedPercent,
       "aria-valuemin": 0,
@@ -2585,14 +2661,14 @@ function ProgressBarLinear({
         (Boolean(clampedPercent) || showFillOnZero) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames(styles$k.segment, styles$k.fill),
+            className: classNames(styles$l.segment, styles$l.fill),
             style: {
               "--clamped-percent": `${clampedPercent}%`
             },
             "aria-hidden": "true"
           }
         ),
-        clampedPercent < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$k.segment, styles$k.flexGrow, styles$k.trail), "aria-hidden": "true" })
+        clampedPercent < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$l.segment, styles$l.flexGrow, styles$l.trail), "aria-hidden": "true" })
       ]
     }
   );
@@ -2601,6 +2677,7 @@ function ProgressBarLinear({
 function ProgressBarSteps({
   className,
   size = "md",
+  color = "accent",
   currentStep,
   totalSteps,
   ...props
@@ -2612,7 +2689,7 @@ function ProgressBarSteps({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames(styles$k.segment, styles$k.flexGrow, isFilled ? styles$k.fill : styles$k.trail),
+        className: classNames(styles$l.segment, styles$l.flexGrow, isFilled ? styles$l.fill : styles$l.trail),
         "aria-hidden": "true"
       },
       index
@@ -2621,7 +2698,7 @@ function ProgressBarSteps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$k.root, styles$k[size], className),
+      className: classNames(styles$l.root, styles$l[size], styles$l[color], className),
       role: "progressbar",
       "aria-valuenow": clampedCurrent,
       "aria-valuemin": 0,
@@ -2641,14 +2718,14 @@ ProgressBar.Steps = ProgressBarSteps;
 
 const radioWrapper = "_radioWrapper_13xie_2";
 const radio = "_radio_13xie_2";
-const styles$j = {
+const styles$k = {
 	radioWrapper: radioWrapper,
 	radio: radio
 };
 
 function RadioButton({ className, label, ...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 }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$k.radioWrapper, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: styles$k.radio, ...props }),
     label
   ] });
 }
@@ -2659,7 +2736,7 @@ const textFieldAreaWrapper = "_textFieldAreaWrapper_pia91_2";
 const textFieldAreaLabel = "_textFieldAreaLabel_pia91_14";
 const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_pia91_24";
 const textFieldArea = "_textFieldArea_pia91_2";
-const styles$i = {
+const styles$j = {
 	textFieldAreaWrapper: textFieldAreaWrapper,
 	textFieldAreaLabel: textFieldAreaLabel,
 	textFieldAreaLabelSuffix: textFieldAreaLabelSuffix,
@@ -2680,14 +2757,14 @@ function TextFieldArea({
       "data-invalid": isInvalid,
       "aria-invalid": isInvalid,
       "data-element": "field",
-      className: classNames(styles$i.textFieldArea, className),
+      className: classNames(styles$j.textFieldArea, className),
       placeholder,
       ...props
     }
   );
-  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 }),
+  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$j.textFieldAreaWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$j.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
+    floatingLabelSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$j.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
     textFieldArea
   ] }) : textFieldArea;
 }
@@ -2695,7 +2772,7 @@ function TextFieldArea({
 const textFieldInputWrapper = "_textFieldInputWrapper_1m8sa_2";
 const textFieldInputLabel = "_textFieldInputLabel_1m8sa_9";
 const textFieldInput = "_textFieldInput_1m8sa_2";
-const styles$h = {
+const styles$i = {
 	textFieldInputWrapper: textFieldInputWrapper,
 	textFieldInputLabel: textFieldInputLabel,
 	textFieldInput: textFieldInput
@@ -2714,37 +2791,37 @@ function TextFieldInput({
       "data-invalid": isInvalid,
       "aria-invalid": isInvalid,
       "data-element": "field",
-      className: classNames(styles$h.textFieldInput, className),
+      className: classNames(styles$i.textFieldInput, className),
       placeholder,
       ...props
     }
   );
-  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 }),
+  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$i.textFieldInputWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$i.textFieldInputLabel, "data-element": "label", children: floatingLabel }),
     textFieldInput
   ] }) : textFieldInput;
 }
 
 const textFieldLabel = "_textFieldLabel_1xy6x_2";
-const styles$g = {
+const styles$h = {
 	textFieldLabel: textFieldLabel
 };
 
 function TextFieldLabel({ className, children, isRequired, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$g.textFieldLabel, className), "data-required": isRequired, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$h.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$f = {
+const styles$g = {
 	textFieldRoot: textFieldRoot,
 	lg: lg$3,
 	md: md$4
 };
 
 function TextFieldRoot({ className, size = "lg", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$f.textFieldRoot, styles$f[size], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$g.textFieldRoot, styles$g[size], className), ...props });
 }
 
 function TextField() {
@@ -2759,7 +2836,7 @@ const custom = "_custom_gh87y_15";
 const icon$1 = "_icon_gh87y_25";
 const inputCustomWrapper = "_inputCustomWrapper_gh87y_34";
 const customButton = "_customButton_gh87y_49";
-const styles$e = {
+const styles$f = {
 	search: search,
 	"default": "_default_gh87y_10",
 	custom: custom,
@@ -2785,7 +2862,7 @@ function Search(props) {
     value && /* @__PURE__ */ jsxRuntime.jsx(
       IconXMark.Small,
       {
-        className: styles$e.icon,
+        className: styles$f.icon,
         "aria-label": "clear search",
         role: "button",
         onClick: () => {
@@ -2799,13 +2876,13 @@ function Search(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(TextField.Root, { size: "md", className: classNames(styles$e.search, styles$e[mode], className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(TextField.Root, { size: "md", className: classNames(styles$f.search, styles$f[mode], className), children: [
     mode === "default" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: styles$e.icon, "data-element": "icon" }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: styles$f.icon, "data-element": "icon" }),
       inputField
     ] }),
     mode === "custom" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$e.inputCustomWrapper, children: inputField }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$f.inputCustomWrapper, children: inputField }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -2813,11 +2890,11 @@ function Search(props) {
           type: "button",
           onClick: props.onSearch,
           "data-element": "custom-button",
-          className: styles$e.customButton,
+          className: styles$f.customButton,
           style: {
             "--custom-button-width": `${props.buttonWidth ?? DEFAULT_CUSTOM_SEARCH_BUTTON_WIDTH}px`
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: classNames(styles$e.icon), "data-element": "icon" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: classNames(styles$f.icon), "data-element": "icon" })
         }
       )
     ] })
@@ -2843,7 +2920,7 @@ function useSegmentControlContext() {
 const segmentControlItem = "_segmentControlItem_178px_2";
 const lg$2 = "_lg_178px_23";
 const md$3 = "_md_178px_28";
-const styles$d = {
+const styles$e = {
 	segmentControlItem: segmentControlItem,
 	lg: lg$2,
 	md: md$3
@@ -2859,7 +2936,7 @@ function SegmentControlItem({ className, children, value, ...props }) {
       "aria-checked": value === activeValue,
       "data-state": value === activeValue ? "on" : "off",
       "data-value": value,
-      className: classNames(styles$d.segmentControlItem, styles$d[size], className),
+      className: classNames(styles$e.segmentControlItem, styles$e[size], className),
       ...props,
       children
     }
@@ -2896,7 +2973,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$c = {
+const styles$d = {
 	segmentControlRoot: segmentControlRoot,
 	showAfterDelay: showAfterDelay,
 	lg: lg$1,
@@ -2911,11 +2988,11 @@ function SegmentControlRoot({ className, children, value, size = "md", ...props
     {
       ref: rootRef,
       role: "radiogroup",
-      className: classNames(styles$c.segmentControlRoot, styles$c[size], className),
+      className: classNames(styles$d.segmentControlRoot, styles$d[size], className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$c.indicator, styles$c[size]), style: indicatorStyle })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$d.indicator, styles$d[size]), style: indicatorStyle })
       ]
     }
   ) });
@@ -3010,7 +3087,7 @@ const mark = "_mark_vuele_39";
 const markDot = "_markDot_vuele_43";
 const track = "_track_vuele_56";
 const marks = "_marks_vuele_106";
-const styles$b = {
+const styles$c = {
 	slider: slider,
 	fill: fill,
 	rail: rail,
@@ -3022,16 +3099,16 @@ const styles$b = {
 };
 
 function SliderMarks({ marks, min, max, activeFrom, activeTo }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$b.marks, children: marks.map(({ value, label }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$c.marks, children: marks.map(({ value, label }) => {
     const isActive = value >= activeFrom && value <= activeTo;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         "data-state": isActive ? "active" : "default",
-        className: styles$b.mark,
+        className: styles$c.mark,
         style: { insetInlineStart: `${getPercent(value, { min, max })}%` },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$b.markDot }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$c.markDot }),
           label
         ]
       },
@@ -3154,7 +3231,7 @@ function SliderBase({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$b.slider, className),
+      className: classNames(styles$c.slider, className),
       "data-disabled": disabled,
       "data-marks": Boolean(marks?.length),
       ...props,
@@ -3162,18 +3239,18 @@ function SliderBase({
         "div",
         {
           ref: railRef,
-          className: styles$b.rail,
+          className: styles$c.rail,
           onPointerDown: handlePointerDown,
           onPointerMove: handlePointerMove,
           onPointerUp: stopDragging,
           onPointerCancel: stopDragging,
           onLostPointerCapture: handleLostPointerCapture,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$b.track }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$c.track }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: styles$b.fill,
+                className: styles$c.fill,
                 style: { insetInlineStart: `${toPercent(fillFrom)}%`, insetInlineEnd: `${100 - toPercent(fillTo)}%` }
               }
             ),
@@ -3195,7 +3272,7 @@ function SliderBase({
                 "aria-describedby": ariaDescribedBy,
                 "aria-disabled": disabled,
                 "aria-orientation": "horizontal",
-                className: styles$b.handle,
+                className: styles$c.handle,
                 style: { insetInlineStart: `${toPercent(value)}%` },
                 onKeyDown: (event) => handleKeyDown(event, index)
               },
@@ -3229,7 +3306,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$a = {
+const styles$b = {
 	stepper: stepper,
 	sm: sm$1,
 	md: md$1,
@@ -3270,7 +3347,7 @@ function Stepper({
     {
       role: "group",
       "aria-label": "Stepper",
-      className: classNames(styles$a.stepper, styles$a[size], styles$a[mode], className),
+      className: classNames(styles$b.stepper, styles$b[size], styles$b[mode], className),
       "data-disabled": disabled,
       ...props,
       children: [
@@ -3286,7 +3363,7 @@ function Stepper({
             children: /* @__PURE__ */ jsxRuntime.jsx(IconMinus, {})
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$a.value, "aria-live": "polite", children: value }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$b.value, "aria-live": "polite", children: value }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -3306,7 +3383,7 @@ function Stepper({
 
 const switchWrapper = "_switchWrapper_1yukb_2";
 const icon = "_icon_1yukb_25";
-const styles$9 = {
+const styles$a = {
 	switchWrapper: switchWrapper,
 	icon: icon,
 	"switch": "_switch_1yukb_2"
@@ -3319,45 +3396,92 @@ function Switch({ className, label, indeterminate, ...props }) {
     {
       "data-disabled": `${Boolean(props.disabled)}`,
       "data-state": dataState,
-      className: classNames(styles$9.switchWrapper, className),
+      className: classNames(styles$a.switchWrapper, className),
       children: [
-        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 }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$a.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", role: "switch", className: styles$a.switch, ...props }),
         label
       ]
     }
   );
 }
 
+const TableContext = React.createContext({ layout: "table" });
+
+function TableProvider({ children, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value, children });
+}
+
+function useTableContext() {
+  return React.useContext(TableContext);
+}
+
+const stackedList = "_stackedList_5wdsh_4";
+const styles$9 = {
+	stackedList: stackedList
+};
+
 function TableBody({ className, children, ...props }) {
+  const { layout, captionId } = useTableContext();
+  if (layout === "stacked") {
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-labelledby": captionId, className: classNames(styles$9.stackedList, className), ...props, children });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className, ...props, children });
 }
 
-const tableCaption = "_tableCaption_fn9c1_2";
+const tableCaption = "_tableCaption_tlco9_2";
+const stackedCaption = "_stackedCaption_tlco9_13";
 const styles$8 = {
-	tableCaption: tableCaption
+	tableCaption: tableCaption,
+	stackedCaption: stackedCaption
 };
 
 function TableCaption({ className, children, ...props }) {
+  const { layout, captionId } = useTableContext();
+  if (layout === "stacked") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$8.tableCaption, styles$8.stackedCaption, className), ...props, id: captionId, children });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("caption", { className: classNames(styles$8.tableCaption, className), ...props, children });
 }
 
-const tableCell = "_tableCell_1lfet_2";
-const left$1 = "_left_1lfet_7";
-const center$1 = "_center_1lfet_11";
-const right$1 = "_right_1lfet_15";
+const tableCell = "_tableCell_1492t_2";
+const left$1 = "_left_1492t_7";
+const center$1 = "_center_1492t_11";
+const right$1 = "_right_1492t_15";
+const stackedCell = "_stackedCell_1492t_20";
+const stackedPair = "_stackedPair_1492t_24";
+const stackedLabel = "_stackedLabel_1492t_32";
+const stackedValue = "_stackedValue_1492t_40";
 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 });
+	right: right$1,
+	stackedCell: stackedCell,
+	stackedPair: stackedPair,
+	stackedLabel: stackedLabel,
+	stackedValue: stackedValue
+};
+
+function TableCell({ className, children, align = "left", colSpan, columnLabel, ...props }) {
+  const { layout, isGroupRow } = useTableContext();
+  if (layout === "stacked") {
+    if (columnLabel === void 0 || isGroupRow) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$7.stackedCell, className), ...props, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$7.stackedPair, className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("dt", { className: styles$7.stackedLabel, children: columnLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: styles$7.stackedValue, children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: classNames(styles$7.tableCell, styles$7[align], className), ...props, children });
 }
 
 function TableHeader({ className, children, ...props }) {
+  const { layout } = useTableContext();
+  if (layout === "stacked") {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("thead", { className, ...props, children });
 }
 
@@ -3379,34 +3503,89 @@ function TableHeaderCell({
   scope = "col",
   ...props
 }) {
+  const { layout } = useTableContext();
+  if (layout === "stacked") {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("th", { scope, className: classNames(styles$6.tableHeaderCell, styles$6[align], className), ...props, children });
 }
 
-const scrollContainer = "_scrollContainer_hioz2_2";
-const bare = "_bare_hioz2_15";
-const table = "_table_hioz2_21";
+function getRowSegments(children) {
+  return React.Children.toArray(children).reduce((segments, cell) => {
+    const isLabelled = React.isValidElement(cell) && cell.props.columnLabel !== void 0;
+    const openSegment = segments.at(-1);
+    if (openSegment?.isLabelled === isLabelled) {
+      openSegment.cells.push(cell);
+      return segments;
+    }
+    return [...segments, { isLabelled, cells: [cell] }];
+  }, []);
+}
+
+function hasTableCaption(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) {
+      return false;
+    }
+    if (child.type === React.Fragment) {
+      return hasTableCaption(child.props.children);
+    }
+    return child.type === TableCaption;
+  });
+}
+
+const container = "_container_1s7gk_2";
+const scrollContainer = "_scrollContainer_1s7gk_12";
+const stackedContainer = "_stackedContainer_1s7gk_16";
+const bare = "_bare_1s7gk_30";
+const table = "_table_1s7gk_47";
 const styles$5 = {
+	container: container,
 	scrollContainer: scrollContainer,
-	"default": "_default_hioz2_9",
+	stackedContainer: stackedContainer,
+	"default": "_default_1s7gk_24",
 	bare: bare,
 	table: table
 };
 
-function TableRoot({ className, children, mode = "default", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$5.scrollContainer, styles$5[mode]), children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: classNames(styles$5.table, className), ...props, children }) });
+function TableRoot({ className, children, mode = "default", layout = "table", ...props }) {
+  const generatedId = React.useId();
+  const captionId = hasTableCaption(children) ? generatedId : void 0;
+  if (layout === "stacked") {
+    return /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { value: { layout, captionId }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$5.container, styles$5.stackedContainer, styles$5[mode], className), ...props, children }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { value: { layout }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$5.container, styles$5.scrollContainer, styles$5[mode]), 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 tableRow = "_tableRow_tf0oz_2";
+const stackedRow = "_stackedRow_tf0oz_12";
+const stackedPairs = "_stackedPairs_tf0oz_21";
+const group = "_group_tf0oz_29";
+const current = "_current_tf0oz_36";
 const styles$4 = {
 	tableRow: tableRow,
-	"default": "_default_1p3oc_12",
+	stackedRow: stackedRow,
+	stackedPairs: stackedPairs,
+	"default": "_default_tf0oz_25",
 	group: group,
 	current: current
 };
 
 function TableRow({ className, children, mode = "default", isCurrent = false, ...props }) {
+  const context = useTableContext();
+  if (context.layout === "stacked") {
+    const isGroupRow = mode === "group";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        className: classNames(styles$4.stackedRow, styles$4[mode], isCurrent ? styles$4.current : void 0, className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { value: { ...context, isGroupRow }, children: isGroupRow ? children : getRowSegments(children).map(
+          (segment, index) => segment.isLabelled ? /* @__PURE__ */ jsxRuntime.jsx("dl", { className: styles$4.stackedPairs, children: segment.cells }, index) : segment.cells
+        ) })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
     {