@commercetools/nimbus 0.0.0-canary-20251008065712 → 0.0.0-canary-20251009112243

package/dist/chunks/{index-D26EXIvZ.es.js → index-DthLdwMN.es.js}

@@ -1,12 +1,12 @@
-import { defineAnimationStyles as b, defineConditions as m, defineGlobalStyles as f, defineLayerStyles as h, defineRecipe as v, defineSemanticTokens as d, defineSlotRecipe as p, defineTextStyles as x, defineTokens as o, createSystem as y, defaultBaseConfig as w, defineConfig as z } from "@chakra-ui/react";
+import { defineAnimationStyles as m, defineConditions as b, defineGlobalStyles as f, defineLayerStyles as h, defineRecipe as v, defineSemanticTokens as d, defineSlotRecipe as p, defineTextStyles as x, defineTokens as o, createSystem as y, defaultBaseConfig as w, defineConfig as z } from "@chakra-ui/react";
 import { themeTokens as t } from "@commercetools/nimbus-tokens";
 import { a as S } from "./avatar.recipe-DfyPWbFZ.es.js";
 import { b as n } from "./button.recipe-NdTb5f8M.es.js";
 import { defineSlotRecipe as e, defineRecipe as c } from "@chakra-ui/react/styled-system";
 import { g as k } from "./group.recipe-BQafmscW.es.js";
 import { k as R } from "./kbd.recipe-DXiyvrAP.es.js";
-import { l as C } from "./link.recipe-pXiGIJtI.es.js";
-import { t as I } from "./tooltip.recipe-Cqi_tgR5.es.js";
+import { l as I } from "./link.recipe-pXiGIJtI.es.js";
+import { t as C } from "./tooltip.recipe-Cqi_tgR5.es.js";
 const P = /* @__PURE__ */ e({
   slots: [
     "trigger",
@@ -164,7 +164,7 @@ const P = /* @__PURE__ */ e({
     scrollBehavior: "outside",
     placement: "center"
   }
-}), W = /* @__PURE__ */ b({
+}), W = /* @__PURE__ */ m({
   "slide-fade-in": {
     value: {
       transformOrigin: "var(--transform-origin)",
@@ -218,7 +218,7 @@ function _(r) {
     r[a]?.value ? l[a] = r[a].value : l[a] = r[a];
   return l;
 }
-const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
+const B = /* @__PURE__ */ _(t.breakpoints), N = /* @__PURE__ */ b({
   /**
    * Maps to React Aria's open state data attributes
    * Used for animations when a component is opening/entering
@@ -229,7 +229,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
    * Used for animations when a component is closing/exiting
    */
   closed: "&:is([data-exiting], [data-closed])"
-}), E = /* @__PURE__ */ f({
+}), H = /* @__PURE__ */ f({
   "*": {
     fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
     /**
@@ -309,7 +309,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     display: "initial",
     verticalAlign: "initial"
   }
-}), N = {
+}), E = {
   spin: {
     "0%": {
       transform: "rotate(0deg)"
@@ -530,7 +530,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
       outlineOffset: "var(--focus-ring-offset)"
     }
   }
-}), A = /* @__PURE__ */ c({
+}), D = /* @__PURE__ */ c({
   className: "nimbus-code",
   base: {
     fontFamily: "mono",
@@ -590,7 +590,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     variant: "solid",
     size: "md"
   }
-}), L = /* @__PURE__ */ c({
+}), A = /* @__PURE__ */ c({
   className: "nimbus-heading",
   base: {
     fontFamily: "heading",
@@ -705,7 +705,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
   defaultVariants: {
     orientation: "vertical"
   }
-}), D = /* @__PURE__ */ c({
+}), L = /* @__PURE__ */ c({
   className: "nimbus-toggle-button",
   base: {
     ...n.base
@@ -818,14 +818,14 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
 }), F = {
   avatar: S,
   button: n,
-  code: A,
+  code: D,
   group: k,
-  heading: L,
+  heading: A,
   kbd: R,
-  link: C,
-  tooltip: I,
+  link: I,
+  tooltip: C,
   radioInput: g,
-  toggleButton: D,
+  toggleButton: L,
   toolbar: V
 }, j = /* @__PURE__ */ d.colors({
   bg: {
@@ -876,11 +876,11 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
   ...t.color["system-palettes"],
   ...t.color["brand-palettes"],
   ...t.color["semantic-palettes"]
-}), G = /* @__PURE__ */ d.shadows(t.shadow), O = /* @__PURE__ */ d.radii({}), M = {
+}), O = /* @__PURE__ */ d.shadows(t.shadow), G = /* @__PURE__ */ d.radii({}), M = {
   colors: j,
-  shadows: G,
-  radii: O
-}, X = /* @__PURE__ */ e({
+  shadows: O,
+  radii: G
+}, Y = /* @__PURE__ */ e({
   className: "nimbus-list",
   slots: ["root", "item", "indicator"],
   base: {
@@ -945,7 +945,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
   defaultVariants: {
     variant: "marker"
   }
-}), Y = /* @__PURE__ */ e({
+}), X = /* @__PURE__ */ e({
   className: "chakra-table",
   slots: [
     "root",
@@ -3199,6 +3199,208 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     }
   }
 }), re = /* @__PURE__ */ e({
+  slots: [
+    "trigger",
+    "modalOverlay",
+    "modal",
+    "content",
+    "title",
+    "closeTrigger",
+    "header",
+    "body",
+    "footer"
+  ],
+  className: "nimbus-drawer",
+  base: {
+    trigger: {
+      focusRing: "outside"
+    },
+    modalOverlay: {
+      pos: "fixed",
+      left: 0,
+      top: 0,
+      w: "100vw",
+      h: "100dvh",
+      zIndex: "modal",
+      "&[data-entering]": {
+        animation: "fade-in",
+        animationDuration: "slow",
+        animationTimingFunction: "ease-in-smooth"
+      },
+      "&[data-exiting]": {
+        animation: "fade-out",
+        animationDuration: "moderate",
+        animationTimingFunction: "ease-in-out"
+      }
+    },
+    modal: {
+      display: "flex",
+      width: "100vw",
+      height: "100dvh",
+      position: "fixed",
+      left: 0,
+      top: 0,
+      "--drawer-z-index": "zIndex.modal",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
+      justifyContent: "center",
+      overscrollBehaviorY: "none",
+      pointerEvents: "none",
+      overflow: "hidden",
+      "&[data-entering]": {
+        animationDuration: "slow",
+        animationTimingFunction: "ease-in-smooth"
+      },
+      "&[data-exiting]": {
+        animationDuration: "moderate",
+        animationTimingFunction: "ease-in-out"
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      outline: 0,
+      borderRadius: "200",
+      textStyle: "sm",
+      my: "var(--drawer-margin, var(--drawer-base-margin))",
+      "--drawer-z-index": "zIndex.modal",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
+      bg: "bg",
+      boxShadow: "6",
+      width: "lg",
+      maxW: "full",
+      pointerEvents: "auto",
+      maxH: "calc(100% - 7.5rem)"
+    },
+    header: {
+      flex: 0,
+      px: "600",
+      pt: "600",
+      pb: "400"
+    },
+    body: {
+      flex: "1",
+      px: "600",
+      pt: "200",
+      pb: "600",
+      overflow: "auto",
+      focusVisibleRing: "outside"
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "300",
+      px: "600",
+      py: "400"
+    },
+    title: {},
+    closeTrigger: {
+      position: "absolute",
+      top: "400",
+      right: "400",
+      zIndex: 1
+    }
+  },
+  variants: {
+    showBackdrop: {
+      true: {
+        modalOverlay: {
+          bg: {
+            _dark: "bg/20",
+            _light: "fg/20"
+          },
+          backdropFilter: "blur({sizes.100})"
+        }
+      },
+      false: {
+        modalOverlay: {
+          bg: "transparent"
+        }
+      }
+    },
+    placement: {
+      left: {
+        modal: {
+          justifyContent: "flex-start",
+          alignItems: "stretch",
+          "&[data-entering]": {
+            animationName: "slide-from-left-full"
+          },
+          "&[data-exiting]": {
+            animationName: "slide-to-left-full"
+          }
+        },
+        content: {
+          "--drawer-base-margin": 0,
+          mx: 0,
+          height: "100vh",
+          maxH: "100vh",
+          borderRadius: 0
+        }
+      },
+      right: {
+        modal: {
+          justifyContent: "flex-end",
+          alignItems: "stretch",
+          "&[data-entering]": {
+            animationName: "slide-from-right-full"
+          },
+          "&[data-exiting]": {
+            animationName: "slide-to-right-full"
+          }
+        },
+        content: {
+          "--drawer-base-margin": 0,
+          mx: 0,
+          height: "100vh",
+          maxH: "100vh",
+          borderRadius: 0
+        }
+      },
+      top: {
+        modal: {
+          alignItems: "flex-start",
+          justifyContent: "stretch",
+          "&[data-entering]": {
+            animationName: "slide-from-top-full"
+          },
+          "&[data-exiting]": {
+            animationName: "slide-to-top-full"
+          }
+        },
+        content: {
+          "--drawer-base-margin": 0,
+          mx: 0,
+          width: "100vw",
+          borderRadius: 0
+        }
+      },
+      bottom: {
+        modal: {
+          alignItems: "flex-end",
+          justifyContent: "stretch",
+          "&[data-entering]": {
+            animationName: "slide-from-bottom-full"
+          },
+          "&[data-exiting]": {
+            animationName: "slide-to-bottom-full"
+          }
+        },
+        content: {
+          "--drawer-base-margin": 0,
+          mx: 0,
+          width: "100vw",
+          borderRadius: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    placement: "right",
+    showBackdrop: !1
+  }
+}), ie = /* @__PURE__ */ e({
   slots: ["root", "list", "tab", "panels", "panel", "trigger"],
   className: "nimbus-tabs",
   base: {
@@ -3381,18 +3583,18 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     placement: "start",
     size: "md"
   }
-}), ie = `
+}), le = `
 "label"
 "fields"
 "toggle"
 "description"
 "error"
 
-`, le = `
+`, ne = `
 "label input"
 "description description"
 "error error"
-`, ne = /* @__PURE__ */ e({
+`, se = /* @__PURE__ */ e({
   slots: [
     // Group / Fieldset slots
     "root",
@@ -3414,7 +3616,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     root: {
       display: "grid",
       width: "auto",
-      gridTemplateAreas: ie,
+      gridTemplateAreas: le,
       gap: "100"
     },
     label: {
@@ -3474,7 +3676,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     // Individual Locale Field / Input slots
     localeFieldRoot: {
       gap: 0,
-      gridTemplateAreas: le,
+      gridTemplateAreas: ne,
       // 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)": {
@@ -3530,7 +3732,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
       richText: {}
     }
   }
-}), se = /* @__PURE__ */ e({
+}), de = /* @__PURE__ */ e({
   slots: ["root", "leadingElement", "input"],
   // Unique class name prefix for the component
   className: "nimbus-search-input",
@@ -3628,7 +3830,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), de = /* @__PURE__ */ e({
+}), ce = /* @__PURE__ */ e({
   slots: ["root", "container", "selectWrapper", "searchWrapper"],
   className: "nimbus-scoped-search-input",
   base: {
@@ -3676,7 +3878,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), ce = /* @__PURE__ */ e({
+}), pe = /* @__PURE__ */ e({
   className: "nimbus-progress-bar",
   slots: ["root", "track", "fill", "label", "value"],
   // Base styles applied to all instances of the component
@@ -3824,7 +4026,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
       }
     }
   ]
-}), pe = /* @__PURE__ */ e({
+}), ge = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -4004,7 +4206,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
       letterSpacing: "{spacing.25}"
     }
   }
-}), ge = /* @__PURE__ */ e({
+}), ue = /* @__PURE__ */ e({
   slots: ["root", "leadingElement", "input", "trailingElement"],
   // Unique class name prefix for the component
   className: "nimbus-text-input",
@@ -4109,7 +4311,7 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), ue = /* @__PURE__ */ p({
+}), me = /* @__PURE__ */ p({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -4180,10 +4382,10 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
     },
     content: {}
   }
-}), me = {
+}), fe = {
   dialog: P,
-  list: X,
-  table: Y,
+  list: Y,
+  table: X,
   checkbox: s,
   select: i,
   accordion: $,
@@ -4198,28 +4400,29 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
   dataTable: ae,
   radioInput: g,
   combobox: K,
-  progressBar: ce,
-  menu: pe,
-  textInput: ge,
-  splitButton: ue,
-  tabs: re,
-  localizedField: ne,
+  progressBar: pe,
+  menu: ge,
+  textInput: ue,
+  splitButton: me,
+  drawer: re,
+  tabs: ie,
+  localizedField: se,
   collapsibleMotion: be,
-  searchInput: se,
-  scopedSearchInput: de
-}, fe = /* @__PURE__ */ x(
+  searchInput: de,
+  scopedSearchInput: ce
+}, he = /* @__PURE__ */ x(
   t.textStyle
-), he = /* @__PURE__ */ o.durations(t.aspectRatio), ve = /* @__PURE__ */ o.animations(t.animation), xe = /* @__PURE__ */ o.blurs(t.blur), ye = /* @__PURE__ */ o.borders(t.border), we = /* @__PURE__ */ o.colors({
+), ve = /* @__PURE__ */ o.durations(t.aspectRatio), xe = /* @__PURE__ */ o.animations(t.animation), ye = /* @__PURE__ */ o.blurs(t.blur), we = /* @__PURE__ */ o.borders(t.border), ze = /* @__PURE__ */ o.colors({
   ...t.color["blacks-and-whites"]
-}), ze = /* @__PURE__ */ o.durations(t.duration), Se = /* @__PURE__ */ o.easings(t.easing), ke = /* @__PURE__ */ o.fonts(t.fontFamily), Re = /* @__PURE__ */ o.fontSizes(t.fontSize), Ce = /* @__PURE__ */ o.fontWeights(t.fontWeight), Ie = (r) => Object.keys(r).reduce(
+}), Se = /* @__PURE__ */ o.durations(t.duration), ke = /* @__PURE__ */ o.easings(t.easing), Re = /* @__PURE__ */ o.fonts(t.fontFamily), Ie = /* @__PURE__ */ o.fontSizes(t.fontSize), Ce = /* @__PURE__ */ o.fontWeights(t.fontWeight), Pe = (r) => Object.keys(r).reduce(
   (l, a) => {
     const u = parseFloat(r[a].value) / 100;
     return l[a] = { value: `${u}em` }, l;
   },
   {}
-), Pe = /* @__PURE__ */ o.letterSpacings(
-  /* @__PURE__ */ Ie(t.letterSpacing)
-), We = /* @__PURE__ */ o.lineHeights(t.lineHeight), _e = /* @__PURE__ */ o.radii(t.borderRadius), Be = /* @__PURE__ */ o.spacing(t.spacing), He = /* @__PURE__ */ o.sizes({
+), We = /* @__PURE__ */ o.letterSpacings(
+  /* @__PURE__ */ Pe(t.letterSpacing)
+), _e = /* @__PURE__ */ o.lineHeights(t.lineHeight), Be = /* @__PURE__ */ o.radii(t.borderRadius), Ne = /* @__PURE__ */ o.spacing(t.spacing), He = /* @__PURE__ */ o.sizes({
   ...t.size,
   "1/2": {
     value: "50%"
@@ -4335,64 +4538,65 @@ const B = /* @__PURE__ */ _(t.breakpoints), H = /* @__PURE__ */ m({
   vh: {
     value: "100vh"
   }
-}), Ee = /* @__PURE__ */ o.zIndex(t.zIndex), Ne = /* @__PURE__ */ o.cursor(t.cursor), Te = {
-  aspectRatios: he,
-  animations: ve,
-  blurs: xe,
-  borders: ye,
-  colors: we,
-  durations: ze,
-  easings: Se,
-  fonts: ke,
-  fontSizes: Re,
+}), Ee = /* @__PURE__ */ o.zIndex(t.zIndex), Te = /* @__PURE__ */ o.cursor(t.cursor), De = {
+  aspectRatios: ve,
+  animations: xe,
+  blurs: ye,
+  borders: we,
+  colors: ze,
+  durations: Se,
+  easings: ke,
+  fonts: Re,
+  fontSizes: Ie,
   fontWeights: Ce,
-  letterSpacings: Pe,
-  lineHeights: We,
-  radii: _e,
-  spacing: Be,
+  letterSpacings: We,
+  lineHeights: _e,
+  radii: Be,
+  spacing: Ne,
   sizes: He,
   zIndex: Ee,
-  cursor: Ne
+  cursor: Te
 }, Ae = /* @__PURE__ */ z({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
-  globalCss: E,
-  conditions: H,
+  globalCss: H,
+  conditions: N,
   theme: {
     breakpoints: B,
-    keyframes: N,
-    tokens: Te,
+    keyframes: E,
+    tokens: De,
     semanticTokens: M,
     recipes: F,
-    slotRecipes: me,
-    textStyles: fe,
+    slotRecipes: fe,
+    textStyles: he,
     layerStyles: T,
     animationStyles: W
   }
-}), $e = /* @__PURE__ */ y(w, Ae);
+}), Ue = /* @__PURE__ */ y(w, Ae);
 export {
-  ge as a,
-  ue as b,
+  ue as a,
+  me as b,
   V as c,
   ee as d,
   q as e,
-  de as f,
+  ce as f,
   oe as g,
   te as h,
   Q as i,
   g as j,
-  i as k,
-  ne as l,
-  pe as m,
-  P as n,
-  re as o,
-  se as p,
-  J as q,
+  P as k,
+  se as l,
+  ge as m,
+  re as n,
+  i as o,
+  ie as p,
+  de as q,
   Z as r,
-  $e as s,
-  D as t,
-  ae as u,
-  K as v
+  Ue as s,
+  L as t,
+  J as u,
+  ae as v,
+  K as w
 };
-//# sourceMappingURL=index-D26EXIvZ.es.js.map
+//# sourceMappingURL=index-DthLdwMN.es.js.map