@commercetools/nimbus 2.10.0 → 2.11.0

package/dist/chunks/{index-B5W9PQbq.es.js → index-CTrsTsK6.es.js}

@@ -2,7 +2,7 @@ import { defineAnimationStyles as p, defineConditions as u, defineGlobalStyles a
 import { defaultBaseConfig as v } from "@chakra-ui/react/preset-base";
 import { themeTokens as t, designTokens as y } from "@commercetools/nimbus-tokens";
 import { i as w } from "./icon.recipe-DjkjodUn.es.js";
-const S = /* @__PURE__ */ p({
+const z = /* @__PURE__ */ p({
   "slide-fade-in": {
     value: {
       transformOrigin: "var(--transform-origin)",
@@ -50,13 +50,13 @@ const S = /* @__PURE__ */ p({
     }
   }
 });
-function z(n) {
-  const l = {};
-  for (const r in n)
-    n[r]?.value ? l[r] = n[r].value : l[r] = n[r];
-  return l;
+function S(l) {
+  const n = {};
+  for (const r in l)
+    l[r]?.value ? n[r] = l[r].value : n[r] = l[r];
+  return n;
 }
-const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
+const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   /**
    * Maps to React Aria's open state data attributes
    * Used for animations when a component is opening/entering
@@ -765,7 +765,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     borderBottom: "solid-50",
     borderColor: "currentColor"
   }
-}), E = /* @__PURE__ */ a({
+}), D = /* @__PURE__ */ a({
   className: "nimbus-link",
   // Base styles applied to all instances of the component
   base: {
@@ -810,7 +810,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), A = /* @__PURE__ */ a({
+}), E = /* @__PURE__ */ a({
   className: "nimbus-loading-spinner",
   base: {
     display: "inline-flex",
@@ -868,7 +868,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "sm"
   }
-}), D = /* @__PURE__ */ a({
+}), A = /* @__PURE__ */ a({
   // Unique class name prefix for the component
   className: "nimbus-popover",
   // Base styles applied to all instances of the component
@@ -1111,9 +1111,9 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   nimbusHeading: N,
   nimbusIcon: w,
   nimbusKbd: B,
-  nimbusLink: E,
-  nimbusLoadingSpinner: A,
-  nimbusPopover: D,
+  nimbusLink: D,
+  nimbusLoadingSpinner: E,
+  nimbusPopover: A,
   nimbusRadioInput: c,
   nimbusSeparator: V,
   nimbusToggleButton: L,
@@ -1255,6 +1255,169 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md"
   }
 }), $ = /* @__PURE__ */ e({
+  className: "nimbus-scroll-area",
+  slots: ["root", "viewport", "content", "scrollbar", "thumb", "corner"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      overflow: "hidden",
+      "--scroll-area-scrollbar-margin": "{sizes.50}",
+      "--scroll-area-scrollbar-click-area": "calc(var(--scroll-area-scrollbar-size) + calc(var(--scroll-area-scrollbar-margin) * 2))",
+      _focusWithin: {
+        "&:has(:focus-visible)": {
+          outlineWidth: "var(--focus-ring-width, 1px)",
+          outlineColor: "var(--focus-ring-color)",
+          outlineStyle: "var(--focus-ring-style, solid)",
+          outlineOffset: "2px"
+        }
+      }
+    },
+    viewport: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      width: "100%",
+      borderRadius: "inherit",
+      outline: "none",
+      WebkitOverflowScrolling: "touch",
+      scrollbarWidth: "none",
+      "&::-webkit-scrollbar": {
+        display: "none"
+      }
+    },
+    content: {
+      minWidth: "100%"
+    },
+    scrollbar: {
+      display: "flex",
+      userSelect: "none",
+      touchAction: "none",
+      borderRadius: "full",
+      transition: "opacity 150ms 300ms",
+      position: "relative",
+      // Paint above viewport content (e.g. sticky headers with z-index)
+      zIndex: "1",
+      margin: "var(--scroll-area-scrollbar-margin)",
+      "&:not([data-overflow-x], [data-overflow-y])": {
+        display: "none"
+      },
+      bg: "neutral.4",
+      "--scroll-area-thumb-bg": "{colors.neutral.7}",
+      "&:is(:hover, :active)": {
+        "--scroll-area-thumb-bg": "{colors.neutral.9}"
+      },
+      _before: {
+        content: '""',
+        position: "absolute"
+      },
+      _vertical: {
+        width: "var(--scroll-area-scrollbar-size)",
+        flexDirection: "column",
+        "&::before": {
+          width: "var(--scroll-area-scrollbar-click-area)",
+          height: "100%",
+          insetInlineStart: "calc(var(--scroll-area-scrollbar-margin) * -1)"
+        }
+      },
+      _horizontal: {
+        height: "var(--scroll-area-scrollbar-size)",
+        flexDirection: "row",
+        "&::before": {
+          height: "var(--scroll-area-scrollbar-click-area)",
+          width: "100%",
+          top: "calc(var(--scroll-area-scrollbar-margin) * -1)"
+        }
+      }
+    },
+    thumb: {
+      borderRadius: "inherit",
+      bg: "var(--scroll-area-thumb-bg)",
+      transition: "backgrounds",
+      _vertical: { width: "full" },
+      _horizontal: { height: "full" }
+    },
+    corner: {
+      bg: "neutral.3",
+      margin: "var(--scroll-area-scrollbar-margin)",
+      opacity: 0,
+      transition: "opacity 150ms 300ms",
+      "&[data-hover]": {
+        transitionDelay: "0ms",
+        opacity: 1
+      }
+    }
+  },
+  variants: {
+    variant: {
+      hover: {
+        scrollbar: {
+          opacity: "0",
+          "&[data-hover], &[data-scrolling]": {
+            opacity: "1",
+            transitionDuration: "faster",
+            transitionDelay: "0ms"
+          }
+        }
+      },
+      always: {
+        viewport: {
+          // Create gutter so the permanently visible scrollbar
+          // doesn't overlay content.
+          // - Vertical scrollbar (Y overflow): use width calc — works
+          //   because width always resolves against a definite parent.
+          // - Horizontal scrollbar (X overflow): use flex + margin —
+          //   height calc doesn't work because the root's height
+          //   comes from maxHeight, and CSS % heights require an
+          //   explicit parent height property.
+          flex: "1",
+          minHeight: "0",
+          "&[data-overflow-y]": {
+            width: "calc(100% - var(--scroll-area-scrollbar-size) - var(--scroll-area-scrollbar-margin) * 2)"
+          },
+          "&[data-overflow-x]": {
+            marginBottom: "calc(var(--scroll-area-scrollbar-size) + var(--scroll-area-scrollbar-margin) * 2)"
+          }
+        },
+        scrollbar: {
+          opacity: "1"
+        },
+        corner: {
+          opacity: 1
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          "--scroll-area-scrollbar-size": "{sizes.100}"
+        }
+      },
+      sm: {
+        root: {
+          "--scroll-area-scrollbar-size": "{sizes.150}"
+        }
+      },
+      md: {
+        root: {
+          "--scroll-area-scrollbar-size": "{sizes.200}"
+        }
+      },
+      lg: {
+        root: {
+          "--scroll-area-scrollbar-size": "{sizes.300}"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    variant: "hover"
+  }
+}), q = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -1399,7 +1562,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     layout: "constrained"
   }
-}), q = /* @__PURE__ */ e({
+}), K = /* @__PURE__ */ e({
   slots: [
     "root",
     "list",
@@ -1689,7 +1852,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "sm",
     orientation: "horizontal"
   }
-}), K = /* @__PURE__ */ e({
+}), Z = /* @__PURE__ */ e({
   slots: ["root", "title", "description", "icon", "actions", "dismissButton"],
   // Unique class name prefix for the component
   className: "nimbus-alert",
@@ -1745,7 +1908,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), Z = /* @__PURE__ */ e({
+}), J = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -1840,7 +2003,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), J = /* @__PURE__ */ e({
+}), Q = /* @__PURE__ */ e({
   slots: ["root", "header", "content"],
   className: "nimbus-card",
   base: {
@@ -2004,7 +2167,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), Q = /* @__PURE__ */ e({
+}), ee = /* @__PURE__ */ e({
   slots: ["root", "trigger", "content"],
   className: "nimbus-collapsible-motion",
   base: {
@@ -2014,7 +2177,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     },
     content: {}
   }
-}), ee = /* @__PURE__ */ e({
+}), te = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -2367,7 +2530,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     variant: "solid",
     selectionMode: "single"
   }
-}), te = /* @__PURE__ */ e({
+}), oe = /* @__PURE__ */ e({
   // Available slots for the DataTable component
   slots: [
     "root",
@@ -2784,7 +2947,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), oe = /* @__PURE__ */ e({
+}), ae = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-input",
   slots: [
@@ -2941,7 +3104,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "solid"
   }
-}), ae = /* @__PURE__ */ e({
+}), re = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-picker",
   slots: [
@@ -2992,7 +3155,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), re = /* @__PURE__ */ e({
+}), ie = /* @__PURE__ */ e({
   className: "nimbus-date-range-picker",
   slots: [
     "root",
@@ -3109,7 +3272,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "solid"
   }
-}), ie = /* @__PURE__ */ e({
+}), le = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -3344,7 +3507,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), le = /* @__PURE__ */ e({
+}), se = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -3548,7 +3711,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     placement: "right",
     showBackdrop: !0
   }
-}), se = /* @__PURE__ */ e({
+}), de = /* @__PURE__ */ e({
   className: "nimbus-field-errors",
   slots: ["root", "message"],
   base: {
@@ -3560,16 +3723,16 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       color: "colorPalette.11"
     }
   }
-}), de = `
+}), ce = `
 "label"
 "input"
 "description"
 "error"
-`, ce = `
+`, ge = `
 "label input"
 "label description"
 "label error"
-`, ge = /* @__PURE__ */ e({
+`, pe = /* @__PURE__ */ e({
   slots: ["root", "label", "input", "description", "error", "popover"],
   // Unique class name prefix for the component
   className: "nimbus-ui-form-field",
@@ -3645,7 +3808,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     direction: {
       column: {
         root: {
-          gridTemplateAreas: de
+          gridTemplateAreas: ce
         },
         input: {
           mt: "var(--grid-gap)"
@@ -3659,7 +3822,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       },
       row: {
         root: {
-          gridTemplateAreas: ce,
+          gridTemplateAreas: ge,
           gridTemplateColumns: "auto 1fr",
           gridColumnGap: "200"
         },
@@ -3677,7 +3840,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     direction: "column",
     size: "md"
   }
-}), pe = /* @__PURE__ */ e({
+}), ue = /* @__PURE__ */ e({
   className: "nimbus-list",
   slots: ["root", "item", "indicator"],
   base: {
@@ -3742,18 +3905,18 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     variant: "marker"
   }
-}), ue = `
+}), me = `
 "label"
 "fields"
 "toggle"
 "description"
 "error"
 
-`, me = `
+`, be = `
 "label input"
 "description description"
 "error error"
-`, be = /* @__PURE__ */ e({
+`, he = /* @__PURE__ */ e({
   slots: [
     // Group / Fieldset slots
     "root",
@@ -3775,7 +3938,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     root: {
       display: "grid",
       width: "fit-content",
-      gridTemplateAreas: ue,
+      gridTemplateAreas: me,
       gap: "100"
     },
     label: {
@@ -3835,7 +3998,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     // Individual Locale Field / Input slots
     localeFieldRoot: {
       gap: 0,
-      gridTemplateAreas: me,
+      gridTemplateAreas: be,
       // 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)": {
@@ -3893,7 +4056,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     }
   },
   defaultVariants: { size: "md" }
-}), he = /* @__PURE__ */ e({
+}), fe = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -4073,7 +4236,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       letterSpacing: "{spacing.25}"
     }
   }
-}), fe = /* @__PURE__ */ e({
+}), xe = /* @__PURE__ */ e({
   slots: [
     "root",
     "topBar",
@@ -4157,7 +4320,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       py: "400"
     }
   }
-}), xe = /* @__PURE__ */ e({
+}), ve = /* @__PURE__ */ e({
   slots: ["root", "column"],
   className: "nimbus-page-content",
   base: {
@@ -4231,7 +4394,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     variant: "wide",
     columns: "1"
   }
-}), ve = /* @__PURE__ */ e({
+}), ye = /* @__PURE__ */ e({
   slots: [
     "root",
     "container",
@@ -4350,7 +4513,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), ye = /* @__PURE__ */ e({
+}), we = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-multiline-text-input",
   slots: ["root", "leadingElement", "textarea"],
@@ -4481,7 +4644,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "solid"
   }
-}), we = /* @__PURE__ */ e({
+}), ze = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-number-input",
   // Define the slots for this multi-part component
@@ -4858,7 +5021,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   ]
-}), ze = /* @__PURE__ */ e({
+}), Re = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -4981,7 +5144,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), Re = /* @__PURE__ */ e({
+}), ke = /* @__PURE__ */ e({
   slots: ["root", "toolbar", "editable"],
   className: "nimbus-rich-text-input",
   base: {
@@ -5113,7 +5276,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     }
   },
   variants: {}
-}), ke = /* @__PURE__ */ e({
+}), Ce = /* @__PURE__ */ e({
   slots: ["root", "container", "selectWrapper", "searchWrapper"],
   className: "nimbus-scoped-search-input",
   base: {
@@ -5161,7 +5324,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), Ce = /* @__PURE__ */ e({
+}), Ie = /* @__PURE__ */ e({
   slots: ["root", "leadingElement", "input"],
   // Unique class name prefix for the component
   className: "nimbus-search-input",
@@ -5259,7 +5422,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "solid"
   }
-}), Ie = /* @__PURE__ */ e({
+}), Pe = /* @__PURE__ */ e({
   slots: [
     "root",
     "leadingElement",
@@ -5467,7 +5630,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "outline"
   }
-}), Pe = /* @__PURE__ */ e({
+}), We = /* @__PURE__ */ e({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -5528,7 +5691,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     variant: "solid"
     // Match component default
   }
-}), We = /* @__PURE__ */ e({
+}), _e = /* @__PURE__ */ e({
   slots: ["root", "label", "track", "thumb"],
   // Unique class name prefix for the component
   className: "nimbus-switch",
@@ -5626,7 +5789,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), _e = /* @__PURE__ */ e({
+}), Te = /* @__PURE__ */ e({
   className: "nimbus-table",
   slots: [
     "root",
@@ -5793,7 +5956,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     variant: "line",
     size: "md"
   }
-}), Te = /* @__PURE__ */ e({
+}), He = /* @__PURE__ */ e({
   slots: ["root", "item"],
   className: "nimbus-tab-nav",
   base: {
@@ -5875,7 +6038,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     variant: "tabs",
     size: "md"
   }
-}), He = /* @__PURE__ */ e({
+}), Ne = /* @__PURE__ */ e({
   slots: ["root", "list", "tab", "panels", "panel", "trigger"],
   className: "nimbus-tabs",
   base: {
@@ -6112,7 +6275,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     placement: "start",
     size: "md"
   }
-}), Ne = /* @__PURE__ */ e({
+}), Be = /* @__PURE__ */ e({
   slots: ["root", "tagList", "tag"],
   // Unique class name prefix for the component
   className: "nimbus-tag-group",
@@ -6191,7 +6354,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "lg"
   }
-}), Be = /* @__PURE__ */ e({
+}), De = /* @__PURE__ */ e({
   slots: ["root", "leadingElement", "input", "trailingElement"],
   // Unique class name prefix for the component
   className: "nimbus-text-input",
@@ -6597,7 +6760,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     variant: "accent-start"
   }
-}), De = /* @__PURE__ */ e({
+}), Ve = /* @__PURE__ */ e({
   slots: ["root", "button"],
   // Unique class name prefix for the component
   className: "nimbus-toggle-button-group",
@@ -6649,67 +6812,69 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), Ve = {
+}), Le = {
   nimbusAccordion: U,
-  nimbusAlert: K,
-  nimbusCalendar: Z,
-  nimbusCard: J,
+  nimbusAlert: Z,
+  nimbusCalendar: J,
+  nimbusCard: Q,
   nimbusCheckbox: s,
-  nimbusCollapsibleMotion: Q,
-  nimbusCombobox: ee,
-  nimbusDataTable: te,
-  nimbusDefaultPage: $,
-  nimbusDateInput: oe,
-  nimbusDatePicker: ae,
-  nimbusDateRangePicker: re,
-  nimbusDialog: ie,
+  nimbusCollapsibleMotion: ee,
+  nimbusCombobox: te,
+  nimbusDataTable: oe,
+  nimbusDefaultPage: q,
+  nimbusDateInput: ae,
+  nimbusDatePicker: re,
+  nimbusDateRangePicker: ie,
+  nimbusDialog: le,
   nimbusDraggableList: ne,
-  nimbusDrawer: le,
-  nimbusFieldErrors: se,
-  nimbusFormField: ge,
-  nimbusList: pe,
-  nimbusLocalizedField: be,
-  nimbusMenu: he,
-  nimbusModalPage: fe,
-  nimbusMoneyInput: ve,
-  nimbusMultilineTextInput: ye,
-  nimbusNumberInput: we,
-  nimbusPageContent: xe,
+  nimbusDrawer: se,
+  nimbusFieldErrors: de,
+  nimbusFormField: pe,
+  nimbusList: ue,
+  nimbusLocalizedField: he,
+  nimbusMenu: fe,
+  nimbusModalPage: xe,
+  nimbusMoneyInput: ye,
+  nimbusMultilineTextInput: we,
+  nimbusNumberInput: ze,
+  nimbusPageContent: ve,
   nimbusProgressBar: Se,
   nimbusRadioInput: c,
-  nimbusRangeCalendar: ze,
-  nimbusRichTextInput: Re,
-  nimbusScopedSearchInput: ke,
-  nimbusSearchInput: Ce,
-  nimbusSelect: Ie,
-  nimbusSplitButton: Pe,
-  nimbusSwitch: We,
-  nimbusTable: _e,
-  nimbusTabNav: Te,
-  nimbusTabs: He,
-  nimbusTagGroup: Ne,
-  nimbusTextInput: Be,
+  nimbusRangeCalendar: Re,
+  nimbusRichTextInput: ke,
+  nimbusScopedSearchInput: Ce,
+  nimbusSearchInput: Ie,
+  nimbusSelect: Pe,
+  nimbusSplitButton: We,
+  nimbusSwitch: _e,
+  nimbusTable: Te,
+  nimbusTabNav: He,
+  nimbusTabs: Ne,
+  nimbusTagGroup: Be,
+  nimbusTextInput: De,
   nimbusTimeInput: Ee,
-  // NOTE: intentionally NOT prefixed with "nimbus" — the "toast" key overrides
-  // Chakra's built-in toast recipe so that useToastStyles() in ToastOutlet resolves
-  // Nimbus styles through Chakra's recipe system. Adding the nimbus prefix would
-  // break style resolution. This is the only Nimbus recipe that is an override.
-  toast: Ae,
-  nimbusToggleButtonGroup: De,
-  nimbusSteps: q
-}, Le = /* @__PURE__ */ h(
+  nimbusToggleButtonGroup: Ve,
+  nimbusSteps: K,
+  // NOTE: the following recipes are intentionally NOT prefixed with "nimbus"
+  // because they override Chakra's built-in recipes so that Chakra's own
+  // compound components (e.g. ScrollArea.*, ToastOutlet) resolve Nimbus
+  // styles through the recipe system. No .slots.tsx file is needed for
+  // these — the slot context is owned by Chakra's implementation
+  scrollArea: $,
+  toast: Ae
+}, Fe = /* @__PURE__ */ h(
   t.textStyle
-), Fe = /* @__PURE__ */ o.durations(t.aspectRatio), je = /* @__PURE__ */ o.animations(t.animation), Ge = /* @__PURE__ */ o.blurs(t.blur), Oe = /* @__PURE__ */ o.borders(t.border), Me = /* @__PURE__ */ o.colors({
+), je = /* @__PURE__ */ o.durations(t.aspectRatio), Ge = /* @__PURE__ */ o.animations(t.animation), Oe = /* @__PURE__ */ o.blurs(t.blur), Me = /* @__PURE__ */ o.borders(t.border), Ye = /* @__PURE__ */ o.colors({
   ...t.color["blacks-and-whites"]
-}), Ye = /* @__PURE__ */ o.durations(t.duration), Xe = /* @__PURE__ */ o.easings(t.easing), Ue = /* @__PURE__ */ o.fonts(t.fontFamily), $e = /* @__PURE__ */ o.fontSizes(t.fontSize), qe = /* @__PURE__ */ o.fontWeights(t.fontWeight), Ke = (n) => Object.keys(n).reduce(
-  (l, r) => {
-    const g = parseFloat(n[r].value) / 100;
-    return l[r] = { value: `${g}em` }, l;
+}), Xe = /* @__PURE__ */ o.durations(t.duration), Ue = /* @__PURE__ */ o.easings(t.easing), $e = /* @__PURE__ */ o.fonts(t.fontFamily), qe = /* @__PURE__ */ o.fontSizes(t.fontSize), Ke = /* @__PURE__ */ o.fontWeights(t.fontWeight), Ze = (l) => Object.keys(l).reduce(
+  (n, r) => {
+    const g = parseFloat(l[r].value) / 100;
+    return n[r] = { value: `${g}em` }, n;
   },
   {}
-), Ze = /* @__PURE__ */ o.letterSpacings(
-  /* @__PURE__ */ Ke(t.letterSpacing)
-), Je = /* @__PURE__ */ o.lineHeights(t.lineHeight), Qe = /* @__PURE__ */ o.radii(t.borderRadius), et = /* @__PURE__ */ o.spacing(t.spacing), tt = /* @__PURE__ */ o.sizes({
+), Je = /* @__PURE__ */ o.letterSpacings(
+  /* @__PURE__ */ Ze(t.letterSpacing)
+), Qe = /* @__PURE__ */ o.lineHeights(t.lineHeight), et = /* @__PURE__ */ o.radii(t.borderRadius), tt = /* @__PURE__ */ o.spacing(t.spacing), ot = /* @__PURE__ */ o.sizes({
   ...t.size,
   "1/2": {
     value: "50%"
@@ -6825,25 +6990,25 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   vh: {
     value: "100vh"
   }
-}), ot = /* @__PURE__ */ o.zIndex(t.zIndex), at = /* @__PURE__ */ o.cursor(t.cursor), rt = {
-  aspectRatios: Fe,
-  animations: je,
-  blurs: Ge,
-  borders: Oe,
-  colors: Me,
-  durations: Ye,
-  easings: Xe,
-  fonts: Ue,
-  fontSizes: $e,
-  fontWeights: qe,
-  letterSpacings: Ze,
-  lineHeights: Je,
-  radii: Qe,
-  spacing: et,
-  sizes: tt,
-  zIndex: ot,
-  cursor: at
-}, it = /* @__PURE__ */ x({
+}), at = /* @__PURE__ */ o.zIndex(t.zIndex), rt = /* @__PURE__ */ o.cursor(t.cursor), it = {
+  aspectRatios: je,
+  animations: Ge,
+  blurs: Oe,
+  borders: Me,
+  colors: Ye,
+  durations: Xe,
+  easings: Ue,
+  fonts: $e,
+  fontSizes: qe,
+  fontWeights: Ke,
+  letterSpacings: Je,
+  lineHeights: Qe,
+  radii: et,
+  spacing: tt,
+  sizes: ot,
+  zIndex: at,
+  cursor: rt
+}, lt = /* @__PURE__ */ x({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
@@ -6852,34 +7017,34 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   theme: {
     breakpoints: R,
     keyframes: I,
-    tokens: rt,
+    tokens: it,
     semanticTokens: X,
     recipes: G,
-    slotRecipes: Ve,
-    textStyles: Le,
+    slotRecipes: Le,
+    textStyles: Fe,
     layerStyles: P,
-    animationStyles: S
+    animationStyles: z
   }
-}), gt = /* @__PURE__ */ f(v, it);
+}), pt = /* @__PURE__ */ f(v, lt);
 export {
   Ee as a,
   V as b,
   F as c,
-  oe as d,
-  We as e,
-  ke as f,
-  re as g,
-  ae as h,
-  ve as i,
-  ze as j,
-  le as k,
-  Ie as l,
-  ye as m,
-  Re as n,
-  Ce as o,
-  we as p,
+  ae as d,
+  _e as e,
+  Ce as f,
+  ie as g,
+  re as h,
+  ye as i,
+  Re as j,
+  se as k,
+  Pe as l,
+  we as m,
+  ke as n,
+  Ie as o,
+  ze as p,
   c as r,
-  gt as s,
-  Be as t
+  pt as s,
+  De as t
 };
-//# sourceMappingURL=index-B5W9PQbq.es.js.map
+//# sourceMappingURL=index-CTrsTsK6.es.js.map