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

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

@@ -55,6 +55,7 @@ const conditions$1 = {
   expanded: '&:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"])',
   collapsed: '&:is([aria-collapsed=true], [data-collapsed=true], [data-state="collapsed"])',
   highlighted: "&[data-highlighted=true]",
+  new: "&[data-new=true]",
   complete: "&[data-complete=true]",
   incomplete: "&[data-incomplete=true]",
   dragging: "&[data-dragging=true]",
@@ -593,658 +594,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 +747,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 +3287,7 @@ var marginValues = (theme) => ({
   auto: "auto",
   ...theme("spacing")
 });
-var spacing = {
+var spacing$1 = {
   padding: {
     className: "p",
     shorthand: "p",
@@ -4687,7 +4016,7 @@ var utilities = Object.assign(
   layout,
   display,
   flexGrid,
-  spacing,
+  spacing$1,
   outline,
   focusRing,
   divide,
@@ -4800,6 +4129,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",
@@ -4852,7 +4203,19 @@ const textVariants = {
   },
   underline: {
     true: {
-      textDecoration: "underline"
+      textDecoration: "underline",
+      textDecorationThickness: "[0.0625em]",
+      textUnderlineOffset: "[0.15625em]",
+      textDecorationSkipInk: "all"
+    }
+  },
+  dashedUnderline: {
+    true: {
+      textDecoration: "underline",
+      textDecorationStyle: "dashed",
+      textDecorationThickness: "[0.0625em]",
+      textUnderlineOffset: "[0.15625em]",
+      textDecorationSkipInk: "all"
     }
   },
   truncate: {
@@ -4901,36 +4264,30 @@ const linkBase = {
   fontWeight: "medium",
   gap: "1",
   color: "link",
-  textDecoration: "none",
-  backgroundImage: "linear-gradient(90deg, transparent 0% 100%)",
-  backgroundSize: "100% 1px",
-  backgroundRepeat: "no-repeat",
-  backgroundPositionY: "100%",
-  outlineWidth: "2",
-  outlineStyle: "solid",
-  outlineColor: "transparent",
-  outlineOffset: "1",
-  width: "fit-content",
-  cursor: "pointer",
+  textDecoration: "underline",
+  textDecorationThickness: "[0.0625em]",
+  textUnderlineOffset: "[0.15625em]",
+  textDecorationSkipInk: "all",
+  textDecorationColor: "[color-mix(in srgb, currentColor 30%, transparent)]",
+  transition: "all",
+  transitionDuration: "fast",
+  bg: "none",
   _hover: {
-    color: "link",
-    backgroundImage: "linear-gradient(90deg, currentColor 0% 100%)"
+    color: "link.pressed",
+    textDecorationColor: "current",
+    textDecorationThickness: "[0.125em]"
   },
   _focusVisible: {
     borderRadius: "4",
     outlineColor: "border.focused"
-  }
-};
-const linkVariants = {
-  ...textVariants,
+  },
   _disabled: {
-    true: {
-      cursor: "not-allowed",
-      opacity: 0.4,
-      pointerEvents: "none"
-    }
+    cursor: "not-allowed",
+    opacity: 0.4,
+    pointerEvents: "none"
   }
 };
+const linkVariants = { ...textVariants };
 const labelBase = {
   fontSize: "16",
   fontWeight: "normal",
@@ -5827,53 +5184,704 @@ 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 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 radioInputRecipe = defineRecipe({
-  className: "radioInput",
-  jsx: ["RadioInput"],
-  base: radioInputBase,
-  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 checkboxInputBase = {
-  ...globalBaseStyles,
-  display: "flex",
-  alignItems: "start",
-  gap: "4",
-  "&.cetec-label": {
-    fontSize: "16",
-    lineHeight: "default"
+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")
   },
-  _disabled: {
-    opacity: 0.4,
-    cursor: "not-allowed"
+  elevatedBase: {
+    value: getBoxShadowPrimitive("elevated")
   },
-  _groupDisabled: {
-    opacity: 1
-    // let FormField handle disabled state opacity
+  overlayBase: {
+    value: getBoxShadowPrimitive("overlay")
+  },
+  overflowBase: {
+    value: getBoxShadowPrimitive("overflow")
   }
-};
-const checkboxInputRecipe = defineRecipe({
-  className: "checkboxInput",
-  jsx: ["CheckboxInput"],
-  base: checkboxInputBase,
-  variants: {}
 });
+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 },
+  "1102": { value: 1102 },
+  "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 }])
 );
@@ -6574,7 +6582,6 @@ const menuBase = {
     borderRadius: "4",
     boxShadow: "overlay",
     overflow: "hidden",
-    zIndex: "100",
     transitionProperty: "width, height",
     transitionDuration: "normal",
     transitionTimingFunction: "default",
@@ -6635,6 +6642,18 @@ const menuBase = {
   }
 };
 const menuVariants = {
+  layer: {
+    elevated: {
+      wrapper: {
+        zIndex: "elevated"
+      }
+    },
+    modalFloating: {
+      wrapper: {
+        zIndex: "modalFloating"
+      }
+    }
+  },
   density: {
     compact: {
       backHeader: {
@@ -6692,7 +6711,8 @@ const menuRecipe = defineSlotRecipe({
   base: menuBase,
   variants: menuVariants,
   defaultVariants: {
-    density: "compact"
+    density: "compact",
+    layer: "elevated"
   }
 });
 const textInputBase = {
@@ -7422,6 +7442,7 @@ const chipRecipe = defineSlotRecipe({
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
+      justifyContent: "center",
       minW: "0",
       flexShrink: "0",
       bg: "transparent",
@@ -7434,7 +7455,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",
@@ -7665,504 +7691,866 @@ const listItemRecipe = defineSlotRecipe({
       true: {},
       false: {}
     },
-    iconAfter: {
-      true: {},
-      false: {}
+    iconAfter: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    density: "compact"
+  }
+});
+const listItemGroupRecipe = defineSlotRecipe({
+  className: "listItemGroup",
+  jsx: ["ListItemGroup"],
+  slots: ["wrapper", "groupLabel", "divider"],
+  base: {
+    wrapper: {
+      width: "full"
+    },
+    groupLabel: {
+      ...globalBaseStyles,
+      color: "text.subtlest",
+      px: "var(--list-group-label-padding-x)",
+      pt: "var(--list-group-label-padding-top)",
+      pb: "var(--list-group-label-padding-bottom)",
+      fontSize: "var(--list-group-label-size)",
+      borderStyle: "solid",
+      borderWidth: "1",
+      borderColor: "transparent"
+    },
+    divider: {
+      my: "var(--list-group-divider-margin-y)",
+      mx: "var(--list-group-divider-margin-x)"
+    }
+  },
+  variants: {
+    density: listDensityWrapperVars
+  },
+  defaultVariants: {
+    density: "compact"
+  }
+});
+const modalBase = {
+  positionWrapper: {
+    "--wrapper-p": {
+      base: "token(sizes.0)",
+      xs: "token(sizes.12)",
+      sm: "token(sizes.32)",
+      md: "token(sizes.56)"
+    },
+    position: "fixed",
+    inset: "0",
+    display: "grid",
+    p: "var(--wrapper-p)",
+    w: "100vw",
+    h: "100vh",
+    zIndex: 1100
+  },
+  overlay: {
+    position: "fixed",
+    inset: "0",
+    bg: "blanket",
+    zIndex: 1100,
+    // Initial state matches animation start
+    opacity: "0",
+    // Animation handled via data-state
+    animation: "modalFadeIn 150ms ease-out forwards",
+    '&[data-state="closing"]': {
+      animation: "modalFadeOut 150ms ease-out forwards"
+    }
+  },
+  container: {
+    ...globalBaseStyles,
+    display: "flex",
+    flexDirection: "column",
+    maxW: "calc(100vw - (2 * var(--wrapper-p)))",
+    maxH: "calc(100vh - (2 * var(--wrapper-p)))",
+    bg: "surface.overlay",
+    borderRadius: "12",
+    boxShadow: "overlay",
+    outline: "none",
+    zIndex: 1101
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12",
+    px: "20",
+    py: "12",
+    borderBottom: "default"
+  },
+  title: {
+    w: "full",
+    truncate: true
+  },
+  closeButton: {
+    // IconButton styles will be applied via IconButton component
+    // This slot is for any additional wrapper styling if needed
+  },
+  body: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflowY: "auto",
+    gap: "12",
+    px: "20",
+    py: "20"
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "8",
+    px: "20",
+    py: "12",
+    borderTop: "default"
+  }
+};
+const mobile = {
+  xsDown: {
+    width: "100vw",
+    height: "100vh",
+    maxWidth: "100vw",
+    maxHeight: "100vh",
+    borderRadius: "0"
+  }
+};
+const modalVariants = {
+  size: {
+    sm: {
+      container: {
+        w: "md",
+        ...mobile
+      }
+    },
+    md: {
+      container: {
+        w: "xl",
+        ...mobile
+      }
+    },
+    lg: {
+      container: {
+        w: "3xl",
+        ...mobile
+      }
+    },
+    xl: {
+      container: {
+        w: "5xl",
+        ...mobile
+      }
+    },
+    full: {
+      container: {
+        w: "95vw",
+        ...mobile
+      }
+    },
+    fullPage: {
+      positionWrapper: {
+        "--wrapper-p": "token(sizes.0)"
+      },
+      container: {
+        w: "100vw",
+        h: "100vh",
+        maxW: "100vw",
+        maxH: "100vh",
+        borderRadius: "0",
+        ...mobile
+      }
+    }
+  },
+  position: {
+    centered: {
+      positionWrapper: {
+        placeContent: "center"
+      },
+      container: {
+        animation: "modalScaleIn 150ms ease-out forwards",
+        '&[data-state="closing"]': {
+          animation: "modalScaleOut 150ms ease-out forwards"
+        }
+      }
+    },
+    top: {
+      positionWrapper: {
+        placeContent: "start center"
+      },
+      container: {
+        animation: "modalScaleInTop 150ms ease-out forwards",
+        '&[data-state="closing"]': {
+          animation: "modalScaleOutTop 150ms ease-out forwards"
+        }
+      }
     }
-  },
+  }
+};
+const modalRecipe = defineSlotRecipe({
+  className: "modal",
+  jsx: ["ModalWrapper", "ModalHeader", "ModalBody", "ModalFooter", "Modal"],
+  slots: [
+    "positionWrapper",
+    "overlay",
+    "container",
+    "header",
+    "title",
+    "closeButton",
+    "body",
+    "footer"
+  ],
+  base: modalBase,
+  variants: modalVariants,
   defaultVariants: {
-    variant: "default",
-    density: "compact"
+    size: "md",
+    position: "centered"
   }
 });
-const listItemGroupRecipe = defineSlotRecipe({
-  className: "listItemGroup",
-  jsx: ["ListItemGroup"],
-  slots: ["wrapper", "groupLabel", "divider"],
+const breadcrumbsRecipe = defineSlotRecipe({
+  className: "breadcrumbs",
+  jsx: ["Breadcrumbs"],
+  slots: ["wrapper", "slash", "linkSegment", "currentSegment"],
   base: {
     wrapper: {
-      width: "full"
-    },
-    groupLabel: {
       ...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",
-      px: "var(--list-group-label-padding-x)",
-      pt: "var(--list-group-label-padding-top)",
-      pb: "var(--list-group-label-padding-bottom)",
-      fontSize: "var(--list-group-label-size)",
-      borderStyle: "solid",
-      borderWidth: "1",
-      borderColor: "transparent"
+      fontWeight: "normal",
+      whiteSpace: "nowrap",
+      _hover: {
+        color: "link"
+      },
+      _focusVisible: {
+        color: "blue.50"
+      }
     },
-    divider: {
-      my: "var(--list-group-divider-margin-y)",
-      mx: "var(--list-group-divider-margin-x)"
+    currentSegment: {
+      fontFamily: "mono",
+      fontSize: "14",
+      color: "text",
+      fontWeight: "bold",
+      whiteSpace: "nowrap"
     }
-  },
-  variants: {
-    density: listDensityWrapperVars
-  },
-  defaultVariants: {
-    density: "compact"
   }
 });
-const modalBase = {
-  positionWrapper: {
-    "--wrapper-p": {
-      base: "token(sizes.0)",
-      xs: "token(sizes.12)",
-      sm: "token(sizes.32)",
-      md: "token(sizes.56)"
-    },
-    position: "fixed",
-    inset: "0",
-    display: "grid",
-    p: "var(--wrapper-p)",
-    w: "100vw",
-    h: "100vh",
-    zIndex: 1100
+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"
   },
-  overlay: {
-    position: "fixed",
-    inset: "0",
-    bg: "blanket",
-    zIndex: 1100,
-    // Initial state matches animation start
-    opacity: "0",
-    // Animation handled via data-state
-    animation: "modalFadeIn 150ms ease-out forwards",
-    '&[data-state="closing"]': {
-      animation: "modalFadeOut 150ms ease-out forwards"
+  trigger: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    width: "fit",
+    minWidth: "0",
+    maxWidth: "full",
+    pe: "var(--input-icon-padding)",
+    borderWidth: "1",
+    borderStyle: "solid",
+    borderColor: "border.input",
+    borderRadius: "4",
+    outlineWidth: "2",
+    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: {
+      bg: "bg.input.pressed",
+      borderColor: "border.focused",
+      outlineColor: "border.focused"
+    },
+    _open: {
+      bg: "bg.input.pressed",
+      borderColor: "border.focused",
+      outlineColor: "border.focused"
+    },
+    _disabled: {
+      bg: "bg.disabled",
+      borderColor: "border.disabled",
+      color: "text.disabled",
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    },
+    _error: {
+      borderColor: "border.danger",
+      _hover: {
+        borderColor: "border.danger"
+      },
+      _focusVisible: {
+        borderColor: "border.danger",
+        outlineColor: "border.danger"
+      },
+      _open: {
+        borderColor: "border.danger",
+        outlineColor: "border.danger"
+      }
     }
   },
-  container: {
-    ...globalBaseStyles,
-    display: "flex",
-    flexDirection: "column",
-    maxW: "calc(100vw - (2 * var(--wrapper-p)))",
-    maxH: "calc(100vh - (2 * var(--wrapper-p)))",
-    bg: "surface.overlay",
-    borderRadius: "12",
-    boxShadow: "overlay",
-    outline: "none",
-    zIndex: 1101
-  },
-  header: {
+  content: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    gap: "12",
-    px: "20",
-    py: "12",
-    borderBottom: "default"
-  },
-  title: {
-    w: "full",
-    truncate: true
+    minWidth: "0",
+    width: "full",
+    flex: "1"
   },
-  closeButton: {
-    // IconButton styles will be applied via IconButton component
-    // This slot is for any additional wrapper styling if needed
+  value: {
+    flex: 1,
+    minWidth: "0",
+    textAlign: "left",
+    truncate: true,
+    color: "text"
   },
-  body: {
+  placeholder: {
     flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    overflowY: "auto",
-    gap: "12",
-    px: "20",
-    py: "20"
+    minWidth: "0",
+    textAlign: "left",
+    truncate: true,
+    color: "text.placeholder"
   },
-  footer: {
+  chips: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "flex-end",
-    gap: "8",
-    px: "20",
-    py: "12",
-    borderTop: "default"
-  }
-};
-const mobile = {
-  xsDown: {
-    width: "100vw",
-    height: "100vh",
-    maxWidth: "100vw",
-    maxHeight: "100vh",
-    borderRadius: "0"
+    gap: "4",
+    minWidth: "0",
+    width: "full",
+    flex: "1",
+    overflowX: "auto",
+    overflowY: "hidden",
+    scrollbarWidth: "thin"
+  },
+  icon: {
+    position: "absolute",
+    top: "50%",
+    right: "1",
+    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"
+    },
+    _peerHover: {
+      bg: "bg.input.hovered"
+    },
+    _open: {
+      "& > svg": {
+        transform: "rotate(-180deg)",
+        transformOrigin: "center"
+      }
+    }
   }
 };
-const modalVariants = {
+const selectVariants = {
   size: {
     sm: {
-      container: {
-        w: "md",
-        ...mobile
+      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"
       }
     },
     md: {
-      container: {
-        w: "xl",
-        ...mobile
+      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"
       }
     },
     lg: {
-      container: {
-        w: "3xl",
-        ...mobile
+      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"
       }
     },
     xl: {
-      container: {
-        w: "5xl",
-        ...mobile
-      }
-    },
-    full: {
-      container: {
-        w: "95vw",
-        ...mobile
+      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"
       }
-    },
-    fullPage: {
-      positionWrapper: {
-        "--wrapper-p": "token(sizes.0)"
+    }
+  },
+  multiple: {
+    true: {
+      trigger: {
+        alignItems: "flex-start"
       },
-      container: {
-        w: "100vw",
-        h: "100vh",
-        maxW: "100vw",
-        maxH: "100vh",
-        borderRadius: "0",
-        ...mobile
+      content: {
+        alignItems: "flex-start"
       }
     }
   },
-  position: {
-    centered: {
-      positionWrapper: {
-        placeContent: "center"
+  autoSize: {
+    true: {
+      trigger: {
+        height: "auto"
       },
-      container: {
-        animation: "modalScaleIn 150ms ease-out forwards",
-        '&[data-state="closing"]': {
-          animation: "modalScaleOut 150ms ease-out forwards"
-        }
+      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"
       }
     },
-    top: {
-      positionWrapper: {
-        placeContent: "start center"
-      },
-      container: {
-        animation: "modalScaleInTop 150ms ease-out forwards",
-        '&[data-state="closing"]': {
-          animation: "modalScaleOutTop 150ms ease-out forwards"
-        }
+    false: {
+      chips: {
+        flexWrap: "nowrap"
       }
     }
   }
 };
-const modalRecipe = defineSlotRecipe({
-  className: "modal",
-  jsx: ["Modal", "ModalHeader", "ModalBody", "ModalFooter"],
+const selectRecipe = defineSlotRecipe({
+  className: "select",
+  jsx: ["Select"],
   slots: [
-    "positionWrapper",
-    "overlay",
-    "container",
-    "header",
-    "title",
-    "closeButton",
-    "body",
-    "footer"
+    "root",
+    "trigger",
+    "content",
+    "value",
+    "placeholder",
+    "chips",
+    "icon"
   ],
-  base: modalBase,
-  variants: modalVariants,
+  base: selectBase,
+  variants: selectVariants,
   defaultVariants: {
-    size: "md",
-    position: "centered"
+    size: "md"
+  }
+});
+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 datePickerBase = {
+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: "0",
     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 (MM, DD, YYYY)
-  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 "/" or " " literal between date segments
-  separator: {
-    color: "text.placeholder",
-    userSelect: "none",
+  token: {
+    minWidth: "0",
+    maxWidth: "full",
+    flex: "0 1 auto",
+    _new: {
+      bg: "transparent",
+      outlineWidth: "1",
+      outlineStyle: "dashed",
+      outlineColor: "border.warning"
+    }
+  },
+  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 calendar container
-  popover: {
-    display: "flex",
-    flexDirection: "column",
-    bg: "surface.overlay",
-    borderWidth: "1",
-    borderStyle: "solid",
-    borderColor: "border",
-    borderRadius: "8",
+  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)"
+    }
+  },
+  listbox: {
+    ...globalBaseStyles,
+    width: "full",
+    maxHeight: "192",
+    overflowY: "auto",
+    bg: "surface",
+    borderRadius: "4",
     boxShadow: "overlay",
-    zIndex: 1e3,
-    width: "280",
-    overflow: "hidden",
     outline: "none"
   },
-  // Month/year navigation row
-  calendarHeader: {
-    fontFamily: "mono",
+  status: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    px: "8",
+    width: "full",
+    minHeight: "40",
+    px: "12",
     py: "8",
-    borderBottom: "default",
-    gap: "4"
-  },
-  // 7-column grid for the days
-  calendarGrid: {
-    display: "grid",
-    gridTemplateColumns: "repeat(7, 1fr)",
-    gap: "2",
-    px: "8",
-    py: "4",
-    pb: "8"
-  },
-  // Su Mo Tu We Th Fr Sa column headers
-  weekdayLabel: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    userSelect: "none"
+    color: "text.subtle",
+    fontSize: "14",
+    lineHeight: "default"
   },
-  // Individual day button in the grid
-  day: {
-    alignItems: "center",
-    justifyContent: "center",
-    fontFamily: "mono",
-    width: "32",
-    height: "32",
-    _today: {
-      fontWeight: "bold",
-      color: "text.selected",
-      bg: "bg.selected"
-    },
-    _selected: {
-      bg: "bg.selected.bold",
-      color: "text.inverse",
-      _hover: {
-        bg: "bg.selected.bold.hovered"
-      },
-      _today: {
-        bg: "bg.selected.bold",
-        color: "text.inverse"
+  liveRegion: {
+    srOnly: true
+  }
+};
+const autocompleteVariants = {
+  layer: {
+    elevated: {
+      listbox: {
+        zIndex: "elevated"
       }
     },
-    _unavailable: {
-      color: "text.disabled",
-      cursor: "not-allowed",
-      pointerEvents: "none",
-      _hover: {
-        bg: "transparent"
+    modalFloating: {
+      listbox: {
+        zIndex: "modalFloating"
       }
     }
-  }
-};
-const datePickerVariants = {
+  },
   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 datePickerRecipe = defineSlotRecipe({
-  className: "datePicker",
-  jsx: ["DatePicker", "DateRangePicker"],
+const autocompleteRecipe = defineSlotRecipe({
+  className: "autocomplete",
+  jsx: ["Autocomplete"],
   slots: [
     "root",
+    "control",
+    "valueContainer",
     "input",
-    "segment",
-    "separator",
-    "popover",
-    "calendarHeader",
-    "navButton",
-    "calendarGrid",
-    "weekdayLabel",
-    "day"
+    "token",
+    "overflowIndicator",
+    "loadingIndicator",
+    "listbox",
+    "status",
+    "liveRegion"
   ],
-  base: datePickerBase,
-  variants: datePickerVariants,
+  base: autocompleteBase,
+  variants: autocompleteVariants,
   defaultVariants: {
-    size: "md"
+    size: "md",
+    layer: "elevated"
   }
 });
-const timePickerBase = {
+const segmentedInputsBase = {
   root: {
-    display: "inline-flex",
-    flexDirection: "column",
-    position: "relative"
-  },
-  // The segmented input container — visually identical to textinput
-  input: {
+    ...globalBaseStyles,
     display: "inline-flex",
     alignItems: "center",
-    gap: "2",
-    width: "full",
-    borderWidth: "1",
-    borderStyle: "solid",
-    borderColor: "border.input",
-    borderRadius: "4",
-    outlineWidth: "2",
-    outlineOffset: "-1",
-    outlineStyle: "solid",
-    outlineColor: "transparent",
-    bg: "bg.input",
+    gap: "0",
+    width: "fit",
     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"
-    },
+    flexGrow: "0",
+    flexShrink: "0",
+    flexBasis: "fit",
+    minW: "0",
     _disabled: {
-      bg: "bg.disabled",
-      borderColor: "border.disabled",
       color: "text.disabled",
       cursor: "not-allowed",
       pointerEvents: "none"
-    },
-    _error: {
-      borderColor: "border.danger",
-      _hover: {
-        borderColor: "border.danger"
-      },
-      _focusWithin: {
-        borderColor: "border.danger",
-        outlineColor: "border.danger"
-      },
-      _open: {
-        borderColor: "border.danger",
-        outlineColor: "border.danger"
-      }
     }
   },
-  // Individual focusable segment span (HH, MM, AM/PM)
+  // Individual focusable segment span (MM, DD, YYYY, HH, AM/PM, ...)
   segment: {
     display: "inline-flex",
     alignItems: "center",
@@ -8174,194 +8562,81 @@ const timePickerBase = {
     fontFamily: "mono",
     fontVariantsProperty: "mono",
     fontVariantNumeric: "tabular-nums",
-    minWidth: "1.5em",
     textAlign: "center",
     color: "text",
-    _focusVisible: {
-      bg: "bg.neutral.hovered"
+    _focus: {
+      bg: "bg.accent.gold.subtlest/75"
     },
     _groupDisabled: {
       color: "text.disabled"
     }
   },
-  // The ":" separator between time segments
+  // 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",
-    userSelect: "none",
-    display: "inline-flex",
-    alignItems: "center"
-  },
-  // 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"
-  },
-  // A single scrollable column (hours, minutes, or AM/PM)
-  column: {
-    display: "flex",
-    flexDirection: "column",
-    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"
-  },
-  // Optional column header (e.g. "Hr", "Min")
-  columnLabel: {
-    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"
-  }
-};
-const timePickerVariants = {
-  size: {
-    sm: {
-      input: {
-        py: "0",
-        px: "8",
-        fontSize: "14"
-      }
+    textAlign: "center",
+    userSelect: "none",
+    whiteSpace: "pre",
+    minWidth: "0.75em",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "&[data-gap=none]": {
+      minWidth: "0",
+      px: "0"
     },
-    md: {
-      input: {
-        py: "3",
-        px: "10",
-        fontSize: "16"
-      }
+    "&[data-gap=tight]": {
+      minWidth: "0.5em",
+      px: "1"
     },
-    lg: {
-      input: {
-        py: "7",
-        px: "12",
-        fontSize: "16"
-      }
+    "&[data-gap=normal]": {
+      minWidth: "0.75em",
+      px: "1"
     },
-    xl: {
-      input: {
-        py: "9",
-        px: "16",
-        fontSize: "20"
-      }
+    "&[data-gap=loose]": {
+      minWidth: "1.25em",
+      px: "2"
     }
   }
 };
-const timePickerRecipe = defineSlotRecipe({
-  className: "timePicker",
-  jsx: ["TimePicker", "TimeRangePicker"],
-  slots: [
-    "root",
-    "input",
-    "segment",
-    "separator",
-    "popover",
-    "column",
-    "columnLabel"
-  ],
-  base: timePickerBase,
-  variants: timePickerVariants,
+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 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",
-    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 +8645,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 +8661,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"
-    },
-    _peerHover: {
-      bg: "bg.input.hovered"
-    },
-    _open: {
-      "& > svg": {
-        transform: "rotate(-180deg)",
-        transformOrigin: "center"
-      }
-    }
+    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 selectVariants = {
+const segmentedFieldsVariants = {
   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"
+      container: {
+        "--input-py": "token(sizes.0)",
+        "--input-px": "token(sizes.8)",
+        "--slot-size": "token(sizes.16)",
+        "--slot-px": "token(sizes.4)"
       }
     },
     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"
+      container: {
+        "--input-py": "token(sizes.3)",
+        "--input-px": "token(sizes.10)",
+        "--slot-size": "token(sizes.20)",
+        "--slot-px": "token(sizes.6)"
+      }
+    },
+    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)"
+      }
+    }
+  },
+  field: {
+    date: {
+      container: {
+        minW: "128"
       }
     },
-    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"
+    time: {
+      container: {
+        minW: "104"
       }
     },
-    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"
+    dateTime: {
+      container: {
+        minW: "216"
       }
     }
   },
-  multiple: {
+  range: {
+    date: {
+      container: {
+        minW: "248"
+      }
+    },
+    time: {
+      container: {
+        minW: "200"
+      }
+    }
+  },
+  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 +9076,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({
@@ -8807,6 +9211,17 @@ const colors = defineSemanticTokens.colors({
         pressed: {
           value: { base: "{colors.green.70}", _dark: "{colors.green.20}" }
         }
+      },
+      subtle: {
+        DEFAULT: {
+          value: { base: "{colors.green.5}", _dark: "{colors.green.80}" }
+        },
+        hovered: {
+          value: { base: "{colors.green.10}", _dark: "{colors.green.70}" }
+        },
+        pressed: {
+          value: { base: "{colors.green.20}", _dark: "{colors.green.90}" }
+        }
       }
     },
     warning: {
@@ -8829,6 +9244,17 @@ const colors = defineSemanticTokens.colors({
         pressed: {
           value: { base: "{colors.orange.70}", _dark: "{colors.orange.50}" }
         }
+      },
+      subtle: {
+        DEFAULT: {
+          value: { base: "{colors.orange.5}", _dark: "{colors.orange.80}" }
+        },
+        hovered: {
+          value: { base: "{colors.orange.10}", _dark: "{colors.orange.70}" }
+        },
+        pressed: {
+          value: { base: "{colors.orange.20}", _dark: "{colors.orange.90}" }
+        }
       }
     },
     danger: {
@@ -8847,6 +9273,17 @@ const colors = defineSemanticTokens.colors({
         pressed: {
           value: { base: "{colors.red.60}", _dark: "{colors.red.50}" }
         }
+      },
+      subtle: {
+        DEFAULT: {
+          value: { base: "{colors.red.5}", _dark: "{colors.red.80}" }
+        },
+        hovered: {
+          value: { base: "{colors.red.10}", _dark: "{colors.red.70}" }
+        },
+        pressed: {
+          value: { base: "{colors.red.20}", _dark: "{colors.red.90}" }
+        }
       }
     },
     info: {
@@ -8869,6 +9306,17 @@ const colors = defineSemanticTokens.colors({
         pressed: {
           value: { base: "{colors.blue.70}", _dark: "{colors.blue.20}" }
         }
+      },
+      subtle: {
+        DEFAULT: {
+          value: { base: "{colors.blue.5}", _dark: "{colors.blue.80}" }
+        },
+        hovered: {
+          value: { base: "{colors.blue.10}", _dark: "{colors.blue.70}" }
+        },
+        pressed: {
+          value: { base: "{colors.blue.20}", _dark: "{colors.blue.90}" }
+        }
       }
     },
     cta: {
@@ -10071,6 +10519,7 @@ const zIndex = defineSemanticTokens.zIndex({
   elevated: { value: "{zIndex.1000}" },
   overlay: { value: "{zIndex.1100}" },
   modal: { value: "{zIndex.1101}" },
+  modalFloating: { value: "{zIndex.1102}" },
   tooltip: { value: "{zIndex.1200}" }
 });
 const presetRecipes = Object.fromEntries(
@@ -10160,4 +10609,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-CcvrY8wh.js.map
+//# sourceMappingURL=cetec-preset-D23KFUx3.js.map