@commercetools/nimbus 0.0.0-canary-20250919154858 → 0.0.0-canary-20250922152719

package/dist/chunks/{index-DwjTNyza.es.js → index-CRta5Y1_.es.js}

@@ -1,13 +1,13 @@
-import { defineAnimationStyles as b, defineGlobalStyles as m, defineLayerStyles as h, defineRecipe as f, defineSemanticTokens as c, defineSlotRecipe as p, defineTextStyles as v, defineTokens as o, createSystem as x, defaultBaseConfig as y, defineConfig as w } from "@chakra-ui/react";
-import { themeTokens as t } from "@commercetools/nimbus-tokens";
+import { defineAnimationStyles as m, defineGlobalStyles as b, defineLayerStyles as f, defineRecipe as h, defineSemanticTokens as d, defineSlotRecipe as p, defineTextStyles as v, defineTokens as o, createSystem as x, defaultBaseConfig as y, defineConfig as w } from "@chakra-ui/react";
+import { themeTokens as e } from "@commercetools/nimbus-tokens";
 import { a as S } from "./avatar.recipe-DfyPWbFZ.es.js";
 import { b as n } from "./button.recipe-NdTb5f8M.es.js";
-import { defineRecipe as d, defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
-import { g as k } from "./group.recipe-BQafmscW.es.js";
-import { k as z } from "./kbd.recipe-DXiyvrAP.es.js";
+import { defineRecipe as c, defineSlotRecipe as t } from "@chakra-ui/react/styled-system";
+import { g as z } from "./group.recipe-BQafmscW.es.js";
+import { k } from "./kbd.recipe-DXiyvrAP.es.js";
 import { l as R } from "./link.recipe-pXiGIJtI.es.js";
 import { t as C } from "./tooltip.recipe-Cqi_tgR5.es.js";
-const I = /* @__PURE__ */ b({
+const I = /* @__PURE__ */ m({
   "slide-fade-in": {
     value: {
       transformOrigin: "var(--transform-origin)",
@@ -55,13 +55,13 @@ const I = /* @__PURE__ */ b({
     }
   }
 });
-function P(a) {
+function P(r) {
   const l = {};
-  for (const r in a)
-    a[r]?.value ? l[r] = a[r].value : l[r] = a[r];
+  for (const a in r)
+    r[a]?.value ? l[a] = r[a].value : l[a] = r[a];
   return l;
 }
-const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
+const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ b({
   "*": {
     fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
     /**
@@ -347,14 +347,22 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       backgroundPosition: "-200% 0"
     }
   }
-}, N = /* @__PURE__ */ h({
+}, N = /* @__PURE__ */ f({
   disabled: {
     value: {
       opacity: "0.5",
       cursor: "not-allowed"
     }
+  },
+  focusRing: {
+    value: {
+      outlineWidth: "var(--focus-ring-width)",
+      outlineColor: "var(--focus-ring-color)",
+      outlineStyle: "var(--focus-ring-style)",
+      outlineOffset: "var(--focus-ring-offset)"
+    }
   }
-}), H = /* @__PURE__ */ d({
+}), H = /* @__PURE__ */ c({
   className: "nimbus-code",
   base: {
     fontFamily: "mono",
@@ -414,7 +422,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     variant: "solid",
     size: "md"
   }
-}), T = /* @__PURE__ */ d({
+}), E = /* @__PURE__ */ c({
   className: "nimbus-heading",
   base: {
     fontFamily: "heading",
@@ -460,66 +468,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "xl"
   }
-}), A = /* @__PURE__ */ d({
-  // Unique class name prefix for the component
-  className: "nimbus-text-input",
-  // Base styles applied to all instances of the component
-  base: {
-    display: "block",
-    borderRadius: "200",
-    colorPalette: "neutral",
-    focusVisibleRing: "outside",
-    bg: "transparent",
-    outline: "none",
-    boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-    _placeholder: {
-      opacity: 0.5,
-      color: "currentColor"
-    },
-    _disabled: {
-      layerStyle: "disabled",
-      bg: "neutral.3"
-    },
-    "&[data-invalid='true']": {
-      "--border-color": "colors.critical.7",
-      "--border-width": "sizes.50",
-      color: "critical.11"
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        h: 800,
-        textStyle: "sm",
-        px: 300
-      },
-      md: {
-        h: 1e3,
-        textStyle: "md",
-        px: 400
-      }
-    },
-    variant: {
-      solid: {
-        "--border-width": "sizes.25",
-        "--border-color": "colors.neutral.7",
-        backgroundColor: "primary.1",
-        _hover: {
-          backgroundColor: "primary.2"
-        }
-      },
-      ghost: {
-        _hover: {
-          backgroundColor: "primary.2"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid"
-  }
-}), u = /* @__PURE__ */ e({
+}), u = /* @__PURE__ */ t({
   slots: ["root", "option"],
   // Unique class name prefix for the component
   className: "nimbus-radio-input",
@@ -588,7 +537,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     orientation: "vertical"
   }
-}), V = /* @__PURE__ */ d({
+}), T = /* @__PURE__ */ c({
   className: "nimbus-toggle-button",
   base: {
     ...n.base
@@ -645,7 +594,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     variant: "outline",
     tone: "primary"
   }
-}), D = /* @__PURE__ */ f({
+}), A = /* @__PURE__ */ h({
   className: "nimbus-toolbar",
   base: {
     display: "inline-flex",
@@ -698,20 +647,19 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "plain"
   }
-}), L = {
+}), D = {
   avatar: S,
   button: n,
   code: H,
-  group: k,
-  heading: T,
-  kbd: z,
+  group: z,
+  heading: E,
+  kbd: k,
   link: R,
   tooltip: C,
-  textInput: A,
   radioInput: u,
-  toggleButton: V,
-  toolbar: D
-}, G = /* @__PURE__ */ c.colors({
+  toggleButton: T,
+  toolbar: A
+}, V = /* @__PURE__ */ d.colors({
   bg: {
     DEFAULT: {
       value: {
@@ -757,14 +705,14 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       value: "{colors.ingo.8}"
     }
   },
-  ...t.color["system-palettes"],
-  ...t.color["brand-palettes"],
-  ...t.color["semantic-palettes"]
-}), j = /* @__PURE__ */ c.shadows(t.shadow), E = /* @__PURE__ */ c.radii({}), O = {
-  colors: G,
-  shadows: j,
-  radii: E
-}, F = /* @__PURE__ */ e({
+  ...e.color["system-palettes"],
+  ...e.color["brand-palettes"],
+  ...e.color["semantic-palettes"]
+}), L = /* @__PURE__ */ d.shadows(e.shadow), j = /* @__PURE__ */ d.radii({}), G = {
+  colors: V,
+  shadows: L,
+  radii: j
+}, O = /* @__PURE__ */ t({
   slots: [
     "trigger",
     "backdrop",
@@ -1015,7 +963,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     placement: "top",
     motionPreset: "scale"
   }
-}), M = /* @__PURE__ */ e({
+}), F = /* @__PURE__ */ t({
   className: "nimbus-list",
   slots: ["root", "item", "indicator"],
   base: {
@@ -1080,7 +1028,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     variant: "marker"
   }
-}), Y = /* @__PURE__ */ e({
+}), M = /* @__PURE__ */ t({
   className: "chakra-table",
   slots: [
     "root",
@@ -1247,7 +1195,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     variant: "line",
     size: "md"
   }
-}), s = /* @__PURE__ */ e({
+}), s = /* @__PURE__ */ t({
   slots: ["root", "label", "indicator"],
   // Unique class name prefix for the component
   className: "nimbus-checkbox",
@@ -1345,9 +1293,10 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), i = /* @__PURE__ */ e({
+}), i = /* @__PURE__ */ t({
   slots: [
     "root",
+    "leadingElement",
     "trigger",
     "triggerLabel",
     "options",
@@ -1390,6 +1339,11 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
         "--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,
@@ -1480,9 +1434,15 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       sm: {
         root: {},
         trigger: {
+          px: "300",
+          gap: "100",
           h: "800",
-          px: "400",
           textStyle: "sm"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
         }
       },
       md: {
@@ -1490,7 +1450,13 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
         trigger: {
           h: "1000",
           px: "400",
+          gap: "200",
           textStyle: "md"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
         }
       }
       // Medium
@@ -1535,7 +1501,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "outline"
   }
-}), X = /* @__PURE__ */ e({
+}), Y = /* @__PURE__ */ t({
   slots: [
     "root",
     "disclosure",
@@ -1623,7 +1589,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), $ = /* @__PURE__ */ e({
+}), X = /* @__PURE__ */ t({
   slots: ["root", "tagList", "tag"],
   // Unique class name prefix for the component
   className: "nimbus-tag-group",
@@ -1702,7 +1668,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "lg"
   }
-}), U = /* @__PURE__ */ e({
+}), $ = /* @__PURE__ */ t({
   slots: ["root", "label", "track", "thumb"],
   // Unique class name prefix for the component
   className: "nimbus-switch",
@@ -1796,43 +1762,65 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), q = /* @__PURE__ */ e({
+}), U = /* @__PURE__ */ t({
   // Unique class name prefix for the component
   className: "nimbus-number-input",
   // Define the slots for this multi-part component
-  slots: ["root", "input", "incrementButton", "decrementButton"],
+  slots: [
+    "root",
+    "leadingElement",
+    "trailingElement",
+    "input",
+    "incrementButton",
+    "decrementButton"
+  ],
   // Base styles applied to all instances of the component
   base: {
     root: {
-      display: "inline-block",
+      display: "inline-flex",
       position: "relative",
-      // Apply input hover styles when buttons are hovered
-      "&:has(button:hover) input": {
-        backgroundColor: "primary.2"
+      borderRadius: "200",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      _focusWithin: {
+        layerStyle: "focusRing"
+      },
+      '&[data-disabled="true"]': {
+        layerStyle: "disabled",
+        bg: "neutral.3"
+      },
+      "&[data-invalid='true']": {
+        "--border-width": "sizes.50",
+        "--border-color": "colors.critical.7",
+        color: "critical.11"
       }
     },
+    leadingElement: {
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11"
+    },
+    trailingElement: {
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11"
+    },
     input: {
-      "--border-width": "sizes.25",
-      "--border-color": "colors.neutral.7",
-      display: "block",
-      borderRadius: "200",
+      display: "flex",
+      flexGrow: 1,
+      flexShrink: 1,
+      borderRadius: "inherit",
       colorPalette: "neutral",
-      focusVisibleRing: "outside",
       bg: "transparent",
       outline: "none",
       appearance: "textfield",
-      width: "full",
       _placeholder: {
         opacity: 0.5,
         color: "currentColor"
       },
       "&[data-disabled='true']": {
-        layerStyle: "disabled",
-        bg: "neutral.3"
-      },
-      "&[data-invalid='true']": {
-        "--border-color": "colors.critical.7",
-        color: "critical.11"
+        cursor: "not-allowed"
       }
     },
     incrementButton: {
@@ -1845,17 +1833,13 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       justifyContent: "center",
       cursor: "button",
       bg: "transparent",
-      _hover: {
-        bg: "primary.2"
-      },
       _active: {
         bg: "neutral.4"
       },
       "&[data-disabled='true']": {
-        opacity: 0.5,
         cursor: "not-allowed"
       },
-      "& svg": {
+      _icon: {
         fill: "primary.9"
       },
       borderTopRightRadius: "200",
@@ -1873,18 +1857,14 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       justifyContent: "center",
       cursor: "button",
       bg: "transparent",
-      _hover: {
-        bg: "primary.2"
-      },
       _active: {
         bg: "neutral.4"
       },
       "&[data-disabled='true']": {
-        opacity: 0.5,
         cursor: "not-allowed"
       },
-      "& svg": {
-        fill: "primary.9"
+      _icon: {
+        color: "primary.9"
       },
       borderBottomRightRadius: "200",
       "&[data-invalid='true']": {
@@ -1895,40 +1875,60 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   variants: {
     size: {
       sm: {
+        root: {
+          pl: "300",
+          pr: "900",
+          // inc+dec-button width + default padding
+          gap: "100"
+        },
         input: {
-          h: 800,
-          textStyle: "sm",
-          px: 300,
-          paddingRight: 800
+          h: "800",
+          textStyle: "sm"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
+        },
+        trailingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
         }
       },
       md: {
+        root: {
+          pl: "400",
+          pr: "1000",
+          // inc+dec-button width + default padding
+          gap: "200"
+        },
         input: {
-          h: 1e3,
-          textStyle: "md",
-          px: 400,
-          paddingRight: 800
+          h: "1000",
+          textStyle: "md"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
+        },
+        trailingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
         }
       }
     },
     variant: {
       solid: {
         root: {
-          // Apply input hover styles when buttons are hovered for solid variant
-          "&:has(button:hover) input": {
-            backgroundColor: "primary.2"
-          }
-        },
-        input: {
-          "&[data-invalid='true']": {
-            boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-            "--border-width": "sizes.50"
-          },
-          boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-          backgroundColor: "neutral.1",
+          // Apply hover effect to root, button color is deeper when hovered
           _hover: {
             backgroundColor: "primary.2"
-          }
+          },
+          "--border-width": "sizes.25",
+          "--border-color": "colors.neutral.7",
+          backgroundColor: "neutral.1"
         },
         incrementButton: {
           "&[data-invalid='true']": {
@@ -1941,7 +1941,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
           // Half-pixel shadow to create the illusion of a complete border when paired with the other button
           boxShadow: "inset 0 -0.5px 0 0 var(--border-color)",
           _hover: {
-            backgroundColor: "primaryAlpha.3"
+            backgroundColor: "primaryAlpha.4"
           }
         },
         decrementButton: {
@@ -1955,22 +1955,13 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
           // Half-pixel shadow to create the illusion of a complete border when paired with the other button
           boxShadow: "inset 0 0.5px 0 0 var(--border-color)",
           _hover: {
-            backgroundColor: "primaryAlpha.3"
+            backgroundColor: "primaryAlpha.4"
           }
         }
       },
       ghost: {
         root: {
           // Apply input hover styles when buttons are hovered for ghost variant
-          "&:has(button:hover) input": {
-            backgroundColor: "primary.2"
-          }
-        },
-        input: {
-          "&[data-invalid='true']": {
-            boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-            "--border-width": "sizes.50"
-          },
           _hover: {
             backgroundColor: "primary.2"
           }
@@ -1981,7 +1972,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
             borderRight: "2px solid var(--border-color)"
           },
           _hover: {
-            backgroundColor: "primaryAlpha.3"
+            backgroundColor: "primaryAlpha.4"
           }
         },
         decrementButton: {
@@ -1990,7 +1981,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
             borderRight: "2px solid var(--border-color)"
           },
           _hover: {
-            backgroundColor: "primaryAlpha.3"
+            backgroundColor: "primaryAlpha.4"
           }
         }
       }
@@ -2000,10 +1991,11 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), J = /* @__PURE__ */ e({
+}), q = /* @__PURE__ */ t({
   slots: [
     "root",
     "value",
+    "leadingElement",
     "buttonGroup",
     "popover",
     "multiSelectInput",
@@ -2018,6 +2010,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   // Base styles applied to all instances of the component
   base: {
     root: {
+      "--leading-element-width": "sizes.200",
       colorPalette: "primary",
       focusRing: "outside",
       display: "inline-flex",
@@ -2049,6 +2042,12 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
         opacity: 0.5
       }
     },
+    leadingElement: {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11"
+    },
     value: {
       display: "flex",
       focusRing: "outside",
@@ -2143,14 +2142,24 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       sm: {
         value: {
           minH: "800",
-          textStyle: "sm"
+          textStyle: "sm",
+          pl: "calc(var(--leading-element-width) + {sizes.100})"
+        },
+        leadingElement: {
+          minH: "800",
+          pl: "300"
         }
       },
       // Medium
       md: {
         value: {
           minH: "1000",
-          textStyle: "md"
+          textStyle: "md",
+          pl: "calc(var(--leading-element-width) + {sizes.200})"
+        },
+        leadingElement: {
+          minH: "1000",
+          pl: "400"
         }
       }
     },
@@ -2274,7 +2283,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     variant: "solid",
     selectionMode: "single"
   }
-}), K = /* @__PURE__ */ e({
+}), J = /* @__PURE__ */ t({
   slots: [
     "root",
     "header",
@@ -2369,7 +2378,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   }
-}), Q = /* @__PURE__ */ e({
+}), K = /* @__PURE__ */ t({
   slots: [
     "root",
     "header",
@@ -2492,29 +2501,25 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   }
-}), Z = /* @__PURE__ */ e({
+}), Q = /* @__PURE__ */ t({
   // Unique class name prefix for the component
   className: "nimbus-date-input",
-  slots: ["root", "segmentGroup", "segment"],
+  slots: [
+    "root",
+    "leadingElement",
+    "trailingElement",
+    "segmentGroup",
+    "segment"
+  ],
   // Base styles applied to all instances of the component
   base: {
     root: {
-      display: "inline-block"
-    },
-    segmentGroup: {
-      display: "flex",
+      display: "inline-flex",
       borderRadius: "200",
-      bg: "transparent",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      width: "full",
       alignItems: "center",
-      userSelect: "none",
-      "&[data-focus-within='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)",
-        outlineOffset: "var(--focus-ring-offset)"
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      _focusWithin: {
+        layerStyle: "focusRing"
       },
       "&[data-invalid='true']": {
         "--border-width": "sizes.50",
@@ -2526,11 +2531,28 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
         bg: "neutral.3"
       }
     },
+    segmentGroup: {
+      display: "flex",
+      flexGrow: 1,
+      borderRadius: "inherit",
+      bg: "transparent",
+      alignItems: "center"
+    },
+    leadingElement: {
+      color: "neutral.11",
+      display: "flex",
+      alignItems: "center"
+    },
+    trailingElement: {
+      color: "neutral.11",
+      display: "flex",
+      alignItems: "center"
+    },
     segment: {
+      outline: "none!",
+      borderRadius: "100",
       fontVariantNumeric: "tabular-nums",
-      outline: "0",
-      px: "50",
-      borderRadius: "50",
+      p: "50",
       "&:empty": {
         border: "solid-25"
       },
@@ -2568,23 +2590,45 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     // Size variants from smallest to largest
     size: {
       sm: {
-        segmentGroup: {
-          h: 800,
+        root: {
+          h: "800",
           textStyle: "sm",
-          px: 300
+          px: "300",
+          gap: "100"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
+        },
+        trailingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
         }
       },
       md: {
-        segmentGroup: {
-          h: 1e3,
+        root: {
+          h: "1000",
           textStyle: "md",
-          px: 400
+          px: "400",
+          gap: "200"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
+        },
+        trailingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
         }
       }
     },
     variant: {
       solid: {
-        segmentGroup: {
+        root: {
           "--border-width": "sizes.25",
           "--border-color": "colors.neutral.7",
           backgroundColor: "neutral.1",
@@ -2594,17 +2638,18 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
         }
       },
       ghost: {
-        segmentGroup: {
+        root: {
           _hover: {
             backgroundColor: "primary.2"
           }
         }
       },
       plain: {
-        segmentGroup: {
+        root: {
           px: "0",
           outline: "none!",
-          boxShadow: "none!"
+          boxShadow: "none!",
+          bg: "transparent!"
         }
       }
     }
@@ -2613,13 +2658,12 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), tt = /* @__PURE__ */ e({
+}), Z = /* @__PURE__ */ t({
   // Unique class name prefix for the component
   className: "nimbus-date-picker",
   slots: [
     "root",
     "group",
-    "trigger",
     "popover",
     "calendar",
     "calendarHeader",
@@ -2635,11 +2679,6 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     group: {
       position: "relative"
     },
-    trigger: {
-      position: "absolute",
-      right: "400",
-      top: "100"
-    },
     popover: {
       bg: "neutral.1",
       boxShadow: "4",
@@ -2658,27 +2697,8 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   variants: {
     // Size variants from smallest to largest
     size: {
-      sm: {
-        group: {
-          "& .nimbus-date-input__root": {
-            mr: "1400"
-          }
-        },
-        trigger: {
-          top: "50"
-        }
-      },
-      md: {
-        group: {
-          "& .nimbus-date-input__root": {
-            // combine 2 tokens cause there is no token for this crooked value
-            mr: "calc({spacing.1600} + {spacing.200})"
-          }
-        },
-        trigger: {
-          top: "100"
-        }
-      }
+      sm: {},
+      md: {}
     },
     variant: {
       // those need to exist, as the date-input has and needs those variants
@@ -2689,7 +2709,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), et = /* @__PURE__ */ e({
+}), ee = /* @__PURE__ */ t({
   className: "nimbus-date-range-picker",
   slots: [
     "root",
@@ -2807,7 +2827,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), ot = /* @__PURE__ */ p({
+}), te = /* @__PURE__ */ p({
   // Available slots for the DataTable component
   slots: [
     "root",
@@ -3261,7 +3281,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   }
-}), rt = /* @__PURE__ */ e({
+}), oe = /* @__PURE__ */ t({
   className: "nimbus-progress-bar",
   slots: ["root", "track", "fill", "label", "value"],
   // Base styles applied to all instances of the component
@@ -3409,7 +3429,7 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   ]
-}), at = /* @__PURE__ */ e({
+}), ae = /* @__PURE__ */ t({
   slots: [
     "root",
     "trigger",
@@ -3589,7 +3609,112 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
       letterSpacing: "{spacing.25}"
     }
   }
-}), it = /* @__PURE__ */ p({
+}), re = /* @__PURE__ */ t({
+  slots: ["root", "leadingElement", "input", "trailingElement"],
+  // Unique class name prefix for the component
+  className: "nimbus-text-input",
+  // Base styles applied to all instances of the component
+  base: {
+    root: {
+      display: "inline-flex",
+      cursor: "text",
+      borderRadius: "200",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      alignItems: "center",
+      _focusWithin: {
+        layerStyle: "focusRing"
+      },
+      _hover: {
+        backgroundColor: "primary.2"
+      },
+      "&[data-invalid='true']": {
+        "--border-color": "colors.critical.7",
+        "--border-width": "sizes.50",
+        color: "critical.11"
+      },
+      _disabled: {
+        bg: "neutral.3",
+        layerStyle: "disabled"
+      }
+    },
+    leadingElement: {
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11"
+    },
+    trailingElement: {
+      display: "flex",
+      alignItems: "center",
+      color: "neutral.11"
+    },
+    input: {
+      cursor: "inherit",
+      display: "block",
+      flexGrow: 1,
+      bg: "transparent",
+      outline: "none",
+      fontSize: "inherit",
+      _placeholder: {
+        opacity: 0.5,
+        color: "currentColor"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          height: "800",
+          px: "300",
+          gap: "100",
+          textStyle: "sm"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
+        },
+        trailingElement: {
+          "& > svg": {
+            boxSize: "400"
+          }
+        }
+      },
+      md: {
+        root: {
+          height: "1000",
+          px: "400",
+          gap: "200",
+          textStyle: "md"
+        },
+        leadingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
+        },
+        trailingElement: {
+          "& > svg": {
+            boxSize: "500"
+          }
+        }
+      }
+    },
+    variant: {
+      solid: {
+        root: {
+          "--border-width": "sizes.25",
+          "--border-color": "colors.neutral.7",
+          backgroundColor: "primary.1"
+        }
+      },
+      ghost: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+}), ie = /* @__PURE__ */ p({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -3650,41 +3775,42 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
     variant: "solid"
     // Match component default
   }
-}), lt = {
-  dialog: F,
-  list: M,
-  table: Y,
+}), le = {
+  dialog: O,
+  list: F,
+  table: M,
   checkbox: s,
   select: i,
-  accordion: X,
-  taggroup: $,
-  switch: U,
-  numberInput: q,
-  calendar: K,
-  rangeCalendar: Q,
-  dateInput: Z,
-  dateRangePicker: et,
-  datePicker: tt,
-  dataTable: ot,
+  accordion: Y,
+  taggroup: X,
+  switch: $,
+  numberInput: U,
+  calendar: J,
+  rangeCalendar: K,
+  dateInput: Q,
+  dateRangePicker: ee,
+  datePicker: Z,
+  dataTable: te,
   radioInput: u,
-  combobox: J,
-  progressBar: rt,
-  menu: at,
-  splitButton: it
-}, nt = /* @__PURE__ */ v(
-  t.textStyle
-), st = /* @__PURE__ */ o.durations(t.aspectRatio), dt = /* @__PURE__ */ o.animations(t.animation), ct = /* @__PURE__ */ o.blurs(t.blur), pt = /* @__PURE__ */ o.borders(t.border), ut = /* @__PURE__ */ o.colors({
-  ...t.color["blacks-and-whites"]
-}), gt = /* @__PURE__ */ o.durations(t.duration), bt = /* @__PURE__ */ o.easings(t.easing), mt = /* @__PURE__ */ o.fonts(t.fontFamily), ht = /* @__PURE__ */ o.fontSizes(t.fontSize), ft = /* @__PURE__ */ o.fontWeights(t.fontWeight), vt = (a) => Object.keys(a).reduce(
-  (l, r) => {
-    const g = parseFloat(a[r].value) / 100;
-    return l[r] = { value: `${g}em` }, l;
+  combobox: q,
+  progressBar: oe,
+  menu: ae,
+  textInput: re,
+  splitButton: ie
+}, ne = /* @__PURE__ */ v(
+  e.textStyle
+), se = /* @__PURE__ */ o.durations(e.aspectRatio), de = /* @__PURE__ */ o.animations(e.animation), ce = /* @__PURE__ */ o.blurs(e.blur), pe = /* @__PURE__ */ o.borders(e.border), ue = /* @__PURE__ */ o.colors({
+  ...e.color["blacks-and-whites"]
+}), ge = /* @__PURE__ */ o.durations(e.duration), me = /* @__PURE__ */ o.easings(e.easing), be = /* @__PURE__ */ o.fonts(e.fontFamily), fe = /* @__PURE__ */ o.fontSizes(e.fontSize), he = /* @__PURE__ */ o.fontWeights(e.fontWeight), ve = (r) => Object.keys(r).reduce(
+  (l, a) => {
+    const g = parseFloat(r[a].value) / 100;
+    return l[a] = { value: `${g}em` }, l;
   },
   {}
-), xt = /* @__PURE__ */ o.letterSpacings(
-  /* @__PURE__ */ vt(t.letterSpacing)
-), yt = /* @__PURE__ */ o.lineHeights(t.lineHeight), wt = /* @__PURE__ */ o.radii(t.borderRadius), St = /* @__PURE__ */ o.spacing(t.spacing), kt = /* @__PURE__ */ o.sizes({
-  ...t.size,
+), xe = /* @__PURE__ */ o.letterSpacings(
+  /* @__PURE__ */ ve(e.letterSpacing)
+), ye = /* @__PURE__ */ o.lineHeights(e.lineHeight), we = /* @__PURE__ */ o.radii(e.borderRadius), Se = /* @__PURE__ */ o.spacing(e.spacing), ze = /* @__PURE__ */ o.sizes({
+  ...e.size,
   "1/2": {
     value: "50%"
   },
@@ -3799,25 +3925,25 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   vh: {
     value: "100vh"
   }
-}), zt = /* @__PURE__ */ o.zIndex(t.zIndex), Rt = /* @__PURE__ */ o.cursor(t.cursor), Ct = {
-  aspectRatios: st,
-  animations: dt,
-  blurs: ct,
-  borders: pt,
-  colors: ut,
-  durations: gt,
-  easings: bt,
-  fonts: mt,
-  fontSizes: ht,
-  fontWeights: ft,
-  letterSpacings: xt,
-  lineHeights: yt,
-  radii: wt,
-  spacing: St,
-  sizes: kt,
-  zIndex: zt,
-  cursor: Rt
-}, It = /* @__PURE__ */ w({
+}), ke = /* @__PURE__ */ o.zIndex(e.zIndex), Re = /* @__PURE__ */ o.cursor(e.cursor), Ce = {
+  aspectRatios: se,
+  animations: de,
+  blurs: ce,
+  borders: pe,
+  colors: ue,
+  durations: ge,
+  easings: me,
+  fonts: be,
+  fontSizes: fe,
+  fontWeights: he,
+  letterSpacings: xe,
+  lineHeights: ye,
+  radii: we,
+  spacing: Se,
+  sizes: ze,
+  zIndex: ke,
+  cursor: Re
+}, Ie = /* @__PURE__ */ w({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
@@ -3825,32 +3951,32 @@ const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   theme: {
     breakpoints: W,
     keyframes: B,
-    tokens: Ct,
-    semanticTokens: O,
-    recipes: L,
-    slotRecipes: lt,
-    textStyles: nt,
+    tokens: Ce,
+    semanticTokens: G,
+    recipes: D,
+    slotRecipes: le,
+    textStyles: ne,
     layerStyles: N,
     animationStyles: I
   }
-}), Lt = /* @__PURE__ */ x(y, It);
+}), Ve = /* @__PURE__ */ x(y, Ie);
 export {
-  it as a,
-  V as b,
-  U as c,
-  Z as d,
-  D as e,
-  et as f,
-  K as g,
-  tt as h,
+  ie as a,
+  T as b,
+  $ as c,
+  Q as d,
+  A as e,
+  ee as f,
+  J as g,
+  Z as h,
   u as i,
   i as j,
-  ot as k,
-  J as l,
-  at as m,
-  q as n,
-  Q as r,
-  Lt as s,
-  A as t
+  te as k,
+  q as l,
+  ae as m,
+  U as n,
+  K as r,
+  Ve as s,
+  re as t
 };
-//# sourceMappingURL=index-DwjTNyza.es.js.map
+//# sourceMappingURL=index-CRta5Y1_.es.js.map