cetec-design-system 2.3.7 → 3.0.0

package/dist/index.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, useContext, useMemo, forwardRef, createElement, useState, useSyncExternalStore, useLayoutEffect, useRef, useCallback, useEffect, useId as useId$1, isValidElement, Children, cloneElement, useReducer } from "react";
-import { b as breakpoints, c as containerSizes } from "./cetec-preset-CZJA5UR0.js";
-import { a } from "./cetec-preset-CZJA5UR0.js";
+import { createContext, useContext, useMemo, forwardRef, createElement, useState, useLayoutEffect, useRef, useSyncExternalStore, useCallback, useEffect, useId as useId$1, isValidElement, Children, cloneElement, useReducer } from "react";
 import * as ReactDOM from "react-dom";
+import { b as breakpoints, c as containerSizes } from "./cetec-preset-D23KFUx3.js";
+import { a } from "./cetec-preset-D23KFUx3.js";
+import { useForm } from "@tanstack/react-form";
+import { useForm as useForm2 } from "@tanstack/react-form";
 function isObject(value) {
   return typeof value === "object" && value != null && !Array.isArray(value);
 }
@@ -240,7 +242,7 @@ function normalizeHTMLProps(props) {
   return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
 }
 normalizeHTMLProps.keys = htmlProps;
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_deleted,_collapsed,_utility,_error,_success,_paused,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/2xs,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base";
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_deleted,_collapsed,_new,_utility,_error,_success,_paused,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/2xs,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base";
 const conditions = new Set(conditionsStr.split(","));
 const conditionRegex = /^@|&|&$/;
 function isCondition(value) {
@@ -737,6 +739,9 @@ const labelVariantMap = {
   "underline": [
     "true"
   ],
+  "dashedUnderline": [
+    "true"
+  ],
   "truncate": [
     "true"
   ],
@@ -803,6 +808,9 @@ const linkVariantMap = {
   "underline": [
     "true"
   ],
+  "dashedUnderline": [
+    "true"
+  ],
   "truncate": [
     "true"
   ],
@@ -830,9 +838,6 @@ const linkVariantMap = {
     "medium",
     "bold",
     "black"
-  ],
-  "_disabled": [
-    "true"
   ]
 };
 const linkVariantKeys = Object.keys(linkVariantMap);
@@ -1553,6 +1558,9 @@ const textVariantMap = {
   "underline": [
     "true"
   ],
+  "dashedUnderline": [
+    "true"
+  ],
   "truncate": [
     "true"
   ],
@@ -1681,7 +1689,8 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   getVariantProps: getVariantProps$o
 });
 const autocompleteDefaultVariants = {
-  "size": "md"
+  "size": "md",
+  "layer": "elevated"
 };
 const autocompleteCompoundVariants = [];
 const autocompleteSlotNames = [
@@ -1731,6 +1740,7 @@ const autocompleteFn = memo((props = {}) => {
   return Object.fromEntries(autocompleteSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const autocompleteVariantKeys = [
+  "layer",
   "size"
 ];
 const getVariantProps$n = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
@@ -1741,6 +1751,10 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   classNameMap: {},
   variantKeys: autocompleteVariantKeys,
   variantMap: {
+    "layer": [
+      "elevated",
+      "modalFloating"
+    ],
     "size": [
       "sm",
       "md",
@@ -2487,7 +2501,8 @@ const listItem = /* @__PURE__ */ Object.assign(listItemFn, {
   getVariantProps: getVariantProps$9
 });
 const menuDefaultVariants = {
-  "density": "compact"
+  "density": "compact",
+  "layer": "elevated"
 };
 const menuCompoundVariants = [];
 const menuSlotNames = [
@@ -2525,6 +2540,7 @@ const menuFn = memo((props = {}) => {
   return Object.fromEntries(menuSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const menuVariantKeys = [
+  "layer",
   "density",
   "panel"
 ];
@@ -2536,6 +2552,10 @@ const menu = /* @__PURE__ */ Object.assign(menuFn, {
   classNameMap: {},
   variantKeys: menuVariantKeys,
   variantMap: {
+    "layer": [
+      "elevated",
+      "modalFloating"
+    ],
     "density": [
       "compact",
       "comfortable",
@@ -3005,6 +3025,7 @@ const tooltip = /* @__PURE__ */ Object.assign(tooltipFn, {
 });
 const DS_CHAIN_SEPARATOR = ">";
 const DS_CHAIN_MAX_DEPTH = 5;
+const DS_OBJECT_ATTRIBUTE = "data-track-object";
 const EMPTY_CHAIN = Object.freeze([]);
 const DsChainContext = createContext(EMPTY_CHAIN);
 const useDsChain = () => useContext(DsChainContext);
@@ -3014,6 +3035,10 @@ const extendDsChain = (chain, testId) => {
   return next.length > DS_CHAIN_MAX_DEPTH ? next.slice(-DS_CHAIN_MAX_DEPTH) : next;
 };
 const dsChainValue = (chain) => chain.length > 0 ? chain.join(DS_CHAIN_SEPARATOR) : void 0;
+const dsObjectValue = (element) => {
+  var _a;
+  return ((_a = element == null ? void 0 : element.closest(`[${DS_OBJECT_ATTRIBUTE}]`)) == null ? void 0 : _a.getAttribute(DS_OBJECT_ATTRIBUTE)) || void 0;
+};
 const DsChainScope = ({ testId, children }) => {
   const parentChain = useDsChain();
   const chain = useMemo(
@@ -3022,7 +3047,7 @@ const DsChainScope = ({ testId, children }) => {
   );
   return /* @__PURE__ */ jsx(DsChainContext.Provider, { value: chain, children });
 };
-var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,fontVariant,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,fontVariantsProperty,filtersProperty,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_deleted,_collapsed,_utility,_error,_success,_paused,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/2xs,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle,layerStyle";
+var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,fontVariant,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,fontVariantsProperty,filtersProperty,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_deleted,_collapsed,_new,_utility,_error,_success,_paused,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/2xs,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle,layerStyle";
 var userGenerated = userGeneratedStr.split(",");
 var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical";
 var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);
@@ -3328,6 +3353,7 @@ const IconNames = {
   "checkbox-focus": "checkbox-focus",
   "checkbox-indeterminate": "checkbox-indeterminate",
   checkbox: "checkbox",
+  cheese: "cheese",
   "circle-change": "circle-change",
   "circle-check": "circle-check",
   circle: "circle",
@@ -3338,6 +3364,7 @@ const IconNames = {
   clock: "clock",
   "cloud-synced": "cloud-synced",
   code: "code",
+  "collapse-vertical": "collapse-vertical",
   color: "color",
   compass: "compass",
   computer: "computer",
@@ -3367,6 +3394,7 @@ const IconNames = {
   eraser: "eraser",
   error: "error",
   "event-list": "event-list",
+  "expand-vertical": "expand-vertical",
   export: "export",
   extension: "extension",
   "eye-slash": "eye-slash",
@@ -3434,6 +3462,7 @@ const IconNames = {
   "list-numbers": "list-numbers",
   "lock-open": "lock-open",
   lock: "lock",
+  magnet: "magnet",
   "map-pin": "map-pin",
   map: "map",
   "mark-unread": "mark-unread",
@@ -3543,6 +3572,8 @@ const IconNames = {
   textbox: "textbox",
   "time-add": "time-add",
   timer: "timer",
+  "to-date-backward": "to-date-backward",
+  "to-date-forward": "to-date-forward",
   toolbox: "toolbox",
   tools: "tools",
   trash: "trash",
@@ -3762,6 +3793,7 @@ const Badge = (props) => {
     return /* @__PURE__ */ jsx(
       Box,
       {
+        ...dsComponent("Badge"),
         as: "span",
         ref,
         className: cx(classes.root, className),
@@ -3825,761 +3857,267 @@ const Link = (props) => {
     }
   );
 };
-const Text = (props) => {
+function hasWindow() {
+  return typeof window !== "undefined";
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || "").toLowerCase();
+  }
+  return "#document";
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === "undefined") {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+const invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
+function isOverflowElement(element) {
   const {
-    as = "span",
-    family,
-    italic,
-    bold,
-    underline,
-    size: size2,
-    children,
-    textStyle,
-    weight,
-    role,
-    // role if use in form input text for refrence, also semantic role overrides if non-semantic tag.
-    tabIndex,
-    // tabIndex main use for in list or loop select text using key press focus
-    truncate,
-    allCaps,
-    ...rest
-  } = props;
-  const [className, otherProps] = splitProps(rest);
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ...dsComponent("Text"),
-      as,
-      textStyle,
-      role,
-      tabIndex,
-      className: cx(
-        text({
-          family,
-          bold,
-          underline,
-          italic,
-          size: size2,
-          weight,
-          truncate,
-          allCaps
-        }),
-        className
-      ),
-      ...otherProps,
-      children
-    }
-  );
-};
-const Breadcrumbs = (props) => {
-  const { items, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  const classes = breadcrumbs();
-  return /* @__PURE__ */ jsx(
-    Text,
-    {
-      ...dsComponent("Breadcrumbs"),
-      as: "ul",
-      className: cx(classes.wrapper, className),
-      ...otherProps,
-      children: items == null ? void 0 : items.map((item, index2) => /* @__PURE__ */ jsxs(Text, { as: "li", children: [
-        item.href ? /* @__PURE__ */ jsx(Link, { href: item.href, className: classes.linkSegment, children: item.label }) : /* @__PURE__ */ jsx(Text, { className: classes.currentSegment, children: item.label }),
-        index2 < (items == null ? void 0 : items.length) - 1 && /* @__PURE__ */ jsx(Text, { className: classes.slash, children: "/" })
-      ] }, item.id))
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+}
+const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
+function isTableElement(element) {
+  return tableElements.has(getNodeName(element));
+}
+const topLayerSelectors = [":popover-open", ":modal"];
+function isTopLayer(element) {
+  return topLayerSelectors.some((selector) => {
+    try {
+      return element.matches(selector);
+    } catch (_e) {
+      return false;
     }
-  );
-};
-function useMediaQuery(breakpoint, direction = "min") {
-  const query = useMemo(() => {
-    const breakpointValue = breakpoints[breakpoint];
-    const breakpointNum = Number.parseInt(breakpointValue, 10);
-    return direction === "min" ? `(min-width: ${breakpointValue})` : `(max-width: ${breakpointNum - 1}px)`;
-  }, [breakpoint, direction]);
-  const mediaQuery = useMemo(() => {
-    if (typeof window === "undefined") {
-      return {
-        matches: false,
-        addEventListener: () => {
-        },
-        removeEventListener: () => {
-        }
-      };
+  });
+}
+const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
+const willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
+const containValues = ["paint", "layout", "strict", "content"];
+function isContainingBlock(elementOrCss) {
+  const webkit = isWebKit();
+  const css2 = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+  return transformProperties.some((value) => css2[value] ? css2[value] !== "none" : false) || (css2.containerType ? css2.containerType !== "normal" : false) || !webkit && (css2.backdropFilter ? css2.backdropFilter !== "none" : false) || !webkit && (css2.filter ? css2.filter !== "none" : false) || willChangeValues.some((value) => (css2.willChange || "").includes(value)) || containValues.some((value) => (css2.contain || "").includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
     }
-    return window.matchMedia(query);
-  }, [query]);
-  return useSyncExternalStore(
-    (callback) => {
-      mediaQuery.addEventListener("change", callback);
-      return () => {
-        mediaQuery.removeEventListener("change", callback);
-      };
-    },
-    () => mediaQuery.matches,
-    () => false
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === "undefined" || !CSS.supports) return false;
+  return CSS.supports("-webkit-backdrop-filter", "none");
+}
+const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
+function isLastTraversableNode(node) {
+  return lastTraversableNodeNames.has(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === "html") {
+    return node;
+  }
+  const result = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    node.assignedSlot || // DOM Element detected.
+    node.parentNode || // ShadowRoot detected.
+    isShadowRoot(node) && node.host || // Fallback.
+    getDocumentElement(node)
   );
+  return isShadowRoot(result) ? result.host : result;
 }
-function useContainerQuery(containerRef, size2, direction = "min") {
-  const query = useMemo(() => {
-    const sizeValue = containerSizes[size2];
-    const sizeNum = Number.parseFloat(sizeValue);
-    return direction === "min" ? `(min-width: ${sizeValue})` : `(max-width: ${sizeNum - 0.0625}rem)`;
-  }, [size2, direction]);
-  return useSyncExternalStore(
-    (callback) => {
-      if (typeof window === "undefined" || !containerRef.current) {
-        return () => {
-        };
-      }
-      const element = containerRef.current;
-      const sizeValue = containerSizes[size2];
-      const sizeNum = Number.parseFloat(sizeValue);
-      const threshold = direction === "min" ? sizeNum : sizeNum - 0.0625;
-      const checkSize = () => {
-        if (!element) return false;
-        const width = element.offsetWidth;
-        const widthInRem = width / Number.parseFloat(
-          getComputedStyle(document.documentElement).fontSize
-        );
-        return direction === "min" ? widthInRem >= threshold : widthInRem < threshold;
-      };
-      if ("queryContainer" in element) {
-        try {
-          const containerQuery = element.queryContainer(query);
-          containerQuery.addEventListener("change", callback);
-          return () => {
-            containerQuery.removeEventListener("change", callback);
-          };
-        } catch {
-        }
-      }
-      let currentMatches = checkSize();
-      const callbacks = /* @__PURE__ */ new Set();
-      let observer = null;
-      if (typeof ResizeObserver !== "undefined") {
-        observer = new ResizeObserver(() => {
-          const newMatches = checkSize();
-          if (newMatches !== currentMatches) {
-            currentMatches = newMatches;
-            callbacks.forEach((cb) => cb());
-          }
-        });
-        observer.observe(element);
-      }
-      callbacks.add(callback);
-      return () => {
-        callbacks.delete(callback);
-        if (callbacks.size === 0 && observer) {
-          observer.disconnect();
-        }
-      };
-    },
-    () => {
-      if (typeof window === "undefined" || !containerRef.current) {
-        return false;
-      }
-      const element = containerRef.current;
-      const sizeValue = containerSizes[size2];
-      const sizeNum = Number.parseFloat(sizeValue);
-      const threshold = direction === "min" ? sizeNum : sizeNum - 0.0625;
-      if ("queryContainer" in element) {
-        try {
-          const containerQuery = element.queryContainer(query);
-          return containerQuery.matches;
-        } catch {
-        }
-      }
-      const width = element.offsetWidth;
-      const widthInRem = width / Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
-      return direction === "min" ? widthInRem >= threshold : widthInRem < threshold;
-    },
-    () => false
-  );
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
 }
-const Tag = (props) => {
-  const { variant, hue, iconBefore, iconAfter, children, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...dsComponent("Tag"),
-      className: cx(
-        tag({
-          variant,
-          hue,
-          iconBefore: Boolean(iconBefore),
-          iconAfter: Boolean(iconAfter)
-        }),
-        className
-      ),
-      ...otherProps,
-      children: [
-        iconBefore && /* @__PURE__ */ jsx(Icon, { name: iconBefore, fill: "current", color: "inherit", size: "20" }),
-        children,
-        iconAfter && /* @__PURE__ */ jsx(Icon, { name: iconAfter, fill: "current", color: "inherit", size: "20" })
-      ]
-    }
-  );
-};
-const BreakpointIndicator = (props) => {
-  const isXs = useMediaQuery("xs");
-  const isSm = useMediaQuery("sm");
-  const isMd = useMediaQuery("md");
-  const isLg = useMediaQuery("lg");
-  const isXl = useMediaQuery("xl");
-  const is2Xl = useMediaQuery("2xl");
-  const { variant, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  const dsAttributes = dsComponent("BreakpointIndicator");
-  let breakpoint = /* @__PURE__ */ jsx(
-    Tag,
-    {
-      ...dsAttributes,
-      className: cx(breakpointIndicator({ variant }), className),
-      hue: "red",
-      variant: "bold",
-      ...otherProps,
-      children: "@media/base"
-    }
-  );
-  if (is2Xl) {
-    breakpoint = /* @__PURE__ */ jsx(
-      Tag,
-      {
-        ...dsAttributes,
-        className: cx(breakpointIndicator({ variant }), className),
-        hue: "blue",
-        variant: "bold",
-        ...otherProps,
-        children: "@media/2xl"
-      }
-    );
-  } else if (isXl) {
-    breakpoint = /* @__PURE__ */ jsx(
-      Tag,
-      {
-        ...dsAttributes,
-        className: cx(breakpointIndicator({ variant }), className),
-        hue: "magenta",
-        variant: "bold",
-        ...otherProps,
-        children: "@media/xl"
-      }
-    );
-  } else if (isLg) {
-    breakpoint = /* @__PURE__ */ jsx(
-      Tag,
-      {
-        ...dsAttributes,
-        className: cx(breakpointIndicator({ variant }), className),
-        hue: "green",
-        variant: "bold",
-        ...otherProps,
-        children: "@media/lg"
-      }
-    );
-  } else if (isMd) {
-    breakpoint = /* @__PURE__ */ jsx(
-      Tag,
-      {
-        ...dsAttributes,
-        className: cx(breakpointIndicator({ variant }), className),
-        hue: "indigo",
-        variant: "bold",
-        ...otherProps,
-        children: "@media/md"
-      }
-    );
-  } else if (isSm) {
-    breakpoint = /* @__PURE__ */ jsx(
-      Tag,
-      {
-        ...dsAttributes,
-        className: cx(breakpointIndicator({ variant }), className),
-        hue: "yellow",
-        variant: "bold",
-        ...otherProps,
-        children: "@media/sm"
-      }
-    );
-  } else if (isXs) {
-    breakpoint = /* @__PURE__ */ jsx(
-      Tag,
-      {
-        ...dsAttributes,
-        className: cx(breakpointIndicator({ variant }), className),
-        hue: "orange",
-        variant: "bold",
-        ...otherProps,
-        children: "@media/xs"
-      }
-    );
+function getOverflowAncestors(node, list2, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list2 === void 0) {
+    list2 = [];
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: breakpoint });
-};
-const Spinner = (props) => {
-  const slotContext = useSlotContext();
-  const { size: sizeProp, inverse, centered, ...rest } = props;
-  const size2 = sizeProp ?? (slotContext == null ? void 0 : slotContext.size);
-  const [className, otherProps] = splitProps(rest);
-  const classes = spinner({
-    size: size2,
-    inverse,
-    centered
-  });
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ...dsComponent("Spinner"),
-      className: cx(classes.container, className),
-      ...otherProps,
-      children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          name: "spinner",
-          className: classes.spinnerSvg,
-          "data-inverse": inverse ? "true" : void 0
-        }
-      )
-    }
-  );
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list2.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list2.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = (v) => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
 };
-const FieldContext = createContext(null);
-const useFieldContext = () => {
-  return useContext(FieldContext);
+const oppositeAlignmentMap = {
+  start: "end",
+  end: "start"
 };
-const Button = (props) => {
-  const fieldContext = useFieldContext();
-  const slotContext = useSlotContext();
-  const {
-    variant,
-    size: sizeProp,
-    href,
-    before,
-    after,
-    iconBefore,
-    iconAfter,
-    children,
-    loading,
-    error: errorProp,
-    invalid: invalidProp,
-    disabled: disabledProp,
-    type = "button",
-    fontSize,
-    fontVariant,
-    ...rest
-  } = props;
-  const size2 = sizeProp ?? (slotContext == null ? void 0 : slotContext.size) ?? (fieldContext == null ? void 0 : fieldContext.size);
-  const error2 = errorProp ?? (slotContext == null ? void 0 : slotContext.error) ?? (fieldContext == null ? void 0 : fieldContext.error);
-  const invalid = invalidProp ?? (slotContext == null ? void 0 : slotContext.invalid) ?? (fieldContext == null ? void 0 : fieldContext.invalid);
-  const disabled = disabledProp ?? (slotContext == null ? void 0 : slotContext.disabled) ?? (fieldContext == null ? void 0 : fieldContext.disabled);
-  const resolvedBefore = before ?? (iconBefore ? /* @__PURE__ */ jsx(Icon, { name: iconBefore, "aria-hidden": true }) : void 0);
-  const resolvedAfter = after ?? (iconAfter ? /* @__PURE__ */ jsx(Icon, { name: iconAfter, "aria-hidden": true }) : void 0);
-  const classes = button({
-    variant,
-    size: size2,
-    before: Boolean(resolvedBefore),
-    after: Boolean(resolvedAfter)
-  });
-  const [className, otherProps] = splitProps(rest);
-  const slotContexts = useMemo(
-    () => ({
-      before: {
-        owner: "Button",
-        placement: "before",
-        size: size2,
-        disabled,
-        error: error2,
-        invalid
-      },
-      after: {
-        owner: "Button",
-        placement: "after",
-        size: size2,
-        disabled,
-        error: error2,
-        invalid
-      }
-    }),
-    [disabled, error2, invalid, size2]
-  );
-  const renderSlot = (slot, placement) => {
-    if (!slot) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(SlotContext.Provider, { value: slotContexts[placement], children: /* @__PURE__ */ jsx(Box, { className: classes.slot, children: slot }) });
-  };
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...dsComponent("Button"),
-      ...href ? {
-        as: "a",
-        href,
-        ...disabled && {
-          onClick: (e) => e.preventDefault()
-        }
-      } : {
-        as: "button",
-        type,
-        disabled
-      },
-      className: `${cx(classes.container, className)} group`,
-      ...loading && {
-        "aria-busy": true,
-        "aria-live": "polite"
-      },
-      "aria-disabled": disabled,
-      "aria-invalid": invalid || void 0,
-      "data-error": error2 || void 0,
-      "data-invalid": invalid || void 0,
-      ...otherProps,
-      children: [
-        /* @__PURE__ */ jsxs(HStack, { gap: "0", opacity: loading ? 0 : 1, children: [
-          renderSlot(resolvedBefore, "before"),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              className: classes.mainContent,
-              fontSize,
-              fontVariant,
-              children
-            }
-          ),
-          renderSlot(resolvedAfter, "after")
-        ] }),
-        loading && /* @__PURE__ */ jsx(
-          Spinner,
-          {
-            size: "sm",
-            inverse: variant === "primary" || variant === "danger" || variant === "selectedBold",
-            centered: true
-          }
-        )
-      ]
-    }
-  );
-};
-function daysInMonth$1(year, month) {
-  return new Date(year, month, 0).getDate();
-}
-function firstWeekdayOfMonth(year, month) {
-  return new Date(year, month - 1, 1).getDay();
-}
-function shiftMonth(year, month, delta) {
-  const zeroBased = month - 1 + delta;
-  const rolledYear = year + Math.floor(zeroBased / 12);
-  const rolledMonth = (zeroBased % 12 + 12) % 12;
-  return { year: rolledYear, month: rolledMonth + 1 };
-}
-function compareDates(a2, b) {
-  if (a2.year !== b.year) return a2.year - b.year;
-  if (a2.month !== b.month) return a2.month - b.month;
-  return a2.day - b.day;
-}
-function isSameDate(a2, b) {
-  return compareDates(a2, b) === 0;
+function clamp(start, value, end) {
+  return max(start, min(value, end));
 }
-function isDateBefore(date, bound) {
-  return bound !== void 0 && compareDates(date, bound) < 0;
+function evaluate(value, param) {
+  return typeof value === "function" ? value(param) : value;
 }
-function isDateAfter(date, bound) {
-  return bound !== void 0 && compareDates(date, bound) > 0;
+function getSide(placement) {
+  return placement.split("-")[0];
 }
-function isDateInRange(date, min2, max2) {
-  return !isDateBefore(date, min2) && !isDateAfter(date, max2);
+function getAlignment(placement) {
+  return placement.split("-")[1];
 }
-function getTodayDate() {
-  const now = /* @__PURE__ */ new Date();
-  return {
-    year: now.getFullYear(),
-    month: now.getMonth() + 1,
-    day: now.getDate()
-  };
+function getOppositeAxis(axis) {
+  return axis === "x" ? "y" : "x";
 }
-function to12Hour$1(hour24) {
-  if (hour24 === 0) return { hour12: 12, meridiem: "AM" };
-  if (hour24 < 12) return { hour12: hour24, meridiem: "AM" };
-  if (hour24 === 12) return { hour12: 12, meridiem: "PM" };
-  return { hour12: hour24 - 12, meridiem: "PM" };
+function getAxisLength(axis) {
+  return axis === "y" ? "height" : "width";
 }
-function to24Hour$1(hour12, meridiem) {
-  if (meridiem === "AM") return hour12 === 12 ? 0 : hour12;
-  return hour12 === 12 ? 12 : hour12 + 12;
+const yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
+function getSideAxis(placement) {
+  return yAxisSides.has(getSide(placement)) ? "y" : "x";
 }
-function normalizeMinuteStep(minuteStep) {
-  const step = Math.floor(minuteStep);
-  if (!Number.isFinite(step) || step < 1) return 1;
-  return Math.min(step, 60);
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
 }
-function getMinuteValues(minuteStep) {
-  const step = normalizeMinuteStep(minuteStep);
-  const values = [];
-  for (let minute = 0; minute < 60; minute += step) {
-    values.push(minute);
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
   }
-  return values;
-}
-function hasWindow() {
-  return typeof window !== "undefined";
-}
-function getNodeName(node) {
-  if (isNode(node)) {
-    return (node.nodeName || "").toLowerCase();
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
   }
-  return "#document";
-}
-function getWindow(node) {
-  var _node$ownerDocument;
-  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
 }
-function getDocumentElement(node) {
-  var _ref;
-  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
-function isNode(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof Node || value instanceof getWindow(value).Node;
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
 }
-function isElement(value) {
-  if (!hasWindow()) {
-    return false;
+const lrPlacement = ["left", "right"];
+const rlPlacement = ["right", "left"];
+const tbPlacement = ["top", "bottom"];
+const btPlacement = ["bottom", "top"];
+function getSideList(side, isStart, rtl) {
+  switch (side) {
+    case "top":
+    case "bottom":
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
+    case "left":
+    case "right":
+      return isStart ? tbPlacement : btPlacement;
+    default:
+      return [];
   }
-  return value instanceof Element || value instanceof getWindow(value).Element;
 }
-function isHTMLElement(value) {
-  if (!hasWindow()) {
-    return false;
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list2 = getSideList(getSide(placement), direction === "start", rtl);
+  if (alignment) {
+    list2 = list2.map((side) => side + "-" + alignment);
+    if (flipAlignment) {
+      list2 = list2.concat(list2.map(getOppositeAlignmentPlacement));
+    }
   }
-  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+  return list2;
 }
-function isShadowRoot(value) {
-  if (!hasWindow() || typeof ShadowRoot === "undefined") {
-    return false;
-  }
-  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
 }
-const invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
-function isOverflowElement(element) {
-  const {
-    overflow,
-    overflowX,
-    overflowY,
-    display
-  } = getComputedStyle$1(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
 }
-const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
-function isTableElement(element) {
-  return tableElements.has(getNodeName(element));
-}
-const topLayerSelectors = [":popover-open", ":modal"];
-function isTopLayer(element) {
-  return topLayerSelectors.some((selector) => {
-    try {
-      return element.matches(selector);
-    } catch (_e) {
-      return false;
-    }
-  });
-}
-const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
-const willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
-const containValues = ["paint", "layout", "strict", "content"];
-function isContainingBlock(elementOrCss) {
-  const webkit = isWebKit();
-  const css2 = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
-  return transformProperties.some((value) => css2[value] ? css2[value] !== "none" : false) || (css2.containerType ? css2.containerType !== "normal" : false) || !webkit && (css2.backdropFilter ? css2.backdropFilter !== "none" : false) || !webkit && (css2.filter ? css2.filter !== "none" : false) || willChangeValues.some((value) => (css2.willChange || "").includes(value)) || containValues.some((value) => (css2.contain || "").includes(value));
-}
-function getContainingBlock(element) {
-  let currentNode = getParentNode(element);
-  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    if (isContainingBlock(currentNode)) {
-      return currentNode;
-    } else if (isTopLayer(currentNode)) {
-      return null;
-    }
-    currentNode = getParentNode(currentNode);
-  }
-  return null;
-}
-function isWebKit() {
-  if (typeof CSS === "undefined" || !CSS.supports) return false;
-  return CSS.supports("-webkit-backdrop-filter", "none");
-}
-const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
-function isLastTraversableNode(node) {
-  return lastTraversableNodeNames.has(getNodeName(node));
-}
-function getComputedStyle$1(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-function getNodeScroll(element) {
-  if (isElement(element)) {
-    return {
-      scrollLeft: element.scrollLeft,
-      scrollTop: element.scrollTop
-    };
-  }
-  return {
-    scrollLeft: element.scrollX,
-    scrollTop: element.scrollY
-  };
-}
-function getParentNode(node) {
-  if (getNodeName(node) === "html") {
-    return node;
-  }
-  const result = (
-    // Step into the shadow DOM of the parent of a slotted node.
-    node.assignedSlot || // DOM Element detected.
-    node.parentNode || // ShadowRoot detected.
-    isShadowRoot(node) && node.host || // Fallback.
-    getDocumentElement(node)
-  );
-  return isShadowRoot(result) ? result.host : result;
-}
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
-  }
-  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
-    return parentNode;
-  }
-  return getNearestOverflowAncestor(parentNode);
-}
-function getOverflowAncestors(node, list2, traverseIframes) {
-  var _node$ownerDocument2;
-  if (list2 === void 0) {
-    list2 = [];
-  }
-  if (traverseIframes === void 0) {
-    traverseIframes = true;
-  }
-  const scrollableAncestor = getNearestOverflowAncestor(node);
-  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
-  const win = getWindow(scrollableAncestor);
-  if (isBody) {
-    const frameElement = getFrameElement(win);
-    return list2.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
-  }
-  return list2.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
-}
-function getFrameElement(win) {
-  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
-}
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-const floor = Math.floor;
-const createCoords = (v) => ({
-  x: v,
-  y: v
-});
-const oppositeSideMap = {
-  left: "right",
-  right: "left",
-  bottom: "top",
-  top: "bottom"
-};
-const oppositeAlignmentMap = {
-  start: "end",
-  end: "start"
-};
-function clamp(start, value, end) {
-  return max(start, min(value, end));
-}
-function evaluate(value, param) {
-  return typeof value === "function" ? value(param) : value;
-}
-function getSide(placement) {
-  return placement.split("-")[0];
-}
-function getAlignment(placement) {
-  return placement.split("-")[1];
-}
-function getOppositeAxis(axis) {
-  return axis === "x" ? "y" : "x";
-}
-function getAxisLength(axis) {
-  return axis === "y" ? "height" : "width";
-}
-const yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
-function getSideAxis(placement) {
-  return yAxisSides.has(getSide(placement)) ? "y" : "x";
-}
-function getAlignmentAxis(placement) {
-  return getOppositeAxis(getSideAxis(placement));
-}
-function getAlignmentSides(placement, rects, rtl) {
-  if (rtl === void 0) {
-    rtl = false;
-  }
-  const alignment = getAlignment(placement);
-  const alignmentAxis = getAlignmentAxis(placement);
-  const length = getAxisLength(alignmentAxis);
-  let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
-  if (rects.reference[length] > rects.floating[length]) {
-    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
-  }
-  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
-}
-function getExpandedPlacements(placement) {
-  const oppositePlacement = getOppositePlacement(placement);
-  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
-}
-function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
-}
-const lrPlacement = ["left", "right"];
-const rlPlacement = ["right", "left"];
-const tbPlacement = ["top", "bottom"];
-const btPlacement = ["bottom", "top"];
-function getSideList(side, isStart, rtl) {
-  switch (side) {
-    case "top":
-    case "bottom":
-      if (rtl) return isStart ? rlPlacement : lrPlacement;
-      return isStart ? lrPlacement : rlPlacement;
-    case "left":
-    case "right":
-      return isStart ? tbPlacement : btPlacement;
-    default:
-      return [];
-  }
-}
-function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
-  const alignment = getAlignment(placement);
-  let list2 = getSideList(getSide(placement), direction === "start", rtl);
-  if (alignment) {
-    list2 = list2.map((side) => side + "-" + alignment);
-    if (flipAlignment) {
-      list2 = list2.concat(list2.map(getOppositeAlignmentPlacement));
-    }
-  }
-  return list2;
-}
-function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
-}
-function expandPaddingObject(padding) {
-  return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...padding
-  };
-}
-function getPaddingObject(padding) {
-  return typeof padding !== "number" ? expandPaddingObject(padding) : {
-    top: padding,
-    right: padding,
-    bottom: padding,
-    left: padding
-  };
+function getPaddingObject(padding) {
+  return typeof padding !== "number" ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
 }
 function rectToClientRect(rect) {
   const {
@@ -12480,6 +12018,10 @@ const tokens = {
     "value": 1101,
     "variable": "var(--cetec-z-index-1101)"
   },
+  "zIndex.1102": {
+    "value": 1102,
+    "variable": "var(--cetec-z-index-1102)"
+  },
   "zIndex.1200": {
     "value": 1200,
     "variable": "var(--cetec-z-index-1200)"
@@ -12620,6 +12162,18 @@ const tokens = {
     "value": "var(--cetec-colors-bg-success-bold-pressed)",
     "variable": "var(--cetec-colors-bg-success-bold-pressed)"
   },
+  "colors.bg.success.subtle": {
+    "value": "var(--cetec-colors-bg-success-subtle)",
+    "variable": "var(--cetec-colors-bg-success-subtle)"
+  },
+  "colors.bg.success.subtle.hovered": {
+    "value": "var(--cetec-colors-bg-success-subtle-hovered)",
+    "variable": "var(--cetec-colors-bg-success-subtle-hovered)"
+  },
+  "colors.bg.success.subtle.pressed": {
+    "value": "var(--cetec-colors-bg-success-subtle-pressed)",
+    "variable": "var(--cetec-colors-bg-success-subtle-pressed)"
+  },
   "colors.bg.warning": {
     "value": "var(--cetec-colors-bg-warning)",
     "variable": "var(--cetec-colors-bg-warning)"
@@ -12644,6 +12198,18 @@ const tokens = {
     "value": "var(--cetec-colors-bg-warning-bold-pressed)",
     "variable": "var(--cetec-colors-bg-warning-bold-pressed)"
   },
+  "colors.bg.warning.subtle": {
+    "value": "var(--cetec-colors-bg-warning-subtle)",
+    "variable": "var(--cetec-colors-bg-warning-subtle)"
+  },
+  "colors.bg.warning.subtle.hovered": {
+    "value": "var(--cetec-colors-bg-warning-subtle-hovered)",
+    "variable": "var(--cetec-colors-bg-warning-subtle-hovered)"
+  },
+  "colors.bg.warning.subtle.pressed": {
+    "value": "var(--cetec-colors-bg-warning-subtle-pressed)",
+    "variable": "var(--cetec-colors-bg-warning-subtle-pressed)"
+  },
   "colors.bg.danger": {
     "value": "var(--cetec-colors-bg-danger)",
     "variable": "var(--cetec-colors-bg-danger)"
@@ -12668,6 +12234,18 @@ const tokens = {
     "value": "var(--cetec-colors-bg-danger-bold-pressed)",
     "variable": "var(--cetec-colors-bg-danger-bold-pressed)"
   },
+  "colors.bg.danger.subtle": {
+    "value": "var(--cetec-colors-bg-danger-subtle)",
+    "variable": "var(--cetec-colors-bg-danger-subtle)"
+  },
+  "colors.bg.danger.subtle.hovered": {
+    "value": "var(--cetec-colors-bg-danger-subtle-hovered)",
+    "variable": "var(--cetec-colors-bg-danger-subtle-hovered)"
+  },
+  "colors.bg.danger.subtle.pressed": {
+    "value": "var(--cetec-colors-bg-danger-subtle-pressed)",
+    "variable": "var(--cetec-colors-bg-danger-subtle-pressed)"
+  },
   "colors.bg.info": {
     "value": "var(--cetec-colors-bg-info)",
     "variable": "var(--cetec-colors-bg-info)"
@@ -12692,6 +12270,18 @@ const tokens = {
     "value": "var(--cetec-colors-bg-info-bold-pressed)",
     "variable": "var(--cetec-colors-bg-info-bold-pressed)"
   },
+  "colors.bg.info.subtle": {
+    "value": "var(--cetec-colors-bg-info-subtle)",
+    "variable": "var(--cetec-colors-bg-info-subtle)"
+  },
+  "colors.bg.info.subtle.hovered": {
+    "value": "var(--cetec-colors-bg-info-subtle-hovered)",
+    "variable": "var(--cetec-colors-bg-info-subtle-hovered)"
+  },
+  "colors.bg.info.subtle.pressed": {
+    "value": "var(--cetec-colors-bg-info-subtle-pressed)",
+    "variable": "var(--cetec-colors-bg-info-subtle-pressed)"
+  },
   "colors.bg.cta": {
     "value": "var(--cetec-colors-bg-cta)",
     "variable": "var(--cetec-colors-bg-cta)"
@@ -13784,6 +13374,10 @@ const tokens = {
     "value": "var(--cetec-z-index-1101)",
     "variable": "var(--cetec-z-index-modal)"
   },
+  "zIndex.modalFloating": {
+    "value": "var(--cetec-z-index-1102)",
+    "variable": "var(--cetec-z-index-modal-floating)"
+  },
   "zIndex.tooltip": {
     "value": "var(--cetec-z-index-1200)",
     "variable": "var(--cetec-z-index-tooltip)"
@@ -14300,6 +13894,18 @@ const tokens = {
     "value": "var(--cetec-colors-color-palette-success-bold-pressed)",
     "variable": "var(--cetec-colors-color-palette-success-bold-pressed)"
   },
+  "colors.colorPalette.success.subtle": {
+    "value": "var(--cetec-colors-color-palette-success-subtle)",
+    "variable": "var(--cetec-colors-color-palette-success-subtle)"
+  },
+  "colors.colorPalette.success.subtle.hovered": {
+    "value": "var(--cetec-colors-color-palette-success-subtle-hovered)",
+    "variable": "var(--cetec-colors-color-palette-success-subtle-hovered)"
+  },
+  "colors.colorPalette.success.subtle.pressed": {
+    "value": "var(--cetec-colors-color-palette-success-subtle-pressed)",
+    "variable": "var(--cetec-colors-color-palette-success-subtle-pressed)"
+  },
   "colors.colorPalette.warning": {
     "value": "var(--cetec-colors-color-palette-warning)",
     "variable": "var(--cetec-colors-color-palette-warning)"
@@ -14324,6 +13930,18 @@ const tokens = {
     "value": "var(--cetec-colors-color-palette-warning-bold-pressed)",
     "variable": "var(--cetec-colors-color-palette-warning-bold-pressed)"
   },
+  "colors.colorPalette.warning.subtle": {
+    "value": "var(--cetec-colors-color-palette-warning-subtle)",
+    "variable": "var(--cetec-colors-color-palette-warning-subtle)"
+  },
+  "colors.colorPalette.warning.subtle.hovered": {
+    "value": "var(--cetec-colors-color-palette-warning-subtle-hovered)",
+    "variable": "var(--cetec-colors-color-palette-warning-subtle-hovered)"
+  },
+  "colors.colorPalette.warning.subtle.pressed": {
+    "value": "var(--cetec-colors-color-palette-warning-subtle-pressed)",
+    "variable": "var(--cetec-colors-color-palette-warning-subtle-pressed)"
+  },
   "colors.colorPalette.danger": {
     "value": "var(--cetec-colors-color-palette-danger)",
     "variable": "var(--cetec-colors-color-palette-danger)"
@@ -14348,6 +13966,18 @@ const tokens = {
     "value": "var(--cetec-colors-color-palette-danger-bold-pressed)",
     "variable": "var(--cetec-colors-color-palette-danger-bold-pressed)"
   },
+  "colors.colorPalette.danger.subtle": {
+    "value": "var(--cetec-colors-color-palette-danger-subtle)",
+    "variable": "var(--cetec-colors-color-palette-danger-subtle)"
+  },
+  "colors.colorPalette.danger.subtle.hovered": {
+    "value": "var(--cetec-colors-color-palette-danger-subtle-hovered)",
+    "variable": "var(--cetec-colors-color-palette-danger-subtle-hovered)"
+  },
+  "colors.colorPalette.danger.subtle.pressed": {
+    "value": "var(--cetec-colors-color-palette-danger-subtle-pressed)",
+    "variable": "var(--cetec-colors-color-palette-danger-subtle-pressed)"
+  },
   "colors.colorPalette.info": {
     "value": "var(--cetec-colors-color-palette-info)",
     "variable": "var(--cetec-colors-color-palette-info)"
@@ -14372,6 +14002,18 @@ const tokens = {
     "value": "var(--cetec-colors-color-palette-info-bold-pressed)",
     "variable": "var(--cetec-colors-color-palette-info-bold-pressed)"
   },
+  "colors.colorPalette.info.subtle": {
+    "value": "var(--cetec-colors-color-palette-info-subtle)",
+    "variable": "var(--cetec-colors-color-palette-info-subtle)"
+  },
+  "colors.colorPalette.info.subtle.hovered": {
+    "value": "var(--cetec-colors-color-palette-info-subtle-hovered)",
+    "variable": "var(--cetec-colors-color-palette-info-subtle-hovered)"
+  },
+  "colors.colorPalette.info.subtle.pressed": {
+    "value": "var(--cetec-colors-color-palette-info-subtle-pressed)",
+    "variable": "var(--cetec-colors-color-palette-info-subtle-pressed)"
+  },
   "colors.colorPalette.cta": {
     "value": "var(--cetec-colors-color-palette-cta)",
     "variable": "var(--cetec-colors-color-palette-cta)"
@@ -15257,130 +14899,641 @@ const tokens = {
     "variable": "var(--cetec-colors-color-palette-border-color)"
   }
 };
-function token(path, fallback) {
-  var _a;
-  return ((_a = tokens[path]) == null ? void 0 : _a.value) || fallback;
-}
-function tokenVar(path, fallback) {
-  var _a;
-  return ((_a = tokens[path]) == null ? void 0 : _a.variable) || fallback;
-}
-token.var = tokenVar;
-const createOverlayMiddleware = (options = {}) => {
-  const { offset: offset$12 = 4, shiftPadding = 8, extras = [] } = options;
-  return [
-    offset(offset$12),
-    flip(),
-    shift({ padding: shiftPadding }),
-    ...extras
-  ];
-};
-const useOverlayFloating = (options) => {
-  const {
-    open,
-    onOpenChange,
-    placement = "bottom-start",
-    strategy = "absolute",
-    middleware,
-    nodeId,
-    offset: offset2 = 4,
-    shiftPadding = 8
-  } = options;
-  return useFloating({
-    nodeId,
-    open,
-    onOpenChange,
-    placement,
-    strategy,
-    whileElementsMounted: autoUpdate,
-    middleware: middleware ?? createOverlayMiddleware({ offset: offset2, shiftPadding })
+function token(path, fallback) {
+  var _a;
+  return ((_a = tokens[path]) == null ? void 0 : _a.value) || fallback;
+}
+function tokenVar(path, fallback) {
+  var _a;
+  return ((_a = tokens[path]) == null ? void 0 : _a.variable) || fallback;
+}
+token.var = tokenVar;
+const createOverlayMiddleware = (options = {}) => {
+  const { offset: offset$12 = 4, shiftPadding = 8, extras = [] } = options;
+  return [
+    offset(offset$12),
+    flip(),
+    shift({ padding: shiftPadding }),
+    ...extras
+  ];
+};
+const useOverlayFloating = (options) => {
+  const {
+    open,
+    onOpenChange,
+    placement = "bottom-start",
+    strategy = "absolute",
+    middleware,
+    nodeId,
+    offset: offset2 = 4,
+    shiftPadding = 8
+  } = options;
+  return useFloating({
+    nodeId,
+    open,
+    onOpenChange,
+    placement,
+    strategy,
+    whileElementsMounted: autoUpdate,
+    middleware: middleware ?? createOverlayMiddleware({ offset: offset2, shiftPadding })
+  });
+};
+const DsChainPortalRoot = ({
+  children,
+  reference
+}) => {
+  const chain = useDsChain();
+  return (
+    // The marker is unconditional; neither value is. An empty chain emits no
+    // `data-ds-chain`, so without the marker an untagged portal is
+    // indistinguishable from an ordinary element and a consumer walking up the
+    // DOM continues past it into `document.body` — producing a chain from
+    // whatever it finds there, with no error. The marker makes "portal
+    // boundary, resolved to nothing" a state a reader can detect, and it is
+    // what tells that reader to stop and take both values from here.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-ds-portal-root": "",
+        "data-ds-chain": dsChainValue(chain),
+        "data-track-object": dsObjectValue(reference),
+        children
+      }
+    )
+  );
+};
+const Tooltip = (props) => {
+  const {
+    caret = true,
+    size: size2 = "md",
+    text: text2,
+    title,
+    children,
+    placement = "bottom",
+    offset: offset2 = 8,
+    delay,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const [isOpen, setIsOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const { refs, elements, floatingStyles, context: context2 } = useOverlayFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement,
+    middleware: createOverlayMiddleware({
+      offset: offset2,
+      extras: [arrow({ element: arrowRef })]
+    })
+  });
+  const hover = useHover(context2, { move: false, delay });
+  const focus = useFocus(context2);
+  const dismiss = useDismiss(context2);
+  const role = useRole(context2, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    dismiss,
+    role
+  ]);
+  const classes = tooltip({ size: size2, hasTitle: !!title });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "span",
+        ref: refs.setReference,
+        display: "inline-flex",
+        alignItems: "center",
+        lineHeight: "none",
+        width: "fit",
+        ...getReferenceProps(),
+        children
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: elements.domReference, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ...dsComponent("Tooltip"),
+        ref: refs.setFloating,
+        style: floatingStyles,
+        className: cx(classes.tooltipContent, className),
+        ...getFloatingProps(),
+        ...otherProps,
+        children: [
+          title && /* @__PURE__ */ jsx(Box, { className: classes.title, children: title }),
+          text2 && /* @__PURE__ */ jsx(Box, { className: classes.text, children: text2 }),
+          caret && /* @__PURE__ */ jsx(
+            FloatingArrow,
+            {
+              ref: arrowRef,
+              context: context2,
+              fill: token.var("colors.bg.neutral.inverse")
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+};
+const Text = (props) => {
+  const {
+    as = "span",
+    family,
+    italic,
+    bold,
+    underline,
+    dashedUnderline,
+    definition,
+    size: size2,
+    children,
+    textStyle,
+    weight,
+    role,
+    // role if use in form input text for refrence, also semantic role overrides if non-semantic tag.
+    tabIndex,
+    // tabIndex main use for in list or loop select text using key press focus
+    truncate,
+    allCaps,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const content = /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...dsComponent("Text"),
+      as,
+      textStyle,
+      role,
+      tabIndex: tabIndex ?? (definition ? 0 : void 0),
+      className: cx(
+        text({
+          family,
+          bold,
+          underline,
+          dashedUnderline: definition ? true : dashedUnderline,
+          italic,
+          size: size2,
+          weight,
+          truncate,
+          allCaps
+        }),
+        className
+      ),
+      ...otherProps,
+      children
+    }
+  );
+  return definition ? /* @__PURE__ */ jsx(Tooltip, { text: definition, children: content }) : content;
+};
+const Breadcrumbs = (props) => {
+  const { items, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = breadcrumbs();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...dsComponent("Breadcrumbs"),
+      as: "ul",
+      className: cx(classes.wrapper, className),
+      ...otherProps,
+      children: items == null ? void 0 : items.map((item, index2) => /* @__PURE__ */ jsxs(Text, { as: "li", children: [
+        item.href ? /* @__PURE__ */ jsx(Link, { href: item.href, className: classes.linkSegment, children: item.label }) : /* @__PURE__ */ jsx(Text, { className: classes.currentSegment, children: item.label }),
+        index2 < (items == null ? void 0 : items.length) - 1 && /* @__PURE__ */ jsx(Text, { className: classes.slash, children: "/" })
+      ] }, item.id))
+    }
+  );
+};
+function useMediaQuery(breakpoint, direction = "min") {
+  const query = useMemo(() => {
+    const breakpointValue = breakpoints[breakpoint];
+    const breakpointNum = Number.parseInt(breakpointValue, 10);
+    return direction === "min" ? `(min-width: ${breakpointValue})` : `(max-width: ${breakpointNum - 1}px)`;
+  }, [breakpoint, direction]);
+  const mediaQuery = useMemo(() => {
+    if (typeof window === "undefined") {
+      return {
+        matches: false,
+        addEventListener: () => {
+        },
+        removeEventListener: () => {
+        }
+      };
+    }
+    return window.matchMedia(query);
+  }, [query]);
+  return useSyncExternalStore(
+    (callback) => {
+      mediaQuery.addEventListener("change", callback);
+      return () => {
+        mediaQuery.removeEventListener("change", callback);
+      };
+    },
+    () => mediaQuery.matches,
+    () => false
+  );
+}
+function useContainerQuery(containerRef, size2, direction = "min") {
+  const query = useMemo(() => {
+    const sizeValue = containerSizes[size2];
+    const sizeNum = Number.parseFloat(sizeValue);
+    return direction === "min" ? `(min-width: ${sizeValue})` : `(max-width: ${sizeNum - 0.0625}rem)`;
+  }, [size2, direction]);
+  return useSyncExternalStore(
+    (callback) => {
+      if (typeof window === "undefined" || !containerRef.current) {
+        return () => {
+        };
+      }
+      const element = containerRef.current;
+      const sizeValue = containerSizes[size2];
+      const sizeNum = Number.parseFloat(sizeValue);
+      const threshold = direction === "min" ? sizeNum : sizeNum - 0.0625;
+      const checkSize = () => {
+        if (!element) return false;
+        const width = element.offsetWidth;
+        const widthInRem = width / Number.parseFloat(
+          getComputedStyle(document.documentElement).fontSize
+        );
+        return direction === "min" ? widthInRem >= threshold : widthInRem < threshold;
+      };
+      if ("queryContainer" in element) {
+        try {
+          const containerQuery = element.queryContainer(query);
+          containerQuery.addEventListener("change", callback);
+          return () => {
+            containerQuery.removeEventListener("change", callback);
+          };
+        } catch {
+        }
+      }
+      let currentMatches = checkSize();
+      const callbacks = /* @__PURE__ */ new Set();
+      let observer = null;
+      if (typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver(() => {
+          const newMatches = checkSize();
+          if (newMatches !== currentMatches) {
+            currentMatches = newMatches;
+            callbacks.forEach((cb) => cb());
+          }
+        });
+        observer.observe(element);
+      }
+      callbacks.add(callback);
+      return () => {
+        callbacks.delete(callback);
+        if (callbacks.size === 0 && observer) {
+          observer.disconnect();
+        }
+      };
+    },
+    () => {
+      if (typeof window === "undefined" || !containerRef.current) {
+        return false;
+      }
+      const element = containerRef.current;
+      const sizeValue = containerSizes[size2];
+      const sizeNum = Number.parseFloat(sizeValue);
+      const threshold = direction === "min" ? sizeNum : sizeNum - 0.0625;
+      if ("queryContainer" in element) {
+        try {
+          const containerQuery = element.queryContainer(query);
+          return containerQuery.matches;
+        } catch {
+        }
+      }
+      const width = element.offsetWidth;
+      const widthInRem = width / Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+      return direction === "min" ? widthInRem >= threshold : widthInRem < threshold;
+    },
+    () => false
+  );
+}
+const Tag = (props) => {
+  const { variant, hue, iconBefore, iconAfter, children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...dsComponent("Tag"),
+      className: cx(
+        tag({
+          variant,
+          hue,
+          iconBefore: Boolean(iconBefore),
+          iconAfter: Boolean(iconAfter)
+        }),
+        className
+      ),
+      ...otherProps,
+      children: [
+        iconBefore && /* @__PURE__ */ jsx(Icon, { name: iconBefore, fill: "current", color: "inherit", size: "20" }),
+        children,
+        iconAfter && /* @__PURE__ */ jsx(Icon, { name: iconAfter, fill: "current", color: "inherit", size: "20" })
+      ]
+    }
+  );
+};
+const BreakpointIndicator = (props) => {
+  const isXs = useMediaQuery("xs");
+  const isSm = useMediaQuery("sm");
+  const isMd = useMediaQuery("md");
+  const isLg = useMediaQuery("lg");
+  const isXl = useMediaQuery("xl");
+  const is2Xl = useMediaQuery("2xl");
+  const { variant, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const dsAttributes = dsComponent("BreakpointIndicator");
+  let breakpoint = /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...dsAttributes,
+      className: cx(breakpointIndicator({ variant }), className),
+      hue: "red",
+      variant: "bold",
+      ...otherProps,
+      children: "@media/base"
+    }
+  );
+  if (is2Xl) {
+    breakpoint = /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...dsAttributes,
+        className: cx(breakpointIndicator({ variant }), className),
+        hue: "blue",
+        variant: "bold",
+        ...otherProps,
+        children: "@media/2xl"
+      }
+    );
+  } else if (isXl) {
+    breakpoint = /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...dsAttributes,
+        className: cx(breakpointIndicator({ variant }), className),
+        hue: "magenta",
+        variant: "bold",
+        ...otherProps,
+        children: "@media/xl"
+      }
+    );
+  } else if (isLg) {
+    breakpoint = /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...dsAttributes,
+        className: cx(breakpointIndicator({ variant }), className),
+        hue: "green",
+        variant: "bold",
+        ...otherProps,
+        children: "@media/lg"
+      }
+    );
+  } else if (isMd) {
+    breakpoint = /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...dsAttributes,
+        className: cx(breakpointIndicator({ variant }), className),
+        hue: "indigo",
+        variant: "bold",
+        ...otherProps,
+        children: "@media/md"
+      }
+    );
+  } else if (isSm) {
+    breakpoint = /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...dsAttributes,
+        className: cx(breakpointIndicator({ variant }), className),
+        hue: "yellow",
+        variant: "bold",
+        ...otherProps,
+        children: "@media/sm"
+      }
+    );
+  } else if (isXs) {
+    breakpoint = /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...dsAttributes,
+        className: cx(breakpointIndicator({ variant }), className),
+        hue: "orange",
+        variant: "bold",
+        ...otherProps,
+        children: "@media/xs"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: breakpoint });
+};
+const Spinner = (props) => {
+  const slotContext = useSlotContext();
+  const { size: sizeProp, inverse, centered, ...rest } = props;
+  const size2 = sizeProp ?? (slotContext == null ? void 0 : slotContext.size);
+  const [className, otherProps] = splitProps(rest);
+  const classes = spinner({
+    size: size2,
+    inverse,
+    centered
   });
-};
-const DsChainPortalRoot = ({ children }) => {
-  const chain = useDsChain();
-  return (
-    // The marker is unconditional; the chain value is not. An empty chain emits
-    // no `data-ds-chain`, so without the marker an untagged portal is
-    // indistinguishable from an ordinary element and a consumer walking up the
-    // DOM continues past it into `document.body` — producing a chain from
-    // whatever it finds there, with no error. The marker makes "portal
-    // boundary, chain resolved to nothing" a state a reader can detect.
-    /* @__PURE__ */ jsx("div", { "data-ds-portal-root": "", "data-ds-chain": dsChainValue(chain), children })
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...dsComponent("Spinner"),
+      className: cx(classes.container, className),
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "spinner",
+          className: classes.spinnerSvg,
+          "data-inverse": inverse ? "true" : void 0
+        }
+      )
+    }
   );
 };
-const Tooltip = (props) => {
+const FieldContext = createContext(null);
+const useFieldContext = () => {
+  return useContext(FieldContext);
+};
+const Button = (props) => {
+  const fieldContext = useFieldContext();
+  const slotContext = useSlotContext();
   const {
-    caret = true,
-    size: size2 = "md",
-    text: text2,
-    title,
+    variant,
+    size: sizeProp,
+    href,
+    before,
+    after,
+    iconBefore,
+    iconAfter,
     children,
-    placement = "bottom",
-    offset: offset2 = 8,
-    delay,
+    loading,
+    error: errorProp,
+    invalid: invalidProp,
+    disabled: disabledProp,
+    type = "button",
+    fontSize,
+    fontVariant,
     ...rest
   } = props;
-  const [className, otherProps] = splitProps(rest);
-  const [isOpen, setIsOpen] = useState(false);
-  const arrowRef = useRef(null);
-  const { refs, floatingStyles, context: context2 } = useOverlayFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    placement,
-    middleware: createOverlayMiddleware({
-      offset: offset2,
-      extras: [arrow({ element: arrowRef })]
-    })
+  const size2 = sizeProp ?? (slotContext == null ? void 0 : slotContext.size) ?? (fieldContext == null ? void 0 : fieldContext.size);
+  const error2 = errorProp ?? (slotContext == null ? void 0 : slotContext.error) ?? (fieldContext == null ? void 0 : fieldContext.error);
+  const invalid = invalidProp ?? (slotContext == null ? void 0 : slotContext.invalid) ?? (fieldContext == null ? void 0 : fieldContext.invalid);
+  const disabled = disabledProp ?? (slotContext == null ? void 0 : slotContext.disabled) ?? (fieldContext == null ? void 0 : fieldContext.disabled);
+  const resolvedBefore = before ?? (iconBefore ? /* @__PURE__ */ jsx(Icon, { name: iconBefore, "aria-hidden": true }) : void 0);
+  const resolvedAfter = after ?? (iconAfter ? /* @__PURE__ */ jsx(Icon, { name: iconAfter, "aria-hidden": true }) : void 0);
+  const classes = button({
+    variant,
+    size: size2,
+    before: Boolean(resolvedBefore),
+    after: Boolean(resolvedAfter)
   });
-  const hover = useHover(context2, { move: false, delay });
-  const focus = useFocus(context2);
-  const dismiss = useDismiss(context2);
-  const role = useRole(context2, { role: "tooltip" });
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    hover,
-    focus,
-    dismiss,
-    role
-  ]);
-  const classes = tooltip({ size: size2, hasTitle: !!title });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        as: "span",
-        ref: refs.setReference,
-        display: "inline-flex",
-        alignItems: "center",
-        lineHeight: "none",
-        ...getReferenceProps(),
-        children
+  const [className, otherProps] = splitProps(rest);
+  const slotContexts = useMemo(
+    () => ({
+      before: {
+        owner: "Button",
+        placement: "before",
+        size: size2,
+        disabled,
+        error: error2,
+        invalid
+      },
+      after: {
+        owner: "Button",
+        placement: "after",
+        size: size2,
+        disabled,
+        error: error2,
+        invalid
       }
-    ),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsxs(
-      Box,
-      {
-        ...dsComponent("Tooltip"),
-        ref: refs.setFloating,
-        style: floatingStyles,
-        className: cx(classes.tooltipContent, className),
-        ...getFloatingProps(),
-        ...otherProps,
-        children: [
-          title && /* @__PURE__ */ jsx(Text, { className: classes.title, children: title }),
-          text2 && /* @__PURE__ */ jsx(Text, { className: classes.text, children: text2 }),
-          caret && /* @__PURE__ */ jsx(
-            FloatingArrow,
+    }),
+    [disabled, error2, invalid, size2]
+  );
+  const renderSlot = (slot, placement) => {
+    if (!slot) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(SlotContext.Provider, { value: slotContexts[placement], children: /* @__PURE__ */ jsx(Box, { className: classes.slot, children: slot }) });
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...dsComponent("Button"),
+      ...href ? {
+        as: "a",
+        href,
+        ...disabled && {
+          onClick: (e) => e.preventDefault()
+        }
+      } : {
+        as: "button",
+        type,
+        disabled
+      },
+      className: `${cx(classes.container, className)} group`,
+      ...loading && {
+        "aria-busy": true,
+        "aria-live": "polite"
+      },
+      "aria-disabled": disabled,
+      "aria-invalid": invalid || void 0,
+      "data-error": error2 || void 0,
+      "data-invalid": invalid || void 0,
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: "0", opacity: loading ? 0 : 1, children: [
+          renderSlot(resolvedBefore, "before"),
+          /* @__PURE__ */ jsx(
+            Box,
             {
-              ref: arrowRef,
-              context: context2,
-              fill: token.var("colors.bg.neutral.inverse")
+              className: classes.mainContent,
+              fontSize,
+              fontVariant,
+              children
             }
-          )
-        ]
-      }
-    ) }) })
-  ] });
+          ),
+          renderSlot(resolvedAfter, "after")
+        ] }),
+        loading && /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size: "sm",
+            inverse: variant === "primary" || variant === "danger" || variant === "selectedBold",
+            centered: true
+          }
+        )
+      ]
+    }
+  );
 };
+function daysInMonth$1(year, month) {
+  return new Date(year, month, 0).getDate();
+}
+function firstWeekdayOfMonth(year, month) {
+  return new Date(year, month - 1, 1).getDay();
+}
+function shiftMonth(year, month, delta) {
+  const zeroBased = month - 1 + delta;
+  const rolledYear = year + Math.floor(zeroBased / 12);
+  const rolledMonth = (zeroBased % 12 + 12) % 12;
+  return { year: rolledYear, month: rolledMonth + 1 };
+}
+function compareDates(a2, b) {
+  if (a2.year !== b.year) return a2.year - b.year;
+  if (a2.month !== b.month) return a2.month - b.month;
+  return a2.day - b.day;
+}
+function isSameDate(a2, b) {
+  return compareDates(a2, b) === 0;
+}
+function isDateBefore(date, bound) {
+  return bound !== void 0 && compareDates(date, bound) < 0;
+}
+function isDateAfter(date, bound) {
+  return bound !== void 0 && compareDates(date, bound) > 0;
+}
+function isDateInRange(date, min2, max2) {
+  return !isDateBefore(date, min2) && !isDateAfter(date, max2);
+}
+function getTodayDate() {
+  const now = /* @__PURE__ */ new Date();
+  return {
+    year: now.getFullYear(),
+    month: now.getMonth() + 1,
+    day: now.getDate()
+  };
+}
+function to12Hour$1(hour24) {
+  if (hour24 === 0) return { hour12: 12, meridiem: "AM" };
+  if (hour24 < 12) return { hour12: hour24, meridiem: "AM" };
+  if (hour24 === 12) return { hour12: 12, meridiem: "PM" };
+  return { hour12: hour24 - 12, meridiem: "PM" };
+}
+function to24Hour$1(hour12, meridiem) {
+  if (meridiem === "AM") return hour12 === 12 ? 0 : hour12;
+  return hour12 === 12 ? 12 : hour12 + 12;
+}
+function normalizeMinuteStep(minuteStep) {
+  const step = Math.floor(minuteStep);
+  if (!Number.isFinite(step) || step < 1) return 1;
+  return Math.min(step, 60);
+}
+function getMinuteValues(minuteStep) {
+  const step = normalizeMinuteStep(minuteStep);
+  const values = [];
+  for (let minute = 0; minute < 60; minute += step) {
+    values.push(minute);
+  }
+  return values;
+}
 const IconButton = (props) => {
   const fieldContext = useFieldContext();
   const slotContext = useSlotContext();
@@ -16415,12 +16568,17 @@ const Code = (props) => {
   );
 };
 const Pre = (props) => {
-  const { children, lang, ...rest } = props;
+  const {
+    children,
+    lang,
+    "data-ds-component": dsComponentName,
+    ...rest
+  } = props;
   const [className, otherProps] = splitProps(rest);
   return /* @__PURE__ */ jsx(
     Box,
     {
-      ...dsComponent("Pre"),
+      ...dsComponent("Pre", dsComponentName),
       as: "pre",
       className: cx(pre({}), className),
       ...otherProps,
@@ -17595,6 +17753,8 @@ const DateTimeInput = (props) => {
     }
   );
 };
+const FloatingLayerContext = createContext("elevated");
+const useFloatingLayer = () => useContext(FloatingLayerContext);
 const MENU_COMPONENT_TYPES = {
   group: "MenuGroup",
   item: "MenuItem",
@@ -17838,6 +17998,7 @@ const withLevelScopedKeys = (nodes, levelKey) => {
 const Menu = (props) => {
   var _a;
   const nodeId = useFloatingNodeId();
+  const floatingLayer = useFloatingLayer();
   const {
     trigger,
     children,
@@ -17864,7 +18025,7 @@ const Menu = (props) => {
   } = props;
   const [className, otherProps] = splitProps(rest);
   const userStyle = otherProps.style;
-  const classes = menu({ density, panel });
+  const classes = menu({ density, panel, layer: floatingLayer });
   const listClassName = list({ density });
   const hasReference = Boolean(trigger) && !inline;
   const [uncontrolledOpen, setUncontrolledOpen] = useState(
@@ -18252,7 +18413,7 @@ const Menu = (props) => {
         onKeyDown: composedTriggerOnKeyDown
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsx(
+    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: floating.elements.domReference, children: /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
         context: floating.context,
@@ -18639,6 +18800,7 @@ const SubMenu = (props) => {
   const nodeId = useFloatingNodeId();
   const parentId = useFloatingParentNodeId();
   const tree = useFloatingTree();
+  const floatingLayer = useFloatingLayer();
   const {
     label: label2,
     description,
@@ -18661,7 +18823,10 @@ const SubMenu = (props) => {
   const parentListContext = useMenuListContext();
   const resolvedInteraction = interaction ?? rootContext.subMenuInteraction;
   const resolvedDensity = typeof density === "string" ? density : rootContext.density;
-  const classes = menu({ density: resolvedDensity });
+  const classes = menu({
+    density: resolvedDensity,
+    layer: floatingLayer
+  });
   const listClassName = list({ density: resolvedDensity });
   const itemClassName = listItem({
     density: resolvedDensity,
@@ -19062,7 +19227,7 @@ const SubMenu = (props) => {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: floating.elements.domReference, children: /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
         context: floating.context,
@@ -19340,6 +19505,8 @@ const ListItem = (props) => {
     iconBeforeFill,
     iconAfterFill,
     href,
+    rowId,
+    "data-ds-component": dsComponentName,
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
@@ -19360,12 +19527,19 @@ const ListItem = (props) => {
     iconAfter: Boolean(iconAfter)
   });
   if (variant === "divider") {
-    return /* @__PURE__ */ jsx(Box, { className: classes.divider, children: /* @__PURE__ */ jsx(Divider, { role: "separator" }) });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ...dsComponent("ListItem", dsComponentName),
+        className: classes.divider,
+        children: /* @__PURE__ */ jsx(Divider, { role: "separator" })
+      }
+    );
   }
   return /* @__PURE__ */ jsx(
     Box,
     {
-      ...dsComponent("ListItem"),
+      ...dsComponent("ListItem", dsComponentName),
       ...href ? {
         as: "a",
         href
@@ -19377,6 +19551,7 @@ const ListItem = (props) => {
       role: "option",
       "aria-selected": isSelected,
       "data-selected": isSelected || void 0,
+      "data-row-id": rowId,
       ...otherProps,
       children: hasCustomChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
         before && /* @__PURE__ */ jsx(Box, { className: classes.beforeSlot, "aria-hidden": true, children: before }),
@@ -20724,11 +20899,13 @@ const Kbd = (props) => {
   );
   return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, children: content });
 };
-const ModalContext = createContext(null);
-const useModalContext = () => {
-  const context2 = useContext(ModalContext);
+const ModalWrapperContext = createContext(null);
+const useModalWrapperContext = () => {
+  const context2 = useContext(ModalWrapperContext);
   if (!context2) {
-    throw new Error("Modal components must be used within a <Modal> provider");
+    throw new Error(
+      "Modal components must be used within a <ModalWrapper> provider"
+    );
   }
   return context2;
 };
@@ -20747,12 +20924,13 @@ const modalStateReducer = (state, action) => {
       return state;
   }
 };
-const Modal = (props) => {
+const ModalWrapper = (props) => {
   const {
     open,
     onOpenChange,
     size: size2 = "md",
     preventOverlayClose = false,
+    initialFocus,
     children,
     id,
     position = "centered",
@@ -20806,7 +20984,7 @@ const Modal = (props) => {
     return null;
   }
   const dataState = phase === "closing" ? "closing" : "open";
-  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsxs(Box, { className: classes.positionWrapper, children: [
+  return /* @__PURE__ */ jsx(FloatingLayerContext.Provider, { value: "modalFloating", children: /* @__PURE__ */ jsx(ModalWrapperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsxs(Box, { className: classes.positionWrapper, children: [
     /* @__PURE__ */ jsx(
       FloatingOverlay,
       {
@@ -20817,33 +20995,54 @@ const Modal = (props) => {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx(FloatingFocusManager, { context: context2, modal: true, children: /* @__PURE__ */ jsx(
-      Box,
+    /* @__PURE__ */ jsx(
+      FloatingFocusManager,
       {
-        ...dsComponent("Modal"),
-        ref: refs.setFloating,
-        className: cx(classes.container, className),
-        "data-state": dataState,
-        id,
-        role: "dialog",
-        "aria-modal": "true",
-        ...getFloatingProps(),
-        ...otherProps,
-        children
+        context: context2,
+        modal: true,
+        initialFocus,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ...dsComponent("ModalWrapper"),
+            ref: refs.setFloating,
+            className: cx(classes.container, className),
+            "data-state": dataState,
+            id,
+            role: "dialog",
+            "aria-modal": "true",
+            ...getFloatingProps(),
+            ...otherProps,
+            children
+          }
+        )
       }
-    ) })
-  ] }) }) }) });
+    )
+  ] }) }) }) }) });
+};
+const ModalBody = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = modal();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.body, className), ...otherProps, children });
+};
+const ModalFooter = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = modal();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
 };
 const ModalHeader = (props) => {
-  const { title, showCloseButton = true, children, ...rest } = props;
+  const { title, titleId, showCloseButton = true, children, ...rest } = props;
   const [className, otherProps] = splitProps(rest);
   const classes = modal();
-  const { onClose } = useModalContext();
+  const { onClose } = useModalWrapperContext();
   const isSm = useMediaQuery("sm");
   return /* @__PURE__ */ jsx(Box, { className: cx(classes.header, className), ...otherProps, children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
     title && /* @__PURE__ */ jsx(
       Heading,
       {
+        id: titleId,
         level: "h3",
         textStyle: { base: "heading.sm", sm: "heading.xs" },
         className: classes.title,
@@ -20864,17 +21063,173 @@ const ModalHeader = (props) => {
     )
   ] }) });
 };
-const ModalBody = (props) => {
-  const { children, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  const classes = modal();
-  return /* @__PURE__ */ jsx(Box, { className: cx(classes.body, className), ...otherProps, children });
+const Modal = (props) => {
+  const {
+    open,
+    onOpenChange,
+    title,
+    defaultValues,
+    onSubmit,
+    children,
+    submitLabel = "Submit",
+    cancelLabel = "Cancel",
+    submitDisabled = false,
+    footer,
+    size: size2,
+    preventOverlayClose,
+    showCloseButton = true
+  } = props;
+  const titleId = useId$1();
+  const close = useCallback(() => onOpenChange(false), [onOpenChange]);
+  const form = useForm({
+    defaultValues,
+    onSubmit: async ({ value }) => {
+      await onSubmit({ value, close });
+    }
+  });
+  useEffect(() => {
+    form.reset(defaultValues);
+  }, [form, open]);
+  const handleFormSubmit = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    void form.handleSubmit();
+  };
+  const formBody = /* @__PURE__ */ jsx(ModalBody, { ...dsComponent("ModalBody"), children: children(form) });
+  const defaultFooter = /* @__PURE__ */ jsx(ModalFooter, { ...dsComponent("ModalFooter"), children: /* @__PURE__ */ jsx(
+    form.Subscribe,
+    {
+      selector: (state) => [state.canSubmit, state.isSubmitting],
+      children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: close, children: cancelLabel }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            variant: "primary",
+            disabled: !canSubmit || submitDisabled,
+            loading: isSubmitting,
+            children: submitLabel
+          }
+        )
+      ] })
+    }
+  ) });
+  return /* @__PURE__ */ jsxs(
+    ModalWrapper,
+    {
+      ...dsComponent("Modal"),
+      open,
+      onOpenChange,
+      size: size2,
+      preventOverlayClose,
+      "aria-labelledby": titleId,
+      children: [
+        /* @__PURE__ */ jsx(
+          ModalHeader,
+          {
+            title,
+            titleId,
+            showCloseButton
+          }
+        ),
+        footer ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("form", { onSubmit: handleFormSubmit, children: formBody }),
+          /* @__PURE__ */ jsx(ModalFooter, { ...dsComponent("ModalFooter"), children: footer })
+        ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleFormSubmit, children: [
+          formBody,
+          defaultFooter
+        ] })
+      ]
+    }
+  );
 };
-const ModalFooter = (props) => {
-  const { children, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  const classes = modal();
-  return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
+const typeDefaults = {
+  default: {
+    preventOverlayClose: false,
+    showCloseButton: true
+  },
+  delete: {
+    preventOverlayClose: true,
+    showCloseButton: false
+  }
+};
+const ConfirmationModal = (props) => {
+  const {
+    open,
+    onOpenChange,
+    title,
+    description,
+    confirmLabel,
+    cancelLabel = "Cancel",
+    type = "default",
+    onConfirm,
+    confirmLoading = false,
+    confirmDisabled = false,
+    preventOverlayClose,
+    showCloseButton,
+    size: size2 = "sm"
+  } = props;
+  const titleId = useId$1();
+  const descriptionId = useId$1();
+  const cancelRef = useRef(null);
+  const defaults2 = typeDefaults[type];
+  const resolvedPreventOverlayClose = preventOverlayClose ?? defaults2.preventOverlayClose;
+  const resolvedShowCloseButton = showCloseButton ?? defaults2.showCloseButton;
+  const confirmButtonVariant = type === "delete" ? "danger" : "primary";
+  const dismiss = useCallback(() => onOpenChange(false), [onOpenChange]);
+  const handleConfirm = () => {
+    void onConfirm();
+  };
+  return /* @__PURE__ */ jsxs(
+    ModalWrapper,
+    {
+      ...dsComponent("ConfirmationModal"),
+      open,
+      onOpenChange,
+      size: size2,
+      preventOverlayClose: resolvedPreventOverlayClose,
+      initialFocus: type === "delete" ? cancelRef : void 0,
+      role: "alertdialog",
+      "aria-labelledby": titleId,
+      "aria-describedby": descriptionId,
+      children: [
+        /* @__PURE__ */ jsx(
+          ModalHeader,
+          {
+            title,
+            titleId,
+            showCloseButton: resolvedShowCloseButton
+          }
+        ),
+        /* @__PURE__ */ jsx(ModalBody, { ...dsComponent("ModalBody"), children: /* @__PURE__ */ jsx(Text, { id: descriptionId, children: description }) }),
+        /* @__PURE__ */ jsxs(ModalFooter, { ...dsComponent("ModalFooter"), children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: cancelRef,
+              type: "button",
+              variant: "ghost",
+              onClick: dismiss,
+              disabled: confirmLoading,
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: confirmButtonVariant,
+              onClick: handleConfirm,
+              disabled: confirmDisabled || confirmLoading,
+              loading: confirmLoading,
+              children: confirmLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 const Radio = (props) => {
   const fieldContext = useFieldContext();
@@ -21055,6 +21410,7 @@ const dsPart = (part) => ({
   [DS_PART_ATTRIBUTE]: part
 });
 const AutocompleteListbox = (props) => {
+  const floatingLayer = useFloatingLayer();
   const {
     activeIndex,
     baseId,
@@ -21079,7 +21435,7 @@ const AutocompleteListbox = (props) => {
     statusClassName,
     value
   } = props;
-  const menuClasses = menu({ density });
+  const menuClasses = menu({ density, layer: floatingLayer });
   const showInitialLoading = loading && items.length === 0;
   const showNoOptions = !loading && items.length === 0;
   const selectedValueSet = new Set(selectedValues);
@@ -21115,6 +21471,7 @@ const AutocompleteListbox = (props) => {
                 {
                   name: selected ? "checkbox-checked" : "checkbox",
                   fill: selected ? "icon" : "icon.subtlest",
+                  display: "block",
                   "aria-hidden": true
                 }
               ) : void 0,
@@ -21150,6 +21507,7 @@ const AutocompleteToken = (props) => {
     className,
     disabled,
     dismissButtonRef,
+    isNew,
     label: label2,
     onDismiss,
     onKeyDown,
@@ -21159,6 +21517,7 @@ const AutocompleteToken = (props) => {
     Chip,
     {
       className,
+      "data-new": isNew || void 0,
       size: size2,
       dismissable: true,
       disabled,
@@ -21184,7 +21543,6 @@ const useAutocompleteState = ({
   defaultOpen = false,
   onOpenChange,
   multiple = false,
-  selectedOptionLabel,
   disabled = false,
   readOnly = false
 }) => {
@@ -21230,7 +21588,7 @@ const useAutocompleteState = ({
         return;
       }
       commitInputValue(nextValue, "input");
-      if (!multiple && typeof value === "string" && nextValue !== selectedOptionLabel) {
+      if (!multiple && typeof value === "string") {
         commitValue(null, "clear");
       }
       commitOpen(true, "input");
@@ -21241,7 +21599,6 @@ const useAutocompleteState = ({
       commitValue,
       isInteractionBlocked,
       multiple,
-      selectedOptionLabel,
       value
     ]
   );
@@ -21267,7 +21624,7 @@ const useAutocompleteState = ({
         return;
       }
       commitValue(option.value, reason);
-      commitInputValue(option.label, "selection");
+      commitInputValue("", "selection");
       commitOpen(false, "selection");
     },
     [
@@ -21398,7 +21755,7 @@ const getAutocompleteValueArray = (value, multiple) => {
 };
 const getFirstEnabledOptionIndex = (options) => options.findIndex((option) => !option.disabled);
 const LOAD_MORE_THRESHOLD_PX = 32;
-const defaultGetCreateOptionLabel = (inputValue) => `Create “${inputValue}”`;
+const defaultGetCreateOptionLabel = (inputValue) => `Add “${inputValue}”`;
 const chipSizeByAutocompleteSize = {
   sm: "sm",
   md: "sm",
@@ -21419,7 +21776,7 @@ const getDismissReason = (reason) => {
   return reason === "escape-key" ? "escape" : "outside-press";
 };
 const useAutocompleteController = (props) => {
-  var _a, _b, _c;
+  const floatingLayer = useFloatingLayer();
   const fieldContext = useFieldContext();
   const {
     value: controlledValue,
@@ -21492,8 +21849,6 @@ const useAutocompleteController = (props) => {
     () => new Map(options.map((option) => [option.value, option])),
     [options]
   );
-  const initialValue = controlledValue ?? defaultValue;
-  const initialSelectedLabel = typeof initialValue === "string" ? ((_a = optionByValue.get(initialValue)) == null ? void 0 : _a.label) ?? initialValue : "";
   const handleValueChange = useCallback(
     (nextValue, reason) => {
       if (multiple) {
@@ -21529,13 +21884,12 @@ const useAutocompleteController = (props) => {
     defaultValue,
     onValueChange: handleValueChange,
     inputValue: controlledInputValue,
-    defaultInputValue: defaultInputValue ?? initialSelectedLabel,
+    defaultInputValue,
     onInputValueChange: handleInputValueChange,
     open: controlledOpen,
     defaultOpen,
     onOpenChange,
     multiple,
-    selectedOptionLabel: typeof controlledValue === "string" ? ((_b = optionByValue.get(controlledValue)) == null ? void 0 : _b.label) ?? controlledValue : void 0,
     disabled,
     readOnly
   });
@@ -21546,14 +21900,18 @@ const useAutocompleteController = (props) => {
     () => getAutocompleteValueArray(currentValue, Boolean(multiple)),
     [currentValue, multiple]
   );
+  const selectedOptions = useMemo(
+    () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)),
+    [optionByValue, selectedValues]
+  );
   const selectedLabels = useMemo(
     () => selectedValues.map(
-      (selectedValue) => {
-        var _a2;
-        return ((_a2 = optionByValue.get(selectedValue)) == null ? void 0 : _a2.label) ?? selectedValue;
+      (selectedValue, index2) => {
+        var _a;
+        return ((_a = selectedOptions[index2]) == null ? void 0 : _a.label) ?? selectedValue;
       }
     ),
-    [optionByValue, selectedValues]
+    [selectedOptions, selectedValues]
   );
   const visibleOptions = useMemo(() => {
     const query = currentInputValue.trim();
@@ -21577,7 +21935,7 @@ const useAutocompleteController = (props) => {
     };
   }, [allowCustomValue, currentInputValue, getCreateOptionLabel, options]);
   const navigationItems = useMemo(
-    () => createOption ? [...visibleOptions, createOption] : visibleOptions,
+    () => createOption ? [createOption, ...visibleOptions] : visibleOptions,
     [createOption, visibleOptions]
   );
   const disabledIndices = useMemo(
@@ -21630,21 +21988,19 @@ const useAutocompleteController = (props) => {
   const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
     [dismiss, role, listNavigation]
   );
-  const classes = autocomplete({ size: size$12 });
+  const classes = autocomplete({ size: size$12, layer: floatingLayer });
   const chipSize = resolveChipSize$1(size$12);
   const shouldLimitTags = Boolean(multiple) && typeof limitTags === "number" && limitTags >= 0 && !focusedWithin;
   const visibleTagCount = shouldLimitTags ? limitTags : selectedValues.length;
   const visibleSelectedValues = selectedValues.slice(0, visibleTagCount);
   const hiddenTagCount = selectedValues.length - visibleSelectedValues.length;
-  const selectedSingleLabel = typeof currentValue === "string" ? ((_c = optionByValue.get(currentValue)) == null ? void 0 : _c.label) ?? currentValue : "";
-  const displayedInputValue = !multiple && typeof currentValue === "string" && !currentInputValue ? selectedSingleLabel : currentInputValue;
   const focusInput = useCallback(() => {
-    var _a2;
-    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
   }, []);
   const focusToken = useCallback((index2) => {
-    var _a2;
-    (_a2 = tokenRefs.current[index2]) == null ? void 0 : _a2.focus();
+    var _a;
+    (_a = tokenRefs.current[index2]) == null ? void 0 : _a.focus();
   }, []);
   const handleOptionSelect = useCallback(
     (option) => {
@@ -21723,26 +22079,10 @@ const useAutocompleteController = (props) => {
     },
     [state]
   );
-  const handleInputFocus = useCallback(
-    (event) => {
-      setFocusedWithin(true);
-      state.openPopup("focus");
-      if (!multiple && typeof currentValue === "string") {
-        event.currentTarget.select();
-      }
-    },
-    [currentValue, multiple, state]
-  );
-  const handleInputMouseDown = useCallback(
-    (event) => {
-      if (!multiple && typeof currentValue === "string" && document.activeElement !== event.currentTarget) {
-        event.preventDefault();
-        event.currentTarget.focus();
-        event.currentTarget.select();
-      }
-    },
-    [currentValue, multiple]
-  );
+  const handleInputFocus = useCallback(() => {
+    setFocusedWithin(true);
+    state.openPopup("focus");
+  }, [state]);
   const handleInputKeyDown = useCallback(
     (event) => {
       if (disabled || readOnly) {
@@ -21766,12 +22106,12 @@ const useAutocompleteController = (props) => {
         }
         return;
       }
-      if ((event.key === "Backspace" || event.key === "Delete") && currentInputValue.length === 0 && multiple && visibleSelectedValues.length > 0) {
+      if ((event.key === "Backspace" || event.key === "Delete") && currentInputValue.length === 0 && visibleSelectedValues.length > 0) {
         event.preventDefault();
         focusToken(visibleSelectedValues.length - 1);
         return;
       }
-      if (event.key === "ArrowLeft" && currentInputValue.length === 0 && multiple && visibleSelectedValues.length > 0) {
+      if (event.key === "ArrowLeft" && currentInputValue.length === 0 && visibleSelectedValues.length > 0) {
         event.preventDefault();
         focusToken(visibleSelectedValues.length - 1);
       }
@@ -21782,7 +22122,6 @@ const useAutocompleteController = (props) => {
       focusToken,
       handleOptionSelect,
       isOpen,
-      multiple,
       navigationItems,
       readOnly,
       resolvedActiveIndex,
@@ -21794,10 +22133,10 @@ const useAutocompleteController = (props) => {
     (event) => {
       const nextTarget = event.relatedTarget;
       requestAnimationFrame(() => {
-        var _a2, _b2, _c2, _d;
+        var _a, _b, _c, _d;
         const activeElement2 = document.activeElement;
-        const isInsideRoot = nextTarget && ((_a2 = rootRef.current) == null ? void 0 : _a2.contains(nextTarget)) || activeElement2 && ((_b2 = rootRef.current) == null ? void 0 : _b2.contains(activeElement2));
-        const isInsideFloating = nextTarget && ((_c2 = floatingElementRef.current) == null ? void 0 : _c2.contains(nextTarget)) || activeElement2 && ((_d = floatingElementRef.current) == null ? void 0 : _d.contains(activeElement2));
+        const isInsideRoot = nextTarget && ((_a = rootRef.current) == null ? void 0 : _a.contains(nextTarget)) || activeElement2 && ((_b = rootRef.current) == null ? void 0 : _b.contains(activeElement2));
+        const isInsideFloating = nextTarget && ((_c = floatingElementRef.current) == null ? void 0 : _c.contains(nextTarget)) || activeElement2 && ((_d = floatingElementRef.current) == null ? void 0 : _d.contains(activeElement2));
         if (!isInsideRoot && !isInsideFloating) {
           setFocusedWithin(false);
           setActiveIndex(null);
@@ -21865,7 +22204,6 @@ const useAutocompleteController = (props) => {
     currentValue,
     density,
     disabled,
-    displayedInputValue,
     error: error2,
     floating,
     getFloatingProps,
@@ -21877,7 +22215,6 @@ const useAutocompleteController = (props) => {
     handleInputChange,
     handleInputFocus,
     handleInputKeyDown,
-    handleInputMouseDown,
     handleListScroll,
     handleOptionSelect,
     handleTokenDismiss,
@@ -21900,6 +22237,7 @@ const useAutocompleteController = (props) => {
     readOnly,
     rootRef,
     selectedLabels,
+    selectedOptions,
     selectedValues,
     setFloatingRef,
     setItemRef,
@@ -21925,7 +22263,6 @@ const Autocomplete = (props) => {
     currentValue,
     density,
     disabled,
-    displayedInputValue,
     error: error2,
     floating,
     getFloatingProps,
@@ -21937,7 +22274,6 @@ const Autocomplete = (props) => {
     handleInputChange,
     handleInputFocus,
     handleInputKeyDown,
-    handleInputMouseDown,
     handleListScroll,
     handleOptionSelect,
     handleTokenDismiss,
@@ -21960,6 +22296,7 @@ const Autocomplete = (props) => {
     readOnly,
     rootRef,
     selectedLabels,
+    selectedOptions,
     selectedValues,
     setFloatingRef,
     setItemRef,
@@ -22003,7 +22340,8 @@ const Autocomplete = (props) => {
             onMouseDown: handleControlMouseDown,
             children: [
               /* @__PURE__ */ jsxs(Box, { className: classes.valueContainer, children: [
-                multiple && visibleSelectedValues.map((selectedValue, index2) => {
+                visibleSelectedValues.map((selectedValue, index2) => {
+                  var _a;
                   const label2 = selectedLabels[index2] ?? selectedValue;
                   return /* @__PURE__ */ jsx(
                     AutocompleteToken,
@@ -22011,6 +22349,7 @@ const Autocomplete = (props) => {
                       className: classes.token,
                       size: chipSize,
                       label: label2,
+                      isNew: (_a = selectedOptions[index2]) == null ? void 0 : _a.created,
                       disabled: disabled || readOnly,
                       dismissButtonRef: (node) => setTokenRef(index2, node),
                       onDismiss: () => handleTokenDismiss(selectedValue, label2),
@@ -22051,13 +22390,12 @@ const Autocomplete = (props) => {
                     disabled,
                     readOnly,
                     placeholder: selectedValues.length === 0 ? placeholder : void 0,
-                    value: displayedInputValue,
+                    value: currentInputValue,
                     className: classes.input,
                     onChange: handleInputChange,
                     ...getReferenceProps({
                       onFocus: handleInputFocus,
-                      onKeyDown: handleInputKeyDown,
-                      onMouseDown: handleInputMouseDown
+                      onKeyDown: handleInputKeyDown
                     }),
                     autoComplete: "off"
                   }
@@ -22078,7 +22416,7 @@ const Autocomplete = (props) => {
             children: announcement
           }
         ),
-        isOpen && !disabled && !readOnly && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsx(
+        isOpen && !disabled && !readOnly && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: floating.elements.domReference, children: /* @__PURE__ */ jsx(
           FloatingFocusManager,
           {
             context: floating.context,
@@ -22174,6 +22512,7 @@ const getSelectedOptions = (options, value, multiple) => {
   return options.filter((option) => selectedValueSet.has(option.props.value));
 };
 const Select = (props) => {
+  const floatingLayer = useFloatingLayer();
   const {
     value: controlledValue,
     defaultValue = null,
@@ -22308,7 +22647,7 @@ const Select = (props) => {
   );
   const selectedOptions = getSelectedOptions(options, value, multiple);
   const classes = select({ size: size$12, multiple, autoSize });
-  const menuClasses = menu({ density });
+  const menuClasses = menu({ density, layer: floatingLayer });
   const hasValue = value !== null && value !== void 0 && value !== "";
   const chipSize = resolveChipSize(size$12);
   const accessibleName = typeof displayValue === "string" && displayValue.length > 0 ? displayValue : placeholder;
@@ -22430,7 +22769,7 @@ const Select = (props) => {
         children: /* @__PURE__ */ jsx(Icon, { name: "caret-down" })
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsx(
+    isOpen && !disabled && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: floating.elements.domReference, children: /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
         context: floating.context,
@@ -22777,6 +23116,7 @@ export {
   Chip,
   ChipGroup,
   Code,
+  ConfirmationModal,
   DateInput,
   DateMenu,
   DatePicker,
@@ -22810,6 +23150,7 @@ export {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  ModalWrapper,
   Option,
   Pre,
   Radio,
@@ -22847,13 +23188,14 @@ export {
   splitProps,
   useChipGroup,
   useContainerQuery,
+  useForm2 as useForm,
   useIconConfig,
   useListContext,
   useMediaQuery,
   useMenuFilterContext,
   useMenuListContext,
   useMenuRootContext,
-  useModalContext,
+  useModalWrapperContext,
   useTheme
 };
 //# sourceMappingURL=index.js.map