@commercetools/nimbus 0.0.0-canary-20260202081119 → 0.0.0-canary-20260202081146

package/dist/chunks/{index-M22cGCuy.es.js → index-N3Xxo-X9.es.js}

@@ -1,8 +1,125 @@
 import { defineAnimationStyles as b, defineConditions as m, defineGlobalStyles as h, defineLayerStyles as f, defineRecipe as u, defineSemanticTokens as c, defineSlotRecipe as s, defineTextStyles as x, defineTokens as o, createSystem as v, defaultBaseConfig as y, defineConfig as w } from "@chakra-ui/react";
 import { themeTokens as t, designTokens as S } from "@commercetools/nimbus-tokens";
-import { defineRecipe as r, defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
+import { defineSlotRecipe as e, defineRecipe as r } from "@chakra-ui/react/styled-system";
 import { i as z } from "./icon.recipe-DjkjodUn.es.js";
-const R = /* @__PURE__ */ b({
+const R = /* @__PURE__ */ e({
+  className: "nimbus-date-range-picker",
+  slots: [
+    "root",
+    "group",
+    "trigger",
+    "popover",
+    "calendar",
+    "calendarHeader",
+    "calendarGrid",
+    "calendarCell"
+  ],
+  base: {
+    root: {
+      display: "inline-block"
+    },
+    group: {
+      // ========================================
+      // BASE LAYOUT & VISUAL PROPERTIES
+      // ========================================
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      borderRadius: "200",
+      px: "300",
+      gap: 0,
+      position: "relative",
+      // Ensure stacking context for border
+      // ========================================
+      // INTERACTIVE STATES
+      // ========================================
+      _hover: {
+        bg: "primary.2"
+      },
+      // Focus ring with transparent gap
+      _focusWithin: {
+        outlineWidth: "var(--focus-ring-width)",
+        outlineColor: "var(--focus-ring-color)",
+        outlineStyle: "var(--focus-ring-style)",
+        outlineOffset: "var(--focus-ring-offset)"
+      },
+      // ========================================
+      // DATA STATES
+      // ========================================
+      // Invalid state styling
+      "&[data-invalid='true']": {
+        "--border-width": "{sizes.50}",
+        "--border-color": "{colors.critical.7}",
+        color: "critical.11",
+        alignItems: "center"
+      }
+    },
+    trigger: {
+      position: "absolute",
+      right: "400",
+      top: "100"
+    },
+    popover: {
+      bg: "neutral.1",
+      boxShadow: "4",
+      borderRadius: "300",
+      overflow: "auto",
+      "&[data-entering]": {
+        animationName: "fade-in, scale-in",
+        animationDuration: "fast"
+      },
+      "&[data-exiting]": {
+        animationName: "fade-out, scale-out",
+        animationDuration: "faster"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        group: {
+          height: "800",
+          // Match DateInput sm height
+          pr: "calc({spacing.1400} + {spacing.400})"
+          // Smaller right padding for sm size
+        },
+        trigger: {
+          top: "50"
+        }
+      },
+      md: {
+        group: {
+          height: "1000",
+          // Match DateInput md height
+          pr: "calc({spacing.1600} + {spacing.200} + {spacing.400})"
+          // Right padding for trigger buttons
+        },
+        trigger: {
+          top: "100"
+        }
+      }
+    },
+    variant: {
+      solid: {
+        group: {
+          "--border-width": "{sizes.25}",
+          "--border-color": "{colors.neutral.7}",
+          bg: "neutral.1"
+        }
+      },
+      ghost: {
+        group: {
+          bg: "transparent"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+}), k = /* @__PURE__ */ b({
   "slide-fade-in": {
     value: {
       transformOrigin: "var(--transform-origin)",
@@ -50,13 +167,13 @@ const R = /* @__PURE__ */ b({
     }
   }
 });
-function k(l) {
+function C(l) {
   const n = {};
   for (const a in l)
     l[a]?.value ? n[a] = l[a].value : n[a] = l[a];
   return n;
 }
-const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
+const I = /* @__PURE__ */ C(t.breakpoints), P = /* @__PURE__ */ m({
   /**
    * Maps to React Aria's open state data attributes
    * Used for animations when a component is opening/entering
@@ -67,7 +184,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
    * Used for animations when a component is closing/exiting
    */
   closed: "&:is([data-exiting], [data-closed])"
-}), P = /* @__PURE__ */ h({
+}), W = /* @__PURE__ */ h({
   "*": {
     fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
     /**
@@ -147,7 +264,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     display: "initial",
     verticalAlign: "initial"
   }
-}), W = {
+}), _ = {
   spin: {
     "0%": {
       transform: "rotate(0deg)"
@@ -353,7 +470,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
       backgroundPosition: "-200% 0"
     }
   }
-}, _ = /* @__PURE__ */ f({
+}, H = /* @__PURE__ */ f({
   disabled: {
     value: {
       opacity: "0.5",
@@ -368,7 +485,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
       outlineOffset: "var(--focus-ring-offset)"
     }
   }
-}), H = /* @__PURE__ */ r({
+}), N = /* @__PURE__ */ r({
   className: "nimbus-avatar",
   base: {
     display: "inline-flex",
@@ -401,7 +518,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), N = /* @__PURE__ */ r({
+}), T = /* @__PURE__ */ r({
   className: "nimbus-badge",
   // Base styles applied to all instances of the component
   base: {
@@ -634,7 +751,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     size: "md",
     variant: "subtle"
   }
-}), T = /* @__PURE__ */ r({
+}), B = /* @__PURE__ */ r({
   className: "nimbus-code",
   base: {
     fontFamily: "mono",
@@ -694,14 +811,14 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     variant: "solid",
     size: "md"
   }
-}), B = /* @__PURE__ */ u({
+}), E = /* @__PURE__ */ u({
   className: "nimbus-group",
   base: {
     display: "inline-flex",
     alignItems: "center"
   }
   // TODO: there could be variants here
-}), E = /* @__PURE__ */ r({
+}), A = /* @__PURE__ */ r({
   className: "nimbus-heading",
   base: {
     fontFamily: "heading",
@@ -747,7 +864,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   defaultVariants: {
     size: "xl"
   }
-}), A = /* @__PURE__ */ r({
+}), D = /* @__PURE__ */ r({
   className: "nimbus-kbd",
   base: {
     display: "inline-flex",
@@ -767,7 +884,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     borderBottom: "solid-50",
     borderColor: "currentColor"
   }
-}), D = /* @__PURE__ */ r({
+}), V = /* @__PURE__ */ r({
   className: "nimbus-link",
   // Base styles applied to all instances of the component
   base: {
@@ -812,7 +929,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
       }
     }
   }
-}), V = /* @__PURE__ */ r({
+}), L = /* @__PURE__ */ r({
   className: "nimbus-loading-spinner",
   base: {
     display: "inline-flex",
@@ -870,7 +987,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   defaultVariants: {
     size: "sm"
   }
-}), L = /* @__PURE__ */ r({
+}), F = /* @__PURE__ */ r({
   // Unique class name prefix for the component
   className: "nimbus-popover",
   // Base styles applied to all instances of the component
@@ -950,7 +1067,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   defaultVariants: {
     orientation: "vertical"
   }
-}), F = /* @__PURE__ */ r({
+}), j = /* @__PURE__ */ r({
   className: "nimbus-separator",
   // Base styles applied to all instances of the component
   base: {
@@ -976,7 +1093,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   defaultVariants: {
     orientation: "horizontal"
   }
-}), j = /* @__PURE__ */ r({
+}), G = /* @__PURE__ */ r({
   className: "nimbus-toggle-button",
   base: {
     ...i.base,
@@ -1030,7 +1147,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     size: "md",
     variant: "outline"
   }
-}), G = /* @__PURE__ */ u({
+}), O = /* @__PURE__ */ u({
   className: "nimbus-toolbar",
   base: {
     display: "inline-flex",
@@ -1083,7 +1200,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     size: "md",
     variant: "plain"
   }
-}), O = /* @__PURE__ */ r({
+}), M = /* @__PURE__ */ r({
   // Unique class name prefix for the component
   className: "nimbus-tooltip",
   // Base styles applied to all instances of the component
@@ -1101,24 +1218,24 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     maxW: "6400",
     boxShadow: "1"
   }
-}), M = {
-  nimbusAvatar: H,
-  nimbusBadge: N,
+}), Y = {
+  nimbusAvatar: N,
+  nimbusBadge: T,
   nimbusButton: i,
-  nimbusCode: T,
-  nimbusGroup: B,
-  nimbusHeading: E,
+  nimbusCode: B,
+  nimbusGroup: E,
+  nimbusHeading: A,
   nimbusIcon: z,
-  nimbusKbd: A,
-  nimbusLink: D,
-  nimbusLoadingSpinner: V,
-  nimbusPopover: L,
+  nimbusKbd: D,
+  nimbusLink: V,
+  nimbusLoadingSpinner: L,
+  nimbusPopover: F,
   nimbusRadioInput: p,
-  nimbusSeparator: F,
-  nimbusToggleButton: j,
-  nimbusToolbar: G,
-  nimbusTooltip: O
-}, Y = /* @__PURE__ */ c.colors({
+  nimbusSeparator: j,
+  nimbusToggleButton: G,
+  nimbusToolbar: O,
+  nimbusTooltip: M
+}, U = /* @__PURE__ */ c.colors({
   bg: {
     DEFAULT: {
       value: { _light: "#fff", _dark: "{colors.neutral.1}" }
@@ -1161,11 +1278,11 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   ...t.color["system-palettes"],
   ...t.color["brand-palettes"],
   ...t.color["semantic-palettes"]
-}), U = /* @__PURE__ */ c.shadows(t.shadow), X = /* @__PURE__ */ c.radii({}), $ = {
-  colors: Y,
-  shadows: U,
-  radii: X
-}, q = /* @__PURE__ */ e({
+}), X = /* @__PURE__ */ c.shadows(t.shadow), $ = /* @__PURE__ */ c.radii({}), q = {
+  colors: U,
+  shadows: X,
+  radii: $
+}, K = /* @__PURE__ */ e({
   slots: [
     "root",
     "disclosure",
@@ -1253,7 +1370,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), K = /* @__PURE__ */ e({
+}), Z = /* @__PURE__ */ e({
   slots: ["root", "title", "description", "icon", "actions", "dismissButton"],
   // Unique class name prefix for the component
   className: "nimbus-alert",
@@ -1309,7 +1426,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
       }
     }
   }
-}), Z = /* @__PURE__ */ e({
+}), J = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -1404,7 +1521,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
       }
     }
   }
-}), J = /* @__PURE__ */ e({
+}), Q = /* @__PURE__ */ e({
   slots: ["root", "header", "content"],
   className: "nimbus-card",
   base: {
@@ -1568,7 +1685,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), Q = /* @__PURE__ */ e({
+}), ee = /* @__PURE__ */ e({
   slots: ["root", "trigger", "content"],
   className: "nimbus-collapsible-motion",
   base: {
@@ -1578,7 +1695,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     },
     content: {}
   }
-}), ee = /* @__PURE__ */ e({
+}), te = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -1931,7 +2048,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     variant: "solid",
     selectionMode: "single"
   }
-}), te = /* @__PURE__ */ s({
+}), oe = /* @__PURE__ */ s({
   // Available slots for the DataTable component
   slots: [
     "root",
@@ -2373,7 +2490,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
       }
     }
   }
-}), oe = /* @__PURE__ */ e({
+}), re = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-input",
   slots: [
@@ -2530,7 +2647,7 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), re = /* @__PURE__ */ e({
+}), ae = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-picker",
   slots: [
@@ -2581,123 +2698,6 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), ae = /* @__PURE__ */ e({
-  className: "nimbus-date-range-picker",
-  slots: [
-    "root",
-    "group",
-    "trigger",
-    "popover",
-    "calendar",
-    "calendarHeader",
-    "calendarGrid",
-    "calendarCell"
-  ],
-  base: {
-    root: {
-      display: "inline-block"
-    },
-    group: {
-      // ========================================
-      // BASE LAYOUT & VISUAL PROPERTIES
-      // ========================================
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      borderRadius: "200",
-      px: "300",
-      gap: 0,
-      position: "relative",
-      // Ensure stacking context for border
-      // ========================================
-      // INTERACTIVE STATES
-      // ========================================
-      _hover: {
-        bg: "primary.2"
-      },
-      // Focus ring with transparent gap
-      _focusWithin: {
-        outlineWidth: "var(--focus-ring-width)",
-        outlineColor: "var(--focus-ring-color)",
-        outlineStyle: "var(--focus-ring-style)",
-        outlineOffset: "var(--focus-ring-offset)"
-      },
-      // ========================================
-      // DATA STATES
-      // ========================================
-      // Invalid state styling
-      "&[data-invalid='true']": {
-        "--border-width": "{sizes.50}",
-        "--border-color": "{colors.critical.7}",
-        color: "critical.11",
-        alignItems: "center"
-      }
-    },
-    trigger: {
-      position: "absolute",
-      right: "400",
-      top: "100"
-    },
-    popover: {
-      bg: "neutral.1",
-      boxShadow: "4",
-      borderRadius: "300",
-      overflow: "auto",
-      "&[data-entering]": {
-        animationName: "fade-in, scale-in",
-        animationDuration: "fast"
-      },
-      "&[data-exiting]": {
-        animationName: "fade-out, scale-out",
-        animationDuration: "faster"
-      }
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        group: {
-          height: "800",
-          // Match DateInput sm height
-          pr: "calc({spacing.1400} + {spacing.400})"
-          // Smaller right padding for sm size
-        },
-        trigger: {
-          top: "50"
-        }
-      },
-      md: {
-        group: {
-          height: "1000",
-          // Match DateInput md height
-          pr: "calc({spacing.1600} + {spacing.200} + {spacing.400})"
-          // Right padding for trigger buttons
-        },
-        trigger: {
-          top: "100"
-        }
-      }
-    },
-    variant: {
-      solid: {
-        group: {
-          "--border-width": "{sizes.25}",
-          "--border-color": "{colors.neutral.7}",
-          bg: "neutral.1"
-        }
-      },
-      ghost: {
-        group: {
-          bg: "transparent"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid"
-  }
 }), ie = /* @__PURE__ */ e({
   slots: [
     "root",
@@ -5848,17 +5848,17 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
     size: "md"
   }
 }), Be = {
-  nimbusAccordion: q,
-  nimbusAlert: K,
-  nimbusCalendar: Z,
-  nimbusCard: J,
+  nimbusAccordion: K,
+  nimbusAlert: Z,
+  nimbusCalendar: J,
+  nimbusCard: Q,
   nimbusCheckbox: d,
-  nimbusCollapsibleMotion: Q,
-  nimbusCombobox: ee,
-  nimbusDataTable: te,
-  nimbusDateInput: oe,
-  nimbusDatePicker: re,
-  nimbusDateRangePicker: ae,
+  nimbusCollapsibleMotion: ee,
+  nimbusCombobox: te,
+  nimbusDataTable: oe,
+  nimbusDateInput: re,
+  nimbusDatePicker: ae,
+  nimbusDateRangePicker: R,
   nimbusDialog: ie,
   nimbusDraggableList: le,
   nimbusDrawer: ne,
@@ -6035,29 +6035,29 @@ const C = /* @__PURE__ */ k(t.breakpoints), I = /* @__PURE__ */ m({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
-  globalCss: P,
-  conditions: I,
+  globalCss: W,
+  conditions: P,
   theme: {
-    breakpoints: C,
-    keyframes: W,
+    breakpoints: I,
+    keyframes: _,
     tokens: et,
-    semanticTokens: $,
-    recipes: M,
+    semanticTokens: q,
+    recipes: Y,
     slotRecipes: Be,
     textStyles: Ee,
-    layerStyles: _,
-    animationStyles: R
+    layerStyles: H,
+    animationStyles: k
   }
 }), nt = /* @__PURE__ */ v(y, tt);
 export {
   Ne as a,
-  F as b,
-  G as c,
-  oe as d,
+  j as b,
+  O as c,
+  re as d,
   Ie as e,
   ze as f,
-  ae as g,
-  re as h,
+  R as g,
+  ae as h,
   fe as i,
   we as j,
   ne as k,
@@ -6070,4 +6070,4 @@ export {
   nt as s,
   He as t
 };
-//# sourceMappingURL=index-M22cGCuy.es.js.map
+//# sourceMappingURL=index-N3Xxo-X9.es.js.map