@grandbazar/ui-baza 1.5.2 → 1.5.4

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import React, { isValidElement, cloneElement, Fragment, useMemo, useState, useCallback, createContext, useEffect, useRef, useContext, useId } from 'react';
+import React, { isValidElement, cloneElement, Fragment, useMemo, useState, useCallback, createContext, useEffect, useRef, useContext, useId, Children } from 'react';
 import { createPortal } from 'react-dom';
 
 function calculateCheckState(checked, indeterminate) {
@@ -59,7 +59,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$D = {
+const styles$E = {
 	badge: badge,
 	primary: primary$4,
 	secondary: secondary$5,
@@ -75,13 +75,13 @@ const styles$D = {
 };
 
 function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$D.badge, styles$D[size], styles$D[color], styles$D[mode], className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$E.badge, styles$E[size], styles$E[color], styles$E[mode], 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
@@ -94,7 +94,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
     }
@@ -102,12 +102,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__ */ jsx("div", { role: "tablist", className: classNames(styles$B.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { role: "tablist", className: classNames(styles$C.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -1087,46 +1087,66 @@ function IconTrophy(props) {
     /* @__PURE__ */ jsx(
       "path",
       {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M8 2H16A2 2 0 0 1 18 4V9A6 6 0 0 1 6 9V4A2 2 0 0 1 8 2ZM10 4H14A2 2 0 0 1 16 6V9A4 4 0 0 1 8 9V6A2 2 0 0 1 10 4Z",
-        fill: "currentColor"
+        d: "M6 1h12C18.3 6 16.6 12.6 14.2 14.8v2.7L16.8 20",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ jsx("path", { d: "M6 4.5A4 4 0 0 0 2 8.5A4 4 0 0 0 6 12.5V10.5A2 2 0 0 1 4 8.5A2 2 0 0 1 6 6.5V4.5Z", fill: "currentColor" }),
     /* @__PURE__ */ jsx(
       "path",
       {
-        d: "M18 4.5A4 4 0 0 1 22 8.5A4 4 0 0 1 18 12.5V10.5A2 2 0 0 0 20 8.5A2 2 0 0 0 18 6.5V4.5Z",
-        fill: "currentColor"
+        d: "M6 1C5.7 6 7.4 12.6 9.8 14.8v2.7L7.2 20",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ jsx("path", { d: "M10 13.5H14L15.5 18.5H8.5L10 13.5Z", fill: "currentColor" }),
     /* @__PURE__ */ jsx(
       "path",
       {
-        d: "M7 18.5H17A1 1 0 0 1 18 19.5V20.5A1 1 0 0 1 17 21.5H7A1 1 0 0 1 6 20.5V19.5A1 1 0 0 1 7 18.5Z",
-        fill: "currentColor"
+        d: "M6 1.5C2 1.5 1 3 1 6s1 5 6.2 5.2",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
-    )
-  ] });
-}
-IconTrophy.Filled = function IconTrophyFilled(props) {
-  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M8 2H16A2 2 0 0 1 18 4V9A6 6 0 0 1 6 9V4A2 2 0 0 1 8 2Z", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("path", { d: "M6 4.5A4 4 0 0 0 2 8.5A4 4 0 0 0 6 12.5V10.5A2 2 0 0 1 4 8.5A2 2 0 0 1 6 6.5V4.5Z", fill: "currentColor" }),
+    ),
     /* @__PURE__ */ jsx(
       "path",
       {
-        d: "M18 4.5A4 4 0 0 1 22 8.5A4 4 0 0 1 18 12.5V10.5A2 2 0 0 0 20 8.5A2 2 0 0 0 18 6.5V4.5Z",
-        fill: "currentColor"
+        d: "M18 1.5C22 1.5 23 3 23 6s-1 5-6.2 5.2",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ jsx("path", { d: "M10 13.5H14L15.5 18.5H8.5L10 13.5Z", fill: "currentColor" }),
     /* @__PURE__ */ jsx(
       "path",
       {
-        d: "M7 18.5H17A1 1 0 0 1 18 19.5V20.5A1 1 0 0 1 17 21.5H7A1 1 0 0 1 6 20.5V19.5A1 1 0 0 1 7 18.5Z",
+        d: "M7 20h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1z",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+IconTrophy.Filled = function IconTrophyFilled(props) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 1h12C18.3 6 16.6 12.6 14.2 14.8H9.8C7.4 12.6 5.7 6 6 1Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.8 14.8h4.4v2.7l2.6 2.5H7.2l2.6-2.5V14.8Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M6 19.5h12a1.5 1.5 0 0 1 0 3H6a1.5 1.5 0 0 1 0-3Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M6 1.5C2 1.5 1 3 1 6s1 5 6.2 5.2L6.5 9.2C3.8 9 3 7.6 3 6s.8-3 3-3.3V1.5ZM18 1.5C22 1.5 23 3 23 6s-1 5-6.2 5.2L17.5 9.2C20.2 9 21 7.6 21 6s-.8-3-3-3.3V1.5Z",
         fill: "currentColor"
       }
     )
@@ -1183,7 +1203,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
@@ -1232,7 +1252,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$z = {
+const styles$A = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1243,7 +1263,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,
@@ -1255,13 +1275,13 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsx(IconChevron, { className: styles$A.defaultSeparator })
+  separator = /* @__PURE__ */ jsx(IconChevron, { className: styles$B.defaultSeparator })
 }) {
   const childrenArray = Array.isArray(children) ? children : [children];
   const lastIndex = childrenArray.length - 1;
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: styles$A.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("li", { className: styles$A.breadcrumbsItem, children: item }),
-    index < lastIndex && /* @__PURE__ */ jsx("li", { className: styles$A.breadcrumbsItem, "aria-hidden": "true", children: separator })
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: styles$B.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("li", { className: styles$B.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsx("li", { className: styles$B.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
@@ -1276,7 +1296,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$y = {
+const styles$z = {
 	button: button,
 	accent: accent$3,
 	primary: primary$2,
@@ -1294,7 +1314,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$x = {
+const styles$y = {
 	buttonFunction: buttonFunction,
 	accent: accent$2,
 	neutral: neutral$1,
@@ -1314,7 +1334,7 @@ function ButtonFunction({
   return /* @__PURE__ */ 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,
@@ -1336,7 +1356,7 @@ function Button({
   return /* @__PURE__ */ 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], className),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1348,7 +1368,7 @@ Button.Function = ButtonFunction;
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
-const styles$w = {
+const styles$x = {
 	checkboxWrapper: checkboxWrapper,
 	icon: icon$2,
 	checkbox: checkbox
@@ -1361,11 +1381,11 @@ 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__ */ jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$w.icon }),
-        dataState === "indeterminate" && /* @__PURE__ */ jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$w.icon }),
-        /* @__PURE__ */ jsx("input", { "data-state": dataState, type: "checkbox", className: styles$w.checkbox, ...props }),
+        dataState === "checked" && /* @__PURE__ */ jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$x.icon }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$x.icon }),
+        /* @__PURE__ */ jsx("input", { "data-state": dataState, type: "checkbox", className: styles$x.checkbox, ...props }),
         label
       ]
     }
@@ -1373,7 +1393,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$v = {
+const styles$w = {
 	chip: chip
 };
 
@@ -1381,7 +1401,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames(styles$v.chip, className),
+      className: classNames(styles$w.chip, className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
@@ -1399,7 +1419,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$u = {
+const styles$v = {
 	root: root$1,
 	lg: lg$4,
 	md: md$7,
@@ -1411,7 +1431,7 @@ const styles$u = {
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$u.root, styles$u[size], styles$u[color], className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$v.root, styles$v[size], styles$v[color], className), ...props });
 }
 
 const LOCALE_FIRST_DAY_OF_WEEK = {
@@ -1421,7 +1441,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",
@@ -1431,10 +1451,10 @@ const styles$t = {
 };
 
 function DatePickerCell({ children, className, state, isCurrent, radius = "both", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$t.datePickerCellWrapper, styles$t[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$u.datePickerCellWrapper, styles$u[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ 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",
@@ -1504,7 +1524,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
@@ -1519,9 +1539,9 @@ function DatePickerField({
   firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru
 }) {
   const weeks = useMemo(() => getCalendarGrid(month, year, firstDayOfWeek), [month, year, firstDayOfWeek]);
-  return /* @__PURE__ */ jsxs("div", { className: classNames(styles$s.datePickerField, className), role: "grid", children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles$t.datePickerField, className), role: "grid", children: [
     renderWeekdays?.(),
-    /* @__PURE__ */ jsx("div", { className: styles$s.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: styles$s.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
+    /* @__PURE__ */ jsx("div", { className: styles$t.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: styles$t.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
   ] });
 }
 
@@ -1562,13 +1582,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__ */ jsx("div", { className: classNames(styles$r.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsx("div", { className: styles$r.datePickerWeekday, role: "columnheader", children: label }, label)) });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$s.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsx("div", { className: styles$s.datePickerWeekday, role: "columnheader", children: label }, label)) });
 }
 
 function DatePicker() {
@@ -1804,21 +1824,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__ */ jsx("div", { className: classNames(styles$q.dropdownContent, className), ...props, children });
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: classNames(styles$p.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$q.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
 }
 
 const CLICK_OUTSIDE_IGNORE_DATA_NAME = "data-clickoutside-ignore";
@@ -2246,7 +2266,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$o = {
+const styles$p = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2286,7 +2306,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
@@ -2343,7 +2363,7 @@ 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,
 	negative: negative,
@@ -2378,15 +2398,15 @@ function NotificationInline({
   ...props
 }) {
   const StatusIcon = STATUS_ICONS[color];
-  return /* @__PURE__ */ jsxs("div", { className: classNames(styles$n.notificationInline, styles$n[color], styles$n[mode], className), ...props, children: [
-    /* @__PURE__ */ jsx(StatusIcon, { className: styles$n.statusIcon, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs("span", { className: styles$n.body, children: [
-      /* @__PURE__ */ jsxs("span", { className: styles$n.titleRow, children: [
-        /* @__PURE__ */ jsx("span", { className: styles$n.title, children: title }),
-        onClose && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", className: styles$n.closeButton, onClick: onClose, children: /* @__PURE__ */ jsx(IconXMark.Small, { className: styles$n.closeIcon, "aria-hidden": "true" }) })
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles$o.notificationInline, styles$o[color], styles$o[mode], className), ...props, children: [
+    /* @__PURE__ */ jsx(StatusIcon, { className: styles$o.statusIcon, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("span", { className: styles$o.body, children: [
+      /* @__PURE__ */ jsxs("span", { className: styles$o.titleRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles$o.title, children: title }),
+        onClose && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", className: styles$o.closeButton, onClick: onClose, children: /* @__PURE__ */ jsx(IconXMark.Small, { className: styles$o.closeIcon, "aria-hidden": "true" }) })
       ] }),
-      description && /* @__PURE__ */ jsx("span", { className: styles$n.description, children: description }),
-      children && /* @__PURE__ */ jsx("span", { className: styles$n.actions, children })
+      description && /* @__PURE__ */ jsx("span", { className: styles$o.description, children: description }),
+      children && /* @__PURE__ */ jsx("span", { className: styles$o.actions, children })
     ] })
   ] });
 }
@@ -2402,7 +2422,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
@@ -2414,7 +2434,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
     }
@@ -2451,7 +2471,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
@@ -2478,9 +2498,9 @@ function PaginationRoot({
     {
       "aria-label": "pagination navigation",
       role: "navigation",
-      className: classNames(styles$l.paginationRoot, className),
+      className: classNames(styles$m.paginationRoot, className),
       ...props,
-      children: /* @__PURE__ */ jsxs("ul", { className: styles$l.paginationList, children: [
+      children: /* @__PURE__ */ jsxs("ul", { className: styles$m.paginationList, children: [
         showArrows && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
           PaginationItem$1,
           {
@@ -2488,7 +2508,7 @@ function PaginationRoot({
             onClick: () => onPageChange(currentPage - 1),
             disabled: isFirstPage,
             size,
-            children: /* @__PURE__ */ jsx(IconChevron$1, { className: styles$l.arrowLeft })
+            children: /* @__PURE__ */ jsx(IconChevron$1, { className: styles$m.arrowLeft })
           }
         ) }),
         visiblePages.map((page, index) => /* @__PURE__ */ jsx("li", { children: page === ELLIPSIS_SYMBOL ? /* @__PURE__ */ jsx(PaginationItem$1, { "aria-label": "More pages", disabled: true, size, children: /* @__PURE__ */ jsx(Ellipsis, {}) }) : /* @__PURE__ */ jsx(
@@ -2528,7 +2548,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$k = {
+const styles$l = {
 	root: root,
 	segment: segment,
 	flexGrow: flexGrow,
@@ -2549,7 +2569,7 @@ function ProgressBarLinear({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames(styles$k.root, styles$k[size], className),
+      className: classNames(styles$l.root, styles$l[size], className),
       role: "progressbar",
       "aria-valuenow": clampedPercent,
       "aria-valuemin": 0,
@@ -2561,14 +2581,14 @@ function ProgressBarLinear({
         (Boolean(clampedPercent) || showFillOnZero) && /* @__PURE__ */ 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__ */ jsx("div", { className: classNames(styles$k.segment, styles$k.flexGrow, styles$k.trail), "aria-hidden": "true" })
+        clampedPercent < 100 && /* @__PURE__ */ jsx("div", { className: classNames(styles$l.segment, styles$l.flexGrow, styles$l.trail), "aria-hidden": "true" })
       ]
     }
   );
@@ -2588,7 +2608,7 @@ function ProgressBarSteps({
     return /* @__PURE__ */ 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
@@ -2597,7 +2617,7 @@ function ProgressBarSteps({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames(styles$k.root, styles$k[size], className),
+      className: classNames(styles$l.root, styles$l[size], className),
       role: "progressbar",
       "aria-valuenow": clampedCurrent,
       "aria-valuemin": 0,
@@ -2617,14 +2637,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__ */ jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$j.radioWrapper, className), children: [
-    /* @__PURE__ */ jsx("input", { type: "radio", className: styles$j.radio, ...props }),
+  return /* @__PURE__ */ jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$k.radioWrapper, className), children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", className: styles$k.radio, ...props }),
     label
   ] });
 }
@@ -2635,7 +2655,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,
@@ -2656,14 +2676,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__ */ jsxs("div", { className: styles$i.textFieldAreaWrapper, children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: props.id, className: styles$i.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
-    floatingLabelSuffix && /* @__PURE__ */ jsx("span", { className: styles$i.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
+  return floatingLabel ? /* @__PURE__ */ jsxs("div", { className: styles$j.textFieldAreaWrapper, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: props.id, className: styles$j.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
+    floatingLabelSuffix && /* @__PURE__ */ jsx("span", { className: styles$j.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
     textFieldArea
   ] }) : textFieldArea;
 }
@@ -2671,7 +2691,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
@@ -2690,37 +2710,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__ */ jsxs("div", { className: styles$h.textFieldInputWrapper, children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: props.id, className: styles$h.textFieldInputLabel, "data-element": "label", children: floatingLabel }),
+  return floatingLabel ? /* @__PURE__ */ jsxs("div", { className: styles$i.textFieldInputWrapper, children: [
+    /* @__PURE__ */ 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__ */ jsx("label", { className: classNames(styles$g.textFieldLabel, className), "data-required": isRequired, ...props, children });
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: classNames(styles$f.textFieldRoot, styles$f[size], className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$g.textFieldRoot, styles$g[size], className), ...props });
 }
 
 function TextField() {
@@ -2735,7 +2755,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,
@@ -2761,7 +2781,7 @@ function Search(props) {
     value && /* @__PURE__ */ jsx(
       IconXMark.Small,
       {
-        className: styles$e.icon,
+        className: styles$f.icon,
         "aria-label": "clear search",
         role: "button",
         onClick: () => {
@@ -2775,13 +2795,13 @@ function Search(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs(TextField.Root, { size: "md", className: classNames(styles$e.search, styles$e[mode], className), children: [
+  return /* @__PURE__ */ jsxs(TextField.Root, { size: "md", className: classNames(styles$f.search, styles$f[mode], className), children: [
     mode === "default" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(IconSearch, { className: styles$e.icon, "data-element": "icon" }),
+      /* @__PURE__ */ jsx(IconSearch, { className: styles$f.icon, "data-element": "icon" }),
       inputField
     ] }),
     mode === "custom" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("div", { className: styles$e.inputCustomWrapper, children: inputField }),
+      /* @__PURE__ */ jsx("div", { className: styles$f.inputCustomWrapper, children: inputField }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -2789,11 +2809,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__ */ jsx(IconSearch, { className: classNames(styles$e.icon), "data-element": "icon" })
+          children: /* @__PURE__ */ jsx(IconSearch, { className: classNames(styles$f.icon), "data-element": "icon" })
         }
       )
     ] })
@@ -2819,7 +2839,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
@@ -2835,7 +2855,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
     }
@@ -2872,7 +2892,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,
@@ -2887,11 +2907,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__ */ jsx("div", { className: classNames(styles$c.indicator, styles$c[size]), style: indicatorStyle })
+        /* @__PURE__ */ jsx("div", { className: classNames(styles$d.indicator, styles$d[size]), style: indicatorStyle })
       ]
     }
   ) });
@@ -2986,7 +3006,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,
@@ -2998,16 +3018,16 @@ const styles$b = {
 };
 
 function SliderMarks({ marks, min, max, activeFrom, activeTo }) {
-  return /* @__PURE__ */ jsx("div", { className: styles$b.marks, children: marks.map(({ value, label }) => {
+  return /* @__PURE__ */ jsx("div", { className: styles$c.marks, children: marks.map(({ value, label }) => {
     const isActive = value >= activeFrom && value <= activeTo;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         "data-state": isActive ? "active" : "default",
-        className: styles$b.mark,
+        className: styles$c.mark,
         style: { insetInlineStart: `${getPercent(value, { min, max })}%` },
         children: [
-          /* @__PURE__ */ jsx("span", { className: styles$b.markDot }),
+          /* @__PURE__ */ jsx("span", { className: styles$c.markDot }),
           label
         ]
       },
@@ -3130,7 +3150,7 @@ function SliderBase({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames(styles$b.slider, className),
+      className: classNames(styles$c.slider, className),
       "data-disabled": disabled,
       "data-marks": Boolean(marks?.length),
       ...props,
@@ -3138,18 +3158,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__ */ jsx("div", { className: styles$b.track }),
+            /* @__PURE__ */ jsx("div", { className: styles$c.track }),
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$b.fill,
+                className: styles$c.fill,
                 style: { insetInlineStart: `${toPercent(fillFrom)}%`, insetInlineEnd: `${100 - toPercent(fillTo)}%` }
               }
             ),
@@ -3171,7 +3191,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)
               },
@@ -3205,7 +3225,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,
@@ -3246,7 +3266,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: [
@@ -3262,7 +3282,7 @@ function Stepper({
             children: /* @__PURE__ */ jsx(IconMinus, {})
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: styles$a.value, "aria-live": "polite", children: value }),
+        /* @__PURE__ */ jsx("span", { className: styles$b.value, "aria-live": "polite", children: value }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -3282,7 +3302,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"
@@ -3295,45 +3315,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__ */ jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$9.icon }),
-        /* @__PURE__ */ jsx("input", { "data-state": dataState, type: "checkbox", role: "switch", className: styles$9.switch, ...props }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$a.icon }),
+        /* @__PURE__ */ jsx("input", { "data-state": dataState, type: "checkbox", role: "switch", className: styles$a.switch, ...props }),
         label
       ]
     }
   );
 }
 
+const TableContext = createContext({ layout: "table" });
+
+function TableProvider({ children, value }) {
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value, children });
+}
+
+function useTableContext() {
+  return 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__ */ jsx("ul", { "aria-labelledby": captionId, className: classNames(styles$9.stackedList, className), ...props, children });
+  }
   return /* @__PURE__ */ 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__ */ jsx("div", { className: classNames(styles$8.tableCaption, styles$8.stackedCaption, className), ...props, id: captionId, children });
+  }
   return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: classNames(styles$7.stackedCell, className), ...props, children });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: classNames(styles$7.stackedPair, className), ...props, children: [
+      /* @__PURE__ */ jsx("dt", { className: styles$7.stackedLabel, children: columnLabel }),
+      /* @__PURE__ */ jsx("dd", { className: styles$7.stackedValue, children })
+    ] });
+  }
+  return /* @__PURE__ */ 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__ */ jsx("thead", { className, ...props, children });
 }
 
@@ -3355,34 +3422,89 @@ function TableHeaderCell({
   scope = "col",
   ...props
 }) {
+  const { layout } = useTableContext();
+  if (layout === "stacked") {
+    return null;
+  }
   return /* @__PURE__ */ 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 Children.toArray(children).reduce((segments, cell) => {
+    const isLabelled = 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 Children.toArray(children).some((child) => {
+    if (!isValidElement(child)) {
+      return false;
+    }
+    if (child.type === 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__ */ jsx("div", { className: classNames(styles$5.scrollContainer, styles$5[mode]), children: /* @__PURE__ */ jsx("table", { className: classNames(styles$5.table, className), ...props, children }) });
+function TableRoot({ className, children, mode = "default", layout = "table", ...props }) {
+  const generatedId = useId();
+  const captionId = hasTableCaption(children) ? generatedId : void 0;
+  if (layout === "stacked") {
+    return /* @__PURE__ */ jsx(TableProvider, { value: { layout, captionId }, children: /* @__PURE__ */ jsx("div", { className: classNames(styles$5.container, styles$5.stackedContainer, styles$5[mode], className), ...props, children }) });
+  }
+  return /* @__PURE__ */ jsx(TableProvider, { value: { layout }, children: /* @__PURE__ */ jsx("div", { className: classNames(styles$5.container, styles$5.scrollContainer, styles$5[mode]), children: /* @__PURE__ */ 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__ */ jsx(
+      "li",
+      {
+        className: classNames(styles$4.stackedRow, styles$4[mode], isCurrent ? styles$4.current : void 0, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(TableProvider, { value: { ...context, isGroupRow }, children: isGroupRow ? children : getRowSegments(children).map(
+          (segment, index) => segment.isLabelled ? /* @__PURE__ */ jsx("dl", { className: styles$4.stackedPairs, children: segment.cells }, index) : segment.cells
+        ) })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "tr",
     {