@commercetools/nimbus 2.10.0 → 3.0.0

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

@@ -1,8 +1,8 @@
-import { defineAnimationStyles as p, defineConditions as u, defineGlobalStyles as m, defineLayerStyles as b, defineRecipe as a, defineSlotRecipe as e, defineSemanticTokens as d, defineTextStyles as h, defineTokens as o, createSystem as f, defineConfig as x } from "@chakra-ui/react/styled-system";
+import { defineAnimationStyles as p, defineConditions as u, defineGlobalStyles as m, defineLayerStyles as b, defineRecipe as r, defineSlotRecipe as e, defineSemanticTokens as d, defineTextStyles as h, defineTokens as o, createSystem as f, defineConfig as x } from "@chakra-ui/react/styled-system";
 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 a in l)
+    l[a]?.value ? n[a] = l[a].value : n[a] = l[a];
+  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
@@ -368,7 +368,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       outlineOffset: "var(--focus-ring-offset)"
     }
   }
-}), W = /* @__PURE__ */ a({
+}), _ = /* @__PURE__ */ r({
   className: "nimbus-avatar",
   base: {
     display: "inline-flex",
@@ -386,6 +386,14 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     focusVisibleRing: "outside",
     "button&": {
       cursor: "button"
+    },
+    // Person-icon fallback sized relative to the avatar slot. The icon
+    // ships with width/height "1em", which would inherit the recipe's
+    // small text font-size. We override to ~70% of the slot so the icon
+    // visually balances initials text across all sizes.
+    "& > svg": {
+      width: "70%",
+      height: "70%"
     }
   },
   variants: {
@@ -398,7 +406,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), _ = /* @__PURE__ */ a({
+}), W = /* @__PURE__ */ r({
   className: "nimbus-badge",
   // Base styles applied to all instances of the component
   base: {
@@ -460,7 +468,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), i = /* @__PURE__ */ a({
+}), i = /* @__PURE__ */ r({
   className: "nimbus-button",
   base: {
     borderRadius: "200",
@@ -632,7 +640,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "subtle"
   }
-}), T = /* @__PURE__ */ a({
+}), T = /* @__PURE__ */ r({
   className: "nimbus-code",
   base: {
     fontFamily: "mono",
@@ -692,14 +700,14 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     variant: "solid",
     size: "md"
   }
-}), H = /* @__PURE__ */ a({
+}), H = /* @__PURE__ */ r({
   className: "nimbus-group",
   base: {
     display: "inline-flex",
     alignItems: "center"
   }
   // TODO: there could be variants here
-}), N = /* @__PURE__ */ a({
+}), N = /* @__PURE__ */ r({
   className: "nimbus-heading",
   base: {
     fontFamily: "heading",
@@ -745,7 +753,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "xl"
   }
-}), B = /* @__PURE__ */ a({
+}), B = /* @__PURE__ */ r({
   className: "nimbus-kbd",
   base: {
     display: "inline-flex",
@@ -765,7 +773,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     borderBottom: "solid-50",
     borderColor: "currentColor"
   }
-}), E = /* @__PURE__ */ a({
+}), D = /* @__PURE__ */ r({
   className: "nimbus-link",
   // Base styles applied to all instances of the component
   base: {
@@ -810,7 +818,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), A = /* @__PURE__ */ a({
+}), E = /* @__PURE__ */ r({
   className: "nimbus-loading-spinner",
   base: {
     display: "inline-flex",
@@ -868,7 +876,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "sm"
   }
-}), D = /* @__PURE__ */ a({
+}), A = /* @__PURE__ */ r({
   // Unique class name prefix for the component
   className: "nimbus-popover",
   // Base styles applied to all instances of the component
@@ -948,7 +956,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     orientation: "vertical"
   }
-}), V = /* @__PURE__ */ a({
+}), V = /* @__PURE__ */ r({
   className: "nimbus-separator",
   // Base styles applied to all instances of the component
   base: {
@@ -974,7 +982,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     orientation: "horizontal"
   }
-}), L = /* @__PURE__ */ a({
+}), L = /* @__PURE__ */ r({
   className: "nimbus-toggle-button",
   base: {
     ...i.base,
@@ -1028,7 +1036,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "outline"
   }
-}), F = /* @__PURE__ */ a({
+}), F = /* @__PURE__ */ r({
   className: "nimbus-toolbar",
   base: {
     display: "inline-flex",
@@ -1081,7 +1089,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "plain"
   }
-}), j = /* @__PURE__ */ a({
+}), j = /* @__PURE__ */ r({
   // Unique class name prefix for the component
   className: "nimbus-tooltip",
   // Base styles applied to all instances of the component
@@ -1103,17 +1111,17 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     boxShadow: "1"
   }
 }), G = {
-  nimbusAvatar: W,
-  nimbusBadge: _,
+  nimbusAvatar: _,
+  nimbusBadge: W,
   nimbusButton: i,
   nimbusCode: T,
   nimbusGroup: H,
   nimbusHeading: N,
   nimbusIcon: w,
   nimbusKbd: B,
-  nimbusLink: E,
-  nimbusLoadingSpinner: A,
-  nimbusPopover: D,
+  nimbusLink: D,
+  nimbusLoadingSpinner: E,
+  nimbusPopover: A,
   nimbusRadioInput: c,
   nimbusSeparator: V,
   nimbusToggleButton: L,
@@ -1162,10 +1170,10 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   ...t.color["system-palettes"],
   ...t.color["brand-palettes"],
   ...t.color["semantic-palettes"]
-}), M = /* @__PURE__ */ d.shadows(t.shadow), Y = /* @__PURE__ */ d.radii({}), X = {
+}), Y = /* @__PURE__ */ d.shadows(t.shadow), M = /* @__PURE__ */ d.radii({}), X = {
   colors: O,
-  shadows: M,
-  radii: Y
+  shadows: Y,
+  radii: M
 }, U = /* @__PURE__ */ e({
   slots: [
     "root",
@@ -1255,6 +1263,176 @@ 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)",
+      // Hide each scrollbar when its own axis isn't overflowing. Zag sets
+      // `data-overflow-x` / `data-overflow-y` on the scrollbar reflecting the
+      // current viewport state, so a vertical scrollbar with no Y overflow
+      // (and vice versa) should not paint even if the other axis overflows.
+      "&[data-orientation=vertical]:not([data-overflow-y])": {
+        display: "none"
+      },
+      "&[data-orientation=horizontal]:not([data-overflow-x])": {
+        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 +1577,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     layout: "constrained"
   }
-}), q = /* @__PURE__ */ e({
+}), K = /* @__PURE__ */ e({
   slots: [
     "root",
     "list",
@@ -1689,7 +1867,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 +1923,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), Z = /* @__PURE__ */ e({
+}), J = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -1840,56 +2018,92 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), J = /* @__PURE__ */ e({
-  slots: ["root", "header", "content"],
+}), Q = /* @__PURE__ */ e({
+  slots: ["root", "header", "body", "footer"],
   className: "nimbus-card",
   base: {
     root: {
       colorPalette: "slate",
-      display: "inline-flex",
+      display: "flex",
+      flexDirection: "column",
       alignItems: "flex-start",
       borderRadius: "300",
-      focusVisibleRing: "outside"
+      // Free-form content: when no slot children are present anywhere
+      // inside Card.Root, padding lives on Root itself so direct
+      // children don't render flush against the border. Slots own
+      // their own padding (see below), so the selector only matches
+      // the no-slots case. `:has()` matches at any depth, which is
+      // intentional: a slot wrapped in another element still pads
+      // itself.
+      "&:not(:has(.nimbus-card__header, .nimbus-card__body, .nimbus-card__footer))": {
+        p: "var(--card-spacing)"
+      }
+    },
+    header: {
+      p: "var(--card-spacing)",
+      width: "100%"
+    },
+    body: {
+      p: "var(--card-spacing)",
+      width: "100%",
+      // When directly preceded by header, collapse top padding (header's
+      // bottom padding provides the gap). When a non-slot element like
+      // Separator sits between them, both slots keep full padding for
+      // visually balanced spacing around the element.
+      // Class names are Chakra-generated as `${className}__${slotName}`,
+      // so these selectors depend on `className: "nimbus-card"` (above)
+      // and the slot names in the `slots` array.
+      ".nimbus-card__header + &": { pt: 0 }
+    },
+    footer: {
+      p: "var(--card-spacing)",
+      width: "100%",
+      // Same adjacent-sibling collapsing as body — see comment above.
+      ".nimbus-card__header + &": { pt: 0 },
+      ".nimbus-card__body + &": { pt: 0 }
     }
   },
   variants: {
-    cardPadding: {
+    size: {
       sm: {
-        root: {
-          padding: "200"
-        }
+        root: { "--card-spacing": "spacing.300" }
       },
       md: {
-        root: {
-          padding: "400"
-        }
+        root: { "--card-spacing": "spacing.400" }
       },
       lg: {
-        root: {
-          padding: "600"
-        }
+        root: { "--card-spacing": "spacing.600" }
       }
     },
-    borderStyle: {
-      none: {},
+    // Variant naming encodes the three independent visual axes that
+    // designers expose in Figma: outlined (border yes/no), elevated
+    // (shadow yes/no), muted (background default/muted). All eight
+    // permutations are enumerated explicitly so the prop surface stays
+    // a single `variant` enum (no compositional booleans).
+    variant: {
+      plain: {
+        root: {
+          backgroundColor: "bg"
+        }
+      },
       outlined: {
         root: {
           border: "solid-25",
-          borderColor: "colorPalette.3"
+          borderColor: "colorPalette.6",
+          backgroundColor: "bg"
         }
-      }
-    },
-    elevation: {
-      none: {},
+      },
       elevated: {
         root: {
-          shadow: "1"
+          shadow: "1",
+          backgroundColor: "bg"
         }
-      }
-    },
-    backgroundStyle: {
-      default: {
+      },
+      "outlined-elevated": {
         root: {
+          border: "solid-25",
+          borderColor: "colorPalette.6",
+          shadow: "1",
           backgroundColor: "bg"
         }
       },
@@ -1897,14 +2111,33 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
         root: {
           backgroundColor: "colorPalette.2"
         }
+      },
+      "outlined-muted": {
+        root: {
+          border: "solid-25",
+          borderColor: "colorPalette.6",
+          backgroundColor: "colorPalette.2"
+        }
+      },
+      "elevated-muted": {
+        root: {
+          shadow: "1",
+          backgroundColor: "colorPalette.2"
+        }
+      },
+      "outlined-elevated-muted": {
+        root: {
+          border: "solid-25",
+          borderColor: "colorPalette.6",
+          shadow: "1",
+          backgroundColor: "colorPalette.2"
+        }
       }
     }
   },
   defaultVariants: {
-    cardPadding: "md",
-    borderStyle: "outlined",
-    elevation: "none",
-    backgroundStyle: "default"
+    size: "md",
+    variant: "outlined"
   }
 }), s = /* @__PURE__ */ e({
   slots: ["root", "label", "indicator"],
@@ -2004,7 +2237,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 +2247,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     },
     content: {}
   }
-}), ee = /* @__PURE__ */ e({
+}), te = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -2110,6 +2343,12 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       gap: "100",
       minWidth: 0,
       cursor: "text",
+      maxHeight: "var(--combobox-content-max-height, 40svh)",
+      overflowY: "auto",
+      scrollbarWidth: "thin",
+      scrollbarColor: "var(--scrollbar-color) var(--scrollbar-bg)",
+      "--scrollbar-color": "colors.neutral.8",
+      "--scrollbar-bg": "colors.neutral.3",
       "[data-disabled='true'] &": {
         pointerEvents: "none"
       }
@@ -2367,7 +2606,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 +3023,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), oe = /* @__PURE__ */ e({
+}), re = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-input",
   slots: [
@@ -2992,7 +3231,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 +3348,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 +3583,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), le = /* @__PURE__ */ e({
+}), se = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -3548,7 +3787,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 +3799,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 +3884,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     direction: {
       column: {
         root: {
-          gridTemplateAreas: de
+          gridTemplateAreas: ce
         },
         input: {
           mt: "var(--grid-gap)"
@@ -3659,7 +3898,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       },
       row: {
         root: {
-          gridTemplateAreas: ce,
+          gridTemplateAreas: ge,
           gridTemplateColumns: "auto 1fr",
           gridColumnGap: "200"
         },
@@ -3677,7 +3916,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 +3981,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 +4014,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 +4074,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 +4132,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     }
   },
   defaultVariants: { size: "md" }
-}), he = /* @__PURE__ */ e({
+}), fe = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -4073,7 +4312,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       letterSpacing: "{spacing.25}"
     }
   }
-}), fe = /* @__PURE__ */ e({
+}), xe = /* @__PURE__ */ e({
   slots: [
     "root",
     "topBar",
@@ -4157,7 +4396,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 +4470,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 +4589,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 +4720,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 +5097,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   ]
-}), ze = /* @__PURE__ */ e({
+}), Re = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -4981,7 +5220,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 +5352,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 +5400,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 +5498,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 +5706,7 @@ const R = /* @__PURE__ */ z(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "outline"
   }
-}), Pe = /* @__PURE__ */ e({
+}), _e = /* @__PURE__ */ e({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -5626,7 +5865,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 +6032,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 +6114,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 +6351,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 +6430,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 +6836,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 +6888,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,
+  nimbusCollapsibleMotion: ee,
+  nimbusCombobox: te,
+  nimbusDataTable: oe,
+  nimbusDefaultPage: q,
+  nimbusDateInput: re,
   nimbusDatePicker: ae,
-  nimbusDateRangePicker: re,
-  nimbusDialog: ie,
+  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,
+  nimbusRangeCalendar: Re,
+  nimbusRichTextInput: ke,
+  nimbusScopedSearchInput: Ce,
+  nimbusSearchInput: Ie,
+  nimbusSelect: Pe,
+  nimbusSplitButton: _e,
   nimbusSwitch: We,
-  nimbusTable: _e,
-  nimbusTabNav: Te,
-  nimbusTabs: He,
-  nimbusTagGroup: Ne,
-  nimbusTextInput: Be,
+  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.aspectRatios(t.aspectRatio), Ge = /* @__PURE__ */ o.animations(t.animation), Oe = /* @__PURE__ */ o.blurs(t.blur), Ye = /* @__PURE__ */ o.borders(t.border), Me = /* @__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, a) => {
+    const g = parseFloat(l[a].value) / 100;
+    return n[a] = { 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 +7066,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,
+}), rt = /* @__PURE__ */ o.zIndex(t.zIndex), at = /* @__PURE__ */ o.cursor(t.cursor), it = {
+  aspectRatios: je,
+  animations: Ge,
+  blurs: Oe,
+  borders: Ye,
   colors: Me,
-  durations: Ye,
-  easings: Xe,
-  fonts: Ue,
-  fontSizes: $e,
-  fontWeights: qe,
-  letterSpacings: Ze,
-  lineHeights: Je,
-  radii: Qe,
-  spacing: et,
-  sizes: tt,
-  zIndex: ot,
+  durations: Xe,
+  easings: Ue,
+  fonts: $e,
+  fontSizes: qe,
+  fontWeights: Ke,
+  letterSpacings: Je,
+  lineHeights: Qe,
+  radii: et,
+  spacing: tt,
+  sizes: ot,
+  zIndex: rt,
   cursor: at
-}, it = /* @__PURE__ */ x({
+}, lt = /* @__PURE__ */ x({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
@@ -6852,34 +7093,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,
+  re as d,
   We as e,
-  ke as f,
-  re as g,
+  Ce as f,
+  ie 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,
+  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-B_vTRVge.es.js.map