@eightshift/ui-components 1.0.6 → 1.1.1

package/dist/components/breakpoint-preview/breakpoint-preview.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 /**
  * Component that renders a preview of the breakpoints to help users visualize the options they set.
@@ -98,120 +98,63 @@ const BreakpointPreview = (props) => {
       bg: "es-uic-bg-slate-600"
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "es-uic-grid es-uic-w-fit es-uic-mx-auto es-uic-shrink-0 es-uic-auto-cols-auto es-uic-grid-rows-[auto,_auto] es-uic-gap-x-2 es-uic-gap-y-0.5"
-      ),
-      children: [
-        dotsStart && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-shrink-0 es-uic-translate-x-1 es-uic-items-center es-uic-gap-1 es-uic-text-gray-400 es-uic-justify-self-end", children: /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-text-gray-300", children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-mx-auto es-uic-grid es-uic-w-fit es-uic-shrink-0 es-uic-auto-cols-auto es-uic-grid-rows-[auto,_auto] es-uic-gap-x-2 es-uic-gap-y-0.5"), children: [
+    dotsStart && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-shrink-0 es-uic-translate-x-1 es-uic-items-center es-uic-gap-1 es-uic-justify-self-end es-uic-text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-text-gray-300", children: [
+        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-2 es-uic-size-px es-uic-justify-self-end" })
+    ] }),
+    blocks.map(({ width, widthEnd, breakpoint, value, dotsStart: dotsStart2 = false, dotsEnd: dotsEnd2 = false, active = false, alignEnd = false, color }, i) => {
+      var _a, _b;
+      const activeTextColor = ((_a = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _a.text) ?? activeColors.default.text;
+      const activeBgColor = ((_b = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _b.bg) ?? activeColors.default.bg;
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-min-w-28 es-uic-items-center es-uic-gap-1 es-uic-font-mono es-uic-font-medium es-uic-text-gray-400", children: [
+          dotsStart2 && /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-gap-0.5", active ? activeTextColor : "text-gray-300"), children: [
             /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
             /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
             /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
-          ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-2 es-uic-size-px es-uic-justify-self-end" })
-        ] }),
-        blocks.map(
-          ({
-            width,
-            widthEnd,
-            breakpoint,
-            value,
-            dotsStart: dotsStart2 = false,
-            dotsEnd: dotsEnd2 = false,
-            active = false,
-            alignEnd = false,
-            color
-          }, i) => {
-            var _a, _b;
-            const activeTextColor = ((_a = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _a.text) ?? activeColors.default.text;
-            const activeBgColor = ((_b = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _b.bg) ?? activeColors.default.bg;
-            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              /* @__PURE__ */ jsxs("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-min-w-28 es-uic-items-center es-uic-gap-1 es-uic-font-mono es-uic-font-medium es-uic-text-gray-400", children: [
-                dotsStart2 && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: clsx(
-                      "es-uic-flex es-uic-gap-0.5",
-                      active ? activeTextColor : "text-gray-300"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
-                    ]
-                  }
-                ),
-                width && /* @__PURE__ */ jsx("span", { children: width }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "es-uic-grow es-uic-rounded",
-                      active ? "es-uic-h-0.5" : "es-uic-h-px es-uic-bg-gray-300",
-                      active && activeBgColor
-                    )
-                  }
-                ),
-                widthEnd && /* @__PURE__ */ jsx("span", { children: widthEnd }),
-                dotsEnd2 && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: clsx(
-                      "es-uic-flex es-uic-gap-0.5",
-                      active ? activeTextColor : "es-uic-text-gray-300"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "es-uic-row-start-2 es-uic-flex es-uic-w-full es-uic-min-w-28 es-uic-flex-col es-uic-items-start es-uic-gap-1", children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: clsx(
-                      "es-uic-rounded es-uic-px-1 es-uic-py-0.5",
-                      hasActive && active && "es-uic-text-white",
-                      hasActive && active && activeBgColor,
-                      hasActive && !active && "es-uic-bg-gray-200 es-uic-text-gray-500",
-                      !hasActive && "es-uic-bg-gray-600 es-uic-text-white",
-                      alignEnd && "es-uic-ml-auto"
-                    ),
-                    children: upperFirst(breakpoint)
-                  }
-                ),
-                value && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: clsx(
-                      "-es-uic-mt-0.5 es-uic-px-1",
-                      active ? "es-uic-text-gray-400" : "es-uic-text-gray-400",
-                      alignEnd && "es-uic-ml-auto"
-                    ),
-                    children: value
-                  }
-                )
-              ] })
-            ] }, i);
-          }
-        ),
-        dotsEnd && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-shrink-0 -es-uic-translate-x-1 es-uic-items-center es-uic-gap-1 es-uic-font-mono es-uic-font-medium es-uic-text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-text-gray-300", children: [
+          ] }),
+          width && /* @__PURE__ */ jsx("span", { children: width }),
+          /* @__PURE__ */ jsx("div", { className: clsx("es-uic-grow es-uic-rounded", active ? "es-uic-h-0.5" : "es-uic-h-px es-uic-bg-gray-300", active && activeBgColor) }),
+          widthEnd && /* @__PURE__ */ jsx("span", { children: widthEnd }),
+          dotsEnd2 && /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-gap-0.5", active ? activeTextColor : "es-uic-text-gray-300"), children: [
             /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
             /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
             /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
-          ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-2 es-uic-size-px" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "es-uic-row-start-2 es-uic-flex es-uic-w-full es-uic-min-w-28 es-uic-flex-col es-uic-items-start es-uic-gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(
+                "es-uic-rounded es-uic-px-1 es-uic-py-0.5",
+                hasActive && active && "es-uic-text-white",
+                hasActive && active && activeBgColor,
+                hasActive && !active && "es-uic-bg-gray-200 es-uic-text-gray-500",
+                !hasActive && "es-uic-bg-gray-600 es-uic-text-white",
+                alignEnd && "es-uic-ml-auto"
+              ),
+              children: upperFirst(breakpoint)
+            }
+          ),
+          value && /* @__PURE__ */ jsx("span", { className: clsx("-es-uic-mt-0.5 es-uic-px-1", active ? "es-uic-text-gray-400" : "es-uic-text-gray-400", alignEnd && "es-uic-ml-auto"), children: value })
         ] })
-      ]
-    }
-  );
+      ] }, i);
+    }),
+    dotsEnd && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-shrink-0 -es-uic-translate-x-1 es-uic-items-center es-uic-gap-1 es-uic-font-mono es-uic-font-medium es-uic-text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-text-gray-300", children: [
+        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-2 es-uic-size-px" })
+    ] })
+  ] });
 };
 export {
   BreakpointPreview

package/dist/components/button/button.js

@@ -1,10 +1,10 @@
 import "react/jsx-runtime";
-import "../../Button-eebLs4cp.js";
-import { B, a } from "../../button-idVI4jmd.js";
-import "../../lite-pbIeT7tm.js";
-import "../../tooltip-T6H9uF-Z.js";
-import "../../default-i18n-Bk1GxDHz.js";
-import "../../utils-DIBzm1e4.js";
+import "../../Button-CbFrFO04.js";
+import { B, a } from "../../button-CD8Q1eok.js";
+import "../../lite-DVmmD_-j.js";
+import "../../tooltip-BRQ4tvZL.js";
+import "../../default-i18n-BqwLkgZv.js";
+import "../../utils-Dc35LwuT.js";
 export {
   B as Button,
   a as ButtonGroup

package/dist/components/checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-BN0TEda-.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-Cv3pZDHg.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";

package/dist/components/color-pickers/color-picker.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { Menu, MenuSection, MenuItem } from "../menu/menu.js";
 import { ColorSwatch } from "./color-swatch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
 /**
  * Color picker.

package/dist/components/color-pickers/color-swatch.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-BrowHhTG.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-Ctkp0HDc.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-CNQmCQV8.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-Dxaeitoh.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 /**
  * A simple color/gradient swatch.
  *
@@ -46,11 +46,7 @@ const ColorSwatch = (props) => {
       style: {
         background: (color || gradient) && backgroundGradient
       },
-      className: () => clsx(
-        "es-uic-size-6 es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-shadow-sm",
-        !color && !gradient && "es-uic-bg-white",
-        className
-      ),
+      className: () => clsx("es-uic-size-6 es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-shadow-sm", !color && !gradient && "es-uic-bg-white", className),
       colorName: !color && !gradient ? __("No color", "eightshift-ui-components") : colorName,
       color,
       children: !color && !gradient && /* @__PURE__ */ jsx("div", { className: "es-uic-m-auto es-uic-h-full es-uic-w-px es-uic-rotate-45 es-uic-rounded es-uic-bg-red-500" })

package/dist/components/color-pickers/gradient-editor.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __, s as sprintf } from "../../default-i18n-Bk1GxDHz.js";
+import { _ as __, s as sprintf } from "../../default-i18n-BqwLkgZv.js";
 import { useMemo } from "react";
-import { a as ButtonGroup } from "../../button-idVI4jmd.js";
+import { a as ButtonGroup } from "../../button-CD8Q1eok.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { Repeater } from "../repeater/repeater.js";
 import { RepeaterItem } from "../repeater/repeater-item.js";
@@ -9,18 +9,17 @@ import { icons } from "../../icons/icons.js";
 import { SolidColorPicker } from "./solid-color-picker.js";
 import { Slider } from "../slider/slider.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-BrowHhTG.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-CNQmCQV8.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
 import { Spacer } from "../spacer/spacer.js";
 import { Toggle } from "../toggle/toggle.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 function c(e, o = ",") {
   let t = [], n = 0, i = 0;
   o = new RegExp(o);
-  for (let r = 0; r < e.length; r++)
-    e[r] === "(" ? i++ : e[r] === ")" && i--, i === 0 && o.test(e[r]) && (t.push(e.slice(n, r).trim()), n = r + 1);
+  for (let r = 0; r < e.length; r++) e[r] === "(" ? i++ : e[r] === ")" && i--, i === 0 && o.test(e[r]) && (t.push(e.slice(n, r).trim()), n = r + 1);
   return t.push(e.slice(n).trim()), t;
 }
 function g(e) {
@@ -36,14 +35,12 @@ function m(e) {
   return u.test(e);
 }
 function l(e) {
-  if (!e)
-    return;
+  if (!e) return;
   let [, o, t] = e.trim().match(u) || [];
   return { value: o, unit: t };
 }
 function P(e) {
-  if (!/^(repeating-)?linear-gradient/.test(e))
-    throw new SyntaxError(`could not find syntax for this item: ${e}`);
+  if (!/^(repeating-)?linear-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
   let [, o, t] = e.match(/(repeating-)?linear-gradient\((.+)\)/), n = { orientation: { type: "directional", value: "bottom" }, repeating: !!o, stops: [] }, i = c(t), r = x(i[0]);
   return r && (n.orientation = r, i.shift()), { ...n, stops: g(i) };
 }
@@ -59,16 +56,13 @@ function h(e) {
 }
 function R(e) {
   let o = Array(2).fill("");
-  for (let t = 0; t < 2; t++)
-    e[t] ? o[t] = e[t] : o[t] = "center";
+  for (let t = 0; t < 2; t++) e[t] ? o[t] = e[t] : o[t] = "center";
   return o;
 }
 function K(e) {
-  if (!/(repeating-)?radial-gradient/.test(e))
-    throw new SyntaxError(`could not find syntax for this item: ${e}`);
+  if (!/(repeating-)?radial-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
   let [, o, t] = e.match(/(repeating-)?radial-gradient\((.+)\)/), n = { shape: "ellipse", repeating: !!o, size: [{ type: "keyword", value: "farthest-corner" }], position: { x: { type: "keyword", value: "center" }, y: { type: "keyword", value: "center" } }, stops: [] }, i = c(t);
-  if (S(i[0]))
-    return { ...n, stops: g(i) };
+  if (S(i[0])) return { ...n, stops: g(i) };
   let r = i[0].split("at").map((f) => f.trim()), p = ((r[0] || "").match(/(circle|ellipse)/) || [])[1], a = (r[0] || "").match(/(-?\d+\.?\d*(vw|vh|px|em|rem|%|rad|grad|turn|deg)?|closest-corner|closest-side|farthest-corner|farthest-side)/g) || [], s = R((r[1] || "").split(" "));
   return p ? n.shape = p : a.length === 1 && !d(a[0]) ? n.shape = "circle" : n.shape = "ellipse", a.length === 0 && a.push("farthest-corner"), n.size = a.map((f) => d(f) ? { type: "keyword", value: f } : { type: "length", value: l(f) }), n.position.x = h(s[0]) ? { type: "keyword", value: s[0] } : { type: "length", value: l(s[0]) }, n.position.y = h(s[1]) ? { type: "keyword", value: s[1] } : { type: "length", value: l(s[1]) }, (p || a.length > 0 || r[1]) && i.shift(), { ...n, stops: g(i) };
 }
@@ -77,11 +71,9 @@ function S(e) {
 }
 var C = /* @__PURE__ */ new Set(["from", "in", "at"]);
 function j(e) {
-  if (!/(repeating-)?conic-gradient/.test(e))
-    throw new SyntaxError(`could not find syntax for this item: ${e}`);
+  if (!/(repeating-)?conic-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
   let [, o, t] = e.match(/(repeating-)?conic-gradient\((.+)\)/), n = { angle: "0deg", repeating: !!o, position: "center", stops: [] }, i = c(t).map((s) => s.trim()), r = c(i[0], /\s+/), p = "", a = 0;
-  for (let s = 0, f = r.length; s < f; s++)
-    C.has(r[s]) && (s > 0 && Object.assign(n, y(p, r, a, s)), p = r[s], a = s + 1);
+  for (let s = 0, f = r.length; s < f; s++) C.has(r[s]) && (s > 0 && Object.assign(n, y(p, r, a, s)), p = r[s], a = s + 1);
   return p && (Object.assign(n, y(p, r, a, r.length)), i.shift()), { ...n, stops: g(i) };
 }
 function y(e, o, t, n) {
@@ -236,10 +228,7 @@ const GradientEditor = (props) => {
   const setGradientData = (data) => {
     onChange(getGradientResult(data, gradientType));
   };
-  const outputGradient = useMemo(
-    () => getGradientResult(gradientData, gradientType),
-    [gradientData, gradientType]
-  );
+  const outputGradient = useMemo(() => getGradientResult(gradientData, gradientType), [gradientData, gradientType]);
   if (hidden) {
     return null;
   }
@@ -299,7 +288,7 @@ const GradientEditor = (props) => {
             return /* @__PURE__ */ jsx(
               MenuItem,
               {
-                icon: /* @__PURE__ */ jsx("div", { className: clsx("es-uic-size-5 es-uic-from-gray-700 es-uic-to-gray-200 es-uic-rounded-sm", iconClass) }),
+                icon: /* @__PURE__ */ jsx("div", { className: clsx("es-uic-size-5 es-uic-rounded-sm es-uic-from-gray-700 es-uic-to-gray-200", iconClass) }),
                 onClick: () => {
                   setGradientData({
                     ...gradientData,
@@ -503,10 +492,7 @@ const GradientEditor = (props) => {
         },
         thumbContent: (index) => /* @__PURE__ */ jsx("div", { className: "es-uic-pointer-events-none es-uic-absolute es-uic-inset-0 es-uic-flex es-uic-size-3 es-uic-items-center es-uic-justify-center es-uic-text-center es-uic-text-xs es-uic-font-semibold es-uic-text-white", children: index + 1 }),
         trackStyle: {
-          backgroundImage: getGradientResult(
-            { orientation: { type: "directional", value: "right" }, stops: gradientData.stops },
-            "linear"
-          ),
+          backgroundImage: getGradientResult({ orientation: { type: "directional", value: "right" }, stops: gradientData.stops }, "linear"),
           height: "1.125rem",
           borderRadius: "0.5rem"
         },