cetec-design-system 2.2.2-next.0 → 2.3.7

package/dist/{cetec-preset-CcvrY8wh.js → cetec-preset-CZJA5UR0.js}

@@ -593,658 +593,119 @@ const filtersProperty = defineUtility({
   className: "filters",
   values: "filters"
 });
-const animations = defineTokens.animations({
-  spin: {
-    value: "spin 1s linear infinite"
-  },
-  ping: {
-    value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
-  },
-  pulse: {
-    value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-  },
-  bounce: {
-    value: "bounce 1s infinite"
+const durations = defineTokens.durations({
+  fastest: {
+    value: "50ms"
   },
-  skeletonWave: {
-    value: "skeletonWave 2s linear 0.5s infinite"
-  }
-});
-const aspectRatios = defineTokens.aspectRatios({
-  square: {
-    value: "1 / 1"
+  faster: {
+    value: "100ms"
   },
-  landscape: {
-    value: "4 / 3"
+  fast: {
+    value: "150ms"
   },
-  portrait: {
-    value: "3 / 4"
+  normal: {
+    value: "200ms"
   },
-  wide: {
-    value: "16 / 9"
+  slow: {
+    value: "300ms"
   },
-  ultrawide: {
-    value: "18 / 5"
+  slower: {
+    value: "400ms"
   },
-  golden: {
-    value: "1.618 / 1"
+  slowest: {
+    value: "500ms"
   }
 });
-const blurs = defineTokens.blurs({
-  sm: {
-    value: "{sizes.4}"
-  },
-  base: {
-    value: "{sizes.8}"
-  },
-  md: {
-    value: "{sizes.12}"
+const easings = defineTokens.easings({
+  default: {
+    value: "cubic-bezier(0.4, 0, 0.2, 1)"
   },
-  lg: {
-    value: "{sizes.16}"
+  linear: {
+    value: "linear"
   },
-  xl: {
-    value: "{sizes.24}"
+  in: {
+    value: "cubic-bezier(0.4, 0, 1, 1)"
   },
-  "2xl": {
-    value: "{sizes.40}"
+  out: {
+    value: "cubic-bezier(0, 0, 0.2, 1)"
   },
-  "3xl": {
-    value: "{sizes.64}"
+  "in-out": {
+    value: "cubic-bezier(0.4, 0, 0.2, 1)"
   }
 });
-const borders = defineTokens.borders({
-  default: {
-    value: "{borderWidths.1} solid {colors.border}"
+const transitionProperties = {
+  all: {
+    value: "all"
   },
-  bold: {
-    value: "{borderWidths.2} solid {colors.border.bold}"
+  common: {
+    value: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform"
   },
-  inverse: {
-    value: "{borderWidths.1} solid {colors.border.inverse}"
+  colors: {
+    value: "background-color, border-color, color, fill, stroke"
   },
-  disabled: {
-    value: "{borderWidths.1} solid {colors.border.disabled}"
+  opacity: {
+    value: "opacity"
   },
-  input: {
-    value: "{borderWidths.1} solid {colors.border.input}"
+  shadow: {
+    value: "box-shadow"
   },
-  focused: {
-    value: "{borderWidths.2} solid {colors.border.focused}"
+  transform: {
+    value: "transform"
   },
-  success: {
-    value: "{borderWidths.1} solid {colors.border.success}"
+  position: {
+    value: "top, right, bottom, left"
   },
-  warning: {
-    value: "{borderWidths.1} solid {colors.border.warning}"
+  size: {
+    value: "width, height"
   },
-  danger: {
-    value: "{borderWidths.1} solid {colors.border.danger}"
+  spacing: {
+    value: "margin, padding"
   },
-  info: {
-    value: "{borderWidths.1} solid {colors.border.info}"
+  outline: {
+    value: "outline, outline-color, outline-offset"
   },
-  none: {
-    value: "none"
+  border: {
+    value: "border, border-color"
   }
-});
-const borderWidths = defineTokens.borderWidths({
-  "0": { value: "{sizes.0}" },
-  "1": { value: "{sizes.1}" },
-  "2": { value: "{sizes.2}" },
-  "4": { value: "{sizes.4}" },
-  "8": { value: "{sizes.8}" },
-  "16": { value: "{sizes.16}" }
-});
-const colors$1 = defineTokens.colors({
-  transparent: { value: "transparent" },
-  current: { value: "currentColor" },
-  inherit: { value: "inherit" },
-  neutral: {
-    "0": { value: "#FFFFFF" },
-    "10": { value: "#F8F8F8" },
-    "20": { value: "#F0F1F2" },
-    "30": { value: "#DDDEE1" },
-    "40": { value: "#B7B9BE" },
-    "50": { value: "#8C8F97" },
-    "60": { value: "#7D818A" },
-    "70": { value: "#6B6E76" },
-    "80": { value: "#505258" },
-    "90": { value: "#3B3D42" },
-    "100": { value: "#292A2E" },
-    "110": { value: "#1E1F21" }
+};
+({
+  all: {
+    value: `${transitionProperties.all} ${durations.normal} ${easings.default}`
   },
-  neutralA: {
-    "10": { value: "#17171708" },
-    "20": { value: "#1717170F" },
-    "30": { value: "#17171724" },
-    "40": { value: "#1717174A" },
-    "50": { value: "#17171775" }
+  common: {
+    value: `${transitionProperties.common} ${durations.normal} ${easings.default}`
   },
-  darkNeutral: {
-    "0": { value: "#18191A" },
-    "10": { value: "#1F1F21" },
-    "20": { value: "#242528" },
-    "25": { value: "#2B2C2F" },
-    "30": { value: "#303134" },
-    "35": { value: "#3D3F43" },
-    "40": { value: "#4B4D51" },
-    "50": { value: "#63666B" },
-    "60": { value: "#7E8188" },
-    "70": { value: "#96999E" },
-    "80": { value: "#A9ABAF" },
-    "90": { value: "#BFC1C4" },
-    "100": { value: "#CECFD2" },
-    "110": { value: "#E2E3E4" },
-    "120": { value: "#F1F1F2" }
+  colors: {
+    value: `${transitionProperties.colors} ${durations.normal} ${easings.default}`
   },
-  darkNeutralA: {
-    "-10": { value: "#01040475" },
-    "10": { value: "#BDBDBD0A" },
-    "20": { value: "#CECED912" },
-    "25": { value: "#D9DAE71A" },
-    "30": { value: "#E3E4F21F" },
-    "35": { value: "#E8EDFD2E" },
-    "40": { value: "#E5E9F640" },
-    "50": { value: "#E9F0FB5C" }
+  opacity: {
+    value: `${transitionProperties.opacity} ${durations.normal} ${easings.default}`
   },
-  slate: {
-    "0": { value: "#FFFFFF" },
-    "1": { value: "#FAFAFA" },
-    "2": { value: "#F9F8F6" },
-    "3": { value: "#F7F5F3" },
-    "4": { value: "#F6F3EF" },
-    "5": { value: "#F4F0EB" },
-    "10": { value: "#E3E1DE" },
-    "20": { value: "#CBCAC8" },
-    "30": { value: "#AFADAB" },
-    "40": { value: "#939190" },
-    "50": { value: "#767675" },
-    "60": { value: "#5F5F5E" },
-    "70": { value: "#474747" },
-    "80": { value: "#2E2E2E" },
-    "90": { value: "#1E1E1E" },
-    "100": { value: "#000000" }
+  shadow: {
+    value: `${transitionProperties.shadow} ${durations.normal} ${easings.default}`
   },
-  slate_inverse: {
-    "0": { value: "#000000" },
-    "1": { value: "#383838" },
-    "2": { value: "#474643" },
-    "3": { value: "#53504c" },
-    "4": { value: "#5d5954" },
-    "5": { value: "#66605e" },
-    "10": { value: "#8a8985" },
-    "20": { value: "#acabaa" },
-    "30": { value: "#cbc8c4" },
-    "40": { value: "#dfdcdb" },
-    "50": { value: "#eaeaea" },
-    "60": { value: "#f2f2f2" },
-    "70": { value: "#f8f8f8" },
-    "80": { value: "#fcfcfc" },
-    "90": { value: "#fefefe" },
-    "100": { value: "#ffffff" }
+  transform: {
+    value: `${transitionProperties.transform} ${durations.normal} ${easings.default}`
   },
-  gold: {
-    "1": { value: "#FFFCF4" },
-    "2": { value: "#FFF9E9" },
-    "3": { value: "#FEF6DE" },
-    "4": { value: "#FEF3D3" },
-    "5": { value: "#FEF0C8" },
-    "10": { value: "#FFE396" },
-    "15": { value: "#ffd162" },
-    "20": { value: "#FFBE2E" },
-    "30": { value: "#E5A000" },
-    "40": { value: "#C2850C" },
-    "50": { value: "#936F38" },
-    "60": { value: "#7A591A" },
-    "70": { value: "#5C410A" },
-    "80": { value: "#3B2B15" },
-    "90": { value: "#1E1100" }
+  position: {
+    value: `${transitionProperties.position} ${durations.normal} ${easings.default}`
   },
-  blue: {
-    "1": { value: "#FAFDFF" },
-    "2": { value: "#F6FBFF" },
-    "3": { value: "#F1F9FF" },
-    "4": { value: "#EDF7FF" },
-    "5": { value: "#E8F5FF" },
-    "10": { value: "#CFE8FF" },
-    "20": { value: "#A1D3FF" },
-    "30": { value: "#58B4FF" },
-    "40": { value: "#2491FF" },
-    "50": { value: "#0076DA" },
-    "60": { value: "#005EA2" },
-    "70": { value: "#0B4778" },
-    "80": { value: "#112F4E" },
-    "90": { value: "#11181D" }
-  },
-  green: {
-    "1": { value: "#F8FEF4" },
-    "2": { value: "#F1FDE9" },
-    "3": { value: "#EBFBDD" },
-    "4": { value: "#E4FAD2" },
-    "5": { value: "#DDF9C7" },
-    "10": { value: "#C5EE93" },
-    "20": { value: "#98D035" },
-    "30": { value: "#7FB135" },
-    "40": { value: "#719F2A" },
-    "50": { value: "#538200" },
-    "60": { value: "#466C04" },
-    "70": { value: "#2F4A0B" },
-    "80": { value: "#243413" },
-    "90": { value: "#0D1400" }
-  },
-  yellow: {
-    "1": { value: "#FFFDF3" },
-    "2": { value: "#FFFBE7" },
-    "3": { value: "#FFF9DA" },
-    "4": { value: "#FFF7CE" },
-    "5": { value: "#FFF5C2" },
-    "10": { value: "#FEE685" },
-    "20": { value: "#FACE00" },
-    "30": { value: "#DDAA01" },
-    "40": { value: "#B38C00" },
-    "50": { value: "#947100" },
-    "60": { value: "#776017" },
-    "70": { value: "#5C4809" },
-    "80": { value: "#422D19" },
-    "90": { value: "#1C0B00" }
-  },
-  red: {
-    "1": { value: "#FFF9FA" },
-    "2": { value: "#FFF3F5" },
-    "3": { value: "#FFEEF0" },
-    "4": { value: "#FFE8EB" },
-    "5": { value: "#FFE2E6" },
-    "10": { value: "#FFB1B8" },
-    "20": { value: "#FF7F8A" },
-    "30": { value: "#FF4D5B" },
-    "40": { value: "#FE1D2D" },
-    "50": { value: "#E50513" },
-    "60": { value: "#B3000E" },
-    "70": { value: "#810009" },
-    "80": { value: "#4F0004" },
-    "90": { value: "#200000" }
-  },
-  tomato: {
-    "5": { value: "#FFF3F2" },
-    "10": { value: "#FDE0DB" },
-    "20": { value: "#FDB8AE" },
-    "30": { value: "#FF8D7B" },
-    "40": { value: "#FB5A47" },
-    "50": { value: "#E52207" },
-    "60": { value: "#B50909" },
-    "70": { value: "#8B0A03" },
-    "80": { value: "#5C1111" },
-    "90": { value: "#200100" }
-  },
-  tan: {
-    "5": { value: "#F5F0E6" },
-    "10": { value: "#F1E5CD" },
-    "20": { value: "#DEC69A" },
-    "30": { value: "#C7A97B" },
-    "40": { value: "#AD8B65" },
-    "50": { value: "#8E704F" },
-    "60": { value: "#6B5947" },
-    "70": { value: "#4D4438" },
-    "80": { value: "#322D26" },
-    "90": { value: "#191714" }
-  },
-  orange: {
-    "5": { value: "#FFF9F3" },
-    "10": { value: "#FDDFBF" },
-    "20": { value: "#FAC58C" },
-    "30": { value: "#F8AA58" },
-    "40": { value: "#F59025" },
-    "50": { value: "#DC760A" },
-    "60": { value: "#AB5C08" },
-    "70": { value: "#7A4105" },
-    "80": { value: "#492703" },
-    "90": { value: "#180D01" }
-  },
-  pear: {
-    "5": { value: "#FDFDF6" },
-    "10": { value: "#F3F6CE" },
-    "20": { value: "#E9EEA6" },
-    "30": { value: "#E0E77E" },
-    "40": { value: "#D6E056" },
-    "50": { value: "#BFC93E" },
-    "60": { value: "#9CA437" },
-    "70": { value: "#797F2F" },
-    "80": { value: "#565A28" },
-    "90": { value: "#333520" }
-  },
-  grass: {
-    "5": { value: "#F5FBF7" },
-    "10": { value: "#CBEBD3" },
-    "20": { value: "#A1DAAE" },
-    "30": { value: "#76CA8A" },
-    "40": { value: "#4CB965" },
-    "50": { value: "#34A24E" },
-    "60": { value: "#2F8543" },
-    "70": { value: "#2A6838" },
-    "80": { value: "#244A2D" },
-    "90": { value: "#1F2D22" }
-  },
-  mint: {
-    "5": { value: "#F5FDFB" },
-    "10": { value: "#CFF5EA" },
-    "20": { value: "#A9ECD9" },
-    "30": { value: "#83E4C8" },
-    "40": { value: "#5DDBB7" },
-    "50": { value: "#45C4A0" },
-    "60": { value: "#3C9F83" },
-    "70": { value: "#327965" },
-    "80": { value: "#295448" },
-    "90": { value: "#1F2E2A" }
-  },
-  cyan: {
-    "5": { value: "#E7F6F8" },
-    "10": { value: "#CCECF2" },
-    "20": { value: "#99DEEA" },
-    "30": { value: "#5DC0D1" },
-    "40": { value: "#449DAC" },
-    "50": { value: "#168092" },
-    "60": { value: "#2A646D" },
-    "70": { value: "#2C4A4E" },
-    "80": { value: "#203133" },
-    "90": { value: "#111819" }
-  },
-  indigo: {
-    "5": { value: "#F9FAFD" },
-    "10": { value: "#CFD4EB" },
-    "20": { value: "#A5AEDA" },
-    "30": { value: "#7A89C8" },
-    "40": { value: "#5063B7" },
-    "50": { value: "#384CA1" },
-    "60": { value: "#334388" },
-    "70": { value: "#2E3A6E" },
-    "80": { value: "#293155" },
-    "90": { value: "#24283B" }
-  },
-  purple: {
-    "5": { value: "#F5F3FF" },
-    "10": { value: "#DDD1FD" },
-    "20": { value: "#C6B0FB" },
-    "30": { value: "#AE8EF9" },
-    "40": { value: "#976DF7" },
-    "50": { value: "#7F55E3" },
-    "60": { value: "#6746BD" },
-    "70": { value: "#4E3897" },
-    "80": { value: "#362971" },
-    "90": { value: "#1E1B4B" }
-  },
-  violet: {
-    "5": { value: "#FDF4FF" },
-    "10": { value: "#F4CAFB" },
-    "20": { value: "#EBA0F6" },
-    "30": { value: "#E276F2" },
-    "40": { value: "#D94CED" },
-    "50": { value: "#C531DA" },
-    "60": { value: "#A626B7" },
-    "70": { value: "#871B94" },
-    "80": { value: "#690F71" },
-    "90": { value: "#4A044E" }
-  },
-  pink: {
-    "5": { value: "#FFF9FB" },
-    "10": { value: "#FDDDE9" },
-    "20": { value: "#FBC1D7" },
-    "30": { value: "#FAA6C5" },
-    "40": { value: "#F88AB3" },
-    "50": { value: "#E3739D" },
-    "60": { value: "#BC6283" },
-    "70": { value: "#94506A" },
-    "80": { value: "#6D3F50" },
-    "90": { value: "#452D36" }
+  size: {
+    value: `${transitionProperties.size} ${durations.normal} ${easings.default}`
   },
-  rose: {
-    "5": { value: "#FFF1F2" },
-    "10": { value: "#FFCDDC" },
-    "20": { value: "#FFA8C5" },
-    "30": { value: "#FF84AF" },
-    "40": { value: "#FF5F98" },
-    "50": { value: "#EB4580" },
-    "60": { value: "#C33566" },
-    "70": { value: "#9C254D" },
-    "80": { value: "#741533" },
-    "90": { value: "#4C0519" }
+  spacing: {
+    value: `${transitionProperties.spacing} ${durations.normal} ${easings.default}`
   },
-  magenta: {
-    "5": { value: "#FEF6FA" },
-    "10": { value: "#FACEE6" },
-    "20": { value: "#F6A6D2" },
-    "30": { value: "#F37EBE" },
-    "40": { value: "#EF56AA" },
-    "50": { value: "#DA3E94" },
-    "60": { value: "#B4377C" },
-    "70": { value: "#8F3064" },
-    "80": { value: "#69284C" },
-    "90": { value: "#432134" }
+  outline: {
+    value: `${transitionProperties.outline} ${durations.normal} ${easings.default}`
   },
-  shadow: {
-    "8": { value: "hsl(0deg 0% 0% / 0.08)" },
-    "16": { value: "hsl(0deg 0% 0% / 0.16)" },
-    "24": { value: "hsl(0deg 0% 0% / 0.24)" },
-    "32": { value: "hsl(0deg 0% 0% / 0.32)" },
-    "40": { value: "hsl(0deg 0% 0% / 0.40)" },
-    "48": { value: "hsl(0deg 0% 0% / 0.48)" },
-    "56": { value: "hsl(0deg 0% 0% / 0.56)" },
-    "64": { value: "hsl(0deg 0% 0% / 0.64)" }
+  border: {
+    value: `${transitionProperties.border} ${durations.normal} ${easings.default}`
   }
 });
-const durations = defineTokens.durations({
-  fastest: {
-    value: "50ms"
-  },
-  faster: {
-    value: "100ms"
-  },
-  fast: {
-    value: "150ms"
-  },
-  normal: {
-    value: "200ms"
-  },
-  slow: {
-    value: "300ms"
-  },
-  slower: {
-    value: "400ms"
-  },
-  slowest: {
-    value: "500ms"
-  }
-});
-const easings = defineTokens.easings({
-  default: {
-    value: "cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  linear: {
-    value: "linear"
-  },
-  in: {
-    value: "cubic-bezier(0.4, 0, 1, 1)"
-  },
-  out: {
-    value: "cubic-bezier(0, 0, 0.2, 1)"
-  },
-  "in-out": {
-    value: "cubic-bezier(0.4, 0, 0.2, 1)"
-  }
-});
-const fonts = defineTokens.fonts({
-  heading: {
-    value: "'Ruda Variable', Source Sans, Geneva, Tahoma, Verdana, sans-serif;"
-  },
-  body: { value: "'Recursive Variable', Geneva, Tahoma, Verdana, sans-serif;" },
-  mono: {
-    value: "'Recursive Variable', Andale Mono, monaco, Consolas, Lucida Console, monospace;"
-  }
-});
-const fontSizes$2 = defineTokens.fontSizes({
-  "10": { value: "{sizes.10}" },
-  "12": { value: "{sizes.12}" },
-  "14": { value: "{sizes.14}" },
-  "16": { value: "{sizes.16}" },
-  "20": { value: "{sizes.20}" },
-  "24": { value: "{sizes.24}" },
-  "32": { value: "{sizes.32}" },
-  "40": { value: "{sizes.40}" },
-  "48": { value: "{sizes.48}" },
-  "64": { value: "{sizes.64}" },
-  "72": { value: "{sizes.72}" },
-  "80": { value: "{sizes.80}" },
-  "96": { value: "{sizes.96}" }
-});
-const fontWeights$1 = defineTokens.fontWeights({
-  light: { value: 300 },
-  normal: { value: 400 },
-  medium: { value: 500 },
-  bold: { value: 700 },
-  black: { value: 900 }
-});
-const letterSpacings = defineTokens.letterSpacings({
-  tighter: {
-    value: "-0.05em"
-  },
-  tight: {
-    value: "-0.025em"
-  },
-  normal: {
-    value: "0em"
-  },
-  wide: {
-    value: "0.025em"
-  },
-  wider: {
-    value: "0.05em"
-  },
-  widest: {
-    value: "0.1em"
-  }
-});
-const lineHeights = defineTokens.lineHeights({
-  none: {
-    value: "1"
-  },
-  tight: {
-    value: "calc(1em + 0.25rem)"
-    // 4
-  },
-  default: {
-    value: "calc(1em + 0.5rem)"
-    // 8
-  },
-  loose: {
-    value: "calc(1em + 0.75rem)"
-    // 12
-  }
-});
-const numericSizes = {
-  "0": { value: "0" },
-  "1": { value: "0.0625rem" },
-  "2": { value: "0.125rem" },
-  "3": { value: "0.1875rem" },
-  "4": { value: "0.25rem" },
-  "5": { value: "0.3125rem" },
-  "6": { value: "0.375rem" },
-  "7": { value: "0.4375rem" },
-  "8": { value: "0.5rem" },
-  "9": { value: "0.5625rem" },
-  "10": { value: "0.625rem" },
-  "12": { value: "0.75rem" },
-  "14": { value: "0.875rem" },
-  "16": { value: "1rem" },
-  "18": { value: "1.125rem" },
-  "20": { value: "1.25rem" },
-  "22": { value: "1.375rem" },
-  "24": { value: "1.5rem" },
-  "28": { value: "1.75rem" },
-  "32": { value: "2rem" },
-  "40": { value: "2.5rem" },
-  "48": { value: "3rem" },
-  "56": { value: "3.5rem" },
-  "64": { value: "4rem" },
-  "72": { value: "4.5rem" },
-  "80": { value: "5rem" },
-  "88": { value: "5.5rem" },
-  "96": { value: "6rem" },
-  "104": { value: "6.5rem" },
-  "112": { value: "7rem" },
-  "120": { value: "7.5rem" },
-  "128": { value: "8rem" },
-  "136": { value: "8.5rem" },
-  "144": { value: "9rem" },
-  "152": { value: "9.5rem" },
-  "160": { value: "10rem" },
-  "168": { value: "10.5rem" },
-  "176": { value: "11rem" },
-  "184": { value: "11.5rem" },
-  "192": { value: "12rem" },
-  "200": { value: "12.5rem" },
-  "208": { value: "13rem" },
-  "216": { value: "13.5rem" },
-  "224": { value: "14rem" },
-  "232": { value: "14.5rem" },
-  "240": { value: "15rem" },
-  "248": { value: "15.5rem" },
-  "256": { value: "16rem" },
-  "264": { value: "16.5rem" },
-  "272": { value: "17rem" },
-  "280": { value: "17.5rem" }
-};
-const utilitySizes = {
-  full: { value: "100%" },
-  half: { value: "50%" },
-  min: { value: "min-content" },
-  max: { value: "max-content" },
-  fit: { value: "fit-content" },
-  prose: { value: "65ch" },
-  auto: { value: "auto" }
-};
-const containerSizeTokens = {
-  "2xs": { value: "16rem" },
-  // 256px
-  xs: { value: "20rem" },
-  // 320px
-  sm: { value: "24rem" },
-  // 384px
-  md: { value: "28rem" },
-  // 448px
-  lg: { value: "32rem" },
-  // 512px
-  xl: { value: "36rem" },
-  // 576px
-  "2xl": { value: "42rem" },
-  // 672px
-  "3xl": { value: "48rem" },
-  // 768px
-  "4xl": { value: "56rem" },
-  // 896px
-  "5xl": { value: "64rem" },
-  // 1024px
-  "6xl": { value: "72rem" },
-  // 1152px
-  "7xl": { value: "80rem" },
-  // 1280px
-  "8xl": { value: "90rem" }
-  // 1440px
-};
-const sizes = defineTokens.sizes({
-  ...numericSizes,
-  ...utilitySizes,
-  ...containerSizeTokens
-});
-const radii = defineTokens.radii({
-  "0": { value: "{sizes.0}" },
-  "1": { value: "{sizes.1}" },
-  "2": { value: "{sizes.2}" },
-  "3": { value: "{sizes.3}" },
-  "4": { value: "{sizes.4}" },
-  "8": { value: "{sizes.8}" },
-  "16": { value: "{sizes.16}" },
-  "100": { value: utilitySizes["full"].value },
-  "999": { value: "999px" }
+const transitionProperty = defineUtility({
+  className: "transition-property",
+  values: "transitions"
 });
 const sizeToken = (value) => `{sizes.${value}}`;
 const colorToken = (value) => `{${value}}`;
@@ -1285,164 +746,31 @@ const getBoxShadowPrimitive = (name) => joinShadowLayers(
   formatBoxShadowLayer,
   ", "
 );
-const shadows$1 = defineTokens.shadows({
-  zeroBase: {
-    value: getBoxShadowPrimitive("zero")
-  },
-  raisedBase: {
-    value: getBoxShadowPrimitive("raised")
-  },
-  elevatedBase: {
-    value: getBoxShadowPrimitive("elevated")
-  },
-  overlayBase: {
-    value: getBoxShadowPrimitive("overlay")
-  },
-  overflowBase: {
-    value: getBoxShadowPrimitive("overflow")
-  }
-});
-const spacing$1 = defineTokens.spacing({
-  ...numericSizes,
-  ...utilitySizes
-});
-const zIndex$1 = defineTokens.zIndex({
-  "-1": { value: -1 },
-  "0": { value: 0 },
-  "1": { value: 1 },
-  "2": { value: 2 },
-  "3": { value: 3 },
-  "4": { value: 4 },
-  "5": { value: 5 },
-  "10": { value: 10 },
-  "1000": { value: 1e3 },
-  "1100": { value: 1100 },
-  "1101": { value: 1101 },
-  "1200": { value: 1200 }
-});
-const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  animations,
-  aspectRatios,
-  blurs,
-  borderWidths,
-  borders,
-  colors: colors$1,
-  containerSizeTokens,
-  durations,
-  easings,
-  fontSizes: fontSizes$2,
-  fontWeights: fontWeights$1,
-  fonts,
-  letterSpacings,
-  lineHeights,
-  numericSizes,
-  radii,
-  shadows: shadows$1,
-  sizes,
-  spacing: spacing$1,
-  utilitySizes,
-  zIndex: zIndex$1
-}, Symbol.toStringTag, { value: "Module" }));
-const transitionProperties = {
-  all: {
-    value: "all"
-  },
-  common: {
-    value: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform"
-  },
-  colors: {
-    value: "background-color, border-color, color, fill, stroke"
-  },
-  opacity: {
-    value: "opacity"
-  },
-  shadow: {
-    value: "box-shadow"
-  },
-  transform: {
-    value: "transform"
-  },
-  position: {
-    value: "top, right, bottom, left"
-  },
-  size: {
-    value: "width, height"
-  },
-  spacing: {
-    value: "margin, padding"
-  },
-  outline: {
-    value: "outline, outline-color, outline-offset"
-  },
-  border: {
-    value: "border, border-color"
-  }
-};
-({
-  all: {
-    value: `${transitionProperties.all} ${durations.normal} ${easings.default}`
-  },
-  common: {
-    value: `${transitionProperties.common} ${durations.normal} ${easings.default}`
-  },
-  colors: {
-    value: `${transitionProperties.colors} ${durations.normal} ${easings.default}`
-  },
-  opacity: {
-    value: `${transitionProperties.opacity} ${durations.normal} ${easings.default}`
-  },
-  shadow: {
-    value: `${transitionProperties.shadow} ${durations.normal} ${easings.default}`
-  },
-  transform: {
-    value: `${transitionProperties.transform} ${durations.normal} ${easings.default}`
-  },
-  position: {
-    value: `${transitionProperties.position} ${durations.normal} ${easings.default}`
-  },
-  size: {
-    value: `${transitionProperties.size} ${durations.normal} ${easings.default}`
-  },
-  spacing: {
-    value: `${transitionProperties.spacing} ${durations.normal} ${easings.default}`
-  },
-  outline: {
-    value: `${transitionProperties.outline} ${durations.normal} ${easings.default}`
-  },
-  border: {
-    value: `${transitionProperties.border} ${durations.normal} ${easings.default}`
-  }
-});
-const transitionProperty = defineUtility({
-  className: "transition-property",
-  values: "transitions"
-});
-const dropShadowValues = {
-  zero: "zero",
-  raised: "raised",
-  elevated: "elevated",
-  overlay: "overlay"
-};
-const resolveDropShadowValue = (value, token) => elevationShadowDefinitions[value].map((layer) => {
-  const x = token(`sizes.${layer.x}`);
-  const y = token(`sizes.${layer.y}`);
-  const blur = token(`sizes.${layer.blur}`);
-  const color = token(layer.color);
-  if (!x || !y || !blur || !color) {
-    throw new Error(`Unable to resolve dropShadow token for ${value}`);
-  }
-  return `drop-shadow(${x} ${y} ${blur} ${color})`;
-}).join(" ");
-const dropShadowProperty = defineUtility({
-  className: "drop-shadow",
-  group: "Effect",
-  values: dropShadowValues,
-  transform(value, ctx) {
-    return {
-      filter: filterAutoValue,
-      "--drop-shadow": resolveDropShadowValue(value, ctx.token)
-    };
+const dropShadowValues = {
+  zero: "zero",
+  raised: "raised",
+  elevated: "elevated",
+  overlay: "overlay"
+};
+const resolveDropShadowValue = (value, token) => elevationShadowDefinitions[value].map((layer) => {
+  const x = token(`sizes.${layer.x}`);
+  const y = token(`sizes.${layer.y}`);
+  const blur = token(`sizes.${layer.blur}`);
+  const color = token(layer.color);
+  if (!x || !y || !blur || !color) {
+    throw new Error(`Unable to resolve dropShadow token for ${value}`);
+  }
+  return `drop-shadow(${x} ${y} ${blur} ${color})`;
+}).join(" ");
+const dropShadowProperty = defineUtility({
+  className: "drop-shadow",
+  group: "Effect",
+  values: dropShadowValues,
+  transform(value, ctx) {
+    return {
+      filter: filterAutoValue,
+      "--drop-shadow": resolveDropShadowValue(value, ctx.token)
+    };
   }
 });
 const globalBaseStyles = {
@@ -3958,7 +3286,7 @@ var marginValues = (theme) => ({
   auto: "auto",
   ...theme("spacing")
 });
-var spacing = {
+var spacing$1 = {
   padding: {
     className: "p",
     shorthand: "p",
@@ -4687,7 +4015,7 @@ var utilities = Object.assign(
   layout,
   display,
   flexGrid,
-  spacing,
+  spacing$1,
   outline,
   focusRing,
   divide,
@@ -4800,6 +4128,28 @@ const textareaRecipe = defineRecipe({
     size: "md"
   }
 });
+const fontSizes$2 = defineTokens.fontSizes({
+  "10": { value: "{sizes.10}" },
+  "12": { value: "{sizes.12}" },
+  "14": { value: "{sizes.14}" },
+  "16": { value: "{sizes.16}" },
+  "20": { value: "{sizes.20}" },
+  "24": { value: "{sizes.24}" },
+  "32": { value: "{sizes.32}" },
+  "40": { value: "{sizes.40}" },
+  "48": { value: "{sizes.48}" },
+  "64": { value: "{sizes.64}" },
+  "72": { value: "{sizes.72}" },
+  "80": { value: "{sizes.80}" },
+  "96": { value: "{sizes.96}" }
+});
+const fontWeights$1 = defineTokens.fontWeights({
+  light: { value: 300 },
+  normal: { value: 400 },
+  medium: { value: 500 },
+  bold: { value: 700 },
+  black: { value: 900 }
+});
 const textBase = {
   ...globalBaseStyles,
   fontFamily: "body",
@@ -5827,53 +5177,703 @@ const tagRecipe = defineRecipe({
     }
   ]
 });
-const radioInputBase = {
-  display: "flex",
-  alignItems: "flex-start",
-  gap: "4",
-  "&.cetec-label": {
-    fontSize: "16",
-    lineHeight: "default"
+const radioInputBase = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "4",
+  "&.cetec-label": {
+    fontSize: "16",
+    lineHeight: "default"
+  },
+  _disabled: {
+    opacity: 0.4,
+    cursor: "not-allowed"
+  },
+  _groupDisabled: {
+    opacity: 1
+    // let FormField handle disabled state opacity
+  }
+};
+const radioInputRecipe = defineRecipe({
+  className: "radioInput",
+  jsx: ["RadioInput"],
+  base: radioInputBase,
+  variants: {}
+});
+const checkboxInputBase = {
+  ...globalBaseStyles,
+  display: "flex",
+  alignItems: "start",
+  gap: "4",
+  "&.cetec-label": {
+    fontSize: "16",
+    lineHeight: "default"
+  },
+  _disabled: {
+    opacity: 0.4,
+    cursor: "not-allowed"
+  },
+  _groupDisabled: {
+    opacity: 1
+    // let FormField handle disabled state opacity
+  }
+};
+const checkboxInputRecipe = defineRecipe({
+  className: "checkboxInput",
+  jsx: ["CheckboxInput"],
+  base: checkboxInputBase,
+  variants: {}
+});
+const animations = defineTokens.animations({
+  spin: {
+    value: "spin 1s linear infinite"
+  },
+  ping: {
+    value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
+  },
+  pulse: {
+    value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+  },
+  bounce: {
+    value: "bounce 1s infinite"
+  },
+  skeletonWave: {
+    value: "skeletonWave 2s linear 0.5s infinite"
+  }
+});
+const aspectRatios = defineTokens.aspectRatios({
+  square: {
+    value: "1 / 1"
+  },
+  landscape: {
+    value: "4 / 3"
+  },
+  portrait: {
+    value: "3 / 4"
+  },
+  wide: {
+    value: "16 / 9"
+  },
+  ultrawide: {
+    value: "18 / 5"
+  },
+  golden: {
+    value: "1.618 / 1"
+  }
+});
+const blurs = defineTokens.blurs({
+  sm: {
+    value: "{sizes.4}"
+  },
+  base: {
+    value: "{sizes.8}"
+  },
+  md: {
+    value: "{sizes.12}"
+  },
+  lg: {
+    value: "{sizes.16}"
+  },
+  xl: {
+    value: "{sizes.24}"
+  },
+  "2xl": {
+    value: "{sizes.40}"
+  },
+  "3xl": {
+    value: "{sizes.64}"
+  }
+});
+const borders = defineTokens.borders({
+  default: {
+    value: "{borderWidths.1} solid {colors.border}"
+  },
+  bold: {
+    value: "{borderWidths.2} solid {colors.border.bold}"
+  },
+  inverse: {
+    value: "{borderWidths.1} solid {colors.border.inverse}"
+  },
+  disabled: {
+    value: "{borderWidths.1} solid {colors.border.disabled}"
+  },
+  input: {
+    value: "{borderWidths.1} solid {colors.border.input}"
+  },
+  focused: {
+    value: "{borderWidths.2} solid {colors.border.focused}"
+  },
+  success: {
+    value: "{borderWidths.1} solid {colors.border.success}"
+  },
+  warning: {
+    value: "{borderWidths.1} solid {colors.border.warning}"
+  },
+  danger: {
+    value: "{borderWidths.1} solid {colors.border.danger}"
+  },
+  info: {
+    value: "{borderWidths.1} solid {colors.border.info}"
+  },
+  none: {
+    value: "none"
+  }
+});
+const borderWidths = defineTokens.borderWidths({
+  "0": { value: "{sizes.0}" },
+  "1": { value: "{sizes.1}" },
+  "2": { value: "{sizes.2}" },
+  "4": { value: "{sizes.4}" },
+  "8": { value: "{sizes.8}" },
+  "16": { value: "{sizes.16}" }
+});
+const colors$1 = defineTokens.colors({
+  transparent: { value: "transparent" },
+  current: { value: "currentColor" },
+  inherit: { value: "inherit" },
+  neutral: {
+    "0": { value: "#FFFFFF" },
+    "10": { value: "#F8F8F8" },
+    "20": { value: "#F0F1F2" },
+    "30": { value: "#DDDEE1" },
+    "40": { value: "#B7B9BE" },
+    "50": { value: "#8C8F97" },
+    "60": { value: "#7D818A" },
+    "70": { value: "#6B6E76" },
+    "80": { value: "#505258" },
+    "90": { value: "#3B3D42" },
+    "100": { value: "#292A2E" },
+    "110": { value: "#1E1F21" }
+  },
+  neutralA: {
+    "10": { value: "#17171708" },
+    "20": { value: "#1717170F" },
+    "30": { value: "#17171724" },
+    "40": { value: "#1717174A" },
+    "50": { value: "#17171775" }
+  },
+  darkNeutral: {
+    "0": { value: "#18191A" },
+    "10": { value: "#1F1F21" },
+    "20": { value: "#242528" },
+    "25": { value: "#2B2C2F" },
+    "30": { value: "#303134" },
+    "35": { value: "#3D3F43" },
+    "40": { value: "#4B4D51" },
+    "50": { value: "#63666B" },
+    "60": { value: "#7E8188" },
+    "70": { value: "#96999E" },
+    "80": { value: "#A9ABAF" },
+    "90": { value: "#BFC1C4" },
+    "100": { value: "#CECFD2" },
+    "110": { value: "#E2E3E4" },
+    "120": { value: "#F1F1F2" }
+  },
+  darkNeutralA: {
+    "-10": { value: "#01040475" },
+    "10": { value: "#BDBDBD0A" },
+    "20": { value: "#CECED912" },
+    "25": { value: "#D9DAE71A" },
+    "30": { value: "#E3E4F21F" },
+    "35": { value: "#E8EDFD2E" },
+    "40": { value: "#E5E9F640" },
+    "50": { value: "#E9F0FB5C" }
+  },
+  slate: {
+    "0": { value: "#FFFFFF" },
+    "1": { value: "#FAFAFA" },
+    "2": { value: "#F9F8F6" },
+    "3": { value: "#F7F5F3" },
+    "4": { value: "#F6F3EF" },
+    "5": { value: "#F4F0EB" },
+    "10": { value: "#E3E1DE" },
+    "20": { value: "#CBCAC8" },
+    "30": { value: "#AFADAB" },
+    "40": { value: "#939190" },
+    "50": { value: "#767675" },
+    "60": { value: "#5F5F5E" },
+    "70": { value: "#474747" },
+    "80": { value: "#2E2E2E" },
+    "90": { value: "#1E1E1E" },
+    "100": { value: "#000000" }
+  },
+  slate_inverse: {
+    "0": { value: "#000000" },
+    "1": { value: "#383838" },
+    "2": { value: "#474643" },
+    "3": { value: "#53504c" },
+    "4": { value: "#5d5954" },
+    "5": { value: "#66605e" },
+    "10": { value: "#8a8985" },
+    "20": { value: "#acabaa" },
+    "30": { value: "#cbc8c4" },
+    "40": { value: "#dfdcdb" },
+    "50": { value: "#eaeaea" },
+    "60": { value: "#f2f2f2" },
+    "70": { value: "#f8f8f8" },
+    "80": { value: "#fcfcfc" },
+    "90": { value: "#fefefe" },
+    "100": { value: "#ffffff" }
+  },
+  gold: {
+    "1": { value: "#FFFCF4" },
+    "2": { value: "#FFF9E9" },
+    "3": { value: "#FEF6DE" },
+    "4": { value: "#FEF3D3" },
+    "5": { value: "#FEF0C8" },
+    "10": { value: "#FFE396" },
+    "15": { value: "#ffd162" },
+    "20": { value: "#FFBE2E" },
+    "30": { value: "#E5A000" },
+    "40": { value: "#C2850C" },
+    "50": { value: "#936F38" },
+    "60": { value: "#7A591A" },
+    "70": { value: "#5C410A" },
+    "80": { value: "#3B2B15" },
+    "90": { value: "#1E1100" }
+  },
+  blue: {
+    "1": { value: "#FAFDFF" },
+    "2": { value: "#F6FBFF" },
+    "3": { value: "#F1F9FF" },
+    "4": { value: "#EDF7FF" },
+    "5": { value: "#E8F5FF" },
+    "10": { value: "#CFE8FF" },
+    "20": { value: "#A1D3FF" },
+    "30": { value: "#58B4FF" },
+    "40": { value: "#2491FF" },
+    "50": { value: "#0076DA" },
+    "60": { value: "#005EA2" },
+    "70": { value: "#0B4778" },
+    "80": { value: "#112F4E" },
+    "90": { value: "#11181D" }
+  },
+  green: {
+    "1": { value: "#F8FEF4" },
+    "2": { value: "#F1FDE9" },
+    "3": { value: "#EBFBDD" },
+    "4": { value: "#E4FAD2" },
+    "5": { value: "#DDF9C7" },
+    "10": { value: "#C5EE93" },
+    "20": { value: "#98D035" },
+    "30": { value: "#7FB135" },
+    "40": { value: "#719F2A" },
+    "50": { value: "#538200" },
+    "60": { value: "#466C04" },
+    "70": { value: "#2F4A0B" },
+    "80": { value: "#243413" },
+    "90": { value: "#0D1400" }
+  },
+  yellow: {
+    "1": { value: "#FFFDF3" },
+    "2": { value: "#FFFBE7" },
+    "3": { value: "#FFF9DA" },
+    "4": { value: "#FFF7CE" },
+    "5": { value: "#FFF5C2" },
+    "10": { value: "#FEE685" },
+    "20": { value: "#FACE00" },
+    "30": { value: "#DDAA01" },
+    "40": { value: "#B38C00" },
+    "50": { value: "#947100" },
+    "60": { value: "#776017" },
+    "70": { value: "#5C4809" },
+    "80": { value: "#422D19" },
+    "90": { value: "#1C0B00" }
+  },
+  red: {
+    "1": { value: "#FFF9FA" },
+    "2": { value: "#FFF3F5" },
+    "3": { value: "#FFEEF0" },
+    "4": { value: "#FFE8EB" },
+    "5": { value: "#FFE2E6" },
+    "10": { value: "#FFB1B8" },
+    "20": { value: "#FF7F8A" },
+    "30": { value: "#FF4D5B" },
+    "40": { value: "#FE1D2D" },
+    "50": { value: "#E50513" },
+    "60": { value: "#B3000E" },
+    "70": { value: "#810009" },
+    "80": { value: "#4F0004" },
+    "90": { value: "#200000" }
+  },
+  tomato: {
+    "5": { value: "#FFF3F2" },
+    "10": { value: "#FDE0DB" },
+    "20": { value: "#FDB8AE" },
+    "30": { value: "#FF8D7B" },
+    "40": { value: "#FB5A47" },
+    "50": { value: "#E52207" },
+    "60": { value: "#B50909" },
+    "70": { value: "#8B0A03" },
+    "80": { value: "#5C1111" },
+    "90": { value: "#200100" }
+  },
+  tan: {
+    "5": { value: "#F5F0E6" },
+    "10": { value: "#F1E5CD" },
+    "20": { value: "#DEC69A" },
+    "30": { value: "#C7A97B" },
+    "40": { value: "#AD8B65" },
+    "50": { value: "#8E704F" },
+    "60": { value: "#6B5947" },
+    "70": { value: "#4D4438" },
+    "80": { value: "#322D26" },
+    "90": { value: "#191714" }
+  },
+  orange: {
+    "5": { value: "#FFF9F3" },
+    "10": { value: "#FDDFBF" },
+    "20": { value: "#FAC58C" },
+    "30": { value: "#F8AA58" },
+    "40": { value: "#F59025" },
+    "50": { value: "#DC760A" },
+    "60": { value: "#AB5C08" },
+    "70": { value: "#7A4105" },
+    "80": { value: "#492703" },
+    "90": { value: "#180D01" }
+  },
+  pear: {
+    "5": { value: "#FDFDF6" },
+    "10": { value: "#F3F6CE" },
+    "20": { value: "#E9EEA6" },
+    "30": { value: "#E0E77E" },
+    "40": { value: "#D6E056" },
+    "50": { value: "#BFC93E" },
+    "60": { value: "#9CA437" },
+    "70": { value: "#797F2F" },
+    "80": { value: "#565A28" },
+    "90": { value: "#333520" }
+  },
+  grass: {
+    "5": { value: "#F5FBF7" },
+    "10": { value: "#CBEBD3" },
+    "20": { value: "#A1DAAE" },
+    "30": { value: "#76CA8A" },
+    "40": { value: "#4CB965" },
+    "50": { value: "#34A24E" },
+    "60": { value: "#2F8543" },
+    "70": { value: "#2A6838" },
+    "80": { value: "#244A2D" },
+    "90": { value: "#1F2D22" }
+  },
+  mint: {
+    "5": { value: "#F5FDFB" },
+    "10": { value: "#CFF5EA" },
+    "20": { value: "#A9ECD9" },
+    "30": { value: "#83E4C8" },
+    "40": { value: "#5DDBB7" },
+    "50": { value: "#45C4A0" },
+    "60": { value: "#3C9F83" },
+    "70": { value: "#327965" },
+    "80": { value: "#295448" },
+    "90": { value: "#1F2E2A" }
+  },
+  cyan: {
+    "5": { value: "#E7F6F8" },
+    "10": { value: "#CCECF2" },
+    "20": { value: "#99DEEA" },
+    "30": { value: "#5DC0D1" },
+    "40": { value: "#449DAC" },
+    "50": { value: "#168092" },
+    "60": { value: "#2A646D" },
+    "70": { value: "#2C4A4E" },
+    "80": { value: "#203133" },
+    "90": { value: "#111819" }
+  },
+  indigo: {
+    "5": { value: "#F9FAFD" },
+    "10": { value: "#CFD4EB" },
+    "20": { value: "#A5AEDA" },
+    "30": { value: "#7A89C8" },
+    "40": { value: "#5063B7" },
+    "50": { value: "#384CA1" },
+    "60": { value: "#334388" },
+    "70": { value: "#2E3A6E" },
+    "80": { value: "#293155" },
+    "90": { value: "#24283B" }
+  },
+  purple: {
+    "5": { value: "#F5F3FF" },
+    "10": { value: "#DDD1FD" },
+    "20": { value: "#C6B0FB" },
+    "30": { value: "#AE8EF9" },
+    "40": { value: "#976DF7" },
+    "50": { value: "#7F55E3" },
+    "60": { value: "#6746BD" },
+    "70": { value: "#4E3897" },
+    "80": { value: "#362971" },
+    "90": { value: "#1E1B4B" }
+  },
+  violet: {
+    "5": { value: "#FDF4FF" },
+    "10": { value: "#F4CAFB" },
+    "20": { value: "#EBA0F6" },
+    "30": { value: "#E276F2" },
+    "40": { value: "#D94CED" },
+    "50": { value: "#C531DA" },
+    "60": { value: "#A626B7" },
+    "70": { value: "#871B94" },
+    "80": { value: "#690F71" },
+    "90": { value: "#4A044E" }
+  },
+  pink: {
+    "5": { value: "#FFF9FB" },
+    "10": { value: "#FDDDE9" },
+    "20": { value: "#FBC1D7" },
+    "30": { value: "#FAA6C5" },
+    "40": { value: "#F88AB3" },
+    "50": { value: "#E3739D" },
+    "60": { value: "#BC6283" },
+    "70": { value: "#94506A" },
+    "80": { value: "#6D3F50" },
+    "90": { value: "#452D36" }
+  },
+  rose: {
+    "5": { value: "#FFF1F2" },
+    "10": { value: "#FFCDDC" },
+    "20": { value: "#FFA8C5" },
+    "30": { value: "#FF84AF" },
+    "40": { value: "#FF5F98" },
+    "50": { value: "#EB4580" },
+    "60": { value: "#C33566" },
+    "70": { value: "#9C254D" },
+    "80": { value: "#741533" },
+    "90": { value: "#4C0519" }
+  },
+  magenta: {
+    "5": { value: "#FEF6FA" },
+    "10": { value: "#FACEE6" },
+    "20": { value: "#F6A6D2" },
+    "30": { value: "#F37EBE" },
+    "40": { value: "#EF56AA" },
+    "50": { value: "#DA3E94" },
+    "60": { value: "#B4377C" },
+    "70": { value: "#8F3064" },
+    "80": { value: "#69284C" },
+    "90": { value: "#432134" }
+  },
+  shadow: {
+    "8": { value: "hsl(0deg 0% 0% / 0.08)" },
+    "16": { value: "hsl(0deg 0% 0% / 0.16)" },
+    "24": { value: "hsl(0deg 0% 0% / 0.24)" },
+    "32": { value: "hsl(0deg 0% 0% / 0.32)" },
+    "40": { value: "hsl(0deg 0% 0% / 0.40)" },
+    "48": { value: "hsl(0deg 0% 0% / 0.48)" },
+    "56": { value: "hsl(0deg 0% 0% / 0.56)" },
+    "64": { value: "hsl(0deg 0% 0% / 0.64)" }
+  }
+});
+const fonts = defineTokens.fonts({
+  heading: {
+    value: "'Ruda Variable', Source Sans, Geneva, Tahoma, Verdana, sans-serif;"
   },
-  _disabled: {
-    opacity: 0.4,
-    cursor: "not-allowed"
+  body: { value: "'Recursive Variable', Geneva, Tahoma, Verdana, sans-serif;" },
+  mono: {
+    value: "'Recursive Variable', Andale Mono, monaco, Consolas, Lucida Console, monospace;"
+  }
+});
+const letterSpacings = defineTokens.letterSpacings({
+  tighter: {
+    value: "-0.05em"
   },
-  _groupDisabled: {
-    opacity: 1
-    // let FormField handle disabled state opacity
+  tight: {
+    value: "-0.025em"
+  },
+  normal: {
+    value: "0em"
+  },
+  wide: {
+    value: "0.025em"
+  },
+  wider: {
+    value: "0.05em"
+  },
+  widest: {
+    value: "0.1em"
   }
-};
-const radioInputRecipe = defineRecipe({
-  className: "radioInput",
-  jsx: ["RadioInput"],
-  base: radioInputBase,
-  variants: {}
 });
-const checkboxInputBase = {
-  ...globalBaseStyles,
-  display: "flex",
-  alignItems: "start",
-  gap: "4",
-  "&.cetec-label": {
-    fontSize: "16",
-    lineHeight: "default"
+const lineHeights = defineTokens.lineHeights({
+  none: {
+    value: "1"
   },
-  _disabled: {
-    opacity: 0.4,
-    cursor: "not-allowed"
+  tight: {
+    value: "calc(1em + 0.25rem)"
+    // 4
   },
-  _groupDisabled: {
-    opacity: 1
-    // let FormField handle disabled state opacity
+  default: {
+    value: "calc(1em + 0.5rem)"
+    // 8
+  },
+  loose: {
+    value: "calc(1em + 0.75rem)"
+    // 12
   }
+});
+const numericSizes = {
+  "0": { value: "0" },
+  "1": { value: "0.0625rem" },
+  "2": { value: "0.125rem" },
+  "3": { value: "0.1875rem" },
+  "4": { value: "0.25rem" },
+  "5": { value: "0.3125rem" },
+  "6": { value: "0.375rem" },
+  "7": { value: "0.4375rem" },
+  "8": { value: "0.5rem" },
+  "9": { value: "0.5625rem" },
+  "10": { value: "0.625rem" },
+  "12": { value: "0.75rem" },
+  "14": { value: "0.875rem" },
+  "16": { value: "1rem" },
+  "18": { value: "1.125rem" },
+  "20": { value: "1.25rem" },
+  "22": { value: "1.375rem" },
+  "24": { value: "1.5rem" },
+  "28": { value: "1.75rem" },
+  "32": { value: "2rem" },
+  "40": { value: "2.5rem" },
+  "48": { value: "3rem" },
+  "56": { value: "3.5rem" },
+  "64": { value: "4rem" },
+  "72": { value: "4.5rem" },
+  "80": { value: "5rem" },
+  "88": { value: "5.5rem" },
+  "96": { value: "6rem" },
+  "104": { value: "6.5rem" },
+  "112": { value: "7rem" },
+  "120": { value: "7.5rem" },
+  "128": { value: "8rem" },
+  "136": { value: "8.5rem" },
+  "144": { value: "9rem" },
+  "152": { value: "9.5rem" },
+  "160": { value: "10rem" },
+  "168": { value: "10.5rem" },
+  "176": { value: "11rem" },
+  "184": { value: "11.5rem" },
+  "192": { value: "12rem" },
+  "200": { value: "12.5rem" },
+  "208": { value: "13rem" },
+  "216": { value: "13.5rem" },
+  "224": { value: "14rem" },
+  "232": { value: "14.5rem" },
+  "240": { value: "15rem" },
+  "248": { value: "15.5rem" },
+  "256": { value: "16rem" },
+  "264": { value: "16.5rem" },
+  "272": { value: "17rem" },
+  "280": { value: "17.5rem" }
 };
-const checkboxInputRecipe = defineRecipe({
-  className: "checkboxInput",
-  jsx: ["CheckboxInput"],
-  base: checkboxInputBase,
-  variants: {}
+const utilitySizes = {
+  full: { value: "100%" },
+  half: { value: "50%" },
+  min: { value: "min-content" },
+  max: { value: "max-content" },
+  fit: { value: "fit-content" },
+  prose: { value: "65ch" },
+  auto: { value: "auto" }
+};
+const containerSizeTokens = {
+  "2xs": { value: "16rem" },
+  // 256px
+  xs: { value: "20rem" },
+  // 320px
+  sm: { value: "24rem" },
+  // 384px
+  md: { value: "28rem" },
+  // 448px
+  lg: { value: "32rem" },
+  // 512px
+  xl: { value: "36rem" },
+  // 576px
+  "2xl": { value: "42rem" },
+  // 672px
+  "3xl": { value: "48rem" },
+  // 768px
+  "4xl": { value: "56rem" },
+  // 896px
+  "5xl": { value: "64rem" },
+  // 1024px
+  "6xl": { value: "72rem" },
+  // 1152px
+  "7xl": { value: "80rem" },
+  // 1280px
+  "8xl": { value: "90rem" }
+  // 1440px
+};
+const sizes = defineTokens.sizes({
+  ...numericSizes,
+  ...utilitySizes,
+  ...containerSizeTokens
+});
+const radii = defineTokens.radii({
+  "0": { value: "{sizes.0}" },
+  "1": { value: "{sizes.1}" },
+  "2": { value: "{sizes.2}" },
+  "3": { value: "{sizes.3}" },
+  "4": { value: "{sizes.4}" },
+  "8": { value: "{sizes.8}" },
+  "16": { value: "{sizes.16}" },
+  "100": { value: utilitySizes["full"].value },
+  "999": { value: "999px" }
+});
+const shadows$1 = defineTokens.shadows({
+  zeroBase: {
+    value: getBoxShadowPrimitive("zero")
+  },
+  raisedBase: {
+    value: getBoxShadowPrimitive("raised")
+  },
+  elevatedBase: {
+    value: getBoxShadowPrimitive("elevated")
+  },
+  overlayBase: {
+    value: getBoxShadowPrimitive("overlay")
+  },
+  overflowBase: {
+    value: getBoxShadowPrimitive("overflow")
+  }
+});
+const spacing = defineTokens.spacing({
+  ...numericSizes,
+  ...utilitySizes
+});
+const zIndex$1 = defineTokens.zIndex({
+  "-1": { value: -1 },
+  "0": { value: 0 },
+  "1": { value: 1 },
+  "2": { value: 2 },
+  "3": { value: 3 },
+  "4": { value: 4 },
+  "5": { value: 5 },
+  "10": { value: 10 },
+  "1000": { value: 1e3 },
+  "1100": { value: 1100 },
+  "1101": { value: 1101 },
+  "1200": { value: 1200 }
 });
+const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  animations,
+  aspectRatios,
+  blurs,
+  borderWidths,
+  borders,
+  colors: colors$1,
+  containerSizeTokens,
+  durations,
+  easings,
+  fontSizes: fontSizes$2,
+  fontWeights: fontWeights$1,
+  fonts,
+  letterSpacings,
+  lineHeights,
+  numericSizes,
+  radii,
+  shadows: shadows$1,
+  sizes,
+  spacing,
+  utilitySizes,
+  zIndex: zIndex$1
+}, Symbol.toStringTag, { value: "Module" }));
 const sizeVariants = Object.fromEntries(
   Object.keys(numericSizes).map((key) => [key, { w: key }])
 );
@@ -7434,7 +7434,12 @@ const chipRecipe = defineSlotRecipe({
       aspectRatio: "square",
       ...buttonStyles,
       w: "calc(var(--slot-size) + (var(--slot-px) * 2))",
-      h: "calc(var(--slot-size) + (var(--slot-px) * 2))"
+      h: "calc(var(--slot-size) + (var(--slot-px) * 2))",
+      _icon: {
+        fill: "icon.decorative",
+        width: "var(--slot-size)",
+        height: "var(--slot-size)"
+      }
     },
     slot: {
       display: "inline-flex",
@@ -7883,18 +7888,71 @@ const modalRecipe = defineSlotRecipe({
     position: "centered"
   }
 });
-const datePickerBase = {
+const breadcrumbsRecipe = defineSlotRecipe({
+  className: "breadcrumbs",
+  jsx: ["Breadcrumbs"],
+  slots: ["wrapper", "slash", "linkSegment", "currentSegment"],
+  base: {
+    wrapper: {
+      ...globalBaseStyles,
+      display: "flex",
+      gap: "6",
+      alignItems: "center",
+      fontFamily: "mono",
+      fontSize: "14",
+      "& li": {
+        display: "flex",
+        gap: "6",
+        alignItems: "center"
+      }
+    },
+    slash: {
+      fontFamily: "mono",
+      fontSize: "14",
+      color: "text.placeholder"
+    },
+    linkSegment: {
+      fontFamily: "mono",
+      fontSize: "14",
+      color: "text.subtlest",
+      fontWeight: "normal",
+      whiteSpace: "nowrap",
+      _hover: {
+        color: "link"
+      },
+      _focusVisible: {
+        color: "blue.50"
+      }
+    },
+    currentSegment: {
+      fontFamily: "mono",
+      fontSize: "14",
+      color: "text",
+      fontWeight: "bold",
+      whiteSpace: "nowrap"
+    }
+  }
+});
+const selectBase = {
   root: {
+    "--icon-size": "token(sizes.24)",
+    "--icon-margin": "token(sizes.3)",
+    "--input-icon-padding": "token(sizes.10)",
     display: "inline-flex",
     flexDirection: "column",
-    position: "relative"
+    position: "relative",
+    minWidth: "0",
+    maxW: "full",
+    width: "fit"
   },
-  // The segmented input container — visually identical to textinput
-  input: {
+  trigger: {
+    position: "relative",
     display: "inline-flex",
     alignItems: "center",
-    gap: "0",
-    width: "full",
+    width: "fit",
+    minWidth: "0",
+    maxWidth: "full",
+    pe: "var(--input-icon-padding)",
     borderWidth: "1",
     borderStyle: "solid",
     borderColor: "border.input",
@@ -7905,14 +7963,17 @@ const datePickerBase = {
     outlineColor: "transparent",
     bg: "bg.input",
     color: "text",
-    fontFamily: "mono",
+    fontFamily: "body",
     lineHeight: "default",
-    cursor: "text",
-    userSelect: "none",
+    cursor: "pointer",
+    overflow: "hidden",
     transitionDuration: "fast",
     transitionProperty: "background, border-color, outline-color",
     transitionTimingFunction: "default",
-    _focusWithin: {
+    _hover: {
+      bg: "bg.input.hovered"
+    },
+    _focusVisible: {
       bg: "bg.input.pressed",
       borderColor: "border.focused",
       outlineColor: "border.focused"
@@ -7934,7 +7995,7 @@ const datePickerBase = {
       _hover: {
         borderColor: "border.danger"
       },
-      _focusWithin: {
+      _focusVisible: {
         borderColor: "border.danger",
         outlineColor: "border.danger"
       },
@@ -7944,424 +8005,599 @@ const datePickerBase = {
       }
     }
   },
-  // Individual focusable segment span (MM, DD, YYYY)
-  segment: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    outline: "none",
-    borderRadius: "2",
-    cursor: "default",
-    userSelect: "none",
-    fontFamily: "mono",
-    fontVariantsProperty: "mono",
-    fontVariantNumeric: "tabular-nums",
-    minWidth: "1.5em",
-    textAlign: "center",
-    color: "text",
-    _focusVisible: {
-      bg: "bg.neutral.hovered"
-    },
-    _groupDisabled: {
-      color: "text.disabled"
-    }
-  },
-  // The "/" or " " literal between date segments
-  separator: {
-    color: "text.placeholder",
-    userSelect: "none",
-    display: "inline-flex",
-    alignItems: "center"
-  },
-  // The floating calendar container
-  popover: {
-    display: "flex",
-    flexDirection: "column",
-    bg: "surface.overlay",
-    borderWidth: "1",
-    borderStyle: "solid",
-    borderColor: "border",
-    borderRadius: "8",
-    boxShadow: "overlay",
-    zIndex: 1e3,
-    width: "280",
-    overflow: "hidden",
-    outline: "none"
-  },
-  // Month/year navigation row
-  calendarHeader: {
-    fontFamily: "mono",
+  content: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    px: "8",
-    py: "8",
-    borderBottom: "default",
-    gap: "4"
+    minWidth: "0",
+    width: "full",
+    flex: "1"
   },
-  // 7-column grid for the days
-  calendarGrid: {
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)",
-    gap: "2",
-    px: "8",
-    py: "4",
-    pb: "8"
+  value: {
+    flex: 1,
+    minWidth: "0",
+    textAlign: "left",
+    truncate: true,
+    color: "text"
+  },
+  placeholder: {
+    flex: 1,
+    minWidth: "0",
+    textAlign: "left",
+    truncate: true,
+    color: "text.placeholder"
   },
-  // Su Mo Tu We Th Fr Sa column headers
-  weekdayLabel: {
+  chips: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    userSelect: "none"
+    gap: "4",
+    minWidth: "0",
+    width: "full",
+    flex: "1",
+    overflowX: "auto",
+    overflowY: "hidden",
+    scrollbarWidth: "thin"
   },
-  // Individual day button in the grid
-  day: {
+  icon: {
+    position: "absolute",
+    top: "50%",
+    right: "1",
+    display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    fontFamily: "mono",
-    width: "32",
-    height: "32",
-    _today: {
-      fontWeight: "bold",
-      color: "text.selected",
-      bg: "bg.selected"
+    width: "var(--icon-size)",
+    height: "var(--icon-size)",
+    marginInline: "var(--icon-margin)",
+    transform: "translateY(-50%)",
+    bg: "bg.input",
+    fill: "icon.decorative",
+    pointerEvents: "none",
+    transitionDuration: "fast",
+    transitionProperty: "all",
+    transitionTimingFunction: "default",
+    _icon: {
+      width: "var(--icon-size)",
+      height: "var(--icon-size)",
+      transitionDuration: "fast",
+      transitionProperty: "all",
+      transitionTimingFunction: "default"
     },
-    _selected: {
-      bg: "bg.selected.bold",
-      color: "text.inverse",
-      _hover: {
-        bg: "bg.selected.bold.hovered"
-      },
-      _today: {
-        bg: "bg.selected.bold",
-        color: "text.inverse"
-      }
+    _peerHover: {
+      bg: "bg.input.hovered"
     },
-    _unavailable: {
-      color: "text.disabled",
-      cursor: "not-allowed",
-      pointerEvents: "none",
-      _hover: {
-        bg: "transparent"
+    _open: {
+      "& > svg": {
+        transform: "rotate(-180deg)",
+        transformOrigin: "center"
       }
     }
   }
 };
-const datePickerVariants = {
+const selectVariants = {
   size: {
     sm: {
-      input: {
+      root: {
+        "--icon-size": "token(sizes.22)",
+        "--icon-margin": "token(sizes.2)",
+        "--input-icon-padding": "[26px]"
+      },
+      content: {
         py: "0",
-        px: "8",
+        ps: "8",
         fontSize: "14"
+      },
+      chips: {
+        gap: "3",
+        py: "2"
       }
     },
     md: {
-      input: {
+      root: {
+        "--icon-size": "token(sizes.24)",
+        "--icon-margin": "token(sizes.3)",
+        "--input-icon-padding": "[31px]"
+      },
+      content: {
         py: "3",
-        px: "10",
+        ps: "10",
         fontSize: "16"
+      },
+      chips: {
+        gap: "4",
+        py: "5"
       }
     },
     lg: {
-      input: {
+      root: {
+        "--icon-size": "token(sizes.24)",
+        "--icon-margin": "token(sizes.5)",
+        "--input-icon-padding": "[34px]"
+      },
+      content: {
         py: "7",
-        px: "12",
+        ps: "12",
         fontSize: "16"
+      },
+      chips: {
+        gap: "5",
+        py: "0"
       }
     },
     xl: {
-      input: {
+      root: {
+        "--icon-size": "token(sizes.28)",
+        "--icon-margin": "token(sizes.7)",
+        "--input-icon-padding": "[42px]"
+      },
+      content: {
         py: "9",
-        px: "16",
+        ps: "16",
         fontSize: "20"
+      },
+      chips: {
+        gap: "6",
+        py: "2"
+      }
+    }
+  },
+  multiple: {
+    true: {
+      trigger: {
+        alignItems: "flex-start"
+      },
+      content: {
+        alignItems: "flex-start"
+      }
+    }
+  },
+  autoSize: {
+    true: {
+      trigger: {
+        height: "auto"
+      },
+      value: {
+        whiteSpace: "normal",
+        textWrap: "wrap",
+        overflow: "visible",
+        textOverflow: "clip"
+      },
+      placeholder: {
+        whiteSpace: "normal",
+        textWrap: "wrap",
+        overflow: "visible",
+        textOverflow: "clip"
+      },
+      chips: {
+        flexWrap: "wrap",
+        overflowX: "visible",
+        overflowY: "visible"
+      }
+    },
+    false: {
+      chips: {
+        flexWrap: "nowrap"
       }
     }
   }
 };
-const datePickerRecipe = defineSlotRecipe({
-  className: "datePicker",
-  jsx: ["DatePicker", "DateRangePicker"],
+const selectRecipe = defineSlotRecipe({
+  className: "select",
+  jsx: ["Select"],
   slots: [
     "root",
-    "input",
-    "segment",
-    "separator",
-    "popover",
-    "calendarHeader",
-    "navButton",
-    "calendarGrid",
-    "weekdayLabel",
-    "day"
+    "trigger",
+    "content",
+    "value",
+    "placeholder",
+    "chips",
+    "icon"
   ],
-  base: datePickerBase,
-  variants: datePickerVariants,
+  base: selectBase,
+  variants: selectVariants,
   defaultVariants: {
     size: "md"
   }
 });
-const timePickerBase = {
+const kbdRecipe = defineSlotRecipe({
+  className: "kbd",
+  slots: ["kbdGroup", "key"],
+  base: {
+    kbdGroup: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2",
+      verticalAlign: "middle"
+    },
+    key: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      h: "16",
+      w: "fit",
+      minW: "16",
+      rounded: "6",
+      cornerShape: "squircle",
+      bg: "bg.neutral",
+      px: "4",
+      fontFamily: "mono",
+      fontVariant: "mono",
+      lineHeight: "tight",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+      color: "text.subtle",
+      userSelect: "none",
+      pointerEvents: "none",
+      fontSize: "10"
+    }
+  },
+  variants: {
+    variant: {
+      default: {
+        key: {
+          fontSize: "10"
+        }
+      },
+      symbol: {
+        key: {
+          fontSize: "12"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const validationStyles = {
+  danger: {
+    borderColor: "border.danger",
+    outlineColor: "border.danger"
+  },
+  success: {
+    borderColor: "border.success",
+    outlineColor: "border.success"
+  }
+};
+const autocompleteBase = {
   root: {
+    ...globalBaseStyles,
+    "--control-py": "token(sizes.3)",
+    "--control-px": "token(sizes.10)",
+    "--control-fs": "token(sizes.16)",
+    "--control-min-height": "token(sizes.32)",
+    "--value-gap": "token(sizes.4)",
+    "--input-min-width": "token(sizes.80)",
+    "--loading-size": "token(sizes.20)",
+    position: "relative",
     display: "inline-flex",
     flexDirection: "column",
-    position: "relative"
+    width: "full",
+    minWidth: "0",
+    maxWidth: "full",
+    fontFamily: "body",
+    lineHeight: "default",
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed"
+    },
+    _groupDisabled: {
+      opacity: 1
+    }
   },
-  // The segmented input container — visually identical to textinput
-  input: {
-    display: "inline-flex",
+  control: {
+    position: "relative",
+    display: "flex",
     alignItems: "center",
-    gap: "2",
     width: "full",
+    minWidth: "0",
+    minHeight: "var(--control-min-height)",
+    py: "var(--control-py)",
+    ps: "var(--control-px)",
+    pe: "var(--control-px)",
+    bg: "surface",
+    color: "text",
     borderWidth: "1",
     borderStyle: "solid",
     borderColor: "border.input",
     borderRadius: "4",
-    outlineWidth: "2",
-    outlineOffset: "-1",
+    outlineWidth: "1",
     outlineStyle: "solid",
     outlineColor: "transparent",
-    bg: "bg.input",
-    color: "text",
-    fontFamily: "mono",
-    lineHeight: "default",
     cursor: "text",
-    userSelect: "none",
     transitionDuration: "fast",
     transitionProperty: "background, border-color, outline-color",
     transitionTimingFunction: "default",
     _focusWithin: {
-      bg: "bg.input.pressed",
       borderColor: "border.focused",
       outlineColor: "border.focused"
     },
     _open: {
-      bg: "bg.input.pressed",
       borderColor: "border.focused",
       outlineColor: "border.focused"
     },
+    _error: validationStyles.danger,
+    _invalid: validationStyles.danger,
+    _valid: validationStyles.success,
     _disabled: {
       bg: "bg.disabled",
       borderColor: "border.disabled",
       color: "text.disabled",
       cursor: "not-allowed",
-      pointerEvents: "none"
-    },
-    _error: {
-      borderColor: "border.danger",
-      _hover: {
-        borderColor: "border.danger"
-      },
+      pointerEvents: "none",
       _focusWithin: {
-        borderColor: "border.danger",
-        outlineColor: "border.danger"
-      },
-      _open: {
-        borderColor: "border.danger",
-        outlineColor: "border.danger"
+        borderColor: "border.disabled",
+        outlineColor: "transparent"
       }
     }
   },
-  // Individual focusable segment span (HH, MM, AM/PM)
-  segment: {
-    display: "inline-flex",
+  valueContainer: {
+    display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    outline: "none",
-    borderRadius: "2",
-    cursor: "default",
-    userSelect: "none",
-    fontFamily: "mono",
-    fontVariantsProperty: "mono",
-    fontVariantNumeric: "tabular-nums",
-    minWidth: "1.5em",
-    textAlign: "center",
+    alignContent: "center",
+    flex: "1",
+    flexWrap: "wrap",
+    minWidth: "0",
+    gap: "var(--value-gap)"
+  },
+  input: {
+    flexGrow: "1",
+    flexShrink: "0",
+    flexBasis: "var(--input-min-width)",
+    minWidth: "var(--input-min-width)",
+    maxWidth: "full",
+    p: "0",
+    marginBlock: "-3",
+    bg: "transparent",
     color: "text",
-    _focusVisible: {
-      bg: "bg.neutral.hovered"
+    fontFamily: "body",
+    fontSize: "var(--control-fs)",
+    lineHeight: "default",
+    border: "none",
+    outline: "none",
+    _placeholder: {
+      color: "text.placeholder"
     },
-    _groupDisabled: {
-      color: "text.disabled"
+    _disabled: {
+      color: "text.disabled",
+      cursor: "not-allowed"
     }
   },
-  // The ":" separator between time segments
-  separator: {
-    color: "text.placeholder",
-    userSelect: "none",
+  token: {
+    minWidth: "0",
+    maxWidth: "full",
+    flex: "0 1 auto"
+  },
+  overflowIndicator: {
     display: "inline-flex",
-    alignItems: "center"
+    alignItems: "center",
+    flexShrink: "0",
+    minHeight: "var(--loading-size)",
+    px: "6",
+    bg: "bg.neutral",
+    color: "text.subtle",
+    borderRadius: "999",
+    fontSize: "14",
+    fontWeight: "medium",
+    lineHeight: "default",
+    whiteSpace: "nowrap"
   },
-  // The floating time list container
-  popover: {
-    display: "flex",
-    flexDirection: "row",
-    bg: "surface.overlay",
-    borderWidth: "1",
-    borderStyle: "solid",
-    borderColor: "border",
-    borderRadius: "8",
-    boxShadow: "overlay",
-    zIndex: 1e3,
-    overflow: "hidden",
-    outline: "none",
-    w: "fit"
+  loadingIndicator: {
+    display: "inline-flex",
+    alignItems: "center",
+    alignSelf: "center",
+    flexShrink: "0",
+    ms: "var(--control-py)",
+    width: "var(--loading-size)",
+    height: "var(--loading-size)",
+    _icon: {
+      width: "var(--loading-size)",
+      height: "var(--loading-size)"
+    }
   },
-  // A single scrollable column (hours, minutes, or AM/PM)
-  column: {
-    display: "flex",
-    flexDirection: "column",
+  listbox: {
+    ...globalBaseStyles,
+    width: "full",
+    maxHeight: "192",
     overflowY: "auto",
-    flex: 1,
-    maxHeight: "200",
-    scrollSnapType: "y mandatory",
-    borderRight: "default",
-    minW: "56",
-    textAlign: "center",
-    _last: {
-      borderRight: "none"
-    },
-    // Hide scrollbar visually but keep functionality
-    "&::-webkit-scrollbar": {
-      display: "none"
-    },
-    scrollbarWidth: "none",
-    msOverflowStyle: "none"
+    bg: "surface",
+    borderRadius: "4",
+    boxShadow: "overlay",
+    outline: "none",
+    zIndex: "elevated"
   },
-  // Optional column header (e.g. "Hr", "Min")
-  columnLabel: {
+  status: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    py: "4",
-    px: "8",
-    fontSize: "11",
-    fontWeight: "medium",
-    color: "text.subtlest",
-    textTransform: "uppercase",
-    letterSpacing: "widest",
-    borderBottom: "default",
-    position: "sticky",
-    top: "0",
-    bg: "surface.overlay",
-    zIndex: 1,
-    userSelect: "none"
+    width: "full",
+    minHeight: "40",
+    px: "12",
+    py: "8",
+    color: "text.subtle",
+    fontSize: "14",
+    lineHeight: "default"
+  },
+  liveRegion: {
+    srOnly: true
   }
 };
-const timePickerVariants = {
+const autocompleteVariants = {
   size: {
     sm: {
-      input: {
-        py: "0",
-        px: "8",
-        fontSize: "14"
+      root: {
+        "--control-py": "token(sizes.0)",
+        "--control-px": "token(sizes.8)",
+        "--control-fs": "token(sizes.14)",
+        "--control-min-height": "token(sizes.24)",
+        "--value-gap": "token(sizes.3)",
+        "--input-min-width": "token(sizes.64)",
+        "--loading-size": "token(sizes.16)"
       }
     },
     md: {
-      input: {
-        py: "3",
-        px: "10",
-        fontSize: "16"
+      root: {
+        "--control-py": "token(sizes.3)",
+        "--control-px": "token(sizes.10)",
+        "--control-fs": "token(sizes.16)",
+        "--control-min-height": "token(sizes.32)",
+        "--value-gap": "token(sizes.4)",
+        "--input-min-width": "token(sizes.80)",
+        "--loading-size": "token(sizes.20)"
       }
     },
     lg: {
-      input: {
-        py: "7",
-        px: "12",
-        fontSize: "16"
+      root: {
+        "--control-py": "token(sizes.7)",
+        "--control-px": "token(sizes.12)",
+        "--control-fs": "token(sizes.16)",
+        "--control-min-height": "token(sizes.40)",
+        "--value-gap": "token(sizes.5)",
+        "--input-min-width": "token(sizes.96)",
+        "--loading-size": "token(sizes.20)"
       }
     },
     xl: {
-      input: {
-        py: "9",
-        px: "16",
-        fontSize: "20"
+      root: {
+        "--control-py": "token(sizes.9)",
+        "--control-px": "token(sizes.16)",
+        "--control-fs": "token(sizes.20)",
+        "--control-min-height": "token(sizes.48)",
+        "--value-gap": "token(sizes.6)",
+        "--input-min-width": "token(sizes.112)",
+        "--loading-size": "token(sizes.24)"
       }
     }
   }
 };
-const timePickerRecipe = defineSlotRecipe({
-  className: "timePicker",
-  jsx: ["TimePicker", "TimeRangePicker"],
+const autocompleteRecipe = defineSlotRecipe({
+  className: "autocomplete",
+  jsx: ["Autocomplete"],
   slots: [
     "root",
+    "control",
+    "valueContainer",
     "input",
-    "segment",
-    "separator",
-    "popover",
-    "column",
-    "columnLabel"
+    "token",
+    "overflowIndicator",
+    "loadingIndicator",
+    "listbox",
+    "status",
+    "liveRegion"
   ],
-  base: timePickerBase,
-  variants: timePickerVariants,
+  base: autocompleteBase,
+  variants: autocompleteVariants,
   defaultVariants: {
     size: "md"
   }
 });
-const breadcrumbsRecipe = defineSlotRecipe({
-  className: "breadcrumbs",
-  jsx: ["Breadcrumbs"],
-  slots: ["wrapper", "slash", "linkSegment", "currentSegment"],
-  base: {
-    wrapper: {
-      ...globalBaseStyles,
-      display: "flex",
-      gap: "6",
-      alignItems: "center",
-      fontFamily: "mono",
-      fontSize: "14",
-      "& li": {
-        display: "flex",
-        gap: "6",
-        alignItems: "center"
-      }
+const segmentedInputsBase = {
+  root: {
+    ...globalBaseStyles,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0",
+    width: "fit",
+    color: "text",
+    fontFamily: "mono",
+    lineHeight: "default",
+    cursor: "text",
+    userSelect: "none",
+    flexGrow: "0",
+    flexShrink: "0",
+    flexBasis: "fit",
+    minW: "0",
+    _disabled: {
+      color: "text.disabled",
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    }
+  },
+  // Individual focusable segment span (MM, DD, YYYY, HH, AM/PM, ...)
+  segment: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    outline: "none",
+    borderRadius: "2",
+    cursor: "default",
+    userSelect: "none",
+    fontFamily: "mono",
+    fontVariantsProperty: "mono",
+    fontVariantNumeric: "tabular-nums",
+    textAlign: "center",
+    color: "text",
+    _focus: {
+      bg: "bg.accent.gold.subtlest/75"
     },
-    slash: {
-      fontFamily: "mono",
-      fontSize: "14",
-      color: "text.placeholder"
+    _groupDisabled: {
+      color: "text.disabled"
+    }
+  },
+  // The "/" or ":" or " " literal between segments. `minWidth: '0.75em'`
+  // is a deliberate floor, not decoration — the " " separators (minute/AM-PM,
+  // and the gap between a DateTimeInput's date/time halves) render at 0
+  // layout width in the Recursive Variable font at this size/axis regardless
+  // of `whiteSpace: 'pre'` (confirmed: real space character, zero measured
+  // width) — a font-rendering quirk, not a whitespace-collapsing bug. The
+  // floor keeps the visual gap independent of what the glyph itself measures.
+  separator: {
+    color: "text.placeholder",
+    textAlign: "center",
+    userSelect: "none",
+    whiteSpace: "pre",
+    minWidth: "0.75em",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "&[data-gap=none]": {
+      minWidth: "0",
+      px: "0"
     },
-    linkSegment: {
-      fontFamily: "mono",
-      fontSize: "14",
-      color: "text.subtlest",
-      fontWeight: "normal",
-      whiteSpace: "nowrap",
-      _hover: {
-        color: "link"
-      },
-      _focusVisible: {
-        color: "blue.50"
-      }
+    "&[data-gap=tight]": {
+      minWidth: "0.5em",
+      px: "1"
     },
-    currentSegment: {
-      fontFamily: "mono",
-      fontSize: "14",
-      color: "text",
-      fontWeight: "bold",
-      whiteSpace: "nowrap"
+    "&[data-gap=normal]": {
+      minWidth: "0.75em",
+      px: "1"
+    },
+    "&[data-gap=loose]": {
+      minWidth: "1.25em",
+      px: "2"
     }
   }
+};
+const segmentedInputsVariants = {
+  size: {
+    sm: { root: { fontSize: "14" } },
+    md: { root: { fontSize: "16" } },
+    lg: { root: { fontSize: "16" } },
+    xl: { root: { fontSize: "20" } }
+  }
+};
+const segmentedInputsRecipe = defineSlotRecipe({
+  className: "segmentedInputs",
+  jsx: ["SegmentedInputs", "SegmentedInput", "SegmentedDate", "SegmentedTime"],
+  slots: ["root", "segment", "separator"],
+  base: segmentedInputsBase,
+  variants: segmentedInputsVariants,
+  defaultVariants: {
+    size: "md"
+  }
 });
-const selectBase = {
-  root: {
-    "--icon-size": "token(sizes.24)",
-    "--icon-margin": "token(sizes.3)",
-    "--input-icon-padding": "token(sizes.10)",
-    display: "inline-flex",
-    flexDirection: "column",
-    position: "relative",
-    minWidth: "0",
-    maxW: "full",
-    width: "fit"
-  },
-  trigger: {
+const segmentedFieldsBase = {
+  container: {
+    ...globalBaseStyles,
+    "--input-py": "token(sizes.3)",
+    "--input-px": "token(sizes.10)",
+    "--slot-size": "token(sizes.20)",
+    "--slot-px": "token(sizes.6)",
     position: "relative",
-    display: "inline-flex",
+    display: "flex",
     alignItems: "center",
-    width: "fit",
-    minWidth: "0",
-    maxWidth: "full",
-    pe: "var(--input-icon-padding)",
+    width: "full",
+    py: "var(--input-py)",
+    px: "var(--input-px)",
+    bg: "bg.input",
     borderWidth: "1",
     borderStyle: "solid",
     borderColor: "border.input",
@@ -8370,19 +8606,10 @@ const selectBase = {
     outlineOffset: "-1",
     outlineStyle: "solid",
     outlineColor: "transparent",
-    bg: "bg.input",
-    color: "text",
-    fontFamily: "body",
-    lineHeight: "default",
-    cursor: "pointer",
-    overflow: "hidden",
     transitionDuration: "fast",
     transitionProperty: "background, border-color, outline-color",
     transitionTimingFunction: "default",
-    _hover: {
-      bg: "bg.input.hovered"
-    },
-    _focusVisible: {
+    "&:focus-within:not(:has(button:focus))": {
       bg: "bg.input.pressed",
       borderColor: "border.focused",
       outlineColor: "border.focused"
@@ -8395,277 +8622,413 @@ const selectBase = {
     _disabled: {
       bg: "bg.disabled",
       borderColor: "border.disabled",
-      color: "text.disabled",
       cursor: "not-allowed",
       pointerEvents: "none"
     },
     _error: {
       borderColor: "border.danger",
-      _hover: {
-        borderColor: "border.danger"
-      },
-      _focusVisible: {
+      "&:focus-within:not(:has(button:focus))": {
         borderColor: "border.danger",
         outlineColor: "border.danger"
-      },
-      _open: {
+      }
+    },
+    _invalid: {
+      borderColor: "border.danger",
+      "&:focus-within:not(:has(button:focus))": {
         borderColor: "border.danger",
         outlineColor: "border.danger"
       }
     }
   },
-  content: {
-    display: "flex",
-    alignItems: "center",
-    minWidth: "0",
-    width: "full",
-    flex: "1"
-  },
-  value: {
-    flex: 1,
-    minWidth: "0",
-    textAlign: "left",
-    truncate: true,
-    color: "text"
-  },
-  placeholder: {
-    flex: 1,
-    minWidth: "0",
-    textAlign: "left",
-    truncate: true,
-    color: "text.placeholder"
-  },
-  chips: {
-    display: "flex",
-    alignItems: "center",
-    gap: "4",
-    minWidth: "0",
-    width: "full",
-    flex: "1",
-    overflowX: "auto",
-    overflowY: "hidden",
-    scrollbarWidth: "thin"
-  },
-  icon: {
-    position: "absolute",
-    top: "50%",
-    right: "1",
+  slot: {
     display: "inline-flex",
     alignItems: "center",
-    justifyContent: "center",
-    width: "var(--icon-size)",
-    height: "var(--icon-size)",
-    marginInline: "var(--icon-margin)",
-    transform: "translateY(-50%)",
-    bg: "bg.input",
-    fill: "icon.decorative",
-    pointerEvents: "none",
     transitionDuration: "fast",
     transitionProperty: "all",
     transitionTimingFunction: "default",
-    _icon: {
-      width: "var(--icon-size)",
-      height: "var(--icon-size)",
-      transitionDuration: "fast",
-      transitionProperty: "all",
-      transitionTimingFunction: "default"
+    flex: "0 0 var(--slot-size)",
+    px: "var(--slot-px)",
+    fill: "icon.decorative",
+    pointerEvents: "none",
+    zIndex: 1
+  },
+  buttonSlot: {
+    display: "inline-flex",
+    alignItems: "center",
+    flex: "0 0 var(--slot-size)",
+    px: "0",
+    zIndex: 1,
+    m: "-1"
+  }
+};
+const segmentedFieldsVariants = {
+  size: {
+    sm: {
+      container: {
+        "--input-py": "token(sizes.0)",
+        "--input-px": "token(sizes.8)",
+        "--slot-size": "token(sizes.16)",
+        "--slot-px": "token(sizes.4)"
+      }
     },
-    _peerHover: {
-      bg: "bg.input.hovered"
+    md: {
+      container: {
+        "--input-py": "token(sizes.3)",
+        "--input-px": "token(sizes.10)",
+        "--slot-size": "token(sizes.20)",
+        "--slot-px": "token(sizes.6)"
+      }
     },
-    _open: {
-      "& > svg": {
-        transform: "rotate(-180deg)",
-        transformOrigin: "center"
+    lg: {
+      container: {
+        "--input-py": "token(sizes.7)",
+        "--input-px": "token(sizes.12)",
+        "--slot-size": "token(sizes.24)",
+        "--slot-px": "token(sizes.8)"
+      }
+    },
+    xl: {
+      container: {
+        "--input-py": "token(sizes.9)",
+        "--input-px": "token(sizes.16)",
+        "--slot-size": "token(sizes.28)",
+        "--slot-px": "token(sizes.10)"
       }
     }
-  }
-};
-const selectVariants = {
-  size: {
-    sm: {
-      root: {
-        "--icon-size": "token(sizes.22)",
-        "--icon-margin": "token(sizes.2)",
-        "--input-icon-padding": "[26px]"
-      },
-      content: {
-        py: "0",
-        ps: "8",
-        fontSize: "14"
-      },
-      chips: {
-        gap: "3",
-        py: "2"
+  },
+  field: {
+    date: {
+      container: {
+        minW: "128"
       }
     },
-    md: {
-      root: {
-        "--icon-size": "token(sizes.24)",
-        "--icon-margin": "token(sizes.3)",
-        "--input-icon-padding": "[31px]"
-      },
-      content: {
-        py: "3",
-        ps: "10",
-        fontSize: "16"
-      },
-      chips: {
-        gap: "4",
-        py: "5"
+    time: {
+      container: {
+        minW: "104"
       }
     },
-    lg: {
-      root: {
-        "--icon-size": "token(sizes.24)",
-        "--icon-margin": "token(sizes.5)",
-        "--input-icon-padding": "[34px]"
-      },
-      content: {
-        py: "7",
-        ps: "12",
-        fontSize: "16"
-      },
-      chips: {
-        gap: "5",
-        py: "0"
+    dateTime: {
+      container: {
+        minW: "216"
+      }
+    }
+  },
+  range: {
+    date: {
+      container: {
+        minW: "248"
       }
     },
-    xl: {
-      root: {
-        "--icon-size": "token(sizes.28)",
-        "--icon-margin": "token(sizes.7)",
-        "--input-icon-padding": "[42px]"
-      },
-      content: {
-        py: "9",
-        ps: "16",
-        fontSize: "20"
-      },
-      chips: {
-        gap: "6",
-        py: "2"
+    time: {
+      container: {
+        minW: "200"
       }
     }
   },
-  multiple: {
+  before: {
     true: {
-      trigger: {
-        alignItems: "flex-start"
+      container: {
+        ps: "0"
       },
-      content: {
-        alignItems: "flex-start"
+      buttonSlot: {
+        "& button": {
+          borderTopRightRadius: "0",
+          borderBottomRightRadius: "0"
+        }
       }
     }
   },
-  autoSize: {
+  after: {
     true: {
-      trigger: {
-        height: "auto"
-      },
-      value: {
-        whiteSpace: "normal",
-        textWrap: "wrap",
-        overflow: "visible",
-        textOverflow: "clip"
-      },
-      placeholder: {
-        whiteSpace: "normal",
-        textWrap: "wrap",
-        overflow: "visible",
-        textOverflow: "clip"
+      container: {
+        pe: "0"
       },
-      chips: {
-        flexWrap: "wrap",
-        overflowX: "visible",
-        overflowY: "visible"
-      }
-    },
-    false: {
-      chips: {
-        flexWrap: "nowrap"
+      buttonSlot: {
+        "& button": {
+          borderTopLeftRadius: "0",
+          borderBottomLeftRadius: "0"
+        }
       }
     }
   }
 };
-const selectRecipe = defineSlotRecipe({
-  className: "select",
-  jsx: ["Select"],
-  slots: [
-    "root",
-    "trigger",
-    "content",
-    "value",
-    "placeholder",
-    "chips",
-    "icon"
+const segmentedFieldsRecipe = defineSlotRecipe({
+  className: "segmentedFields",
+  jsx: [
+    "SegmentedFields",
+    "DateInput",
+    "DateRangeInput",
+    "TimeInput",
+    "TimeRangeInput",
+    "DateTimeInput"
   ],
-  base: selectBase,
-  variants: selectVariants,
+  slots: ["container", "slot", "buttonSlot"],
+  base: segmentedFieldsBase,
+  variants: segmentedFieldsVariants,
   defaultVariants: {
     size: "md"
   }
 });
-const kbdRecipe = defineSlotRecipe({
-  className: "kbd",
-  slots: ["kbdGroup", "key"],
+const calendarRecipe = defineSlotRecipe({
+  className: "calendar",
+  jsx: ["Calendar"],
+  slots: ["root", "header", "grid", "weekdayLabel", "day", "monthYearGrid"],
   base: {
-    kbdGroup: {
-      display: "inline-flex",
+    root: {
+      ...globalBaseStyles,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      bg: "surface",
+      width: "278"
+    },
+    header: {
+      display: "flex",
       alignItems: "center",
-      gap: "2",
-      verticalAlign: "middle"
+      justifyContent: "space-between",
+      gap: "4",
+      width: "full",
+      p: "8",
+      borderBottom: "default",
+      fontFamily: "mono",
+      fontVariantsProperty: "mono"
     },
-    key: {
-      display: "inline-flex",
+    grid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+      gap: "4",
+      width: "fit",
+      p: "8",
+      mx: "auto"
+    },
+    weekdayLabel: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      userSelect: "none"
+    },
+    day: {
+      position: "relative",
       alignItems: "center",
       justifyContent: "center",
-      gap: "1",
-      h: "16",
-      w: "fit",
-      minW: "16",
-      rounded: "6",
-      cornerShape: "squircle",
-      bg: "bg.neutral",
-      px: "4",
       fontFamily: "mono",
-      fontVariant: "mono",
-      lineHeight: "tight",
-      fontWeight: "bold",
-      textTransform: "uppercase",
-      color: "text.subtle",
-      userSelect: "none",
-      pointerEvents: "none",
-      fontSize: "10"
+      width: "32",
+      height: "32",
+      minWidth: "32",
+      _today: {
+        outline: "1px solid {colors.border.focused}",
+        outlineOffset: "1"
+      },
+      _unavailable: {
+        color: "text.disabled",
+        cursor: "not-allowed",
+        pointerEvents: "none",
+        _hover: {
+          bg: "transparent"
+        }
+      }
+    },
+    monthYearGrid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+      gap: "4",
+      width: "full",
+      p: "8"
     }
   },
   variants: {
-    variant: {
-      default: {
-        key: {
-          fontSize: "10"
+    type: {
+      days: {},
+      months: {
+        day: {
+          width: "auto",
+          px: "8"
         }
       },
-      symbol: {
-        key: {
-          fontSize: "12"
+      years: {
+        day: {
+          width: "auto",
+          px: "8"
         }
       }
     }
   },
   defaultVariants: {
-    variant: "default"
+    type: "days"
+  }
+});
+const dateMenusBase = {
+  // Row wrapper for DateRangeMenu's two Calendar instances.
+  calendars: {
+    display: "flex",
+    alignItems: "stretch"
+  },
+  // Vertical rule between the two calendars.
+  calendarsDivider: {
+    width: "1",
+    alignSelf: "stretch",
+    bg: "border"
+  },
+  // Right-aligned Cancel/Apply pair for the pending range selection.
+  footer: {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: "8",
+    borderTopWidth: "1",
+    borderTopStyle: "solid",
+    borderColor: "border",
+    px: "16",
+    py: "8"
+  }
+};
+const dateMenusRecipe = defineSlotRecipe({
+  className: "dateMenus",
+  jsx: ["DateMenus", "DateMenu", "DateRangeMenu"],
+  slots: ["calendars", "calendarsDivider", "footer"],
+  base: dateMenusBase
+});
+const timeMenusBase = {
+  // Row of columns (HR | MIN | AM-PM), doubled with its own divider for range.
+  // minH: '0' overrides the flexbox default of min-height:auto on a flex
+  // item, which otherwise floors this box at its content's natural height
+  // and defeats stretching it down to match a shorter sibling (DateTimeMenu's
+  // Calendar) — see the `column` slot below for the full explanation.
+  columns: {
+    display: "flex",
+    alignItems: "stretch",
+    minH: "0"
+  },
+  // A single scrollable HR/MIN/AM-PM column. `maxHeight` (not `h: 'full'`)
+  // matters here — Menu's own internal wrapper chain (levelsViewport >
+  // levelsTrack > level > list) doesn't propagate a concrete height down to
+  // this element, so `h: 'full'` resolves to "as tall as my content" and
+  // `overflowY: auto` never actually engages; an explicit cap makes the
+  // column bound itself regardless of what any ancestor does. `200` keeps
+  // the existing picker column cap exactly.
+  column: {
+    display: "flex",
+    flexDirection: "column",
+    flex: "1",
+    minW: "56",
+    // minH: '0' is the load-bearing part, not maxHeight — a flex item's
+    // default min-height:auto floors it at its content's natural height no
+    // matter what cross-axis stretch or maxHeight say, which silently
+    // defeats overflowY:auto (nothing to scroll if the box just grows to
+    // fit everything). Zeroing it lets maxHeight (standalone) or the
+    // stretch variant's parent-driven height (DateTimeMenu) actually apply.
+    minH: "0",
+    maxHeight: "200",
+    overflowY: "auto",
+    textAlign: "center",
+    borderRightWidth: "1",
+    borderRightStyle: "solid",
+    borderColor: "border",
+    _last: {
+      borderRight: "none"
+    },
+    // Hide the scrollbar visually but keep it functional — matches legacy.
+    "&::-webkit-scrollbar": {
+      display: "none"
+    },
+    scrollbarWidth: "none"
+  },
+  // "HR" / "MIN" / "AM/PM" column label.
+  columnHeader: {
+    position: "sticky",
+    top: "0",
+    textAlign: "center",
+    fontSize: "12",
+    fontWeight: "semibold",
+    color: "text.subtlest",
+    bg: "surface",
+    py: "4",
+    borderBottomWidth: "1",
+    borderBottomStyle: "solid",
+    borderColor: "border",
+    zIndex: "1"
+  },
+  // Right-aligned Cancel/Apply pair — TimeRangeMenu only (TimeMenu commits
+  // immediately per value, same as DateMenu's non-range case).
+  footer: {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: "8",
+    borderTopWidth: "1",
+    borderTopStyle: "solid",
+    borderColor: "border",
+    px: "16",
+    py: "8"
+  }
+};
+const timeMenusVariants = {
+  // DateTimeMenu pairs the columns with a Calendar sibling inside a
+  // stretch-aligned flex row, so the columns can size to match the
+  // Calendar's real rendered height instead of the standalone 200px cap —
+  // without this, the columns clip well short of the taller Calendar next to
+  // them. TimeMenu/TimeRangeMenu have no such sibling to stretch against, so
+  // they keep the fixed cap as their own default.
+  stretch: {
+    true: {
+      column: {
+        maxHeight: "none"
+      }
+    }
+  }
+};
+const timeMenusRecipe = defineSlotRecipe({
+  className: "timeMenus",
+  jsx: ["TimeMenus", "TimeMenu", "TimeRangeMenu"],
+  slots: ["columns", "column", "columnHeader", "footer"],
+  base: timeMenusBase,
+  variants: timeMenusVariants
+});
+const dateTimeMenusBase = {
+  // Row holding the Calendar + divider + time columns, above the footer.
+  content: {
+    display: "flex",
+    alignItems: "stretch"
+  },
+  // 4px-wide vertical divider between the Calendar and the time columns.
+  divider: {
+    width: "4",
+    alignSelf: "stretch",
+    bg: "border"
+  },
+  // Right-aligned Cancel/Apply pair — always present per the Figma spec,
+  // even though DateTimeMenu isn't itself a range variant.
+  footer: {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    w: "full",
+    gap: "8",
+    borderTopWidth: "1",
+    borderTopStyle: "solid",
+    borderColor: "border",
+    px: "16",
+    py: "8"
   }
+};
+const dateTimeMenusRecipe = defineSlotRecipe({
+  className: "dateTimeMenus",
+  jsx: ["DateTimeMenus", "DateTimeMenu"],
+  slots: ["content", "divider", "footer"],
+  base: dateTimeMenusBase
 });
 const slotRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  autocompleteRecipe,
   avatarRecipe,
   badgeRecipe,
   breadcrumbsRecipe,
   buttonRecipe,
+  calendarRecipe,
   checkboxRecipe,
   chipRecipe,
-  datePickerRecipe,
+  dateMenusRecipe,
+  dateTimeMenusRecipe,
   formFieldRecipe,
   iconButtonRecipe,
   kbdRecipe,
@@ -8674,9 +9037,11 @@ const slotRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   menuRecipe,
   modalRecipe,
   radioRecipe,
+  segmentedFieldsRecipe,
+  segmentedInputsRecipe,
   selectRecipe,
   textInputRecipe,
-  timePickerRecipe,
+  timeMenusRecipe,
   tooltipRecipe
 }, Symbol.toStringTag, { value: "Module" }));
 const colors = defineSemanticTokens.colors({
@@ -10160,4 +10525,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-CcvrY8wh.js.map
+//# sourceMappingURL=cetec-preset-CZJA5UR0.js.map