@commercetools/nimbus 2.1.0 → 2.2.0

package/dist/chunks/{index-BEgCT-l6.es.js → index-C2qW4ynb.es.js}

@@ -1,11 +1,11 @@
-import { defineAnimationStyles as b, defineConditions as f, defineGlobalStyles as h, defineLayerStyles as x, defineRecipe as g, defineSemanticTokens as p, defineSlotRecipe as s, defineTextStyles as v, defineTokens as o, createSystem as y, defaultBaseConfig as w, defineConfig as S } from "@chakra-ui/react";
-import { themeTokens as t, designTokens as z } from "@commercetools/nimbus-tokens";
-import { a as k } from "./avatar.recipe-BEdxgo-r.es.js";
-import { b as R } from "./badge.recipe-DsV4A_UD.es.js";
-import { b as c, a as I } from "./toggle-button-group.recipe-Cl3PTeGf.es.js";
-import { defineSlotRecipe as e, defineRecipe as a } from "@chakra-ui/react/styled-system";
-import { i as C } from "./icon.recipe-DjkjodUn.es.js";
-const P = /* @__PURE__ */ e({
+import { defineAnimationStyles as m, defineConditions as b, defineGlobalStyles as f, defineLayerStyles as h, defineRecipe as p, defineSemanticTokens as c, defineSlotRecipe as n, defineTextStyles as x, defineTokens as o, createSystem as v, defaultBaseConfig as y, defineConfig as w } from "@chakra-ui/react";
+import { themeTokens as t, designTokens as S } from "@commercetools/nimbus-tokens";
+import { a as z } from "./avatar.recipe-BEdxgo-r.es.js";
+import { b as k } from "./badge.recipe-DsV4A_UD.es.js";
+import { b as d, a as R } from "./toggle-button-group.recipe-Cl3PTeGf.es.js";
+import { defineSlotRecipe as e, defineRecipe as r } from "@chakra-ui/react/styled-system";
+import { i as I } from "./icon.recipe-DjkjodUn.es.js";
+const C = /* @__PURE__ */ e({
   className: "nimbus-date-range-picker",
   slots: [
     "root",
@@ -123,7 +123,7 @@ const P = /* @__PURE__ */ e({
     size: "md",
     variant: "solid"
   }
-}), W = /* @__PURE__ */ b({
+}), P = /* @__PURE__ */ m({
   "slide-fade-in": {
     value: {
       transformOrigin: "var(--transform-origin)",
@@ -171,13 +171,13 @@ const P = /* @__PURE__ */ e({
     }
   }
 });
-function _(i) {
-  const n = {};
-  for (const r in i)
-    i[r]?.value ? n[r] = i[r].value : n[r] = i[r];
-  return n;
+function W(i) {
+  const l = {};
+  for (const a in i)
+    i[a]?.value ? l[a] = i[a].value : l[a] = i[a];
+  return l;
 }
-const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
+const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ b({
   /**
    * Maps to React Aria's open state data attributes
    * Used for animations when a component is opening/entering
@@ -188,7 +188,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
    * Used for animations when a component is closing/exiting
    */
   closed: "&:is([data-exiting], [data-closed])"
-}), B = /* @__PURE__ */ h({
+}), N = /* @__PURE__ */ f({
   "*": {
     fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
     /**
@@ -268,7 +268,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     display: "initial",
     verticalAlign: "initial"
   }
-}), E = {
+}), B = {
   spin: {
     "0%": {
       transform: "rotate(0deg)"
@@ -474,7 +474,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       backgroundPosition: "-200% 0"
     }
   }
-}, T = /* @__PURE__ */ x({
+}, E = /* @__PURE__ */ h({
   disabled: {
     value: {
       opacity: "0.5",
@@ -489,7 +489,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       outlineOffset: "var(--focus-ring-offset)"
     }
   }
-}), D = /* @__PURE__ */ a({
+}), T = /* @__PURE__ */ r({
   className: "nimbus-code",
   base: {
     fontFamily: "mono",
@@ -549,14 +549,14 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     variant: "solid",
     size: "md"
   }
-}), L = /* @__PURE__ */ g({
+}), A = /* @__PURE__ */ p({
   className: "nimbus-group",
   base: {
     display: "inline-flex",
     alignItems: "center"
   }
   // TODO: there could be variants here
-}), A = /* @__PURE__ */ a({
+}), D = /* @__PURE__ */ r({
   className: "nimbus-heading",
   base: {
     fontFamily: "heading",
@@ -602,7 +602,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     size: "xl"
   }
-}), V = /* @__PURE__ */ a({
+}), V = /* @__PURE__ */ r({
   className: "nimbus-kbd",
   base: {
     display: "inline-flex",
@@ -622,7 +622,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     borderBottom: "solid-50",
     borderColor: "currentColor"
   }
-}), F = /* @__PURE__ */ a({
+}), L = /* @__PURE__ */ r({
   className: "nimbus-link",
   // Base styles applied to all instances of the component
   base: {
@@ -667,7 +667,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       }
     }
   }
-}), j = /* @__PURE__ */ a({
+}), F = /* @__PURE__ */ r({
   className: "nimbus-loading-spinner",
   base: {
     display: "inline-flex",
@@ -725,7 +725,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     size: "sm"
   }
-}), G = /* @__PURE__ */ a({
+}), j = /* @__PURE__ */ r({
   // Unique class name prefix for the component
   className: "nimbus-popover",
   // Base styles applied to all instances of the component
@@ -736,7 +736,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     padding: "400",
     zIndex: 1
   }
-}), u = /* @__PURE__ */ e({
+}), g = /* @__PURE__ */ e({
   slots: ["root", "option"],
   // Unique class name prefix for the component
   className: "nimbus-radio-input",
@@ -805,7 +805,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     orientation: "vertical"
   }
-}), O = /* @__PURE__ */ a({
+}), O = /* @__PURE__ */ r({
   className: "nimbus-separator",
   // Base styles applied to all instances of the component
   base: {
@@ -831,15 +831,15 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     orientation: "horizontal"
   }
-}), Y = /* @__PURE__ */ a({
+}), G = /* @__PURE__ */ r({
   className: "nimbus-toggle-button",
   base: {
-    ...c.base,
+    ...d.base,
     colorPalette: "primary"
   },
   variants: {
     size: {
-      ...c.variants?.size
+      ...d.variants?.size
     },
     variant: {
       outline: {
@@ -885,7 +885,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     size: "md",
     variant: "outline"
   }
-}), M = /* @__PURE__ */ g({
+}), Y = /* @__PURE__ */ p({
   className: "nimbus-toolbar",
   base: {
     display: "inline-flex",
@@ -938,7 +938,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     size: "md",
     variant: "plain"
   }
-}), U = /* @__PURE__ */ a({
+}), M = /* @__PURE__ */ r({
   // Unique class name prefix for the component
   className: "nimbus-tooltip",
   // Base styles applied to all instances of the component
@@ -956,38 +956,32 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     maxW: "6400",
     boxShadow: "1"
   }
-}), X = {
-  avatar: k,
-  badge: R,
-  button: c,
-  code: D,
-  group: L,
-  heading: A,
-  icon: C,
+}), U = {
+  avatar: z,
+  badge: k,
+  button: d,
+  code: T,
+  group: A,
+  heading: D,
+  icon: I,
   kbd: V,
-  link: F,
-  loadingSpinner: j,
-  popover: G,
-  radioInput: u,
+  link: L,
+  loadingSpinner: F,
+  popover: j,
+  radioInput: g,
   separator: O,
-  toggleButton: Y,
-  toolbar: M,
-  tooltip: U
-}, $ = /* @__PURE__ */ p.colors({
+  toggleButton: G,
+  toolbar: Y,
+  tooltip: M
+}, X = /* @__PURE__ */ c.colors({
   bg: {
     DEFAULT: {
-      value: {
-        _light: "white",
-        _dark: "black"
-      }
+      value: { _light: "#fff", _dark: "{colors.neutral.1}" }
     }
   },
   fg: {
     DEFAULT: {
-      value: {
-        _light: "black",
-        _dark: "white"
-      }
+      value: "{colors.neutral.12}"
     }
   },
   border: {
@@ -1016,17 +1010,17 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       value: "{colors.positive.8}"
     },
     info: {
-      value: "{colors.ingo.8}"
+      value: "{colors.info.8}"
     }
   },
   ...t.color["system-palettes"],
   ...t.color["brand-palettes"],
   ...t.color["semantic-palettes"]
-}), q = /* @__PURE__ */ p.shadows(t.shadow), Z = /* @__PURE__ */ p.radii({}), J = {
-  colors: $,
-  shadows: q,
-  radii: Z
-}, K = /* @__PURE__ */ e({
+}), $ = /* @__PURE__ */ c.shadows(t.shadow), q = /* @__PURE__ */ c.radii({}), Z = {
+  colors: X,
+  shadows: $,
+  radii: q
+}, J = /* @__PURE__ */ e({
   slots: [
     "root",
     "disclosure",
@@ -1114,19 +1108,22 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     size: "md"
   }
-}), Q = /* @__PURE__ */ e({
+}), K = /* @__PURE__ */ e({
   slots: ["root", "title", "description", "icon", "actions", "dismissButton"],
   // Unique class name prefix for the component
   className: "nimbus-alert",
   // Base styles applied to all instances of the component
   base: {
     root: {
-      display: "inline-flex",
-      flexDirection: "row",
+      display: "grid",
+      gridTemplateColumns: "auto 1fr auto",
       gap: "200",
-      width: "100%"
+      width: "100%",
+      alignItems: "start"
     },
     icon: {
+      gridColumn: "1",
+      gridRow: "1",
       marginTop: "50",
       "& svg": {
         width: "500",
@@ -1135,10 +1132,22 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       }
     },
     title: {
+      gridColumn: "2",
+      order: "1",
       color: "colorPalette.11"
     },
     description: {
+      gridColumn: "2",
+      order: "2",
       color: "colorPalette.11"
+    },
+    actions: {
+      gridColumn: "2",
+      order: "3"
+    },
+    dismissButton: {
+      gridColumn: "3",
+      gridRow: "1"
     }
   },
   variants: {
@@ -1155,7 +1164,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       }
     }
   }
-}), ee = /* @__PURE__ */ e({
+}), Q = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -1250,7 +1259,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       }
     }
   }
-}), te = /* @__PURE__ */ e({
+}), ee = /* @__PURE__ */ e({
   slots: ["root", "header", "content"],
   className: "nimbus-card",
   base: {
@@ -1300,7 +1309,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     backgroundStyle: {
       default: {
         root: {
-          backgroundColor: "colorPalette.contrast"
+          backgroundColor: "bg"
         }
       },
       muted: {
@@ -1316,7 +1325,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     elevation: "none",
     backgroundStyle: "default"
   }
-}), d = /* @__PURE__ */ e({
+}), s = /* @__PURE__ */ e({
   slots: ["root", "label", "indicator"],
   // Unique class name prefix for the component
   className: "nimbus-checkbox",
@@ -1414,97 +1423,147 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     size: "md"
   }
-}), l = /* @__PURE__ */ e({
+}), te = /* @__PURE__ */ e({
   slots: [
     "root",
-    "leadingElement",
     "trigger",
-    "triggerLabel",
-    "options",
-    "optionGroup",
-    "option"
+    "leadingElement",
+    "content",
+    "tagGroup",
+    "input",
+    "popover",
+    "listBox",
+    "section",
+    "option",
+    "optionIndicator",
+    "optionContent"
   ],
   // Unique class name prefix for the component
-  className: "nimbus-select",
+  className: "nimbus-combobox",
   // Base styles applied to all instances of the component
   base: {
-    // RA <Select>
     root: {
       colorPalette: "primary",
-      display: "inline-block",
+      display: "inline-flex",
       position: "relative",
+      alignSelf: "flex-start",
       maxWidth: "100%",
       borderRadius: "200",
       "&[data-disabled='true']": {
         layerStyle: "disabled",
-        pointerEvents: "none",
-        bg: "neutral.3"
+        focusRing: "none",
+        bg: "neutral.3",
+        "& input, & button": {
+          // if you set 'pointer-events: none' on an element, it does not display a cursor,
+          // so in order to display `cursor: not-allowed`, we must set pointerEvents: none on the interactive children
+          pointerEvents: "none!"
+        }
+      },
+      "& [data-placeholder]": {
+        opacity: 0.5
+      }
+    },
+    leadingElement: {
+      gridArea: "leadingElement",
+      display: "contents",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "neutral.11",
+      "& svg": {
+        minH: "600",
+        minW: "600",
+        pr: "100"
       }
     },
     trigger: {
-      cursor: "button",
-      display: "inline-flex",
-      focusRing: "outside",
+      display: "grid",
+      gridTemplateColumns: "auto 1fr auto auto",
+      gridTemplateAreas: '"leadingElement content clear toggle"',
       alignItems: "center",
-      justifyContent: "flex-start",
+      gap: "100",
+      width: "100%",
+      focusRing: "outside",
+      px: "300",
+      py: "100",
       borderRadius: "200",
       color: "neutral.12",
-      width: "100%",
-      userSelect: "none",
+      textAlign: "left",
       boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      '& [slot="description"]': {
-        display: "none"
+      _focusWithin: {
+        layerStyle: "focusRing"
       },
-      "[data-invalid] &": {
+      _disabled: { pointerEvents: "none" },
+      '[data-invalid="true"] &': {
         "--border-width": "sizes.50",
-        "--border-color": "colors.critical.7"
+        "--border-color": "colors.critical.7",
+        color: "critical.11"
+      },
+      '& button[slot="toggle"]': {
+        gridArea: "toggle",
+        alignSelf: "center"
+      },
+      '& button[slot="clear"]': {
+        gridArea: "clear",
+        alignSelf: "center",
+        mr: "-100",
+        _expanded: {
+          bg: "colorPalette.3"
+        }
       }
     },
-    leadingElement: {
+    content: {
+      gridArea: "content",
       display: "flex",
+      flexWrap: "wrap",
       alignItems: "center",
-      color: "neutral.11"
+      gap: "100",
+      minWidth: 0,
+      cursor: "text",
+      "[data-disabled='true'] &": {
+        pointerEvents: "none"
+      }
     },
-    triggerLabel: {
-      // *Magic*
-      // the trigger-label defines the overall width of the select,
-      // but since we position 2 buttons/icons next to it, we need to account for
-      // their width as well and reserve some space for them
-      // = label-button-gap + button-size + icon-size
-      // = 8px + 24px + 24px
-      // = 56px * 25 = 1400 token
-      "--button-safespace": "sizes.1400",
-      color: "neutral.12",
-      textAlign: "left",
-      marginRight: "var(--button-safespace)",
+    tagGroup: {
+      display: "contents"
+    },
+    input: {
+      flex: "0 0 auto",
+      minWidth: "0",
       maxWidth: "100%",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      "&[data-placeholder]": {
-        opacity: 0.5
+      border: "none",
+      outline: "none",
+      bg: "transparent",
+      padding: 0,
+      // If the value & placeholder are falsy, input width should be 1px
+      // so it doesn't cause a blank line in content box
+      '&[data-empty="true"]': {
+        width: "25"
       },
-      "[data-invalid] &": {
-        color: "critical.11"
-      }
+      _hover: {
+        bg: "primary.2"
+      },
+      _placeholder: { opacity: 0.5 }
     },
-    // Popover
-    options: {
-      "--scrollbar-color": "colors.neutral.8",
-      "--scrollbar-bg": "colors.neutral.3",
+    popover: {
       bg: "bg",
       borderRadius: "200",
       boxShadow: "5",
-      minWidth: "var(--trigger-width)",
-      p: "200",
+      minWidth: "var(--nimbus-combobox-trigger-width)",
+      overflow: "hidden",
+      padding: 0
+    },
+    listBox: {
+      "--scrollbar-color": "colors.neutral.8",
+      "--scrollbar-bg": "colors.neutral.3",
+      gap: "100",
+      padding: "200",
       focusRing: "outside",
-      maxHeight: "40svh",
+      maxH: "40svh",
       overflowY: "auto",
       scrollbarWidth: "thin",
       scrollbarColor: "var(--scrollbar-color) var(--scrollbar-bg)"
     },
-    // Option group header
-    optionGroup: {
+    section: {
       textStyle: "xs",
       color: "neutral.11",
       fontWeight: "600",
@@ -1518,15 +1577,14 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       mt: "200",
       mb: "300"
     },
-    // ListBoxItem
     option: {
       focusRing: "outside",
       cursor: "menuitem",
       color: "neutral.12",
       textStyle: "sm",
-      p: "200",
+      padding: "200",
       borderRadius: "200",
-      whiteSpace: "nowrap",
+      whiteSpace: "wrap",
       overflow: "hidden",
       textOverflow: "ellipsis",
       '&[aria-selected="true"]': {
@@ -1546,316 +1604,121 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       "&[data-disabled='true']": {
         layerStyle: "disabled"
       }
+    },
+    optionIndicator: {
+      // make sure option is aligned with the first line of text (using lh units)
+      height: "max(1lh, {sizes.600})",
+      width: "max(1lh, {sizes.600})",
+      display: "flex",
+      alignItems: "center",
+      "& span[data-selected]": {
+        ...s.base?.indicator,
+        ...s.variants?.size.md.indicator
+      }
+    },
+    optionContent: {
+      ...s.base?.label,
+      whiteSpace: "wrap",
+      width: "calc(100% - {sizes.600})",
+      display: "inline-block"
     }
   },
   // Available variants for customizing the component's appearance
   variants: {
     // Size variants from smallest to largest
     size: {
+      // Small
       sm: {
-        root: {},
         trigger: {
-          px: "300",
-          gap: "100",
-          h: "800",
+          minH: "800",
           textStyle: "sm"
         },
         leadingElement: {
-          "& > svg": {
-            boxSize: "400"
-          }
+          minH: "800"
         }
       },
+      // Medium
       md: {
-        root: {},
         trigger: {
-          h: "1000",
-          px: "400",
-          gap: "200",
+          minH: "1000",
           textStyle: "md"
         },
         leadingElement: {
-          "& > svg": {
-            boxSize: "500"
-          }
+          minH: "1000"
         }
       }
-      // Medium
     },
     // Visual style variants
     variant: {
-      outline: {
+      solid: {
         root: {
           bg: "primary.1",
-          "&:hover": {
+          "&:hover:not([data-disabled='true'])": {
             bg: "primary.2"
-          }
+          },
+          width: "7200"
         },
         trigger: {
           "--border-width": "sizes.25",
-          "--border-color": "colors.neutral.7"
+          "--border-color": "colors.neutral.7",
+          width: "100%"
         }
       },
       ghost: {
         root: {
           bg: "transparent",
-          "&:hover": {
+          "&:hover:not([data-disabled='true'])": {
             bg: "primaryAlpha.2"
-          }
+          },
+          width: "7200"
         },
         trigger: {
           "--border-width": "sizes.25",
-          "--border-color": "transparent"
+          "--border-color": "transparent",
+          bg: "transparent",
+          width: "100%"
         }
       }
     },
-    isClearable: {
-      false: {
-        triggerLabel: {
-          "--button-safespace": "sizes.1000"
+    selectionMode: {
+      multiple: {
+        options: {
+          boxShadow: "none",
+          px: "200",
+          my: "200",
+          minW: "unset",
+          "& section:first-of-type > header": {
+            mt: 0
+          }
+        },
+        option: {
+          colorPalette: "primary",
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          position: "relative",
+          cursor: "pointer",
+          gap: "200",
+          mb: "var(--focus-ring-width)",
+          "&:last-of-type": {
+            mb: 0
+          },
+          '&[aria-selected="true"]': {
+            bg: "unset"
+          },
+          '&[data-focused="true"]': {
+            outlineWidth: "var(--focus-ring-width)",
+            outlineColor: "var(--focus-ring-color)",
+            outlineStyle: "var(--focus-ring-style)",
+            bg: "unset"
+          },
+          _hover: {
+            bg: "primary.2"
+          }
         }
-      }
-    }
-  },
-  // Default variant values when not explicitly specified
-  defaultVariants: {
-    size: "md",
-    variant: "outline"
-  }
-}), oe = /* @__PURE__ */ e({
-  slots: [
-    "root",
-    "value",
-    "leadingElement",
-    "buttonGroup",
-    "popover",
-    "multiSelectInput",
-    "options",
-    "optionGroup",
-    "option",
-    "optionIndicator",
-    "optionContent"
-  ],
-  // Unique class name prefix for the component
-  className: "nimbus-combobox",
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      "--leading-element-width": "sizes.200",
-      colorPalette: "primary",
-      focusRing: "outside",
-      display: "inline-flex",
-      position: "relative",
-      alignSelf: "flex-start",
-      maxWidth: "100%",
-      borderRadius: "200",
-      _hover: {
-        bg: "primary.2"
-      },
-      "&[data-disabled='true']": {
-        layerStyle: "disabled",
-        focusRing: "none",
-        bg: "neutral.3",
-        "& input, & button": {
-          // if you set 'pointer-events: none' on an element, it does not display a cursor,
-          // so in order to display `cursor: not-allowed`, we must set pointerEvents: none on the interactive children
-          pointerEvents: "none!"
-        }
-      },
-      "& input": {
-        cursor: "text",
-        _hover: {
-          bg: "primary.2"
-        },
-        _placeholder: { opacity: 0.5 }
-      },
-      "& [data-placeholder]": {
-        opacity: 0.5
-      }
-    },
-    leadingElement: {
-      position: "absolute",
-      display: "flex",
-      alignItems: "center",
-      color: "neutral.11"
-    },
-    value: {
-      display: "flex",
-      focusRing: "outside",
-      alignItems: "flex-start",
-      pr: "1600",
-      pl: "400",
-      py: "100",
-      borderRadius: "200",
-      color: "neutral.12",
-      maxWidth: "100%",
-      textAlign: "left",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      _disabled: { pointerEvents: "none" },
-      '[data-invalid="true"] &': {
-        "--border-width": "sizes.50",
-        "--border-color": "colors.critical.7",
-        color: "critical.11"
-      },
-      '& button[slot="remove"]': {
-        _expanded: {
-          bg: "colorPalette.3"
-        }
-      }
-    },
-    buttonGroup: {
-      position: "absolute",
-      display: "inline-flex",
-      top: 0,
-      bottom: 0,
-      right: 300,
-      my: "auto"
-    },
-    popover: {
-      bg: "bg",
-      borderRadius: "200",
-      boxShadow: "5"
-    },
-    multiSelectInput: {
-      "& input": {
-        py: "300",
-        px: "400",
-        focusRing: "none",
-        borderBottom: "solid 1px",
-        borderBottomColor: "neutral.3",
-        bg: "transparent",
-        w: "100%",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        fontSize: "350",
-        fontWeight: "400",
-        lineHeight: "400",
-        _placeholder: { opacity: 0.5 }
-      }
-    },
-    options: {
-      ...l.base?.options,
-      gap: "100"
-    },
-    optionGroup: {
-      ...l.base?.optionGroup
-    },
-    option: {
-      ...l.base?.option,
-      whiteSpace: "wrap"
-    },
-    optionIndicator: {
-      // make sure option is aligned with the first line of text (using lh units)
-      height: "max(1lh, {sizes.600})",
-      width: "max(1lh, {sizes.600})",
-      display: "flex",
-      alignItems: "center",
-      "& span[data-selected]": {
-        ...d.base?.indicator,
-        ...d.variants?.size.md.indicator
-      }
-    },
-    optionContent: {
-      ...d.base?.label,
-      whiteSpace: "wrap",
-      width: "calc(100% - {sizes.600})",
-      display: "inline-block"
-    }
-  },
-  // Available variants for customizing the component's appearance
-  variants: {
-    // Size variants from smallest to largest
-    size: {
-      // Small
-      sm: {
-        value: {
-          minH: "800",
-          textStyle: "sm",
-          pl: "calc(var(--leading-element-width) + {sizes.100})"
-        },
-        leadingElement: {
-          minH: "800",
-          pl: "300"
-        }
-      },
-      // Medium
-      md: {
-        value: {
-          minH: "1000",
-          textStyle: "md",
-          pl: "calc(var(--leading-element-width) + {sizes.200})"
-        },
-        leadingElement: {
-          minH: "1000",
-          pl: "400"
-        }
-      }
-    },
-    // Visual style variants
-    variant: {
-      solid: {
-        root: {
-          width: "7200"
-        },
-        value: {
-          ...l.variants?.variant.outline.trigger,
-          width: "100%"
-        }
-      },
-      ghost: {
-        root: {
-          ...l.variants?.variant.ghost.root,
-          maxW: "7200"
-        },
-        value: {
-          ...l.variants?.variant.ghost.trigger,
-          bg: "transparent"
-        }
-      }
-    },
-    selectionMode: {
-      multiple: {
-        options: {
-          boxShadow: "none",
-          px: "200",
-          my: "200",
-          minW: "unset",
-          "& section:first-of-type > header": {
-            mt: 0
-          }
-        },
-        option: {
-          colorPalette: "primary",
-          display: "flex",
-          alignItems: "flex-start",
-          justifyContent: "center",
-          position: "relative",
-          cursor: "pointer",
-          gap: "200",
-          mb: "var(--focus-ring-width)",
-          "&:last-of-type": {
-            mb: 0
-          },
-          '&[aria-selected="true"]': {
-            bg: "unset"
-          },
-          '&[data-focused="true"]': {
-            // TODO: can't use focusRing prop, find other solution (helper, util, etc.)
-            outlineWidth: "var(--focus-ring-width)",
-            outlineColor: "var(--focus-ring-color)",
-            outlineStyle: "var(--focus-ring-style)",
-            bg: "unset"
-          },
-          _hover: {
-            bg: "primary.2"
-          }
-        }
-      },
-      single: {},
-      none: {}
+      },
+      single: {},
+      none: {}
     }
   },
   compoundVariants: [
@@ -1879,7 +1742,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
             }
           }
         },
-        options: {
+        listBox: {
           width: "var(--trigger-width)"
         }
       }
@@ -1898,12 +1761,8 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       variant: "ghost",
       selectionMode: "single",
       css: {
-        value: {
+        trigger: {
           flex: "1 1 auto"
-        },
-        options: {
-          minW: "max(var(--trigger-width), {sizes.2000})",
-          maxW: "max(var(--trigger-width), {sizes.7200})"
         }
       }
     }
@@ -1914,7 +1773,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     variant: "solid",
     selectionMode: "single"
   }
-}), ae = /* @__PURE__ */ s({
+}), oe = /* @__PURE__ */ n({
   // Available slots for the DataTable component
   slots: [
     "root",
@@ -1981,7 +1840,6 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
           }
         },
         "& .data-table-sticky-cell": {
-          backgroundColor: "white",
           position: "sticky",
           left: 0
         },
@@ -2042,7 +1900,6 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       "& .data-table-row-pinned": {
         boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right)",
         "& .data-table-sticky-cell": {
-          backgroundColor: "white",
           position: "sticky",
           left: 0,
           zIndex: 3
@@ -2105,16 +1962,17 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       // Multiline header truncation using webkit line clamp
     },
     table: {
-      // width: "fit-content",
       tableLayout: "fixed",
-      border: "1px solid {colors.neutral.3}",
-      boxShadow: "1",
+      boxSizing: "border-box",
+      boxShadow: "inset 0 0 0 1px {colors.neutral.3}",
+      borderRadius: "0 0 {sizes.200} {sizes.200}",
       colorPalette: "slate",
-      borderRadius: "8px",
       width: "100%"
     },
     header: {
       background: "colorPalette.2",
+      boxShadow: "inset 0 0 0 1px {colors.neutral.3}",
+      borderRadius: "{sizes.200} {sizes.200} 0 0",
       color: "colorPalette.11",
       borderBottom: "1px solid {colors.neutral.3}",
       lineHeight: "400",
@@ -2197,11 +2055,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
         paddingRight: "600",
         position: "sticky",
         left: 0,
-        zIndex: 13,
-        backgroundColor: "colorPalette.2",
-        "&:hover": {
-          backgroundColor: "colorPalette.2"
-        }
+        zIndex: 13
       },
       "&.expand-column-header": {
         cursor: "default",
@@ -2209,11 +2063,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
         position: "sticky",
         left: 0,
         // Default position when no selection column
-        zIndex: 12,
-        backgroundColor: "colorPalette.2",
-        "&:hover": {
-          backgroundColor: "colorPalette.2"
-        }
+        zIndex: 12
       },
       // When selection column is present, adjust expand column header position
       "&.selection-column-header + &.expand-column-header": {
@@ -2228,11 +2078,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
         paddingRight: "600",
         position: "sticky",
         right: 0,
-        zIndex: 11,
-        backgroundColor: "colorPalette.2",
-        "&:hover": {
-          backgroundColor: "colorPalette.2"
-        }
+        zIndex: 11
       },
       "&[aria-sort]": {
         fontWeight: 600,
@@ -2526,7 +2372,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     size: "md",
     variant: "solid"
   }
-}), ie = /* @__PURE__ */ e({
+}), ae = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-picker",
   slots: [
@@ -2577,7 +2423,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     size: "md"
   }
-}), le = /* @__PURE__ */ e({
+}), ie = /* @__PURE__ */ e({
   slots: [
     "trigger",
     "modalOverlay",
@@ -2777,9 +2623,9 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   },
   defaultVariants: {
     placement: "right",
-    showBackdrop: !1
+    showBackdrop: !0
   }
-}), ne = /* @__PURE__ */ e({
+}), le = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -2937,7 +2783,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     scrollBehavior: "outside",
     placement: "center"
   }
-}), se = /* @__PURE__ */ s({
+}), ne = /* @__PURE__ */ n({
   className: "nimbus-field-errors",
   slots: ["root", "message"],
   base: {
@@ -2949,16 +2795,16 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       color: "colorPalette.11"
     }
   }
-}), de = `
+}), se = `
 "label"
 "input"
 "description"
 "error"
-`, ce = `
+`, de = `
 "label input"
 "label description"
 "label error"
-`, pe = /* @__PURE__ */ e({
+`, ce = /* @__PURE__ */ e({
   slots: ["root", "label", "input", "description", "error", "popover"],
   // Unique class name prefix for the component
   className: "nimbus-ui-form-field",
@@ -2973,7 +2819,14 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       fontWeight: "500",
       color: "neutral.11",
       fontSize: "var(--form-field-font-size)",
-      lineHeight: "var(--form-field-line-height)"
+      lineHeight: "var(--form-field-line-height)",
+      // ensure the asterisk is always aligned top-right
+      "& > label[data-required='true']": {
+        display: "inline-flex",
+        "& > sup": {
+          lineHeight: "inherit"
+        }
+      }
     },
     input: {
       gridArea: "input"
@@ -3026,7 +2879,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     direction: {
       column: {
         root: {
-          gridTemplateAreas: de
+          gridTemplateAreas: se
         },
         input: {
           mt: "var(--grid-gap)"
@@ -3040,7 +2893,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       },
       row: {
         root: {
-          gridTemplateAreas: ce,
+          gridTemplateAreas: de,
           gridTemplateColumns: "auto 1fr",
           gridColumnGap: "200"
         },
@@ -3058,7 +2911,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     direction: "column",
     size: "md"
   }
-}), ge = /* @__PURE__ */ e({
+}), pe = /* @__PURE__ */ e({
   className: "nimbus-list",
   slots: ["root", "item", "indicator"],
   base: {
@@ -3123,18 +2976,18 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     variant: "marker"
   }
-}), ue = `
+}), ge = `
 "label"
 "fields"
 "toggle"
 "description"
 "error"
 
-`, me = `
+`, ue = `
 "label input"
 "description description"
 "error error"
-`, be = /* @__PURE__ */ e({
+`, me = /* @__PURE__ */ e({
   slots: [
     // Group / Fieldset slots
     "root",
@@ -3156,7 +3009,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     root: {
       display: "grid",
       width: "auto",
-      gridTemplateAreas: ue,
+      gridTemplateAreas: ge,
       gap: "100"
     },
     label: {
@@ -3216,7 +3069,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     // Individual Locale Field / Input slots
     localeFieldRoot: {
       gap: 0,
-      gridTemplateAreas: me,
+      gridTemplateAreas: ue,
       // Fake `_focusWithin` on the label element, since formfield's `label` and `input` slots cannot be wrapped,
       // and the root slot needs to display desc/warning/error, so the focus styling would be off if we used _focusWithin on it
       "&:has(.nimbus-localized-field__localeFieldInput:focus-within)": {
@@ -3272,7 +3125,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       richText: {}
     }
   }
-}), fe = /* @__PURE__ */ s({
+}), be = /* @__PURE__ */ n({
   slots: [
     "root",
     "container",
@@ -3303,7 +3156,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
         },
         "& .nimbus-money-input__amountInput": {
           // remove outline on left side of input so that it looks like there is a continuous outline around the label and input.
-          clipPath: "inset(-4px -4px -4px -1px)"
+          clipPath: "inset(-4px -4px -4px -4px)"
         }
       }
     },
@@ -3391,7 +3244,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     size: "md"
   }
-}), he = /* @__PURE__ */ e({
+}), fe = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-multiline-text-input",
   slots: ["root", "leadingElement", "textarea"],
@@ -3420,7 +3273,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
             <rect width="1.03391" height="8.27125" transform="matrix(0.716448 0.69764 -0.716448 0.69764 5.87891 -0.0262451)" fill="currentColor"/>
           </mask>
           <g mask="url(#mask0_4610_25787)">
-            <rect width="8" height="8" fill="${z.color["semantic-palettes"].primary.light[9]}"/>
+            <rect width="8" height="8" fill="${S.color["semantic-palettes"].primary.light[9]}"/>
           </g>
         </svg>
       `)}")`,
@@ -3522,7 +3375,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     size: "md",
     variant: "solid"
   }
-}), xe = /* @__PURE__ */ e({
+}), he = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-number-input",
   // Define the slots for this multi-part component
@@ -3751,7 +3604,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     size: "md",
     variant: "solid"
   }
-}), ve = /* @__PURE__ */ e({
+}), xe = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -3874,7 +3727,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       }
     }
   }
-}), ye = /* @__PURE__ */ s({
+}), ve = /* @__PURE__ */ n({
   slots: ["root", "toolbar", "editable"],
   className: "nimbus-rich-text-input",
   base: {
@@ -4003,7 +3856,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     }
   },
   variants: {}
-}), we = /* @__PURE__ */ e({
+}), ye = /* @__PURE__ */ e({
   slots: ["root", "container", "selectWrapper", "searchWrapper"],
   className: "nimbus-scoped-search-input",
   base: {
@@ -4051,7 +3904,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     size: "md"
   }
-}), Se = /* @__PURE__ */ e({
+}), we = /* @__PURE__ */ e({
   slots: ["root", "empty", "item", "itemContent"],
   className: "nimbus-draggable-list",
   base: {
@@ -4128,7 +3981,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   defaultVariants: {
     size: "md"
   }
-}), ze = /* @__PURE__ */ e({
+}), Se = /* @__PURE__ */ e({
   className: "nimbus-progress-bar",
   slots: ["root", "track", "fill", "label", "value"],
   // Base styles applied to all instances of the component
@@ -4276,7 +4129,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       }
     }
   ]
-}), ke = /* @__PURE__ */ e({
+}), ze = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -4456,7 +4309,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       letterSpacing: "{spacing.25}"
     }
   }
-}), Re = /* @__PURE__ */ e({
+}), ke = /* @__PURE__ */ e({
   slots: ["root", "leadingElement", "input", "trailingElement"],
   // Unique class name prefix for the component
   className: "nimbus-text-input",
@@ -4561,7 +4414,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     size: "md",
     variant: "solid"
   }
-}), Ie = /* @__PURE__ */ s({
+}), Re = /* @__PURE__ */ n({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -4622,7 +4475,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     variant: "solid"
     // Match component default
   }
-}), Ce = /* @__PURE__ */ e({
+}), Ie = /* @__PURE__ */ e({
   slots: ["root", "trigger", "content"],
   className: "nimbus-collapsible-motion",
   base: {
@@ -4632,7 +4485,7 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     },
     content: {}
   }
-}), Pe = /* @__PURE__ */ e({
+}), Ce = /* @__PURE__ */ e({
   slots: ["root", "leadingElement", "input"],
   // Unique class name prefix for the component
   className: "nimbus-search-input",
@@ -4730,6 +4583,214 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     size: "md",
     variant: "solid"
   }
+}), Pe = /* @__PURE__ */ e({
+  slots: [
+    "root",
+    "leadingElement",
+    "trigger",
+    "triggerLabel",
+    "options",
+    "optionGroup",
+    "option"
+  ],
+  // Unique class name prefix for the component
+  className: "nimbus-select",
+  // Base styles applied to all instances of the component
+  base: {
+    // RA <Select>
+    root: {
+      colorPalette: "primary",
+      display: "inline-block",
+      position: "relative",
+      maxWidth: "100%",
+      borderRadius: "200",
+      "&[data-disabled='true']": {
+        layerStyle: "disabled",
+        pointerEvents: "none",
+        bg: "neutral.3"
+      }
+    },
+    trigger: {
+      cursor: "button",
+      display: "inline-flex",
+      focusRing: "outside",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      borderRadius: "200",
+      color: "neutral.12",
+      width: "100%",
+      userSelect: "none",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      '& [slot="description"]': {
+        display: "none"
+      },
+      "[data-invalid] &": {
+        "--border-width": "sizes.50",
+        "--border-color": "colors.critical.7"
+      }
+    },
+    leadingElement: {
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11"
+    },
+    triggerLabel: {
+      // *Magic*
+      // the trigger-label defines the overall width of the select,
+      // but since we position 2 buttons/icons next to it, we need to account for
+      // their width as well and reserve some space for them
+      // = label-button-gap + button-size + icon-size
+      // = 8px + 24px + 24px
+      // = 56px * 25 = 1400 token
+      "--button-safespace": "sizes.1400",
+      color: "neutral.12",
+      textAlign: "left",
+      marginRight: "var(--button-safespace)",
+      maxWidth: "100%",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      "&[data-placeholder]": {
+        opacity: 0.5
+      },
+      "[data-invalid] &": {
+        color: "critical.11"
+      }
+    },
+    // Popover
+    options: {
+      "--scrollbar-color": "colors.neutral.8",
+      "--scrollbar-bg": "colors.neutral.3",
+      bg: "bg",
+      borderRadius: "200",
+      boxShadow: "5",
+      minWidth: "var(--trigger-width)",
+      p: "200",
+      focusRing: "outside",
+      maxHeight: "40svh",
+      overflowY: "auto",
+      scrollbarWidth: "thin",
+      scrollbarColor: "var(--scrollbar-color) var(--scrollbar-bg)"
+    },
+    // Option group header
+    optionGroup: {
+      textStyle: "xs",
+      color: "neutral.11",
+      fontWeight: "600",
+      lineHeight: "350",
+      letterSpacing: "25",
+      textTransform: "uppercase",
+      p: "200",
+      borderBottom: "solid-25",
+      borderColor: "neutral.3",
+      mx: "-200",
+      mt: "200",
+      mb: "300"
+    },
+    // ListBoxItem
+    option: {
+      focusRing: "outside",
+      cursor: "menuitem",
+      color: "neutral.12",
+      textStyle: "sm",
+      p: "200",
+      borderRadius: "200",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      '&[aria-selected="true"]': {
+        bg: "primary.3"
+      },
+      '&[data-focused="true"]': {
+        bg: "primary.2"
+      },
+      '& [slot="label"]': {
+        display: "block"
+      },
+      '& [slot="description"]': {
+        display: "block",
+        color: "neutral.11",
+        textStyle: "xs"
+      },
+      "&[data-disabled='true']": {
+        layerStyle: "disabled"
+      }
+    }
+  },
+  // Available variants for customizing the component's appearance
+  variants: {
+    // Size variants from smallest to largest
+    size: {
+      sm: {
+        root: {},
+        trigger: {
+          px: "300",
+          gap: "100",
+          h: "800",
+          textStyle: "sm"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
+        }
+      },
+      md: {
+        root: {},
+        trigger: {
+          h: "1000",
+          px: "400",
+          gap: "200",
+          textStyle: "md"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
+        }
+      }
+      // Medium
+    },
+    // Visual style variants
+    variant: {
+      outline: {
+        root: {
+          bg: "primary.1",
+          "&:hover": {
+            bg: "primary.2"
+          }
+        },
+        trigger: {
+          "--border-width": "sizes.25",
+          "--border-color": "colors.neutral.7"
+        }
+      },
+      ghost: {
+        root: {
+          bg: "transparent",
+          "&:hover": {
+            bg: "primaryAlpha.2"
+          }
+        },
+        trigger: {
+          "--border-width": "sizes.25",
+          "--border-color": "transparent"
+        }
+      }
+    },
+    isClearable: {
+      false: {
+        triggerLabel: {
+          "--button-safespace": "sizes.1000"
+        }
+      }
+    }
+  },
+  // Default variant values when not explicitly specified
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
 }), We = /* @__PURE__ */ e({
   slots: ["root", "label", "track", "thumb"],
   // Unique class name prefix for the component
@@ -5047,20 +5108,21 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     }
   },
   variants: {
+    variant: {
+      line: {},
+      pills: {
+        tab: {
+          borderRadius: "full",
+          _selected: {
+            backgroundColor: "primary.3"
+          }
+        }
+      }
+    },
     orientation: {
       horizontal: {
         root: {
           flexDirection: "column"
-        },
-        list: {
-          borderBottom: "{spacing.25} {colors.neutral.6} solid"
-        },
-        tab: {
-          borderBottom: "{spacing.50} solid transparent",
-          marginRight: "-25",
-          _selected: {
-            borderBottomColor: "primary.9"
-          }
         }
       },
       vertical: {
@@ -5109,8 +5171,70 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
       }
     }
   },
-  // Compound variants for different orientation/placement combinations
+  // Compound variants for different variant/orientation/placement combinations
   compoundVariants: [
+    // ==================== LINE VARIANT ====================
+    // Line + Horizontal
+    {
+      variant: "line",
+      orientation: "horizontal",
+      css: {
+        list: {
+          boxShadow: "0 1px 0 0 {colors.neutral.6}"
+        },
+        tab: {
+          boxShadow: "0 2px 0 0 transparent",
+          _selected: {
+            boxShadow: "0 2px 0 0 {colors.primary.9}"
+          }
+        }
+      }
+    },
+    // Line + Vertical + Start (tabs on left, border on right between tabs and content)
+    {
+      variant: "line",
+      orientation: "vertical",
+      placement: "start",
+      css: {
+        list: {
+          boxShadow: "1px 0 0 0 {colors.neutral.6}"
+        },
+        tab: {
+          boxShadow: "2px 0 0 0 transparent",
+          _selected: {
+            boxShadow: "2px 0 0 0 {colors.primary.9}"
+          }
+        }
+      }
+    },
+    // Line + Vertical + End (tabs on right, border on left between tabs and content)
+    {
+      variant: "line",
+      orientation: "vertical",
+      placement: "end",
+      css: {
+        list: {
+          boxShadow: "-1px 0 0 0 {colors.neutral.6}"
+        },
+        tab: {
+          boxShadow: "-2px 0 0 0 transparent",
+          _selected: {
+            boxShadow: "-2px 0 0 0 {colors.primary.9}"
+          }
+        }
+      }
+    },
+    // ==================== PLACEMENT-ONLY VARIANTS ====================
+    // Vertical + End (applies to all variants including pills)
+    {
+      orientation: "vertical",
+      placement: "end",
+      css: {
+        root: {
+          flexDirection: "row-reverse"
+        }
+      }
+    },
     // Horizontal + Start (default)
     {
       orientation: "horizontal",
@@ -5131,45 +5255,36 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
         }
       }
     },
-    // Vertical + Start (tabs on left, border on left)
+    // ==================== PILLS VARIANT ====================
+    // Pills + Horizontal
     {
-      orientation: "vertical",
-      placement: "start",
+      variant: "pills",
+      orientation: "horizontal",
       css: {
-        root: {
-          flexDirection: "row"
-        },
         list: {
-          borderLeft: "{spacing.25} {colors.neutral.6} solid"
-        },
-        tab: {
-          borderLeft: "{spacing.50} solid transparent",
-          marginLeft: "-25",
-          _selected: {
-            borderLeftColor: "primary.9"
-          }
+          gap: "200",
+          boxShadow: "0 0 0 {sizes.25} {colors.neutral.6}",
+          borderRadius: "full",
+          padding: "100"
         }
       }
     },
-    // Vertical + End (tabs on right, border on right)
+    // Pills + Vertical
     {
+      variant: "pills",
       orientation: "vertical",
-      placement: "end",
       css: {
         list: {
-          borderRight: "{spacing.25} {colors.neutral.6} solid"
-        },
-        tab: {
-          borderRight: "{spacing.50} solid transparent",
-          marginRight: "-25",
-          _selected: {
-            borderRightColor: "primary.9"
-          }
+          gap: "200",
+          boxShadow: "0 0 0 {sizes.25} {colors.neutral.6}",
+          borderRadius: "400",
+          padding: "100"
         }
       }
     }
   ],
   defaultVariants: {
+    variant: "line",
     orientation: "horizontal",
     placement: "start",
     size: "md"
@@ -5414,51 +5529,51 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     variant: "solid"
   }
 }), Ee = {
-  accordion: K,
-  alert: Q,
-  calendar: ee,
-  rangeCalendar: ve,
+  accordion: J,
+  alert: K,
+  calendar: Q,
+  rangeCalendar: xe,
   dateInput: re,
-  dateRangePicker: P,
-  datePicker: ie,
-  dataTable: ae,
-  radioInput: u,
-  combobox: oe,
-  progressBar: ze,
-  menu: ke,
-  textInput: Re,
-  splitButton: Ie,
-  drawer: le,
+  dateRangePicker: C,
+  datePicker: ae,
+  dataTable: oe,
+  radioInput: g,
+  combobox: te,
+  progressBar: Se,
+  menu: ze,
+  textInput: ke,
+  splitButton: Re,
+  drawer: ie,
   tabs: He,
-  localizedField: be,
-  card: te,
-  checkbox: d,
-  collapsibleMotion: Ce,
-  dialog: ne,
-  fieldErrors: se,
-  formField: pe,
-  list: ge,
-  moneyInput: fe,
-  multilineTextInput: he,
-  numberInput: xe,
-  richTextInput: ye,
-  scopedSearchInput: we,
-  draggableList: Se,
-  searchInput: Pe,
-  select: l,
+  localizedField: me,
+  card: ee,
+  checkbox: s,
+  collapsibleMotion: Ie,
+  dialog: le,
+  fieldErrors: ne,
+  formField: ce,
+  list: pe,
+  moneyInput: be,
+  multilineTextInput: fe,
+  numberInput: he,
+  richTextInput: ve,
+  scopedSearchInput: ye,
+  draggableList: we,
+  searchInput: Ce,
+  select: Pe,
   switch: We,
   table: _e,
   taggroup: Ne,
   timeInput: Be,
-  toggleButtonGroup: I
-}, Te = /* @__PURE__ */ v(
+  toggleButtonGroup: R
+}, Te = /* @__PURE__ */ x(
   t.textStyle
-), De = /* @__PURE__ */ o.durations(t.aspectRatio), Le = /* @__PURE__ */ o.animations(t.animation), Ae = /* @__PURE__ */ o.blurs(t.blur), Ve = /* @__PURE__ */ o.borders(t.border), Fe = /* @__PURE__ */ o.colors({
+), Ae = /* @__PURE__ */ o.durations(t.aspectRatio), De = /* @__PURE__ */ o.animations(t.animation), Ve = /* @__PURE__ */ o.blurs(t.blur), Le = /* @__PURE__ */ o.borders(t.border), Fe = /* @__PURE__ */ o.colors({
   ...t.color["blacks-and-whites"]
-}), je = /* @__PURE__ */ o.durations(t.duration), Ge = /* @__PURE__ */ o.easings(t.easing), Oe = /* @__PURE__ */ o.fonts(t.fontFamily), Ye = /* @__PURE__ */ o.fontSizes(t.fontSize), Me = /* @__PURE__ */ o.fontWeights(t.fontWeight), Ue = (i) => Object.keys(i).reduce(
-  (n, r) => {
-    const m = parseFloat(i[r].value) / 100;
-    return n[r] = { value: `${m}em` }, n;
+}), je = /* @__PURE__ */ o.durations(t.duration), Oe = /* @__PURE__ */ o.easings(t.easing), Ge = /* @__PURE__ */ o.fonts(t.fontFamily), Ye = /* @__PURE__ */ o.fontSizes(t.fontSize), Me = /* @__PURE__ */ o.fontWeights(t.fontWeight), Ue = (i) => Object.keys(i).reduce(
+  (l, a) => {
+    const u = parseFloat(i[a].value) / 100;
+    return l[a] = { value: `${u}em` }, l;
   },
   {}
 ), Xe = /* @__PURE__ */ o.letterSpacings(
@@ -5580,14 +5695,14 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
     value: "100vh"
   }
 }), Ke = /* @__PURE__ */ o.zIndex(t.zIndex), Qe = /* @__PURE__ */ o.cursor(t.cursor), et = {
-  aspectRatios: De,
-  animations: Le,
-  blurs: Ae,
-  borders: Ve,
+  aspectRatios: Ae,
+  animations: De,
+  blurs: Ve,
+  borders: Le,
   colors: Fe,
   durations: je,
-  easings: Ge,
-  fonts: Oe,
+  easings: Oe,
+  fonts: Ge,
   fontSizes: Ye,
   fontWeights: Me,
   letterSpacings: Xe,
@@ -5597,44 +5712,43 @@ const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   sizes: Je,
   zIndex: Ke,
   cursor: Qe
-}, tt = /* @__PURE__ */ S({
+}, tt = /* @__PURE__ */ w({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
-  globalCss: B,
-  conditions: N,
+  globalCss: N,
+  conditions: H,
   theme: {
-    breakpoints: H,
-    keyframes: E,
+    breakpoints: _,
+    keyframes: B,
     tokens: et,
-    semanticTokens: J,
-    recipes: X,
+    semanticTokens: Z,
+    recipes: U,
     slotRecipes: Ee,
     textStyles: Te,
-    layerStyles: T,
-    animationStyles: W
+    layerStyles: E,
+    animationStyles: P
   }
-}), ct = /* @__PURE__ */ y(w, tt);
+}), ct = /* @__PURE__ */ v(y, tt);
 export {
   Be as a,
   O as b,
-  M as c,
+  Y as c,
   re as d,
   We as e,
-  we as f,
-  P as g,
-  ie as h,
-  fe as i,
-  u as j,
-  le as k,
-  l,
-  he as m,
-  ye as n,
-  Pe as o,
-  xe as p,
-  oe as q,
-  ve as r,
+  ye as f,
+  C as g,
+  ae as h,
+  be as i,
+  xe as j,
+  ie as k,
+  Pe as l,
+  fe as m,
+  ve as n,
+  Ce as o,
+  he as p,
+  g as r,
   ct as s,
-  Re as t
+  ke as t
 };
-//# sourceMappingURL=index-BEgCT-l6.es.js.map
+//# sourceMappingURL=index-C2qW4ynb.es.js.map