@commercetools/nimbus 0.0.0-canary-20250919133951 → 0.0.0-canary-20250919142636

package/dist/chunks/{index-B68rhcD_.es.js → index-knmonT53.es.js}

@@ -1,8 +1,8 @@
-import { defineAnimationStyles as b, defineGlobalStyles as m, defineLayerStyles as h, defineRecipe as f, defineSemanticTokens as c, defineSlotRecipe as p, defineTextStyles as v, defineTokens as o, createSystem as y, defaultBaseConfig as x, defineConfig as w } from "@chakra-ui/react";
-import { themeTokens as e } from "@commercetools/nimbus-tokens";
+import { defineAnimationStyles as b, defineGlobalStyles as m, defineLayerStyles as h, defineRecipe as f, defineSemanticTokens as c, defineSlotRecipe as p, defineTextStyles as v, defineTokens as o, createSystem as x, defaultBaseConfig as y, defineConfig as w } 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 { defineRecipe as d, defineSlotRecipe as t } from "@chakra-ui/react/styled-system";
+import { defineRecipe as d, defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
 import { g as k } from "./group.recipe-BQafmscW.es.js";
 import { k as z } from "./kbd.recipe-DXiyvrAP.es.js";
 import { l as R } from "./link.recipe-pXiGIJtI.es.js";
@@ -61,7 +61,7 @@ function P(a) {
     a[r]?.value ? l[r] = a[r].value : l[r] = a[r];
   return l;
 }
-const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
+const W = /* @__PURE__ */ P(t.breakpoints), _ = /* @__PURE__ */ m({
   "*": {
     fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
     /**
@@ -519,7 +519,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), u = /* @__PURE__ */ t({
+}), u = /* @__PURE__ */ e({
   slots: ["root", "option"],
   // Unique class name prefix for the component
   className: "nimbus-radio-input",
@@ -757,14 +757,14 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       value: "{colors.ingo.8}"
     }
   },
-  ...e.color["system-palettes"],
-  ...e.color["brand-palettes"],
-  ...e.color["semantic-palettes"]
-}), j = /* @__PURE__ */ c.shadows(e.shadow), E = /* @__PURE__ */ c.radii({}), O = {
+  ...t.color["system-palettes"],
+  ...t.color["brand-palettes"],
+  ...t.color["semantic-palettes"]
+}), j = /* @__PURE__ */ c.shadows(t.shadow), E = /* @__PURE__ */ c.radii({}), O = {
   colors: G,
   shadows: j,
   radii: E
-}, F = /* @__PURE__ */ t({
+}, F = /* @__PURE__ */ e({
   slots: [
     "trigger",
     "backdrop",
@@ -1015,7 +1015,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     placement: "top",
     motionPreset: "scale"
   }
-}), M = /* @__PURE__ */ t({
+}), M = /* @__PURE__ */ e({
   className: "nimbus-list",
   slots: ["root", "item", "indicator"],
   base: {
@@ -1080,7 +1080,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     variant: "marker"
   }
-}), Y = /* @__PURE__ */ t({
+}), Y = /* @__PURE__ */ e({
   className: "chakra-table",
   slots: [
     "root",
@@ -1247,7 +1247,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     variant: "line",
     size: "md"
   }
-}), s = /* @__PURE__ */ t({
+}), s = /* @__PURE__ */ e({
   slots: ["root", "label", "indicator"],
   // Unique class name prefix for the component
   className: "nimbus-checkbox",
@@ -1345,7 +1345,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), i = /* @__PURE__ */ t({
+}), i = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -1535,7 +1535,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "outline"
   }
-}), X = /* @__PURE__ */ t({
+}), X = /* @__PURE__ */ e({
   slots: [
     "root",
     "disclosure",
@@ -1623,7 +1623,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), $ = /* @__PURE__ */ t({
+}), $ = /* @__PURE__ */ e({
   slots: ["root", "tagList", "tag"],
   // Unique class name prefix for the component
   className: "nimbus-tag-group",
@@ -1702,7 +1702,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "lg"
   }
-}), U = /* @__PURE__ */ t({
+}), U = /* @__PURE__ */ e({
   slots: ["root", "label", "track", "thumb"],
   // Unique class name prefix for the component
   className: "nimbus-switch",
@@ -1796,7 +1796,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), q = /* @__PURE__ */ t({
+}), q = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-number-input",
   // Define the slots for this multi-part component
@@ -2000,7 +2000,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), J = /* @__PURE__ */ t({
+}), J = /* @__PURE__ */ e({
   slots: [
     "root",
     "value",
@@ -2274,7 +2274,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     variant: "solid",
     selectionMode: "single"
   }
-}), K = /* @__PURE__ */ t({
+}), K = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -2369,7 +2369,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   }
-}), Q = /* @__PURE__ */ t({
+}), Q = /* @__PURE__ */ e({
   slots: [
     "root",
     "header",
@@ -2492,7 +2492,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   }
-}), Z = /* @__PURE__ */ t({
+}), Z = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-input",
   slots: ["root", "segmentGroup", "segment"],
@@ -2613,7 +2613,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), ee = /* @__PURE__ */ t({
+}), tt = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-picker",
   slots: [
@@ -2689,7 +2689,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   defaultVariants: {
     size: "md"
   }
-}), te = /* @__PURE__ */ t({
+}), et = /* @__PURE__ */ e({
   className: "nimbus-date-range-picker",
   slots: [
     "root",
@@ -2807,7 +2807,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     size: "md",
     variant: "solid"
   }
-}), oe = /* @__PURE__ */ p({
+}), ot = /* @__PURE__ */ p({
   // Available slots for the DataTable component
   slots: [
     "root",
@@ -2819,7 +2819,6 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     "cell",
     "footer",
     "selectionCell",
-    "detailsButton",
     "expandButton",
     "nestedIcon",
     "headerSortIcon",
@@ -2849,21 +2848,13 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
         color: "neutral.11",
         focusRing: "outside",
         hyphens: "auto",
-        "&[data-slot='expand']": {
-          padding: 0
-        },
-        "&[data-slot='pin-row-cell']": {
+        "& [data-slot='pin-row-cell']": {
           alignItems: "center",
-          justifyContent: "center"
-        },
-        "& .nimbus-table-cell-copy-button": {
-          display: "none"
-        },
-        "& .nimbus-table-cell-pin-button": {
-          display: "none"
-        },
-        "& .nimbus-table-cell-pin-button-pinned": {
-          display: "inherit"
+          justifyContent: "center",
+          position: "sticky",
+          right: 0,
+          zIndex: 10,
+          backgroundColor: "white"
         }
       },
       "& .data-table-row": {
@@ -2875,37 +2866,100 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
         "&:last-child": {
           borderBottom: "none"
         },
+        "& [data-slot='pin-row-cell']": {
+          position: "sticky",
+          right: 0,
+          zIndex: 3,
+          "& [data-slot='nimbus-table-cell-pin-button']": {
+            opacity: 0
+          },
+          "& [data-slot='nimbus-table-cell-pin-button-pinned']": {
+            opacity: 1
+          }
+        },
+        "& .data-table-sticky-cell": {
+          backgroundColor: "white",
+          position: "sticky",
+          left: 0
+        },
+        "& [data-slot='selection']": {
+          zIndex: 11
+        },
+        "& [data-slot='expand']": {
+          zIndex: 12
+        },
+        // When selection column is present, move expand column to the right
+        "& [data-slot='selection'] ~ [data-slot='expand']": {
+          left: "72px"
+          // Width of selection column
+        },
         _hover: {
           backgroundColor: "{colors.primary.3}",
           transition: "background-color 100ms ease",
           transform: "translate3d(0, 0, 0)",
-          "& .data-table-row-details-button": {
-            opacity: 1
+          "& .data-table-sticky-cell": {
+            transition: "background-color 100ms ease",
+            backgroundColor: "inherit",
+            position: "sticky"
           },
-          "& .nimbus-table-cell-copy-button": {
-            display: "inherit"
+          "& [data-slot='selection']": {
+            zIndex: 11
           },
-          "& .nimbus-table-cell-pin-button": {
-            display: "inherit"
+          "& [data-slot='expand']": {
+            zIndex: 12
+          },
+          // When selection column is present, move expand column to the right on hover
+          "& [data-slot='selection'] ~ [data-slot='expand']": {
+            left: "72px"
+            // Width of selection column
+          },
+          "& [data-slot='pin-row-cell']": {
+            right: 0,
+            zIndex: 10,
+            "& [data-slot='nimbus-table-cell-pin-button']": {
+              opacity: 1
+            }
+          },
+          "& .data-table-row[data-disabled='true']": {
+            opacity: 0.8
           }
-        },
-        "& .data-table-row-details-button": {
-          opacity: 0
-        },
-        "& .data-table-row-details-button:focus": {
-          opacity: 1
         }
       },
       "& .data-table-row[data-selected='true']": {
-        background: "{colors.primary.4}"
+        "& .data-table-sticky-cell": {
+          backgroundColor: "inherit"
+        }
       },
       "& .data-table-row[data-disabled='true']": {
         // layerStyle: "disabled",
         opacity: 0.8,
-        cursor: "not-allowed"
+        cursor: "not-allowed",
+        backgroundColor: "inherit"
       },
       "& .data-table-row-pinned": {
         boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right)",
+        "& .data-table-sticky-cell": {
+          backgroundColor: "white",
+          position: "sticky",
+          left: 0,
+          zIndex: 3
+        },
+        "& [data-slot='selection']": {
+          clipPath: "inset(2px 0 2px 2px)"
+        },
+        "& [data-slot='expand']": {
+          clipPath: "inset(2px 0)"
+        },
+        // When selection column is present in pinned rows, move expand column
+        "& [data-slot='selection'] ~ [data-slot='expand']": {
+          left: "72px"
+          // Width of selection column
+        },
+        "& [data-slot='pin-row-cell']": {
+          backgroundColor: "white",
+          position: "sticky",
+          clipPath: "inset(2px 2px 2px 0)"
+        },
         "&.data-table-row-pinned-first": {
           boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right), var(--pinned-shadow-top)"
         },
@@ -3026,18 +3080,50 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
           flexShrink: 0
         }
       },
-      "&.selection-column-header, &.expand-column-header": {
+      "&.selection-column-header": {
         cursor: "default",
         paddingTop: "100",
         paddingBottom: "100",
         paddingLeft: "600",
         paddingRight: "600",
+        position: "sticky",
+        left: 0,
+        zIndex: 13,
+        backgroundColor: "colorPalette.2",
         "&:hover": {
-          backgroundColor: "transparent"
+          backgroundColor: "colorPalette.2"
         }
       },
       "&.expand-column-header": {
-        padding: "0"
+        cursor: "default",
+        padding: "0",
+        position: "sticky",
+        left: 0,
+        // Default position when no selection column
+        zIndex: 12,
+        backgroundColor: "colorPalette.2",
+        "&:hover": {
+          backgroundColor: "colorPalette.2"
+        }
+      },
+      // When selection column is present, adjust expand column header position
+      "&.selection-column-header + &.expand-column-header": {
+        left: "72px"
+        // Width of selection column
+      },
+      "&.pin-rows-column-header": {
+        cursor: "default",
+        paddingTop: "100",
+        paddingBottom: "100",
+        paddingLeft: "600",
+        paddingRight: "600",
+        position: "sticky",
+        right: 0,
+        zIndex: 11,
+        backgroundColor: "colorPalette.2",
+        "&:hover": {
+          backgroundColor: "colorPalette.2"
+        }
       },
       "&[aria-sort]": {
         fontWeight: 600,
@@ -3057,10 +3143,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       "&:hover:not([data-nested-row-expanded])": {
         backgroundColor: "{colors.primary.3}",
         transition: "background-color 200ms ease",
-        transform: "translate3d(0, 0, 0)",
-        "& .nimbus-data-table__detailsButton": {
-          opacity: 1
-        }
+        transform: "translate3d(0, 0, 0)"
       },
       "& td, div": {
         userSelect: "none"
@@ -3092,18 +3175,9 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       focusRing: "outside",
       hyphens: "auto",
       height: "100%",
-      _hover: {
-        "& .nimbus-table-cell-copy-button:not([data-disabled='true'])": {
-          display: "inherit"
-        }
-      },
       "&[data-slot='expand']": {
         padding: 0
       },
-      "& .nimbus-table-cell-copy-button": {
-        display: "none",
-        ml: "100"
-      },
       "&[data-nested-cell]": {
         boxShadow: "inset 2px 0 0 {colors.primary.10}"
       }
@@ -3112,18 +3186,6 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       width: "100%"
     },
     selectionCell: {},
-    detailsButton: {
-      margin: "auto",
-      colorPalette: "primary",
-      opacity: 0,
-      focusRing: "outside",
-      _focus: {
-        opacity: 1
-      },
-      "&[data-disabled='true']": {
-        opacity: 0
-      }
-    },
     nestedIcon: {},
     headerSortIcon: {
       transition: "transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
@@ -3198,7 +3260,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   }
-}), re = /* @__PURE__ */ t({
+}), rt = /* @__PURE__ */ e({
   className: "nimbus-progress-bar",
   slots: ["root", "track", "fill", "label", "value"],
   // Base styles applied to all instances of the component
@@ -3346,7 +3408,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       }
     }
   ]
-}), ae = /* @__PURE__ */ t({
+}), at = /* @__PURE__ */ e({
   slots: [
     "root",
     "trigger",
@@ -3526,7 +3588,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
       letterSpacing: "{spacing.25}"
     }
   }
-}), ie = /* @__PURE__ */ p({
+}), it = /* @__PURE__ */ p({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -3587,7 +3649,7 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
     variant: "solid"
     // Match component default
   }
-}), le = {
+}), lt = {
   dialog: F,
   list: M,
   table: Y,
@@ -3600,28 +3662,28 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   calendar: K,
   rangeCalendar: Q,
   dateInput: Z,
-  dateRangePicker: te,
-  datePicker: ee,
-  dataTable: oe,
+  dateRangePicker: et,
+  datePicker: tt,
+  dataTable: ot,
   radioInput: u,
   combobox: J,
-  progressBar: re,
-  menu: ae,
-  splitButton: ie
-}, ne = /* @__PURE__ */ v(
-  e.textStyle
-), se = /* @__PURE__ */ o.durations(e.aspectRatio), de = /* @__PURE__ */ o.animations(e.animation), ce = /* @__PURE__ */ o.blurs(e.blur), pe = /* @__PURE__ */ o.borders(e.border), ue = /* @__PURE__ */ o.colors({
-  ...e.color["blacks-and-whites"]
-}), ge = /* @__PURE__ */ o.durations(e.duration), be = /* @__PURE__ */ o.easings(e.easing), me = /* @__PURE__ */ o.fonts(e.fontFamily), he = /* @__PURE__ */ o.fontSizes(e.fontSize), fe = /* @__PURE__ */ o.fontWeights(e.fontWeight), ve = (a) => Object.keys(a).reduce(
+  progressBar: rt,
+  menu: at,
+  splitButton: it
+}, nt = /* @__PURE__ */ v(
+  t.textStyle
+), st = /* @__PURE__ */ o.durations(t.aspectRatio), dt = /* @__PURE__ */ o.animations(t.animation), ct = /* @__PURE__ */ o.blurs(t.blur), pt = /* @__PURE__ */ o.borders(t.border), ut = /* @__PURE__ */ o.colors({
+  ...t.color["blacks-and-whites"]
+}), gt = /* @__PURE__ */ o.durations(t.duration), bt = /* @__PURE__ */ o.easings(t.easing), mt = /* @__PURE__ */ o.fonts(t.fontFamily), ht = /* @__PURE__ */ o.fontSizes(t.fontSize), ft = /* @__PURE__ */ o.fontWeights(t.fontWeight), vt = (a) => Object.keys(a).reduce(
   (l, r) => {
     const g = parseFloat(a[r].value) / 100;
     return l[r] = { value: `${g}em` }, l;
   },
   {}
-), ye = /* @__PURE__ */ o.letterSpacings(
-  /* @__PURE__ */ ve(e.letterSpacing)
-), xe = /* @__PURE__ */ o.lineHeights(e.lineHeight), we = /* @__PURE__ */ o.radii(e.borderRadius), Se = /* @__PURE__ */ o.spacing(e.spacing), ke = /* @__PURE__ */ o.sizes({
-  ...e.size,
+), xt = /* @__PURE__ */ o.letterSpacings(
+  /* @__PURE__ */ vt(t.letterSpacing)
+), yt = /* @__PURE__ */ o.lineHeights(t.lineHeight), wt = /* @__PURE__ */ o.radii(t.borderRadius), St = /* @__PURE__ */ o.spacing(t.spacing), kt = /* @__PURE__ */ o.sizes({
+  ...t.size,
   "1/2": {
     value: "50%"
   },
@@ -3736,25 +3798,25 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   vh: {
     value: "100vh"
   }
-}), ze = /* @__PURE__ */ o.zIndex(e.zIndex), Re = /* @__PURE__ */ o.cursor(e.cursor), Ce = {
-  aspectRatios: se,
-  animations: de,
-  blurs: ce,
-  borders: pe,
-  colors: ue,
-  durations: ge,
-  easings: be,
-  fonts: me,
-  fontSizes: he,
-  fontWeights: fe,
-  letterSpacings: ye,
-  lineHeights: xe,
-  radii: we,
-  spacing: Se,
-  sizes: ke,
-  zIndex: ze,
-  cursor: Re
-}, Ie = /* @__PURE__ */ w({
+}), zt = /* @__PURE__ */ o.zIndex(t.zIndex), Rt = /* @__PURE__ */ o.cursor(t.cursor), Ct = {
+  aspectRatios: st,
+  animations: dt,
+  blurs: ct,
+  borders: pt,
+  colors: ut,
+  durations: gt,
+  easings: bt,
+  fonts: mt,
+  fontSizes: ht,
+  fontWeights: ft,
+  letterSpacings: xt,
+  lineHeights: yt,
+  radii: wt,
+  spacing: St,
+  sizes: kt,
+  zIndex: zt,
+  cursor: Rt
+}, It = /* @__PURE__ */ w({
   preflight: !0,
   cssVarsPrefix: "nimbus",
   cssVarsRoot: ":where(:root, :host)",
@@ -3762,32 +3824,32 @@ const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
   theme: {
     breakpoints: W,
     keyframes: B,
-    tokens: Ce,
+    tokens: Ct,
     semanticTokens: O,
     recipes: L,
-    slotRecipes: le,
-    textStyles: ne,
+    slotRecipes: lt,
+    textStyles: nt,
     layerStyles: N,
     animationStyles: I
   }
-}), Le = /* @__PURE__ */ y(x, Ie);
+}), Lt = /* @__PURE__ */ x(y, It);
 export {
-  ie as a,
+  it as a,
   V as b,
   U as c,
   Z as d,
   D as e,
-  te as f,
+  et as f,
   K as g,
-  ee as h,
+  tt as h,
   u as i,
   i as j,
-  oe as k,
+  ot as k,
   J as l,
-  ae as m,
+  at as m,
   q as n,
   Q as r,
-  Le as s,
+  Lt as s,
   A as t
 };
-//# sourceMappingURL=index-B68rhcD_.es.js.map
+//# sourceMappingURL=index-knmonT53.es.js.map