@eightshift/ui-components 1.9.0 → 2.0.0

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

@@ -6,7 +6,7 @@ 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-B6s54Jb3.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Dv3Wxdl_.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
 import { Spacer } from "../spacer/spacer.js";
@@ -129,66 +129,66 @@ const gradientTypes = [
   {
     label: __("Linear"),
     value: "linear",
-    icon: /* @__PURE__ */ jsx("div", { className: "es-uic-transparent es-uic-size-4 es-uic-rounded-full es-uic-bg-gradient-to-br es-uic-from-current" })
+    icon: /* @__PURE__ */ jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-linear-to-br es:from-current" })
   },
   {
     label: __("Radial"),
     value: "radial",
-    icon: /* @__PURE__ */ jsx("div", { className: "es-uic-transparent es-uic-size-4 es-uic-rounded-full es-uic-bg-[radial-gradient(var(--tw-gradient-stops))] es-uic-from-current" })
+    icon: /* @__PURE__ */ jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-[radial-gradient(var(--tw-gradient-stops))] es:from-current" })
   },
   {
     label: __("Conic"),
     value: "conic",
-    icon: /* @__PURE__ */ jsx("div", { className: "es-uic-transparent es-uic-size-4 es-uic-rounded-full es-uic-bg-[conic-gradient(var(--tw-gradient-stops))] es-uic-from-current" })
+    icon: /* @__PURE__ */ jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-[conic-gradient(var(--tw-gradient-stops))] es:from-current" })
   }
 ];
 const linearDirections = [
   {
     label: __("Right"),
     value: "right",
-    iconClass: "es-uic-bg-gradient-to-r",
+    iconClass: "es:bg-linear-to-r",
     valueDegrees: 90
   },
   {
     label: __("Left"),
     value: "left",
-    iconClass: "es-uic-bg-gradient-to-l",
+    iconClass: "es:bg-linear-to-l",
     valueDegrees: 180
   },
   {
     label: __("Top"),
     value: "top",
-    iconClass: "es-uic-bg-gradient-to-t",
+    iconClass: "es:bg-linear-to-t",
     valueDegrees: 270
   },
   {
     label: __("Bottom"),
     value: "bottom",
-    iconClass: "es-uic-bg-gradient-to-b",
+    iconClass: "es:bg-linear-to-b",
     valueDegrees: 90
   },
   {
     label: __("Top-right"),
     value: "top right",
-    iconClass: "es-uic-bg-gradient-to-tr",
+    iconClass: "es:bg-linear-to-tr",
     valueDegrees: 45
   },
   {
     label: __("Top-left"),
     value: "top left",
-    iconClass: "es-uic-bg-gradient-to-tl",
+    iconClass: "es:bg-linear-to-tl",
     valueDegrees: 315
   },
   {
     label: __("Bottom-right"),
     value: "bottom right",
-    iconClass: "es-uic-bg-gradient-to-br",
+    iconClass: "es:bg-linear-to-br",
     valueDegrees: 135
   },
   {
     label: __("Bottom-left"),
     value: "bottom left",
-    iconClass: "es-uic-bg-gradient-to-bl",
+    iconClass: "es:bg-linear-to-bl",
     valueDegrees: 225
   }
 ];
@@ -241,13 +241,13 @@ const GradientEditor = (props) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: "es-uic-w-full es-uic-space-y-2.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "es:w-full es:space-y-2.5", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         className: clsx(
-          "es-uic-shadow-sm, es-uic-mx-auto es-uic-block es-uic-h-40 es-uic-cursor-pointer es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-transition-[width]",
-          squarePreview ? "es-uic-w-40" : "es-uic-w-full"
+          "es:shadow-sm, es:mx-auto es:block es:h-40 es:cursor-pointer es:rounded-lg es:border es:border-secondary-300 es:transition-[width]",
+          squarePreview ? "es:w-40" : "es:w-full"
         ),
         style: { backgroundImage: outputGradient },
         onClick: () => setSquarePreview((prev) => !prev),
@@ -261,10 +261,11 @@ const GradientEditor = (props) => {
         value: gradientType,
         onChange: (value2) => onChange(getGradientResult({ stops: gradientData.stops }, value2)),
         options: gradientTypes,
-        wrapperProps: { className: "es-uic-mx-auto es-uic-w-fit" }
+        wrapperProps: { className: "es:mx-auto es:w-fit" },
+        type: "toggleButtonsSplit"
       }
     ),
-    gradientType === "linear" && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-1", children: [
+    gradientType === "linear" && /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:gap-1", children: [
       /* @__PURE__ */ jsx(
         NumberPicker,
         {
@@ -283,7 +284,7 @@ const GradientEditor = (props) => {
           },
           suffix: "°",
           size: "small",
-          className: "es-uic-grow",
+          className: "es:grow",
           placeholder: ((_d = linearDirections.find(({ value: value2 }) => {
             var _a2;
             return value2 === ((_a2 = gradientData == null ? void 0 : gradientData.orientation) == null ? void 0 : _a2.value);
@@ -302,7 +303,7 @@ const GradientEditor = (props) => {
             return /* @__PURE__ */ jsx(
               MenuItem,
               {
-                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) }),
+                icon: /* @__PURE__ */ jsx("div", { className: clsx("es:size-5 es:rounded-sm es:from-secondary-700 es:to-secondary-200", iconClass) }),
                 onClick: () => {
                   setGradientData({
                     ...gradientData,
@@ -317,7 +318,7 @@ const GradientEditor = (props) => {
         }
       )
     ] }),
-    gradientType === "radial" && /* @__PURE__ */ jsxs("div", { className: "es-uic-space-y-2", children: [
+    gradientType === "radial" && /* @__PURE__ */ jsxs("div", { className: "es:space-y-2", children: [
       /* @__PURE__ */ jsx(
         OptionSelect,
         {
@@ -356,7 +357,7 @@ const GradientEditor = (props) => {
         }
       )
     ] }),
-    gradientType === "conic" && /* @__PURE__ */ jsxs("div", { className: "es-uic-space-y-2", children: [
+    gradientType === "conic" && /* @__PURE__ */ jsxs("div", { className: "es:space-y-2", children: [
       /* @__PURE__ */ jsx(
         NumberPicker,
         {
@@ -375,7 +376,7 @@ const GradientEditor = (props) => {
           },
           size: "small",
           suffix: "°",
-          className: "es-uic-grow"
+          className: "es:grow"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -447,7 +448,7 @@ const GradientEditor = (props) => {
               icon: /* @__PURE__ */ jsx(
                 $251c695a52d94a8d$export$cae13e90592f246a,
                 {
-                  className: "es-uic-size-5 es-uic-rounded-full es-uic-border es-uic-border-white es-uic-ring-1 es-uic-ring-black",
+                  className: "es:size-5 es:rounded-full es:border es:border-white es:ring-1 es:ring-black",
                   color
                 }
               ),
@@ -517,7 +518,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 }),
+        thumbContent: (index) => /* @__PURE__ */ jsx("div", { className: "es:pointer-events-none es:absolute es:inset-0 es:flex es:size-3 es:items-center es:justify-center es:text-center es:text-xs es:font-semibold es:text-white", children: index + 1 }),
         trackStyle: {
           backgroundImage: getGradientResult({ orientation: { type: "directional", value: "right" }, stops: gradientData.stops }, "linear"),
           height: "1.125rem",