cetec-design-system 4.2.0-0 → 4.3.0-0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, useContext, useMemo, forwardRef, createElement, useLayoutEffect, useState, useRef, useSyncExternalStore, useEffect, useCallback, useId as useId$1, isValidElement, Children, cloneElement, useReducer } from "react";
+import { createContext, useContext, useMemo, forwardRef, createElement, useLayoutEffect, useState, useRef, useSyncExternalStore, useCallback, useEffect, useId as useId$1, isValidElement, Children, cloneElement, useReducer, Fragment as Fragment$1 } from "react";
 import * as ReactDOM from "react-dom";
 import { b as breakpoints, c as containerSizes } from "./containerSizes-nJuD-1Ap.js";
 import { useForm } from "@tanstack/react-form";
@@ -974,7 +974,7 @@ const spinnerVariantKeys = [
   "inverse",
   "centered"
 ];
-const getVariantProps$v = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
+const getVariantProps$w = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
 const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   __recipe__: false,
   __name__: "spinner",
@@ -999,7 +999,7 @@ const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, spinnerVariantKeys);
   },
-  getVariantProps: getVariantProps$v
+  getVariantProps: getVariantProps$w
 });
 const tagFn = /* @__PURE__ */ createRecipe("tag", {
   "variant": "default",
@@ -1667,7 +1667,7 @@ const toggleFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const toggleVariantKeys = [];
-const getVariantProps$u = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const getVariantProps$v = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
 const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   __recipe__: false,
   __name__: "toggle",
@@ -1678,7 +1678,7 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   splitVariantProps(props) {
     return splitProps$1(props, toggleVariantKeys);
   },
-  getVariantProps: getVariantProps$u
+  getVariantProps: getVariantProps$v
 });
 const alertDefaultVariants = {
   "tone": "info"
@@ -1721,7 +1721,7 @@ const alertFn = memo((props = {}) => {
 const alertVariantKeys = [
   "tone"
 ];
-const getVariantProps$t = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
+const getVariantProps$u = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
 const alert = /* @__PURE__ */ Object.assign(alertFn, {
   __recipe__: false,
   __name__: "alert",
@@ -1740,7 +1740,7 @@ const alert = /* @__PURE__ */ Object.assign(alertFn, {
   splitVariantProps(props) {
     return splitProps$1(props, alertVariantKeys);
   },
-  getVariantProps: getVariantProps$t
+  getVariantProps: getVariantProps$u
 });
 const autocompleteDefaultVariants = {
   "size": "md",
@@ -1797,7 +1797,7 @@ const autocompleteVariantKeys = [
   "layer",
   "size"
 ];
-const getVariantProps$s = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
+const getVariantProps$t = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
 const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   __recipe__: false,
   __name__: "autocomplete",
@@ -1819,7 +1819,7 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, autocompleteVariantKeys);
   },
-  getVariantProps: getVariantProps$s
+  getVariantProps: getVariantProps$t
 });
 const avatarDefaultVariants = {
   "size": "md",
@@ -1856,7 +1856,7 @@ const avatarVariantKeys = [
   "size",
   "shape"
 ];
-const getVariantProps$r = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const getVariantProps$s = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
 const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   __recipe__: false,
   __name__: "avatar",
@@ -1881,7 +1881,7 @@ const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, avatarVariantKeys);
   },
-  getVariantProps: getVariantProps$r
+  getVariantProps: getVariantProps$s
 });
 const badgeDefaultVariants = {
   "size": "md",
@@ -1908,7 +1908,7 @@ const badgeVariantKeys = [
   "dot",
   "variant"
 ];
-const getVariantProps$q = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const getVariantProps$r = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
 const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   __recipe__: false,
   __name__: "badge",
@@ -1944,7 +1944,7 @@ const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   splitVariantProps(props) {
     return splitProps$1(props, badgeVariantKeys);
   },
-  getVariantProps: getVariantProps$q
+  getVariantProps: getVariantProps$r
 });
 const breadcrumbsDefaultVariants = {};
 const breadcrumbsCompoundVariants = [];
@@ -1971,7 +1971,7 @@ const breadcrumbsFn = memo((props = {}) => {
   return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const breadcrumbsVariantKeys = [];
-const getVariantProps$p = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
+const getVariantProps$q = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
 const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   __recipe__: false,
   __name__: "breadcrumbs",
@@ -1982,7 +1982,7 @@ const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, breadcrumbsVariantKeys);
   },
-  getVariantProps: getVariantProps$p
+  getVariantProps: getVariantProps$q
 });
 const buttonDefaultVariants = {
   "variant": "standard",
@@ -2013,7 +2013,7 @@ const buttonVariantKeys = [
   "before",
   "after"
 ];
-const getVariantProps$o = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const getVariantProps$p = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
 const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
   __name__: "button",
@@ -2047,7 +2047,7 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, buttonVariantKeys);
   },
-  getVariantProps: getVariantProps$o
+  getVariantProps: getVariantProps$p
 });
 const calendarDefaultVariants = {
   "type": "days"
@@ -2086,7 +2086,7 @@ const calendarFn = memo((props = {}) => {
 const calendarVariantKeys = [
   "type"
 ];
-const getVariantProps$n = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
+const getVariantProps$o = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
 const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   __recipe__: false,
   __name__: "calendar",
@@ -2103,7 +2103,7 @@ const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, calendarVariantKeys);
   },
-  getVariantProps: getVariantProps$n
+  getVariantProps: getVariantProps$o
 });
 const checkboxDefaultVariants = {};
 const checkboxCompoundVariants = [];
@@ -2130,7 +2130,7 @@ const checkboxFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const checkboxVariantKeys = [];
-const getVariantProps$m = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const getVariantProps$n = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
 const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
   __name__: "checkbox",
@@ -2141,7 +2141,7 @@ const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   splitVariantProps(props) {
     return splitProps$1(props, checkboxVariantKeys);
   },
-  getVariantProps: getVariantProps$m
+  getVariantProps: getVariantProps$n
 });
 const chipDefaultVariants = {
   "size": "md"
@@ -2179,7 +2179,7 @@ const chipVariantKeys = [
   "after",
   "dismissable"
 ];
-const getVariantProps$l = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
+const getVariantProps$m = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
 const chip = /* @__PURE__ */ Object.assign(chipFn, {
   __recipe__: false,
   __name__: "chip",
@@ -2206,7 +2206,7 @@ const chip = /* @__PURE__ */ Object.assign(chipFn, {
   splitVariantProps(props) {
     return splitProps$1(props, chipVariantKeys);
   },
-  getVariantProps: getVariantProps$l
+  getVariantProps: getVariantProps$m
 });
 const codeBlockDefaultVariants = {
   "tone": "default",
@@ -2275,7 +2275,7 @@ const codeBlockVariantKeys = [
   "collapsed",
   "actionGutter"
 ];
-const getVariantProps$k = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
+const getVariantProps$l = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
 const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
   __recipe__: false,
   __name__: "codeBlock",
@@ -2311,7 +2311,7 @@ const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
   splitVariantProps(props) {
     return splitProps$1(props, codeBlockVariantKeys);
   },
-  getVariantProps: getVariantProps$k
+  getVariantProps: getVariantProps$l
 });
 const dateMenusDefaultVariants = {};
 const dateMenusCompoundVariants = [];
@@ -2334,7 +2334,7 @@ const dateMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateMenusVariantKeys = [];
-const getVariantProps$j = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$k = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
 const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   __recipe__: false,
   __name__: "dateMenus",
@@ -2345,7 +2345,7 @@ const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$j
+  getVariantProps: getVariantProps$k
 });
 const dateTimeMenusDefaultVariants = {};
 const dateTimeMenusCompoundVariants = [];
@@ -2368,7 +2368,7 @@ const dateTimeMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateTimeMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateTimeMenusVariantKeys = [];
-const getVariantProps$i = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$j = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
 const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   __recipe__: false,
   __name__: "dateTimeMenus",
@@ -2379,7 +2379,7 @@ const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateTimeMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$i
+  getVariantProps: getVariantProps$j
 });
 const drawerDefaultVariants = {
   "side": "right",
@@ -2426,7 +2426,7 @@ const drawerVariantKeys = [
   "size",
   "scrollable"
 ];
-const getVariantProps$h = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
+const getVariantProps$i = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
 const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
   __recipe__: false,
   __name__: "drawer",
@@ -2453,7 +2453,7 @@ const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, drawerVariantKeys);
   },
-  getVariantProps: getVariantProps$h
+  getVariantProps: getVariantProps$i
 });
 const formFieldDefaultVariants = {
   "layout": "default",
@@ -2482,7 +2482,7 @@ const formFieldVariantKeys = [
   "layout",
   "size"
 ];
-const getVariantProps$g = (variants) => ({ ...formFieldDefaultVariants, ...compact(variants) });
+const getVariantProps$h = (variants) => ({ ...formFieldDefaultVariants, ...compact(variants) });
 const formField = /* @__PURE__ */ Object.assign(formFieldFn, {
   __recipe__: false,
   __name__: "formField",
@@ -2504,7 +2504,7 @@ const formField = /* @__PURE__ */ Object.assign(formFieldFn, {
   splitVariantProps(props) {
     return splitProps$1(props, formFieldVariantKeys);
   },
-  getVariantProps: getVariantProps$g
+  getVariantProps: getVariantProps$h
 });
 const iconButtonDefaultVariants = {
   "variant": "standard",
@@ -2533,7 +2533,7 @@ const iconButtonVariantKeys = [
   "variant",
   "size"
 ];
-const getVariantProps$f = (variants) => ({ ...iconButtonDefaultVariants, ...compact(variants) });
+const getVariantProps$g = (variants) => ({ ...iconButtonDefaultVariants, ...compact(variants) });
 const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
   __recipe__: false,
   __name__: "iconButton",
@@ -2561,7 +2561,7 @@ const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, iconButtonVariantKeys);
   },
-  getVariantProps: getVariantProps$f
+  getVariantProps: getVariantProps$g
 });
 const inlineNoteDefaultVariants = {
   "tone": "info"
@@ -2588,7 +2588,7 @@ const inlineNoteFn = memo((props = {}) => {
 const inlineNoteVariantKeys = [
   "tone"
 ];
-const getVariantProps$e = (variants) => ({ ...inlineNoteDefaultVariants, ...compact(variants) });
+const getVariantProps$f = (variants) => ({ ...inlineNoteDefaultVariants, ...compact(variants) });
 const inlineNote = /* @__PURE__ */ Object.assign(inlineNoteFn, {
   __recipe__: false,
   __name__: "inlineNote",
@@ -2607,7 +2607,7 @@ const inlineNote = /* @__PURE__ */ Object.assign(inlineNoteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, inlineNoteVariantKeys);
   },
-  getVariantProps: getVariantProps$e
+  getVariantProps: getVariantProps$f
 });
 const kbdDefaultVariants = {
   "variant": "default"
@@ -2630,7 +2630,7 @@ const kbdFn = memo((props = {}) => {
 const kbdVariantKeys = [
   "variant"
 ];
-const getVariantProps$d = (variants) => ({ ...kbdDefaultVariants, ...compact(variants) });
+const getVariantProps$e = (variants) => ({ ...kbdDefaultVariants, ...compact(variants) });
 const kbd = /* @__PURE__ */ Object.assign(kbdFn, {
   __recipe__: false,
   __name__: "kbd",
@@ -2646,7 +2646,7 @@ const kbd = /* @__PURE__ */ Object.assign(kbdFn, {
   splitVariantProps(props) {
     return splitProps$1(props, kbdVariantKeys);
   },
-  getVariantProps: getVariantProps$d
+  getVariantProps: getVariantProps$e
 });
 const listItemGroupDefaultVariants = {
   "density": "compact"
@@ -2673,7 +2673,7 @@ const listItemGroupFn = memo((props = {}) => {
 const listItemGroupVariantKeys = [
   "density"
 ];
-const getVariantProps$c = (variants) => ({ ...listItemGroupDefaultVariants, ...compact(variants) });
+const getVariantProps$d = (variants) => ({ ...listItemGroupDefaultVariants, ...compact(variants) });
 const listItemGroup = /* @__PURE__ */ Object.assign(listItemGroupFn, {
   __recipe__: false,
   __name__: "listItemGroup",
@@ -2690,7 +2690,7 @@ const listItemGroup = /* @__PURE__ */ Object.assign(listItemGroupFn, {
   splitVariantProps(props) {
     return splitProps$1(props, listItemGroupVariantKeys);
   },
-  getVariantProps: getVariantProps$c
+  getVariantProps: getVariantProps$d
 });
 const listItemDefaultVariants = {
   "variant": "default",
@@ -2746,7 +2746,7 @@ const listItemVariantKeys = [
   "iconBefore",
   "iconAfter"
 ];
-const getVariantProps$b = (variants) => ({ ...listItemDefaultVariants, ...compact(variants) });
+const getVariantProps$c = (variants) => ({ ...listItemDefaultVariants, ...compact(variants) });
 const listItem = /* @__PURE__ */ Object.assign(listItemFn, {
   __recipe__: false,
   __name__: "listItem",
@@ -2781,7 +2781,7 @@ const listItem = /* @__PURE__ */ Object.assign(listItemFn, {
   splitVariantProps(props) {
     return splitProps$1(props, listItemVariantKeys);
   },
-  getVariantProps: getVariantProps$b
+  getVariantProps: getVariantProps$c
 });
 const menuDefaultVariants = {
   "density": "compact",
@@ -2828,7 +2828,7 @@ const menuVariantKeys = [
   "panel",
   "scrollable"
 ];
-const getVariantProps$a = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
+const getVariantProps$b = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
 const menu = /* @__PURE__ */ Object.assign(menuFn, {
   __recipe__: false,
   __name__: "menu",
@@ -2855,7 +2855,7 @@ const menu = /* @__PURE__ */ Object.assign(menuFn, {
   splitVariantProps(props) {
     return splitProps$1(props, menuVariantKeys);
   },
-  getVariantProps: getVariantProps$a
+  getVariantProps: getVariantProps$b
 });
 const modalDefaultVariants = {
   "size": "md",
@@ -2904,7 +2904,7 @@ const modalVariantKeys = [
   "size",
   "position"
 ];
-const getVariantProps$9 = (variants) => ({ ...modalDefaultVariants, ...compact(variants) });
+const getVariantProps$a = (variants) => ({ ...modalDefaultVariants, ...compact(variants) });
 const modal = /* @__PURE__ */ Object.assign(modalFn, {
   __recipe__: false,
   __name__: "modal",
@@ -2928,7 +2928,7 @@ const modal = /* @__PURE__ */ Object.assign(modalFn, {
   splitVariantProps(props) {
     return splitProps$1(props, modalVariantKeys);
   },
-  getVariantProps: getVariantProps$9
+  getVariantProps: getVariantProps$a
 });
 const pageBannerDefaultVariants = {
   "tone": "info"
@@ -2963,7 +2963,7 @@ const pageBannerFn = memo((props = {}) => {
 const pageBannerVariantKeys = [
   "tone"
 ];
-const getVariantProps$8 = (variants) => ({ ...pageBannerDefaultVariants, ...compact(variants) });
+const getVariantProps$9 = (variants) => ({ ...pageBannerDefaultVariants, ...compact(variants) });
 const pageBanner = /* @__PURE__ */ Object.assign(pageBannerFn, {
   __recipe__: false,
   __name__: "pageBanner",
@@ -2982,7 +2982,7 @@ const pageBanner = /* @__PURE__ */ Object.assign(pageBannerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, pageBannerVariantKeys);
   },
-  getVariantProps: getVariantProps$8
+  getVariantProps: getVariantProps$9
 });
 const radioDefaultVariants = {};
 const radioCompoundVariants = [];
@@ -3009,7 +3009,7 @@ const radioFn = memo((props = {}) => {
   return Object.fromEntries(radioSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const radioVariantKeys = [];
-const getVariantProps$7 = (variants) => ({ ...radioDefaultVariants, ...compact(variants) });
+const getVariantProps$8 = (variants) => ({ ...radioDefaultVariants, ...compact(variants) });
 const radio = /* @__PURE__ */ Object.assign(radioFn, {
   __recipe__: false,
   __name__: "radio",
@@ -3020,7 +3020,7 @@ const radio = /* @__PURE__ */ Object.assign(radioFn, {
   splitVariantProps(props) {
     return splitProps$1(props, radioVariantKeys);
   },
-  getVariantProps: getVariantProps$7
+  getVariantProps: getVariantProps$8
 });
 const segmentedFieldsDefaultVariants = {
   "size": "md"
@@ -3055,7 +3055,7 @@ const segmentedFieldsVariantKeys = [
   "before",
   "after"
 ];
-const getVariantProps$6 = (variants) => ({ ...segmentedFieldsDefaultVariants, ...compact(variants) });
+const getVariantProps$7 = (variants) => ({ ...segmentedFieldsDefaultVariants, ...compact(variants) });
 const segmentedFields = /* @__PURE__ */ Object.assign(segmentedFieldsFn, {
   __recipe__: false,
   __name__: "segmentedFields",
@@ -3088,7 +3088,7 @@ const segmentedFields = /* @__PURE__ */ Object.assign(segmentedFieldsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, segmentedFieldsVariantKeys);
   },
-  getVariantProps: getVariantProps$6
+  getVariantProps: getVariantProps$7
 });
 const segmentedInputsDefaultVariants = {
   "size": "md"
@@ -3115,7 +3115,7 @@ const segmentedInputsFn = memo((props = {}) => {
 const segmentedInputsVariantKeys = [
   "size"
 ];
-const getVariantProps$5 = (variants) => ({ ...segmentedInputsDefaultVariants, ...compact(variants) });
+const getVariantProps$6 = (variants) => ({ ...segmentedInputsDefaultVariants, ...compact(variants) });
 const segmentedInputs = /* @__PURE__ */ Object.assign(segmentedInputsFn, {
   __recipe__: false,
   __name__: "segmentedInputs",
@@ -3133,7 +3133,7 @@ const segmentedInputs = /* @__PURE__ */ Object.assign(segmentedInputsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, segmentedInputsVariantKeys);
   },
-  getVariantProps: getVariantProps$5
+  getVariantProps: getVariantProps$6
 });
 const selectDefaultVariants = {
   "size": "md"
@@ -3183,7 +3183,7 @@ const selectVariantKeys = [
   "multiple",
   "autoSize"
 ];
-const getVariantProps$4 = (variants) => ({ ...selectDefaultVariants, ...compact(variants) });
+const getVariantProps$5 = (variants) => ({ ...selectDefaultVariants, ...compact(variants) });
 const select = /* @__PURE__ */ Object.assign(selectFn, {
   __recipe__: false,
   __name__: "select",
@@ -3211,6 +3211,73 @@ const select = /* @__PURE__ */ Object.assign(selectFn, {
   splitVariantProps(props) {
     return splitProps$1(props, selectVariantKeys);
   },
+  getVariantProps: getVariantProps$5
+});
+const tabsDefaultVariants = {
+  "hasOverflow": false
+};
+const tabsCompoundVariants = [];
+const tabsSlotNames = [
+  [
+    "root",
+    "tabs__root"
+  ],
+  [
+    "strip",
+    "tabs__strip"
+  ],
+  [
+    "list",
+    "tabs__list"
+  ],
+  [
+    "tab",
+    "tabs__tab"
+  ],
+  [
+    "badge",
+    "tabs__badge"
+  ],
+  [
+    "overflow",
+    "tabs__overflow"
+  ],
+  [
+    "menu",
+    "tabs__menu"
+  ],
+  [
+    "panel",
+    "tabs__panel"
+  ]
+];
+const tabsSlotFns = /* @__PURE__ */ tabsSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tabsDefaultVariants, getSlotCompoundVariant(tabsCompoundVariants, slotName))]);
+const tabsFn = memo((props = {}) => {
+  return Object.fromEntries(tabsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const tabsVariantKeys = [
+  "hasOverflow",
+  "overflowed"
+];
+const getVariantProps$4 = (variants) => ({ ...tabsDefaultVariants, ...compact(variants) });
+const tabs = /* @__PURE__ */ Object.assign(tabsFn, {
+  __recipe__: false,
+  __name__: "tabs",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: tabsVariantKeys,
+  variantMap: {
+    "hasOverflow": [
+      "false",
+      "true"
+    ],
+    "overflowed": [
+      "true"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, tabsVariantKeys);
+  },
   getVariantProps: getVariantProps$4
 });
 const textInputDefaultVariants = {
@@ -15930,6 +15997,239 @@ function useContainerQuery(containerRef, size2, direction = "min") {
     () => false
   );
 }
+const DEFAULT_RESERVE = 32;
+const areKeysEqual = (a, b) => a.length === b.length && a.every((key, index2) => key === b[index2]);
+const syncObservedElements = (observer, current, desired) => {
+  for (const element of current) {
+    if (!desired.has(element)) observer == null ? void 0 : observer.unobserve(element);
+  }
+  for (const element of desired) {
+    if (!current.has(element)) observer == null ? void 0 : observer.observe(element);
+  }
+  return desired;
+};
+const useOverflowItems = ({
+  items,
+  containerRef,
+  getItemElement,
+  activeItem = null,
+  reserve = DEFAULT_RESERVE,
+  reserveRef,
+  enabled = true
+}) => {
+  const [visible, setVisible] = useState(() => [...items]);
+  const [overflow, setOverflow] = useState([]);
+  const [forcedItem, setForcedItem] = useState(null);
+  const frameRef = useRef(null);
+  const itemsRef = useRef(items);
+  const activeItemRef = useRef(activeItem);
+  const forcedItemRef = useRef(forcedItem);
+  const requestsRef = useRef([]);
+  const lastActiveItemRef = useRef(activeItem);
+  const reserveValueRef = useRef(reserve);
+  const reserveElementRef = useRef(null);
+  const enabledRef = useRef(enabled);
+  const observerRef = useRef(null);
+  const observedElementsRef = useRef(/* @__PURE__ */ new Set());
+  const pendingVisibilityRef = useRef(null);
+  const measure = useCallback(() => {
+    var _a;
+    const container = containerRef.current;
+    const currentItems = itemsRef.current;
+    if (!enabledRef.current || !container) {
+      setVisible(
+        (current) => areKeysEqual(current, currentItems) ? current : [...currentItems]
+      );
+      setOverflow((current) => current.length === 0 ? current : []);
+      return;
+    }
+    const styles = globalThis.getComputedStyle(container);
+    const paddingInline = Number.parseFloat(styles.paddingLeft || "0") + Number.parseFloat(styles.paddingRight || "0");
+    const gap = Number.parseFloat(styles.columnGap || "0") || 0;
+    const fullWidth = container.clientWidth - paddingInline;
+    const widths = currentItems.map(
+      (key) => {
+        var _a2;
+        return ((_a2 = getItemElement(key)) == null ? void 0 : _a2.offsetWidth) ?? Number.POSITIVE_INFINITY;
+      }
+    );
+    const forcedKey = forcedItemRef.current;
+    const activeKey = activeItemRef.current;
+    const priorityItem = forcedKey ?? activeKey;
+    const priorityIndex = priorityItem === null ? -1 : currentItems.indexOf(priorityItem);
+    const anchor = priorityIndex === -1 ? 0 : priorityIndex;
+    const requiredIndices = [
+      ...new Set(
+        [forcedKey, activeKey].filter((key) => key !== null).map((key) => currentItems.indexOf(key)).filter((index2) => index2 !== -1)
+      )
+    ];
+    const byDistanceFromActive = currentItems.map((_key, index2) => index2).sort((a, b) => {
+      const distance = Math.abs(a - anchor) - Math.abs(b - anchor);
+      return distance === 0 ? a - b : distance;
+    });
+    const fit = (forcedIndices, usable) => {
+      const kept2 = /* @__PURE__ */ new Set();
+      let used = 0;
+      for (const index2 of forcedIndices) {
+        used += (widths[index2] ?? 0) + (kept2.size > 0 ? gap : 0);
+        kept2.add(index2);
+      }
+      for (const index2 of byDistanceFromActive) {
+        if (kept2.has(index2)) continue;
+        const width = (widths[index2] ?? 0) + (kept2.size > 0 ? gap : 0);
+        if (used + width > usable) break;
+        used += width;
+        kept2.add(index2);
+      }
+      return kept2;
+    };
+    let kept = fit([], fullWidth);
+    if (kept.size < currentItems.length) {
+      const reservedWidth = ((_a = reserveElementRef.current) == null ? void 0 : _a.offsetWidth) ?? reserveValueRef.current;
+      const usable = fullWidth - reservedWidth;
+      kept = fit([], usable);
+      if (requiredIndices.some((index2) => !kept.has(index2))) {
+        kept = fit(requiredIndices, usable);
+      }
+    }
+    const nextVisible = [];
+    const nextOverflow = [];
+    currentItems.forEach((key, index2) => {
+      if (kept.has(index2)) {
+        nextVisible.push(key);
+      } else {
+        nextOverflow.push(key);
+      }
+    });
+    setVisible(
+      (current) => areKeysEqual(current, nextVisible) ? current : nextVisible
+    );
+    setOverflow(
+      (current) => areKeysEqual(current, nextOverflow) ? current : nextOverflow
+    );
+  }, [containerRef, getItemElement]);
+  const ensureVisible = useCallback(
+    (key, onVisible) => {
+      if (!itemsRef.current.includes(key)) return;
+      const requests = requestsRef.current;
+      const isTracked = requests.length > 0 || key !== activeItemRef.current;
+      if (isTracked) {
+        requestsRef.current = [
+          ...requests.filter((request) => request !== key),
+          key
+        ];
+        setForcedItem(key);
+      }
+      if (!overflow.includes(key)) {
+        pendingVisibilityRef.current = null;
+        onVisible == null ? void 0 : onVisible();
+        return;
+      }
+      pendingVisibilityRef.current = { key, onVisible };
+      setForcedItem(key);
+    },
+    [overflow]
+  );
+  useLayoutEffect(() => {
+    const schedule = () => {
+      if (frameRef.current !== null) {
+        globalThis.cancelAnimationFrame(frameRef.current);
+      }
+      frameRef.current = globalThis.requestAnimationFrame(() => {
+        frameRef.current = null;
+        measure();
+      });
+    };
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    observerRef.current = observer;
+    globalThis.addEventListener("resize", schedule);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      observerRef.current = null;
+      observedElementsRef.current.clear();
+      globalThis.removeEventListener("resize", schedule);
+      if (frameRef.current !== null) {
+        globalThis.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [measure]);
+  useLayoutEffect(() => {
+    if (!areKeysEqual(itemsRef.current, items)) {
+      itemsRef.current = [...items];
+    }
+    activeItemRef.current = activeItem;
+    forcedItemRef.current = forcedItem;
+    reserveValueRef.current = reserve;
+    reserveElementRef.current = (reserveRef == null ? void 0 : reserveRef.current) ?? null;
+    enabledRef.current = enabled;
+    const desiredElements = /* @__PURE__ */ new Set();
+    const container = containerRef.current;
+    if (enabled && container) {
+      desiredElements.add(container);
+      if (reserveElementRef.current) {
+        desiredElements.add(reserveElementRef.current);
+      }
+      for (const key of itemsRef.current) {
+        const element = getItemElement(key);
+        if (element) desiredElements.add(element);
+      }
+    }
+    observedElementsRef.current = syncObservedElements(
+      observerRef.current,
+      observedElementsRef.current,
+      desiredElements
+    );
+    measure();
+  }, [
+    activeItem,
+    containerRef,
+    enabled,
+    forcedItem,
+    getItemElement,
+    items,
+    measure,
+    reserve,
+    reserveRef
+  ]);
+  useLayoutEffect(() => {
+    var _a;
+    const pending = pendingVisibilityRef.current;
+    if (!pending) return;
+    if (!itemsRef.current.includes(pending.key)) {
+      pendingVisibilityRef.current = null;
+      setForcedItem(null);
+      return;
+    }
+    if (overflow.includes(pending.key)) return;
+    pendingVisibilityRef.current = null;
+    (_a = pending.onVisible) == null ? void 0 : _a.call(pending);
+  }, [overflow]);
+  useLayoutEffect(() => {
+    if (lastActiveItemRef.current !== activeItem) {
+      lastActiveItemRef.current = activeItem;
+      const requests = requestsRef.current;
+      const index2 = activeItem === null ? -1 : requests.indexOf(activeItem);
+      requestsRef.current = index2 === -1 ? [] : requests.slice(index2 + 1);
+    }
+    if (forcedItem === null) return;
+    const isRemoved = !items.includes(forcedItem);
+    if (!isRemoved && requestsRef.current.length > 0) return;
+    const pending = pendingVisibilityRef.current;
+    if (pending && (isRemoved || pending.key !== activeItem)) {
+      pendingVisibilityRef.current = null;
+    }
+    requestsRef.current = [];
+    setForcedItem(null);
+  }, [activeItem, forcedItem, items]);
+  return {
+    visible,
+    overflow,
+    hasOverflow: overflow.length > 0,
+    measure,
+    ensureVisible
+  };
+};
 function useClipboard(options = {}) {
   const { timeout = 2e3 } = options;
   const [copied, setCopied] = useState(false);
@@ -18721,6 +19021,20 @@ const DateTimeInput = (props) => {
 };
 const FloatingLayerContext = createContext("elevated");
 const useFloatingLayer = () => useContext(FloatingLayerContext);
+const getCompoundComponentType = (node, markerKey) => {
+  if (!node || typeof node !== "object" || !("type" in node)) {
+    return null;
+  }
+  const component = node.type;
+  if (typeof component !== "function" && typeof component !== "object" || component === null) {
+    return null;
+  }
+  const marker = component[markerKey];
+  return typeof marker === "string" ? marker : null;
+};
+const setCompoundComponentType = (component, markerKey, componentType) => {
+  Object.assign(component, { [markerKey]: componentType });
+};
 const MENU_COMPONENT_TYPES = {
   group: "MenuGroup",
   item: "MenuItem",
@@ -18792,14 +19106,7 @@ const isItemMatch = ({
   return textValue.toLowerCase().includes(query.trim().toLowerCase());
 };
 const getComponentType = (node) => {
-  if (!node || typeof node !== "object") {
-    return null;
-  }
-  if (!("type" in node)) {
-    return null;
-  }
-  const type = node.type;
-  return (type == null ? void 0 : type[menuComponentTypeKey]) ?? null;
+  return getCompoundComponentType(node, menuComponentTypeKey);
 };
 const hasMatchingItems = (children, filterContext) => {
   return Children.toArray(children).some((childNode) => {
@@ -19705,7 +20012,11 @@ const MenuGroup = (props) => {
     }
   );
 };
-MenuGroup[menuComponentTypeKey] = MENU_COMPONENT_TYPES.group;
+setCompoundComponentType(
+  MenuGroup,
+  menuComponentTypeKey,
+  MENU_COMPONENT_TYPES.group
+);
 const getHighlightParts = (value, query) => {
   const safeQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const regExp = new RegExp(`(${safeQuery})`, "ig");
@@ -20002,7 +20313,11 @@ const MenuItem = (props) => {
     }
   );
 };
-MenuItem[menuComponentTypeKey] = MENU_COMPONENT_TYPES.item;
+setCompoundComponentType(
+  MenuItem,
+  menuComponentTypeKey,
+  MENU_COMPONENT_TYPES.item
+);
 const MenuProvider = ({ children, root, filter }) => {
   const rootValue = {
     ...defaultMenuRootContextValue,
@@ -20488,7 +20803,11 @@ const SubMenu = (props) => {
     ) }) })
   ] });
 };
-SubMenu[menuComponentTypeKey] = MENU_COMPONENT_TYPES.subMenu;
+setCompoundComponentType(
+  SubMenu,
+  menuComponentTypeKey,
+  MENU_COMPONENT_TYPES.subMenu
+);
 const DateMenu = (props) => {
   const {
     trigger,
@@ -22999,6 +23318,569 @@ const RadioInput = (props) => {
     }
   );
 };
+const TabsContext = createContext(null);
+const TabPanelActiveContext = createContext(true);
+const TabsProvider = TabsContext.Provider;
+const TabPanelActiveProvider = TabPanelActiveContext.Provider;
+const useTabsContext = () => {
+  const context2 = useContext(TabsContext);
+  if (!context2) {
+    throw new Error("Tabs compound components must be used within <Tabs />");
+  }
+  return context2;
+};
+const useTabPanelActive = () => useContext(TabPanelActiveContext);
+const TABS_COMPONENT_TYPES = {
+  tab: "Tab",
+  panel: "TabPanel"
+};
+const tabsComponentTypeKey = "__tabsComponentType";
+const getTabsComponentType = (node) => {
+  return getCompoundComponentType(node, tabsComponentTypeKey);
+};
+const flattenTabsChildren = (children) => {
+  const flattened = [];
+  const visit = (nodes, keyPrefix) => {
+    Children.toArray(nodes).forEach((child) => {
+      if (isValidElement(child) && child.type === Fragment$1) {
+        visit(child.props.children, `${keyPrefix}${String(child.key)}/`);
+        return;
+      }
+      flattened.push(
+        keyPrefix !== "" && isValidElement(child) ? cloneElement(child, { key: `${keyPrefix}${String(child.key)}` }) : child
+      );
+    });
+  };
+  visit(children, "");
+  return flattened;
+};
+const overflowedTabClass = tabs({ overflowed: true }).tab;
+const badgeTooltipClasses = tooltip({ size: "md", hasTitle: false });
+const Tab = (props) => {
+  const {
+    value,
+    children,
+    // Read by `Tabs` off this element's props for the overflow menu. It is
+    // pulled out here so it never reaches the DOM as a stray attribute.
+    label: _label,
+    badge: badge2,
+    badgeTooltip,
+    disabled = false,
+    onClick,
+    onKeyDown,
+    ref,
+    ...rest
+  } = props;
+  const {
+    classes,
+    getPanelId,
+    getTabId,
+    onTabKeyDown,
+    overflowValues,
+    registerTabElement,
+    selectTab,
+    selectedValue
+  } = useTabsContext();
+  const isSelected = selectedValue === value;
+  const isOverflowed = overflowValues.includes(value);
+  const [className, otherProps] = splitProps(rest);
+  const setElement = useCallback(
+    (element) => {
+      registerTabElement(value, element);
+    },
+    [registerTabElement, value]
+  );
+  const tabClassName = isOverflowed ? overflowedTabClass : classes.tab;
+  const hasBadge = typeof badge2 === "number" && badge2 !== 0;
+  const hasBadgeTooltip = hasBadge && Boolean(badgeTooltip) && !isOverflowed;
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const tooltipOpen = hasBadgeTooltip && isTooltipOpen;
+  const { refs, elements, floatingStyles, context: context2 } = useOverlayFloating({
+    open: tooltipOpen,
+    onOpenChange: setIsTooltipOpen,
+    placement: "bottom",
+    middleware: createOverlayMiddleware({
+      offset: 8,
+      extras: [arrow({ element: arrowRef })]
+    })
+  });
+  const hover = useHover(context2, { enabled: hasBadgeTooltip, move: false });
+  const focus = useFocus(context2, { enabled: hasBadgeTooltip });
+  const dismiss = useDismiss(context2, { enabled: hasBadgeTooltip });
+  const role = useRole(context2, { enabled: hasBadgeTooltip, role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    dismiss,
+    role
+  ]);
+  const mergedRef = useMergeRefs([setElement, refs.setReference, ref]);
+  const badgeElement = hasBadge ? /* @__PURE__ */ jsx(Box, { ref: refs.setPositionReference, className: classes.badge, children: /* @__PURE__ */ jsx(Badge, { count: badge2, variant: "subtle" }) }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ...{
+          as: "button",
+          type: "button"
+        },
+        ref: mergedRef,
+        role: "tab",
+        "aria-selected": isSelected,
+        "aria-controls": getPanelId(value),
+        "aria-hidden": isOverflowed || void 0,
+        disabled,
+        tabIndex: isSelected && !isOverflowed ? 0 : -1,
+        className: cx(tabClassName, className),
+        ...getReferenceProps({
+          ...otherProps,
+          onClick: (event) => {
+            onClick == null ? void 0 : onClick(event);
+            if (disabled || event.defaultPrevented) return;
+            selectTab(event, value, "clicked-on-tab");
+          },
+          onKeyDown: (event) => {
+            onKeyDown == null ? void 0 : onKeyDown(event);
+            if (!event.defaultPrevented) onTabKeyDown(event);
+          }
+        }),
+        id: getTabId(value),
+        children: [
+          children,
+          badgeElement
+        ]
+      }
+    ),
+    tooltipOpen ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: elements.domReference, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ...dsComponent("Tooltip"),
+        ref: refs.setFloating,
+        style: floatingStyles,
+        className: badgeTooltipClasses.tooltipContent,
+        ...getFloatingProps(),
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: badgeTooltipClasses.text, children: badgeTooltip }),
+          /* @__PURE__ */ jsx(
+            FloatingArrow,
+            {
+              ref: arrowRef,
+              context: context2,
+              fill: token.var("colors.bg.neutral.inverse")
+            }
+          )
+        ]
+      }
+    ) }) }) : null
+  ] });
+};
+setCompoundComponentType(Tab, tabsComponentTypeKey, TABS_COMPONENT_TYPES.tab);
+const TabPanel = (props) => {
+  const { value, children, ...rest } = props;
+  const { classes, getPanelId, getTabId, selectedValue, unmountInactive } = useTabsContext();
+  const isActive = selectedValue === value;
+  const [className, otherProps] = splitProps(rest);
+  if (unmountInactive && !isActive) {
+    return null;
+  }
+  const renderProps = { isActive };
+  const content = typeof children === "function" ? children(renderProps) : children;
+  return /* @__PURE__ */ jsx(TabPanelActiveProvider, { value: isActive, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "tabpanel",
+      "aria-labelledby": getTabId(value),
+      tabIndex: isActive ? 0 : -1,
+      display: isActive ? "block" : "none",
+      _hidden: { display: "none" },
+      className: cx(classes.panel, className),
+      ...otherProps,
+      id: getPanelId(value),
+      hidden: !isActive,
+      children: content
+    }
+  ) });
+};
+setCompoundComponentType(
+  TabPanel,
+  tabsComponentTypeKey,
+  TABS_COMPONENT_TYPES.panel
+);
+const getNodeText = (node) => {
+  if (node === null || node === void 0 || typeof node === "boolean") {
+    return "";
+  }
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map((child) => getNodeText(child)).join("");
+  }
+  if (isValidElement(node)) {
+    return getNodeText(node.props.children);
+  }
+  return "";
+};
+const useTabs = ({
+  children,
+  value,
+  defaultValue,
+  onChange,
+  listRef,
+  overflowRef
+}) => {
+  var _a;
+  const tabs2 = useMemo(() => {
+    const descriptors = [];
+    flattenTabsChildren(children).forEach((child) => {
+      if (!isValidElement(child) || getTabsComponentType(child) !== TABS_COMPONENT_TYPES.tab) {
+        return;
+      }
+      const props = child.props;
+      if (typeof props.value !== "string") return;
+      descriptors.push({
+        value: props.value,
+        // An explicit `label` overrides the flattened children, which in turn
+        // fall back to `value` when the children carry no text at all.
+        label: props.label || getNodeText(props.children) || props.value,
+        disabled: Boolean(props.disabled),
+        badge: props.badge,
+        badgeTooltip: props.badgeTooltip
+      });
+    });
+    return descriptors;
+  }, [children]);
+  const tabValues = useMemo(() => tabs2.map((tab) => tab.value), [tabs2]);
+  const firstValue = (_a = tabs2.find((tab) => !tab.disabled)) == null ? void 0 : _a.value;
+  const [storedValue, setStoredValue, isControlled] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? firstValue ?? ""
+  });
+  const requestedValueRef = useRef(storedValue);
+  const pendingRequestsRef = useRef([]);
+  const recordRequest = useCallback((nextValue) => {
+    requestedValueRef.current = nextValue;
+    pendingRequestsRef.current = [
+      ...pendingRequestsRef.current.filter((pending) => pending !== nextValue),
+      nextValue
+    ];
+  }, []);
+  useEffect(() => {
+    const pending = pendingRequestsRef.current;
+    const index2 = pending.indexOf(storedValue);
+    if (index2 === -1) {
+      pendingRequestsRef.current = [];
+      requestedValueRef.current = storedValue;
+      return;
+    }
+    pendingRequestsRef.current = pending.slice(index2 + 1);
+  }, [storedValue]);
+  const storedTab = tabs2.find((tab) => tab.value === storedValue);
+  const isStoredValueSelectable = Boolean(storedTab && !storedTab.disabled);
+  const selectedValue = isStoredValueSelectable ? storedValue : firstValue;
+  const fallbackNotificationRef = useRef(null);
+  useEffect(() => {
+    if (isStoredValueSelectable) {
+      fallbackNotificationRef.current = null;
+      return;
+    }
+    const notificationKey = JSON.stringify([storedValue, firstValue ?? null]);
+    if (fallbackNotificationRef.current === notificationKey) return;
+    fallbackNotificationRef.current = notificationKey;
+    if (!isControlled) {
+      setStoredValue(firstValue ?? "");
+    }
+    if (firstValue !== void 0) {
+      recordRequest(firstValue);
+      onChange == null ? void 0 : onChange(null, firstValue, "fallback-after-removal");
+    }
+  }, [
+    firstValue,
+    isControlled,
+    isStoredValueSelectable,
+    onChange,
+    recordRequest,
+    setStoredValue,
+    storedValue
+  ]);
+  const elementsRef = useRef(/* @__PURE__ */ new Map());
+  const registerTabElement = useCallback(
+    (tabValue, element) => {
+      if (element) {
+        elementsRef.current.set(tabValue, element);
+      } else {
+        elementsRef.current.delete(tabValue);
+      }
+    },
+    []
+  );
+  const getItemElement = useCallback(
+    (tabValue) => elementsRef.current.get(tabValue) ?? null,
+    []
+  );
+  const { ensureVisible, overflow, hasOverflow } = useOverflowItems({
+    items: tabValues,
+    containerRef: listRef,
+    getItemElement,
+    activeItem: selectedValue ?? null,
+    reserveRef: overflowRef
+  });
+  const selectTab = useCallback(
+    (event, nextValue, reason) => {
+      if (nextValue === storedValue && requestedValueRef.current === storedValue) {
+        return;
+      }
+      recordRequest(nextValue);
+      setStoredValue(nextValue);
+      onChange == null ? void 0 : onChange(event, nextValue, reason);
+    },
+    [onChange, recordRequest, setStoredValue, storedValue]
+  );
+  const focusTab = useCallback(
+    (tabValue, options) => {
+      ensureVisible(tabValue, () => {
+        const focus = () => {
+          var _a2;
+          return (_a2 = elementsRef.current.get(tabValue)) == null ? void 0 : _a2.focus();
+        };
+        if (options == null ? void 0 : options.afterMenuClose) {
+          queueMicrotask(focus);
+        } else {
+          focus();
+        }
+      });
+    },
+    [ensureVisible]
+  );
+  const onTabKeyDown = useCallback(
+    (event) => {
+      const navigable = tabs2.filter((tab) => !tab.disabled).map((tab) => tab.value);
+      if (navigable.length === 0) return;
+      let currentValue = selectedValue;
+      for (const [tabValue, element] of elementsRef.current) {
+        if (element === event.currentTarget) {
+          currentValue = tabValue;
+          break;
+        }
+      }
+      const currentIndex = currentValue === void 0 ? 0 : Math.max(0, navigable.indexOf(currentValue));
+      let nextIndex;
+      switch (event.key) {
+        case "ArrowRight":
+          nextIndex = (currentIndex + 1) % navigable.length;
+          break;
+        case "ArrowLeft":
+          nextIndex = (currentIndex - 1 + navigable.length) % navigable.length;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = navigable.length - 1;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const nextValue = navigable[nextIndex];
+      if (nextValue === void 0) return;
+      selectTab(event, nextValue, "clicked-on-tab");
+      focusTab(nextValue);
+    },
+    [focusTab, selectTab, selectedValue, tabs2]
+  );
+  const overflowTabs = useMemo(
+    () => overflow.map((item) => tabs2.find((tab) => tab.value === item)).filter((tab) => Boolean(tab)),
+    [overflow, tabs2]
+  );
+  return {
+    hasOverflow,
+    focusTab,
+    onTabKeyDown,
+    overflowTabs,
+    overflowValues: overflow,
+    registerTabElement,
+    selectTab,
+    selectedValue,
+    tabs: tabs2
+  };
+};
+const TabsOverflowMenu = ({
+  className,
+  focusTab,
+  tabs: tabs2,
+  selectTab,
+  selectedValue
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: "bottom-end",
+      className,
+      trigger: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "ghost",
+          size: "md",
+          iconName: isOpen ? "caret-up" : "caret-down",
+          altText: "More tabs",
+          "aria-haspopup": "menu"
+        }
+      ),
+      children: tabs2.map((tab) => {
+        const hasBadge = typeof tab.badge === "number" && tab.badge !== 0;
+        return /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            label: hasBadge ? `${tab.label} (${String(tab.badge)})` : tab.label,
+            description: hasBadge ? tab.badgeTooltip : void 0,
+            disabled: tab.disabled,
+            selected: tab.value === selectedValue,
+            role: "menuitemradio",
+            "aria-checked": tab.value === selectedValue,
+            onClick: (event) => {
+              selectTab(event, tab.value, "selected-from-overflow");
+              setIsOpen(false);
+              focusTab(tab.value, { afterMenuClose: true });
+            }
+          },
+          tab.value
+        );
+      })
+    }
+  );
+};
+const Tabs = (props) => {
+  const {
+    children,
+    value,
+    defaultValue,
+    onChange,
+    unmountInactive = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const listRef = useRef(null);
+  const overflowRef = useRef(null);
+  const baseId = useId$1();
+  const {
+    focusTab,
+    hasOverflow,
+    onTabKeyDown,
+    overflowTabs,
+    overflowValues,
+    registerTabElement,
+    selectTab,
+    selectedValue
+  } = useTabs({
+    children,
+    value,
+    defaultValue,
+    onChange,
+    listRef,
+    overflowRef
+  });
+  const classes = useMemo(
+    () => tabs({ hasOverflow }),
+    [hasOverflow]
+  );
+  const [tabChildren, restChildren] = useMemo(() => {
+    const strip = [];
+    const below = [];
+    flattenTabsChildren(children).forEach((child) => {
+      if (getTabsComponentType(child) === TABS_COMPONENT_TYPES.tab) {
+        strip.push(child);
+      } else {
+        below.push(child);
+      }
+    });
+    return [strip, below];
+  }, [children]);
+  const contextValue = useMemo(
+    () => ({
+      classes,
+      // Values are free text; encoding keeps spaces out of the IDs that
+      // `aria-controls` and `aria-labelledby` parse as token lists.
+      getPanelId: (tabValue) => `${baseId}-panel-${encodeURIComponent(tabValue)}`,
+      getTabId: (tabValue) => `${baseId}-tab-${encodeURIComponent(tabValue)}`,
+      onTabKeyDown,
+      overflowValues,
+      registerTabElement,
+      selectTab,
+      selectedValue,
+      unmountInactive
+    }),
+    [
+      baseId,
+      classes,
+      onTabKeyDown,
+      overflowValues,
+      registerTabElement,
+      selectTab,
+      selectedValue,
+      unmountInactive
+    ]
+  );
+  return /* @__PURE__ */ jsx(TabsProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...dsComponent("Tabs"),
+      className: cx(classes.root, className),
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: classes.strip, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: listRef,
+              role: "tablist",
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-orientation": "horizontal",
+              className: classes.list,
+              children: tabChildren
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: overflowRef,
+              className: classes.overflow,
+              "aria-hidden": !hasOverflow || void 0,
+              children: hasOverflow ? /* @__PURE__ */ jsx(
+                TabsOverflowMenu,
+                {
+                  className: classes.menu,
+                  focusTab,
+                  tabs: overflowTabs,
+                  selectTab,
+                  selectedValue
+                }
+              ) : /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "ghost",
+                  size: "md",
+                  iconName: "caret-down",
+                  altText: "More tabs",
+                  disabled: true,
+                  tabIndex: -1
+                }
+              )
+            }
+          )
+        ] }),
+        restChildren
+      ]
+    }
+  ) });
+};
 const AutocompleteListbox = (props) => {
   const { labels } = useLocale();
   const {
@@ -25186,6 +26068,9 @@ export {
   Skeleton,
   Spinner,
   SubMenu,
+  Tab,
+  TabPanel,
+  Tabs,
   Tag,
   Text,
   TextInput,
@@ -25223,6 +26108,9 @@ export {
   useMenuListContext,
   useMenuRootContext,
   useModalWrapperContext,
+  useOverflowItems,
+  useTabPanelActive,
+  useTabsContext,
   useTheme,
   useToast
 };