@commercetools/nimbus 0.0.0-canary-20251114180837 → 0.0.0-canary-20251114201426

package/dist/chunks/{index-CIWPalKw.es.js → index-Ce4tHjCt.es.js}

@@ -1,11 +1,129 @@
-import { defineAnimationStyles as b, defineConditions as h, defineGlobalStyles as f, defineLayerStyles as x, defineRecipe as u, defineSemanticTokens as p, defineSlotRecipe as s, defineTextStyles as v, defineTokens as o, createSystem as y, defaultBaseConfig as w, defineConfig as S } from "@chakra-ui/react";
+import { defineAnimationStyles as b, defineConditions as f, defineGlobalStyles as h, defineLayerStyles as x, defineRecipe as u, defineSemanticTokens as p, defineSlotRecipe as s, defineTextStyles as v, defineTokens as o, createSystem as y, defaultBaseConfig as w, defineConfig as S } from "@chakra-ui/react";
 import { themeTokens as t, designTokens as z } from "@commercetools/nimbus-tokens";
 import { a as k } from "./avatar.recipe-BEdxgo-r.es.js";
 import { b as R } from "./badge.recipe-DsV4A_UD.es.js";
 import { b as c, a as I } from "./toggle-button-group.recipe-Cl3PTeGf.es.js";
-import { defineRecipe as a, defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
+import { defineSlotRecipe as e, defineRecipe as a } from "@chakra-ui/react/styled-system";
 import { i as C } from "./icon.recipe-DjkjodUn.es.js";
-const P = /* @__PURE__ */ b({
+const P = /* @__PURE__ */ e({
+  className: "nimbus-date-range-picker",
+  slots: [
+    "root",
+    "group",
+    "trigger",
+    "popover",
+    "calendar",
+    "calendarHeader",
+    "calendarGrid",
+    "calendarCell"
+  ],
+  base: {
+    root: {
+      display: "inline-block"
+    },
+    group: {
+      "--border-width": "{sizes.25}",
+      "--border-color": "{colors.neutral.7}",
+      // ========================================
+      // BASE LAYOUT & VISUAL PROPERTIES
+      // ========================================
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+      borderRadius: "200",
+      bg: "neutral.1",
+      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: {},
+      ghost: {
+        group: {
+          bg: "transparent",
+          px: "300",
+          _hover: {
+            bg: "primary.2"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+}), W = /* @__PURE__ */ b({
   "slide-fade-in": {
     value: {
       transformOrigin: "var(--transform-origin)",
@@ -53,13 +171,13 @@ const P = /* @__PURE__ */ b({
     }
   }
 });
-function W(i) {
+function _(i) {
   const n = {};
   for (const r in i)
     i[r]?.value ? n[r] = i[r].value : n[r] = i[r];
   return n;
 }
-const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
+const H = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ f({
   /**
    * Maps to React Aria's open state data attributes
    * Used for animations when a component is opening/entering
@@ -70,7 +188,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
    * Used for animations when a component is closing/exiting
    */
   closed: "&:is([data-exiting], [data-closed])"
-}), N = /* @__PURE__ */ f({
+}), B = /* @__PURE__ */ h({
   "*": {
     fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
     /**
@@ -150,7 +268,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     display: "initial",
     verticalAlign: "initial"
   }
-}), B = {
+}), E = {
   spin: {
     "0%": {
       transform: "rotate(0deg)"
@@ -356,7 +474,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
       backgroundPosition: "-200% 0"
     }
   }
-}, E = /* @__PURE__ */ x({
+}, T = /* @__PURE__ */ x({
   disabled: {
     value: {
       opacity: "0.5",
@@ -371,7 +489,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
       outlineOffset: "var(--focus-ring-offset)"
     }
   }
-}), T = /* @__PURE__ */ a({
+}), D = /* @__PURE__ */ a({
   className: "nimbus-code",
   base: {
     fontFamily: "mono",
@@ -431,14 +549,14 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     variant: "solid",
     size: "md"
   }
-}), D = /* @__PURE__ */ u({
+}), A = /* @__PURE__ */ u({
   className: "nimbus-group",
   base: {
     display: "inline-flex",
     alignItems: "center"
   }
   // TODO: there could be variants here
-}), A = /* @__PURE__ */ a({
+}), V = /* @__PURE__ */ a({
   className: "nimbus-heading",
   base: {
     fontFamily: "heading",
@@ -484,7 +602,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   defaultVariants: {
     size: "xl"
   }
-}), V = /* @__PURE__ */ a({
+}), L = /* @__PURE__ */ a({
   className: "nimbus-kbd",
   base: {
     display: "inline-flex",
@@ -504,7 +622,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     borderBottom: "solid-50",
     borderColor: "currentColor"
   }
-}), L = /* @__PURE__ */ a({
+}), F = /* @__PURE__ */ a({
   className: "nimbus-link",
   // Base styles applied to all instances of the component
   base: {
@@ -549,7 +667,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
       }
     }
   }
-}), F = /* @__PURE__ */ a({
+}), j = /* @__PURE__ */ a({
   className: "nimbus-loading-spinner",
   base: {
     display: "inline-flex",
@@ -607,7 +725,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   defaultVariants: {
     size: "sm"
   }
-}), j = /* @__PURE__ */ a({
+}), G = /* @__PURE__ */ a({
   // Unique class name prefix for the component
   className: "nimbus-popover",
   // Base styles applied to all instances of the component
@@ -687,7 +805,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   defaultVariants: {
     orientation: "vertical"
   }
-}), G = /* @__PURE__ */ a({
+}), O = /* @__PURE__ */ a({
   className: "nimbus-separator",
   // Base styles applied to all instances of the component
   base: {
@@ -713,7 +831,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   defaultVariants: {
     orientation: "horizontal"
   }
-}), O = /* @__PURE__ */ a({
+}), Y = /* @__PURE__ */ a({
   className: "nimbus-toggle-button",
   base: {
     ...c.base,
@@ -767,7 +885,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     size: "md",
     variant: "outline"
   }
-}), Y = /* @__PURE__ */ u({
+}), M = /* @__PURE__ */ u({
   className: "nimbus-toolbar",
   base: {
     display: "inline-flex",
@@ -820,7 +938,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     size: "md",
     variant: "plain"
   }
-}), M = /* @__PURE__ */ a({
+}), U = /* @__PURE__ */ a({
   // Unique class name prefix for the component
   className: "nimbus-tooltip",
   // Base styles applied to all instances of the component
@@ -838,24 +956,24 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     maxW: "6400",
     boxShadow: "1"
   }
-}), U = {
+}), X = {
   avatar: k,
   badge: R,
   button: c,
-  code: T,
-  group: D,
-  heading: A,
+  code: D,
+  group: A,
+  heading: V,
   icon: C,
-  kbd: V,
-  link: L,
-  loadingSpinner: F,
-  popover: j,
+  kbd: L,
+  link: F,
+  loadingSpinner: j,
+  popover: G,
   radioInput: g,
-  separator: G,
-  toggleButton: O,
-  toolbar: Y,
-  tooltip: M
-}, X = /* @__PURE__ */ p.colors({
+  separator: O,
+  toggleButton: Y,
+  toolbar: M,
+  tooltip: U
+}, $ = /* @__PURE__ */ p.colors({
   bg: {
     DEFAULT: {
       value: {
@@ -904,11 +1022,11 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   ...t.color["system-palettes"],
   ...t.color["brand-palettes"],
   ...t.color["semantic-palettes"]
-}), $ = /* @__PURE__ */ p.shadows(t.shadow), q = /* @__PURE__ */ p.radii({}), Z = {
-  colors: X,
-  shadows: $,
-  radii: q
-}, J = /* @__PURE__ */ e({
+}), q = /* @__PURE__ */ p.shadows(t.shadow), Z = /* @__PURE__ */ p.radii({}), J = {
+  colors: $,
+  shadows: q,
+  radii: Z
+}, K = /* @__PURE__ */ e({
   slots: [
     "root",
     "disclosure",
@@ -996,7 +1114,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   defaultVariants: {
     size: "md"
   }
-}), K = /* @__PURE__ */ e({
+}), Q = /* @__PURE__ */ e({
   slots: ["root", "title", "description", "icon", "actions", "dismissButton"],
   // Unique class name prefix for the component
   className: "nimbus-alert",
@@ -1037,7 +1155,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
       }
     }
   }
-}), Q = /* @__PURE__ */ e({
+}), ee = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -1132,7 +1250,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
       }
     }
   }
-}), ee = /* @__PURE__ */ e({
+}), te = /* @__PURE__ */ e({
   slots: ["root", "header", "content"],
   className: "nimbus-card",
   base: {
@@ -1504,7 +1622,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     size: "md",
     variant: "outline"
   }
-}), te = /* @__PURE__ */ e({
+}), oe = /* @__PURE__ */ e({
   slots: [
     "root",
     "value",
@@ -1796,7 +1914,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     variant: "solid",
     selectionMode: "single"
   }
-}), oe = /* @__PURE__ */ s({
+}), ae = /* @__PURE__ */ s({
   // Available slots for the DataTable component
   slots: [
     "root",
@@ -2251,7 +2369,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
       }
     }
   }
-}), ae = /* @__PURE__ */ e({
+}), re = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-input",
   slots: [
@@ -2408,7 +2526,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     size: "md",
     variant: "solid"
   }
-}), re = /* @__PURE__ */ e({
+}), ie = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-picker",
   slots: [
@@ -2459,124 +2577,6 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   defaultVariants: {
     size: "md"
   }
-}), ie = /* @__PURE__ */ e({
-  className: "nimbus-date-range-picker",
-  slots: [
-    "root",
-    "group",
-    "trigger",
-    "popover",
-    "calendar",
-    "calendarHeader",
-    "calendarGrid",
-    "calendarCell"
-  ],
-  base: {
-    root: {
-      display: "inline-block"
-    },
-    group: {
-      "--border-width": "{sizes.25}",
-      "--border-color": "{colors.neutral.7}",
-      // ========================================
-      // BASE LAYOUT & VISUAL PROPERTIES
-      // ========================================
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      borderRadius: "200",
-      bg: "neutral.1",
-      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: {},
-      ghost: {
-        group: {
-          bg: "transparent",
-          px: "300",
-          _hover: {
-            bg: "primary.2"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid"
-  }
 }), le = /* @__PURE__ */ e({
   slots: [
     "trigger",
@@ -3272,7 +3272,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
       richText: {}
     }
   }
-}), he = /* @__PURE__ */ s({
+}), fe = /* @__PURE__ */ s({
   slots: [
     "root",
     "container",
@@ -3391,7 +3391,7 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   defaultVariants: {
     size: "md"
   }
-}), fe = /* @__PURE__ */ e({
+}), he = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-multiline-text-input",
   slots: ["root", "leadingElement", "textarea"],
@@ -5129,41 +5129,51 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
         }
       }
     },
-    // Line + Vertical + Start (tabs on left, border on left)
+    // Line + Vertical + Start (tabs on left, border on right between tabs and content)
     {
       variant: "line",
       orientation: "vertical",
       placement: "start",
       css: {
         list: {
-          boxShadow: "-1px 0 0 0 {colors.neutral.6}"
+          boxShadow: "1px 0 0 0 {colors.neutral.6}"
         },
         tab: {
-          boxShadow: "-2px 0 0 0 transparent",
+          boxShadow: "2px 0 0 0 transparent",
           _selected: {
-            boxShadow: "-2px 0 0 0 {colors.primary.9}"
+            boxShadow: "2px 0 0 0 {colors.primary.9}"
           }
         }
       }
     },
-    // Line + Vertical + End (tabs on right, border on right)
+    // Line + Vertical + End (tabs on right, border on left between tabs and content)
     {
       variant: "line",
       orientation: "vertical",
       placement: "end",
       css: {
         list: {
-          boxShadow: "1px 0 0 0 {colors.neutral.6}"
+          boxShadow: "-1px 0 0 0 {colors.neutral.6}"
         },
         tab: {
-          boxShadow: "2px 0 0 0 transparent",
+          boxShadow: "-2px 0 0 0 transparent",
           _selected: {
-            boxShadow: "2px 0 0 0 {colors.primary.9}"
+            boxShadow: "-2px 0 0 0 {colors.primary.9}"
           }
         }
       }
     },
     // ==================== PLACEMENT-ONLY VARIANTS ====================
+    // Vertical + End (applies to all variants including pills)
+    {
+      orientation: "vertical",
+      placement: "end",
+      css: {
+        root: {
+          flexDirection: "row-reverse"
+        }
+      }
+    },
     // Horizontal + Start (default)
     {
       orientation: "horizontal",
@@ -5458,16 +5468,16 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
     variant: "solid"
   }
 }), Ee = {
-  accordion: J,
-  alert: K,
-  calendar: Q,
+  accordion: K,
+  alert: Q,
+  calendar: ee,
   rangeCalendar: ve,
-  dateInput: ae,
-  dateRangePicker: ie,
-  datePicker: re,
-  dataTable: oe,
+  dateInput: re,
+  dateRangePicker: P,
+  datePicker: ie,
+  dataTable: ae,
   radioInput: g,
-  combobox: te,
+  combobox: oe,
   progressBar: ze,
   menu: ke,
   textInput: Re,
@@ -5475,15 +5485,15 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   drawer: le,
   tabs: He,
   localizedField: be,
-  card: ee,
+  card: te,
   checkbox: d,
   collapsibleMotion: Ce,
   dialog: ne,
   fieldErrors: se,
   formField: pe,
   list: ue,
-  moneyInput: he,
-  multilineTextInput: fe,
+  moneyInput: fe,
+  multilineTextInput: he,
   numberInput: xe,
   richTextInput: ye,
   scopedSearchInput: we,
@@ -5645,40 +5655,40 @@ const _ = /* @__PURE__ */ W(t.breakpoints), H = /* @__PURE__ */ h({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
-  globalCss: N,
-  conditions: H,
+  globalCss: B,
+  conditions: N,
   theme: {
-    breakpoints: _,
-    keyframes: B,
+    breakpoints: H,
+    keyframes: E,
     tokens: et,
-    semanticTokens: Z,
-    recipes: U,
+    semanticTokens: J,
+    recipes: X,
     slotRecipes: Ee,
     textStyles: Te,
-    layerStyles: E,
-    animationStyles: P
+    layerStyles: T,
+    animationStyles: W
   }
 }), ct = /* @__PURE__ */ y(w, tt);
 export {
   Be as a,
-  G as b,
-  Y as c,
-  ae as d,
+  O as b,
+  M as c,
+  re as d,
   We as e,
   we as f,
-  ie as g,
-  re as h,
-  he as i,
+  P as g,
+  ie as h,
+  fe as i,
   g as j,
   le as k,
   l,
-  fe as m,
+  he as m,
   ye as n,
   Pe as o,
   xe as p,
-  te as q,
+  oe as q,
   ve as r,
   ct as s,
   Re as t
 };
-//# sourceMappingURL=index-CIWPalKw.es.js.map
+//# sourceMappingURL=index-Ce4tHjCt.es.js.map