@eightshift/ui-components 6.0.11 → 6.0.13

package/dist/components/menu/menu.js

@@ -100,6 +100,7 @@ const Menu = (props) => {
     additionalProps.trigger = "longPress";
   }
   const hasSubmenuItems = Array.isArray(children) ? children.some((child) => child?.type?.displayName === "SubMenuItem") : children?.type?.displayName === "SubMenuItem";
+  let { className: popoverClassName, wrapperClassName: popoverWrapperClassName, ...otherPopoverProps } = popoverProps || {};
   return /* @__PURE__ */ jsxs(
     $3674c52c6b3c5bce$export$27d2ad3c5815583e,
     {
@@ -122,11 +123,11 @@ const Menu = (props) => {
             "aria-label": ariaLabel,
             popoverProps: {
               maxHeight: Math.max(240, window.innerHeight * 0.42),
-              ...popoverProps
+              ...otherPopoverProps
             },
-            ...popoverProps,
-            className: clsx("es:p-1.5 es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
-            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverProps?.wrapperClassName),
+            ...otherPopoverProps,
+            className: clsx("es:p-1.5 es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverClassName),
+            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverWrapperClassName),
             children: /* @__PURE__ */ jsx(
               $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
               {

package/dist/components/placeholders/file-picker-shell.js

@@ -85,12 +85,13 @@ const FilePickerShell = (props) => {
     {
       src: url,
       alt: "",
-      className: ({ hasAnalysed, isTransparent, transparencyInfo }) => clsx(
+      className: ({ hasAnalysed, isTransparent, transparencyInfo, isDark }) => clsx(
         hasAnalysed && transparencyInfo?.left && url && "es:pl-3",
         hasAnalysed && transparencyInfo?.right && url && "es:pr-3",
         hasAnalysed && transparencyInfo?.top && url && "es:pt-3",
         hasAnalysed && transparencyInfo?.bottom && url && "es:pb-3",
-        hasAnalysed && isTransparent && "es:bg-white/60 es:object-contain es:mx-auto",
+        hasAnalysed && isTransparent && isDark && "es:bg-white/60 es:object-contain es:mx-auto",
+        hasAnalysed && isTransparent && !isDark && "es:bg-black/60 es:object-contain es:mx-auto",
         hasAnalysed && isTransparent && (transparencyInfo?.left || transparencyInfo?.right) && "es:w-full!",
         hasAnalysed && isTransparent && (transparencyInfo?.top || transparencyInfo?.bottom) && "es:h-full!",
         hasAnalysed && !isTransparent && "es:w-full! es:aspect-3-2 es:object-cover",

package/dist/components/responsive/responsive-legacy.js

@@ -214,7 +214,7 @@ const ResponsiveLegacy = (props) => {
             visible: detailsVisible,
             children: [
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
+              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2 es:w-full", children: children({
                 breakpoint: defaultBreakpoint,
                 currentValue: value?.[attribute[defaultBreakpoint]],
                 options,

package/dist/components/responsive/responsive.js

@@ -346,7 +346,7 @@ const Responsive = (props) => {
             visible: detailsVisible,
             children: [
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
+              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2 es:w-full", children: children({
                 breakpoint: "_default",
                 currentValue: value?.["_default"],
                 handleChange: (newValue) => onChange({

package/dist/components/slider/column-config-slider.js

@@ -7,7 +7,7 @@ import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-CcjltLEW.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-B_RaYTfe.js";
 /**
  * A two-thumb slider for selecting a range of columns.
  *

package/dist/components/slider/slider.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DPWyf-gp.js";
 import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-CZV3HhHY.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -6,7 +7,7 @@ import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
 import { generateMarkers, generateGridTemplate } from "./utils.js";
 import { HStack } from "../layout/hstack.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-CcjltLEW.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-B_RaYTfe.js";
 /**
  * A single/multi-thumb slider component.
  *
@@ -87,6 +88,7 @@ const Slider = (props) => {
     hidden,
     ...other
   } = props;
+  const [hoveredThumbs, setHoveredThumbs] = useState([]);
   if (hidden) {
     return null;
   }
@@ -247,6 +249,8 @@ const Slider = (props) => {
                         $6f909507e6374d18$export$2c1b491743890dec,
                         {
                           index: i,
+                          onHoverStart: () => setHoveredThumbs((prev) => [...prev, i]),
+                          onHoverEnd: () => setHoveredThumbs((prev) => prev.filter((val) => val !== i)),
                           "aria-label": thumbLabels?.[i],
                           className: clsx(
                             !vertical && ["es:h-10 es:w-0.75", "es:row-1"],
@@ -271,7 +275,7 @@ const Slider = (props) => {
                           },
                           children: [
                             thumbContent && thumbContent(i),
-                            /* @__PURE__ */ jsx(AnimatePresence, { children: i === state.focusedThumb && /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx(AnimatePresence, { children: (state.focusedThumb === i || hoveredThumbs.includes(i)) && /* @__PURE__ */ jsx(
                               motion.div,
                               {
                                 className: clsx(

package/dist/icons/icons.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { GenericColorSwatch } from "./generic-color-swatch.js";
 const icons = {
   width: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
@@ -3407,7 +3407,37 @@ const icons = {
     /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 14.5h15", fill: "none" }),
     /* @__PURE__ */ jsx("path", { d: "M12.5 3h-5a.5.5 0 0 1-.3-.9L9.7.225a.5.5 0 0 1 .6 0L12.8 2.1a.5.5 0 0 1-.3.9Zm0 14h-5a.5.5 0 0 0-.3.9l2.5 1.875a.5.5 0 0 0 .6 0l2.5-1.875a.5.5 0 0 0-.3-.9Z", fill: "currentColor" })
   ] }),
-  loaderAlt: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 19v-2m-9-7h2m13.367 6.367-1.414-1.414m-11.32 1.414 1.414-1.414M10 3V1m7 9h2M5.047 5.047 3.633 3.633m11.32 1.414 1.414-1.414M10 17v-1.555M3 10h1.555m10.396 4.951-1.1-1.1m-8.803 1.1 1.1-1.1M10 4.556V3m5.444 7H17M6.147 6.147l-1.1-1.1m8.806 1.1 1.1-1.1", stroke: "currentColor", strokeLinecap: "round", fill: "none" }) })
+  loaderAlt: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 19v-2m-9-7h2m13.367 6.367-1.414-1.414m-11.32 1.414 1.414-1.414M10 3V1m7 9h2M5.047 5.047 3.633 3.633m11.32 1.414 1.414-1.414M10 17v-1.555M3 10h1.555m10.396 4.951-1.1-1.1m-8.803 1.1 1.1-1.1M10 4.556V3m5.444 7H17M6.147 6.147l-1.1-1.1m8.806 1.1 1.1-1.1", stroke: "currentColor", strokeLinecap: "round", fill: "none" }) }),
+  verticalAlignAround: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "2.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "12.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  verticalAlignEvenly: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "11.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  verticalAlignBetween: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "0.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "14.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  horizontalAlignAround: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 2.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 12.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  horizontalAlignEvenly: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 3.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 11.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  horizontalAlignBetween: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 .75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 14.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] })
 };
 const blockIcons = {
   // Eightshift blocks.