@eightshift/ui-components 1.1.4 → 1.2.0

package/dist/components/checkbox/checkbox.js

@@ -79,13 +79,13 @@ const Checkbox = (props) => {
           {
             className: clsx(
               "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded-md es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
-              isSelected ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300"
+              isSelected || indeterminate ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300"
             ),
             children: [
               /* @__PURE__ */ jsx(
                 AnimatedVisibility,
                 {
-                  transition: "scaleRotateFade",
+                  transition: "scaleFade",
                   visible: isIndeterminate,
                   children: /* @__PURE__ */ jsx("div", { className: "es-uic-h-[1.5px] es-uic-w-3 es-uic-rounded es-uic-bg-white" })
                 }

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

@@ -146,42 +146,50 @@ const linearDirections = [
   {
     label: __("Right"),
     value: "right",
-    iconClass: "es-uic-bg-gradient-to-r"
+    iconClass: "es-uic-bg-gradient-to-r",
+    valueDegrees: 90
   },
   {
     label: __("Left"),
     value: "left",
-    iconClass: "es-uic-bg-gradient-to-l"
+    iconClass: "es-uic-bg-gradient-to-l",
+    valueDegrees: 180
   },
   {
     label: __("Top"),
     value: "top",
-    iconClass: "es-uic-bg-gradient-to-t"
+    iconClass: "es-uic-bg-gradient-to-t",
+    valueDegrees: 270
   },
   {
     label: __("Bottom"),
     value: "bottom",
-    iconClass: "es-uic-bg-gradient-to-b"
+    iconClass: "es-uic-bg-gradient-to-b",
+    valueDegrees: 90
   },
   {
     label: __("Top-right"),
     value: "top right",
-    iconClass: "es-uic-bg-gradient-to-tr"
+    iconClass: "es-uic-bg-gradient-to-tr",
+    valueDegrees: 45
   },
   {
     label: __("Top-left"),
     value: "top left",
-    iconClass: "es-uic-bg-gradient-to-tl"
+    iconClass: "es-uic-bg-gradient-to-tl",
+    valueDegrees: 315
   },
   {
     label: __("Bottom-right"),
     value: "bottom right",
-    iconClass: "es-uic-bg-gradient-to-br"
+    iconClass: "es-uic-bg-gradient-to-br",
+    valueDegrees: 135
   },
   {
     label: __("Bottom-left"),
     value: "bottom left",
-    iconClass: "es-uic-bg-gradient-to-bl"
+    iconClass: "es-uic-bg-gradient-to-bl",
+    valueDegrees: 225
   }
 ];
 /**
@@ -205,7 +213,7 @@ const linearDirections = [
  * @preserve
  */
 const GradientEditor = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const { value, onChange, hidden } = props;
   const gradientData = useMemo(() => {
     if ((value == null ? void 0 : value.startsWith("radial-gradient")) || (value == null ? void 0 : value.startsWith("repeating-radial-gradient"))) {
@@ -273,7 +281,11 @@ const GradientEditor = (props) => {
           },
           suffix: "°",
           size: "small",
-          className: "es-uic-grow"
+          className: "es-uic-grow",
+          placeholder: ((_d = linearDirections.find(({ value: value2 }) => {
+            var _a2;
+            return value2 === ((_a2 = gradientData == null ? void 0 : gradientData.orientation) == null ? void 0 : _a2.value);
+          })) == null ? void 0 : _d.valueDegrees) ?? ""
         }
       ),
       /* @__PURE__ */ jsx(
@@ -347,7 +359,7 @@ const GradientEditor = (props) => {
         {
           icon: icons.centerPoint,
           label: __("Center point", "eightshift-ui-components"),
-          value: `${((_e = (_d = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _d.y) == null ? void 0 : _e.value) ?? "center"} ${((_g = (_f = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _f.x) == null ? void 0 : _g.value) ?? "center"}`,
+          value: `${((_f = (_e = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _e.y) == null ? void 0 : _f.value) ?? "center"} ${((_h = (_g = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _g.x) == null ? void 0 : _h.value) ?? "center"}`,
           onChange: (position) => {
             const [x2, y2] = position.split(" ");
             setGradientData({
@@ -387,7 +399,7 @@ const GradientEditor = (props) => {
         {
           icon: icons.centerPoint,
           label: __("Center point", "eightshift-ui-components"),
-          value: `${((_i = (_h = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _h.y) == null ? void 0 : _i.value) ?? "center"} ${((_k = (_j = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _j.x) == null ? void 0 : _k.value) ?? "center"}`,
+          value: `${((_j = (_i = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _i.y) == null ? void 0 : _j.value) ?? "center"} ${((_l = (_k = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _k.x) == null ? void 0 : _l.value) ?? "center"}`,
           onChange: (value2) => {
             setGradientData({
               ...gradientData,
@@ -473,7 +485,7 @@ const GradientEditor = (props) => {
         min: 0,
         max: 100,
         step: 1,
-        value: (_l = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _l.map(({ offset }, i) => {
+        value: (_m = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _m.map(({ offset }, i) => {
           if (!offset) {
             return i * 100 / (gradientData.stops.length - 1);
           }

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

@@ -24,7 +24,7 @@ import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
-import { T as TriggeredPopover } from "../../popover-BAjlU5GY.js";
+import { T as TriggeredPopover } from "../../popover-CdonDPqG.js";
 import { icons } from "../../icons/icons.js";
 import { Spacer } from "../spacer/spacer.js";
 const $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = /* @__PURE__ */ createContext(null);
@@ -1246,9 +1246,12 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef($1c
  * @param {boolean} [props.disabled] - Whether the color picker is disabled.
  * @param {Function} [props.onChangeEnd] - The change end handler.
  * @param {boolean} [props.allowTransparency=false] - Whether the color picker allows transparency.
- * @param {import('react-aria-components').ColorFormat} [props.outputFormat] - The output format. Default is 'hex' (or 'hexa' if `allowTransparency` is true).
+ * @param {OutputColorFormat} [props.outputFormat] - The output format. Default is 'hex' (or 'hexa' if `allowTransparency` is true).
+ * @param {boolean} [props.noAdvancedOptions] - If `true`, the advanced options are hidden.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
+ * @typedef {'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba'} OutputColorFormat
+ *
  * @returns {JSX.Element} The ButtonGroup component.
  *
  * @example
@@ -1257,7 +1260,7 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef($1c
  * @preserve
  */
 const SolidColorPicker = (props) => {
-  const { value: rawValue, onChange, disabled, onChangeEnd, allowTransparency = false, outputFormat, hidden } = props;
+  const { value: rawValue, onChange, disabled, onChangeEnd, allowTransparency = false, outputFormat, hidden, noAdvancedOptions } = props;
   const value = rawValue == null ? void 0 : rawValue.replace("transparent", "rgba(0, 0, 0, 0)");
   const defaultColor = $799cddbef784668f$export$6e865ea70d7724f("#00000000").toFormat(allowTransparency ? "hsla" : "hsl");
   const modifiedValue = value && (value == null ? void 0 : value.length) > 1 ? $799cddbef784668f$export$6e865ea70d7724f(value) : defaultColor;
@@ -1405,6 +1408,7 @@ const SolidColorPicker = (props) => {
             disabled,
             tooltip: __("Advanced color options", "eightshift-ui-components")
           },
+          hidden: noAdvancedOptions,
           children: [
             /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "es-uic-text-sm", children: __("Advanced color options", "eightshift-ui-components") }),
             /* @__PURE__ */ jsx(

package/dist/components/component-toggle/component-toggle.js

@@ -3,7 +3,7 @@ import { s as sprintf, _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";
-import { T as TriggeredPopover } from "../../popover-BAjlU5GY.js";
+import { T as TriggeredPopover } from "../../popover-CdonDPqG.js";
 import { a as ButtonGroup } from "../../button-MFj-FKsM.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { Spacer } from "../spacer/spacer.js";

package/dist/components/container-panel/container-panel.js

@@ -36,7 +36,7 @@ import { BaseControl } from "../base-control/base-control.js";
 const ContainerPanel = (props) => {
   const { children, className, title, icon, subtitle, use, onUseChange, closable, startOpen = false, actions } = props;
   const [open, setOpen] = useState(startOpen);
-  if (!title) {
+  if (!title && typeof use === "undefined") {
     return /* @__PURE__ */ jsx("div", { className: "es-uic-space-y-2 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-4", children });
   }
   const justUse = !closable && typeof onUseChange !== "undefined";
@@ -90,14 +90,14 @@ const ContainerPanel = (props) => {
         justUse && use && "es-uic-pb-4",
         useAndClosable && use && open && "es-uic-pb-4",
         !justClosable && !justUse && !useAndClosable && "es-uic-pb-4",
-        !closable && !onUseChange && "es-uic-px-4",
+        !closable && !onUseChange && typeof use === "undefined" && "es-uic-px-4",
         className
       ),
       labelContainerClassName: clsx((closable || onUseChange) && "es-uic-pl-4 es-uic-pr-3 es-uic-min-h-12", !(closable || onUseChange) && "es-uic-mt-3", "!es-uic-pb-0"),
       controlContainerClassName: "es-uic-px-4",
       labelClassName: "!es-uic-text-gray-500",
       children: [
-        !closable && !onUseChange && children,
+        !closable && !onUseChange && typeof use === "undefined" && children,
         closable && typeof use === "undefined" && /* @__PURE__ */ jsx(
           AnimatedVisibility,
           {
@@ -106,7 +106,7 @@ const ContainerPanel = (props) => {
             children
           }
         ),
-        typeof use !== "undefined" && /* @__PURE__ */ jsx(
+        typeof use !== "undefined" && !closable && /* @__PURE__ */ jsx(
           AnimatedVisibility,
           {
             visible: closable ? use && open : use,

package/dist/components/expandable/expandable.js

@@ -113,7 +113,7 @@ const Expandable = (props) => {
           AnimatedVisibility,
           {
             visible: isOpen,
-            className: clsx("es-uic-space-y-2.5 es-uic-border-t es-uic-p-2", contentClassName),
+            className: clsx("es-uic-space-y-2.5 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-2", contentClassName),
             transition: "slideFade",
             noInitial: true,
             children

package/dist/components/index.js

@@ -24,7 +24,7 @@ import { MediaPlaceholder } from "./placeholders/media-placeholder.js";
 import { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from "./menu/menu.js";
 import { Notice } from "./notice/notice.js";
 import { NumberPicker } from "./number-picker/number-picker.js";
-import { P, T } from "../popover-BAjlU5GY.js";
+import { P, T } from "../popover-CdonDPqG.js";
 import { RadioButton, RadioButtonGroup } from "./radio/radio.js";
 import { Repeater } from "./repeater/repeater.js";
 import { RepeaterItem } from "./repeater/repeater-item.js";

package/dist/components/input-field/input-field.js

@@ -185,6 +185,7 @@ const InputField = (props) => {
               $3985021b0ad6602f$export$f5b8910cec6cf069,
               {
                 ...other,
+                type,
                 className: clsx(
                   "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
                   "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",

package/dist/components/link-input/link-input.js

@@ -20,7 +20,7 @@ import { T as Tooltip } from "../../tooltip-Do_imFfg.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { P as Popover } from "../../popover-BAjlU5GY.js";
+import { P as Popover } from "../../popover-CdonDPqG.js";
 import { a as $0d86e9c8f07f9a7b$export$79c0c687a5963b0a } from "../../useListData-BpYQj7kK.js";
 var $03c9a1a10de12f06$exports = {};
 $03c9a1a10de12f06$exports = {
@@ -649,7 +649,6 @@ function c(e, u, c2) {
  * @param {JSX.Element} [props.icon=icons.globe] - Icon to display in the label.
  * @param {JSX.Element} [props.removeIcon=icons.clearAlt] - Icon to display in the input's clear button.
  * @param {boolean} [props.disabled=false] - If `true`, the input is disabled.
- * @param {Function} [props.suggestionTypeIconOverride] - Function
  * @param {Function} [props.fetchSuggestions] - A function that fetches suggestions based on the input value.
  * @param {string} [props.className] - Classes to pass to the input field.
  * @param {number} [props.inputDebounceDelay=500] - The delay in milliseconds before the input value is considered final.

package/dist/components/matrix-align/matrix-align.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
-import { P as Popover } from "../../popover-BAjlU5GY.js";
+import { P as Popover } from "../../popover-CdonDPqG.js";
 import { B as Button } from "../../button-MFj-FKsM.js";
 import { icons } from "../../icons/icons.js";
 import { upperFirst, camelCase } from "../../utilities/es-dash.js";

package/dist/components/menu/menu.js

@@ -3,7 +3,7 @@ import { $ as $982254629710d113$export$b95089534ab7c1fd, b as $453cc9f0df89c0a5$
 import { p as $8a26561d2877236e$export$c24ed0104d07eab9, f as $880e95eb8b93ba9a$export$ecf600387e221c37, $ as $7af3f5b51489e0b5$export$253fe78d46329472, a as $7613b1592d41b092$export$6cd28814d92fa9c9, b as $d496c0a20b6e58ec$export$6c8a5aaad13c9852, j as $7135fc7d473fd974$export$e7c29ae2353b16ea, n as $7135fc7d473fd974$export$6cd28814d92fa9c9, o as $7135fc7d473fd974$export$727c8fc270210f13, q as $7135fc7d473fd974$export$6e2c8f0811a474ce } from "../../SelectionManager-XOAt-Ekx.js";
 import { e as $bdb11010cef70236$export$f680877a34711e37, d as $3ef42575df84b30b$export$9d1611c77c2fe928, k as $bdb11010cef70236$export$b4cc09c592e8fdb8, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52, g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, j as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, m as $5dc95899b306f630$export$c9058316764c140e, l as $df56164dff5785e2$export$4338b53315abf666, c as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-Dc35LwuT.js";
 import React__default, { useRef, useState, useEffect, useCallback, useMemo, createContext, forwardRef, useContext, cloneElement } from "react";
-import { $ as $628037886ba31236$export$f9d5c8beee7d008d, a as $de32f1b87079253c$export$d2f961adcb0afbe, b as $07b14b47974efb58$export$9b9a0cd73afb7ca4, c as $f1ab8c75478c6f73$export$3351871ee4b288b8, d as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98, P as Popover } from "../../popover-BAjlU5GY.js";
+import { $ as $628037886ba31236$export$f9d5c8beee7d008d, a as $de32f1b87079253c$export$d2f961adcb0afbe, b as $07b14b47974efb58$export$9b9a0cd73afb7ca4, c as $f1ab8c75478c6f73$export$3351871ee4b288b8, d as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98, P as Popover } from "../../popover-CdonDPqG.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-WqetJduR.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { $ as $9daab02d461809db$export$683480f191c0e3ea, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../tooltip-Do_imFfg.js";
@@ -1417,10 +1417,20 @@ const Menu = (props) => {
  */
 const MenuSection = (props) => {
   const { children, label } = props;
-  return /* @__PURE__ */ jsxs($7135fc7d473fd974$export$6e2c8f0811a474ce, { className: clsx("es-uic-space-y-1 es-uic-border-b es-uic-pb-1 last:es-uic-border-b-0", label && "es-uic-pt-2 first:es-uic-pt-1.5", !label && "last:es-uic-pb-1"), children: [
-    label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es-uic-ml-1.5 es-uic-text-xs es-uic-font-medium es-uic-text-gray-400", children: label }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    $7135fc7d473fd974$export$6e2c8f0811a474ce,
+    {
+      className: clsx(
+        "es-uic-space-y-1 es-uic-border-b es-uic-border-b-gray-200 es-uic-pb-1 last:es-uic-border-b-0",
+        label && "es-uic-pt-2 first:es-uic-pt-1.5",
+        !label && "last:es-uic-pb-1"
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es-uic-ml-1.5 es-uic-text-xs es-uic-font-medium es-uic-text-gray-400", children: label }),
+        children
+      ]
+    }
+  );
 };
 /**
  * A menu separator.

package/dist/components/options-panel/options-panel.js

@@ -36,7 +36,7 @@ const OptionsPanel = (props) => {
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "es-uic-divide-y es-uic-divide-gray-200 es-uic-rounded-lg es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow", children }),
-    help && /* @__PURE__ */ jsx("span", { className: "text-sm es-uic-mt-1.5 es-uic-block es-uic-text-gray-400", children: help })
+    help && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-1.5 es-uic-block es-uic-text-sm es-uic-text-gray-400", children: help })
   ] });
 };
 const OptionsPanelSection = ({ children, className }) => {

package/dist/components/popover/popover.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { P, T } from "../../popover-BAjlU5GY.js";
+import { P, T } from "../../popover-CdonDPqG.js";
 import "../../lite-DVmmD_-j.js";
 import "../../default-i18n-BqwLkgZv.js";
 import "../../button-MFj-FKsM.js";

package/dist/components/radio/radio.js

@@ -375,12 +375,12 @@ const RadioButton = (props) => {
   }
   const styleClassName = {
     segmented: clsx(
-      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition es-uic-min-h-10",
+      "es-uic-py-1 es-uic-px-1.5 es-uic-border es-uic-border-gray-300 hover:es-uic-bg-gray-50 es-uic-transition es-uic-min-h-10",
       "first:es-uic-rounded-t-lg last:es-uic-rounded-b-lg",
       "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
     ),
     segmentedHorizontal: clsx(
-      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition es-uic-grow es-uic-min-h-10",
+      "es-uic-py-1 es-uic-px-1.5 es-uic-border es-uic-border-gray-300 hover:es-uic-bg-gray-50 es-uic-transition es-uic-grow es-uic-min-h-10",
       "first:es-uic-rounded-l-lg last:es-uic-rounded-r-lg",
       "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
     )

package/dist/components/repeater/repeater.js

@@ -108,7 +108,7 @@ const Repeater = (props) => {
     selectedKeys: rawList.selectionManager.selectedKeys,
     setSelectedKeys: (ids) => rawList.selectionManager.setSelectedKeys(ids),
     getKey: ({ id }) => items.find((item) => item.id === id),
-    getItem: (id) => items.find((item) => item.id === id),
+    getItem: (id) => items == null ? void 0 : items.find((item) => item.id === id),
     update: (id, newValue) => {
       const index = [...items].findIndex((item) => item.id === id);
       items[index] = { ...items[index], ...newValue };
@@ -135,7 +135,10 @@ const Repeater = (props) => {
   };
   let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
     isDisabled: selectable || !canReorder,
-    getItems: (ids) => [...ids].map((id) => ({ "text/plain": list.getItem(id).id })),
+    getItems: (ids) => [...ids].map((id) => {
+      var _a;
+      return { "text/plain": (_a = list == null ? void 0 : list.getItem(id)) == null ? void 0 : _a.id };
+    }),
     onReorder(e) {
       if (e.target.dropPosition === "before") {
         list.move(e.target.key, e.keys);
@@ -178,7 +181,7 @@ const Repeater = (props) => {
               {
                 onPress: () => {
                   var _a;
-                  const removedItems = [...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((id) => list.getItem(id))) ?? []];
+                  const removedItems = [...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((id) => list == null ? void 0 : list.getItem(id))) ?? []];
                   list.removeSelectedItems();
                   setSelectable(false);
                   setCanDelete(false);

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

@@ -36,19 +36,20 @@ const ResponsivePreview = (props) => {
   var _a, _b;
   const {
     value,
-    isDesktopFirst,
+    isDesktopFirst: rawIsDesktopFirst,
     breakpoints: rawBreakpoints,
     desktopFirstBreakpoints: rawDesktopFirstBreakpoints,
     options,
     breakpointData,
     breakpointUiData
   } = props;
+  const isDesktopFirst = rawIsDesktopFirst ?? (value == null ? void 0 : value["_desktopFirst"]) ?? false;
   const breakpoints = rawBreakpoints;
   const desktopFirstBreakpoints = rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1);
   const firstMobileFirstOverride = breakpoints.find((breakpoint) => value == null ? void 0 : value[breakpoint]);
   const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => value == null ? void 0 : value[breakpoint]);
   let previewItems = [];
-  if (firstMobileFirstOverride) {
+  if (firstMobileFirstOverride && !isDesktopFirst) {
     previewItems = [
       ...previewItems,
       {
@@ -71,7 +72,7 @@ const ResponsivePreview = (props) => {
       ];
     });
   }
-  if (lastDesktopFirstOverride) {
+  if (lastDesktopFirstOverride && isDesktopFirst) {
     desktopFirstBreakpoints.forEach((breakpoint) => {
       var _a2, _b2;
       if (typeof (value == null ? void 0 : value[breakpoint]) === "undefined") {
@@ -90,13 +91,12 @@ const ResponsivePreview = (props) => {
     previewItems = [
       ...previewItems,
       {
-        alignEnd: true,
         breakpoint: __("Default", "eightshift-ui-components"),
         value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value["_default"])
       }
     ];
   }
-  return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-min-w-72 es-uic-flex-col es-uic-items-start es-uic-gap-4 es-uic-p-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-min-w-72 es-uic-flex-col es-uic-items-start es-uic-gap-4 es-uic-p-2 es-uic-text-sm", children: [
     /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-w-full es-uic-items-center es-uic-gap-2.5", children: [
       /* @__PURE__ */ jsx(
         RichLabel,

package/dist/components/select/async-multi-select.js

@@ -18,7 +18,7 @@ import { c as components } from "../../index-a301f526.esm-ByOfDxiG.js";
  * @param {string} [props.subtitle] - Subtitle of the component.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
  * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
- * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]>} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
+ * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
  * @param {Function<Promise>} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, [metadata]: Array}[]>`.
  * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.value - Current value of the select.
  * @param {Function} props.onChange - Function to call when the value changes.

package/dist/components/select/async-single-select.js

@@ -15,8 +15,8 @@ import { c as components } from "../../index-a301f526.esm-ByOfDxiG.js";
  * @param {string} [props.subtitle] - Subtitle of the component.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
  * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
- * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]>} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
- * @param {Function<Promise>} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, metadata: Object<string, any>?}[]>`.
+ * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
+ * @param {Function} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, metadata: Object<string, any>?}[]>`.
  * @param {{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
  * @param {Function} props.onChange - Function to call when the value changes.
  * @param {boolean} [props.clearable=false] - Whether the select is clearable.

package/dist/components/select/shared.js

@@ -29,6 +29,10 @@ const getValue = (simpleValue, value, options) => {
  * @preserve
  */
 const customOnChange = (simpleValue, newValue, onChange) => {
+  if (typeof newValue === "undefined" || newValue === null || newValue === "") {
+    onChange(void 0);
+    return;
+  }
   delete newValue.id;
   if (!simpleValue) {
     onChange(newValue);

package/dist/components/select/styles.js

@@ -1,21 +1,20 @@
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 const controlStyles = {
-  base: "es-uic-border es-uic-rounded-md es-uic-bg-white es-uic-text-sm es-uic-transition es-uic-group es-uic-shadow-sm !es-uic-min-h-10",
-  focus: "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50",
-  nonFocus: "es-uic-border-gray-300"
+  base: "es-uic-border es-uic-border-gray-300 es-uic-rounded-md es-uic-bg-white es-uic-text-sm es-uic-transition es-uic-group es-uic-shadow-sm !es-uic-min-h-10",
+  focus: "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50"
 };
 const placeholderStyles = "es-uic-text-gray-400 es-uic-ml-0.5";
 const selectInputStyles = "focus:es-uic-outline-none [&_input]:!es-uic-shadow-none [&_input:focus]:!es-uic-shadow-none";
 const valueContainerStyles = "es-uic-gap-1 es-uic-ml-1 es-uic-my-1 !es-uic-overflow-visible";
 const singleValueStyles = "es-uic-ml-0.5";
 const multiValueStyles = clsx(
-  "es-uic-bg-gray-100 es-uic-rounded es-uic-p-1 es-uic-border es-uic-border-gray-100 es-uic-hover:border-gray-300 es-uic-items-center es-uic-gap-1.5 es-uic-transition es-uic-overflow-visible",
+  "es-uic-bg-gray-100 es-uic-rounded es-uic-p-1 es-uic-border es-uic-border-gray-100 hover:border-gray-300 es-uic-items-center es-uic-gap-1.5 es-uic-transition es-uic-overflow-visible",
   "[:focus-visible_&]:es-uic-outline-none [:focus-visible_&]:es-uic-ring",
   "[:focus-visible_&]:es-uic-ring-teal-500 [:focus-visible_&]:es-uic-ring-opacity-50"
 );
 const multiValueLabelStyles = "es-uic-select-none";
 const multiValueRemoveStyles = "hover:es-uic-bg-red-500/15 hover:es-uic-text-red-900 es-uic-text-gray-500 es-uic-rounded es-uic-p-0.5 [&>svg]:es-uic-size-3.5 [&>svg]:es-uic-stroke-[1.5] es-uic-transition";
-const clearIndicatorStyles = "es-uic-text-gray-500 es-uic-p-1 es-uic-rounded-md es-uic-hover:bg-red-50 es-uic-hover:text-red-800 es-uic-transition";
+const clearIndicatorStyles = "es-uic-text-gray-500 es-uic-p-1 es-uic-rounded-md hover:bg-red-50 hover:text-red-800 es-uic-transition";
 const dropdownIndicatorStyles = "es-uic-text-gray-500 es-uic-px-1 group-hover:es-uic-text-black [&>svg]:es-uic-transition-transform [&>svg]:es-uic-duration-500 [&>svg]:es-uic-size-5.5";
 const menuStyles = "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-mt-1 es-uic-text-sm es-uic-overflow-x-hidden";
 const optionStyles = {
@@ -25,10 +24,11 @@ const optionStyles = {
 };
 const noOptionsMessageStyles = "es-uic-text-gray-400 es-uic-p-4";
 const groupHeadingStyles = "es-uic-ml-3 es-uic-mt-2 es-uic-text-gray-500 es-uic-empty:hidden";
-const groupStyles = "es-uic-border-b last:es-uic-border-b-0";
+const groupStyles = "es-uic-border-b es-uic-border-b-gray-200 last:es-uic-border-b-0";
+const loadingMessageStyles = "es-uic-p-4";
 const eightshiftSelectClasses = {
   clearIndicator: () => clearIndicatorStyles,
-  control: ({ isFocused }) => clsx(isFocused ? controlStyles.focus : controlStyles.nonFocus, controlStyles.base),
+  control: ({ isFocused }) => clsx(isFocused && controlStyles.focus, controlStyles.base),
   dropdownIndicator: () => dropdownIndicatorStyles,
   group: () => groupStyles,
   groupHeading: () => groupHeadingStyles,
@@ -41,7 +41,8 @@ const eightshiftSelectClasses = {
   option: ({ isFocused, isSelected }) => clsx(isFocused && optionStyles.focus, isSelected && optionStyles.selected, optionStyles.base),
   placeholder: () => placeholderStyles,
   singleValue: () => singleValueStyles,
-  valueContainer: () => valueContainerStyles
+  valueContainer: () => valueContainerStyles,
+  loadingMessage: () => loadingMessageStyles
 };
 export {
   eightshiftSelectClasses

package/dist/components/slider/slider.js

@@ -101,10 +101,10 @@ const Slider = (props) => {
       step,
       isDisabled: disabled,
       orientation: vertical ? "vertical" : "horizontal",
-      className: "es-uic-w-full es-uic-pb-3.5",
+      className: clsx("es-uic-w-full", (markerEntries == null ? void 0 : markerEntries.some(([_, value2]) => (value2 == null ? void 0 : value2.length) > 0)) && "es-uic-pb-3.5"),
       onChangeEnd,
       ...other,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         BaseControl,
         {
           icon,
@@ -128,8 +128,7 @@ const Slider = (props) => {
           ] }),
           labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
           className: labelClassName,
-          controlContainerClassName: clsx("es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0", vertical && "es-uic-flex-col"),
-          children: [
+          children: /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0", vertical && "es-uic-flex-col"), children: [
             before && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-gap-1", children: before }),
             /* @__PURE__ */ jsx(
               $6f909507e6374d18$export$105594979f116971,
@@ -312,7 +311,7 @@ const Slider = (props) => {
               }
             ),
             after && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-gap-1", children: after })
-          ]
+          ] })
         }
       )
     }

package/dist/components/tabs/tabs.js

@@ -468,7 +468,7 @@ const Tabs = (props) => {
         cloneElement(child, {
           id: `tab-${baseId}-${tabPanelCounter++}`,
           key: index,
-          className: clsx(child.props.className, vertical && "es-uic-border-l es-uic-border-l-300 es-uic-pl-3")
+          className: clsx(child.props.className, vertical && "es-uic-border-l es-uic-border-l-gray-300 es-uic-pl-3")
         })
       ];
     }

package/dist/index.js

@@ -24,7 +24,7 @@ import { MediaPlaceholder } from "./components/placeholders/media-placeholder.js
 import { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from "./components/menu/menu.js";
 import { Notice } from "./components/notice/notice.js";
 import { NumberPicker } from "./components/number-picker/number-picker.js";
-import { P, T } from "./popover-BAjlU5GY.js";
+import { P, T } from "./popover-CdonDPqG.js";
 import { RadioButton, RadioButtonGroup } from "./components/radio/radio.js";
 import { Repeater } from "./components/repeater/repeater.js";
 import { RepeaterItem } from "./components/repeater/repeater-item.js";

package/dist/{popover-BAjlU5GY.js → popover-CdonDPqG.js}

@@ -958,6 +958,7 @@ const Popover = (props) => {
  * @param {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
  * @param {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
  * @param {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The TriggeredPopover component.
  *
@@ -985,8 +986,12 @@ const TriggeredPopover = (props) => {
     offset,
     crossOffset,
     containerPadding,
+    hidden,
     ...rest
   } = props;
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { onOpenChange, children: [
     trigger,
     !trigger && /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightshift/ui-components",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",