@eightshift/ui-components 5.0.10 → 5.1.1

package/dist/assets/wp-font-enhancements.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 .edit-post-header, .components-popover, .edit-post-sidebar, .wp-block-post-title, .components-select-control__input, .components-base-control__field, .components-base-control__label, .components-combobox-control__suggestions-container, .components-input-control__label, .components-input-control__input, .components-checkbox-control__label, .components-menu-group__label, .components-menu-item__button, .components-notice .components-notice__content, .components-tooltip, .components-modal__header, .preferences-modal__section-title, .preferences-modal__section-description, .block-editor-inserter__tabs, .editor-list-view-sidebar, .edit-post-layout__footer, .components-snackbar, .components-text-control__input {
   font-family: var(--es-font-sans, "Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
 }

package/dist/assets/wp-ui-enhancements.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {

package/dist/components/base-control/base-control.js

@@ -74,7 +74,7 @@ const BaseControl = (props) => {
     help && /* @__PURE__ */ jsx(
       $514c0188e459b4c0$export$5f1af8db9871e1d6,
       {
-        className: "es:inline-block es:text-sm es:text-secondary-500",
+        className: "es:inline-block es:text-sm es:text-secondary-500 es:mt-0.5",
         slot: "description",
         children: help
       }

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

@@ -51,7 +51,7 @@ const BreakpointPreview = (props) => {
   if (!blocks || blocks.length < 1) {
     return null;
   }
-  const hasActive = (blocks == null ? void 0 : blocks.some(({ active }) => active)) ?? false;
+  const hasActive = blocks?.some(({ active }) => active) ?? false;
   const activeColors = {
     blue: {
       text: "es:text-blue-500",
@@ -108,9 +108,8 @@ const BreakpointPreview = (props) => {
       /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px es: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;
+      const activeTextColor = activeColors?.[color]?.text ?? activeColors.default.text;
+      const activeBgColor = activeColors?.[color]?.bg ?? activeColors.default.bg;
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsxs("div", { className: "es:row-start-1 es:flex es:min-w-28 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: [
           dotsStart2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "text-secondary-300"), children: [

package/dist/components/button/button.js

@@ -8,9 +8,9 @@ import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-Bb
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { c as cva } from "../../index-BljRBEr_.js";
 import { Tooltip } from "../tooltip/tooltip.js";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-DZCiis5V.js";
+import "../../react-jsx-parser.min-LF707GK8.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;
   let [isInToolbar, setInToolbar] = useState(false);
@@ -139,7 +139,7 @@ const Button = (props) => {
     ...other
   } = props;
   let tooltip = rawTooltip;
-  if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
+  if (rawTooltip === true && ariaLabel?.length > 0) {
     tooltip = ariaLabel;
   }
   const objRef = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);

package/dist/components/checkbox/checkbox.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { a as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-2lR5GG9p.js";
 import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-CZt7LCbO.js";
-import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e93e671b31057976$export$b8473d3665f3a75a, c as $e5be200c675c3b3a$export$a763b9476acd3eb, d as $e5be200c675c3b3a$export$dad6ae84456c676a, $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Bnyyv3Im.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useEffect, useRef, forwardRef, useContext, createContext, useMemo } from "react";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-Dy0PXJg5.js";
 import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DWBuejBp.js";
 import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-yGuUBU7q.js";
 import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-ibcBUHnB.js";

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { Menu, MenuItem, MenuSeparator, MenuSection } from "../menu/menu.js";
 import { ColorSwatch } from "./color-swatch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
@@ -52,7 +52,6 @@ import { icons } from "../../icons/icons.js";
  * @preserve
  */
 const ColorPicker = (props) => {
-  var _a, _b;
   const {
     icon,
     label,
@@ -75,9 +74,9 @@ const ColorPicker = (props) => {
   if (hidden) {
     return null;
   }
-  const currentColor = (_a = colors == null ? void 0 : colors.find(({ slug }) => slug === value)) == null ? void 0 : _a.color;
+  const currentColor = colors?.find(({ slug }) => slug === value)?.color;
   const colorSuffixRegex = /(?!^.+)(-?(?:50|100|200|300|400|500|600|700|800|900|950|10|20|30|40|50|60|70|80|90){1})$/gi;
-  const hasColorGroups = !noColorGroups && (colors == null ? void 0 : colors.some(({ slug }) => colorSuffixRegex.test(slug)));
+  const hasColorGroups = !noColorGroups && colors?.some(({ slug }) => colorSuffixRegex.test(slug));
   let groupedColors;
   const colorGroupNames = {
     generic: __("Other colors", "eightshift-ui-components")
@@ -85,11 +84,10 @@ const ColorPicker = (props) => {
   if (hasColorGroups) {
     groupedColors = colors.reduce(
       (output, current) => {
-        var _a2;
-        if (current === void 0 || (current == null ? void 0 : current.name) === void 0 || (current == null ? void 0 : current.slug) === void 0) {
+        if (current === void 0 || current?.name === void 0 || current?.slug === void 0) {
           return output;
         }
-        if ((_a2 = current.slug.match(colorSuffixRegex)) == null ? void 0 : _a2.length) {
+        if (current.slug.match(colorSuffixRegex)?.length) {
           const newSlug = current.slug.replace(colorSuffixRegex, "").trim();
           if (!output[newSlug]) {
             output[newSlug] = [];
@@ -152,7 +150,7 @@ const ColorPicker = (props) => {
     tooltipText = __("List marker color", "eightshift-ui-components");
     menuTriggerIcon = icons.colorPickerListMarker;
   }
-  const currentColorName = (_b = colors == null ? void 0 : colors.find((color) => (color == null ? void 0 : color.slug) === value)) == null ? void 0 : _b.name;
+  const currentColorName = colors?.find((color) => color?.slug === value)?.name;
   if (!label && tooltipText) {
     tooltipText = /* @__PURE__ */ jsx(
       RichLabel,
@@ -208,7 +206,7 @@ const ColorPicker = (props) => {
           tooltip: tooltipText,
           triggerProps: {
             ...rest.triggerProps,
-            "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"]
+            "aria-label": typeof label !== "undefined" ? null : props?.["aria-label"]
           },
           ...rest,
           children: [

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Dt3lRApA.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-CNqKeT8D.js";
 /**
  * A simple color/gradient swatch.

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __, s as sprintf } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __, s as sprintf } from "../../default-i18n-OFa3zAyB.js";
 import { useMemo, useState } from "react";
 import { ButtonGroup, Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
@@ -89,11 +89,10 @@ function y(e, o, t, n) {
   }
 }
 const getGradientResult = (input, type) => {
-  var _a, _b;
   if (!input || !type) {
     return "";
   }
-  if (typeof input === "string" || !(input == null ? void 0 : input.stops)) {
+  if (typeof input === "string" || !input?.stops) {
     return "";
   }
   let output = "";
@@ -104,23 +103,22 @@ const getGradientResult = (input, type) => {
   output += `${type}-gradient(`;
   if (type === "linear") {
     const { orientation } = input;
-    if ((orientation == null ? void 0 : orientation.type) === "angular") {
+    if (orientation?.type === "angular") {
       output += `${orientation.value.value}${orientation.value.unit}, `;
-    } else if ((orientation == null ? void 0 : orientation.type) === "directional") {
+    } else if (orientation?.type === "directional") {
       output += `to ${orientation.value}, `;
     }
   }
   if (type === "radial") {
     const { shape, position } = input;
-    output += `${shape ?? "circle"} at ${((_a = position == null ? void 0 : position.x) == null ? void 0 : _a.value) ?? "center"} ${((_b = position == null ? void 0 : position.y) == null ? void 0 : _b.value) ?? "center"}, `;
+    output += `${shape ?? "circle"} at ${position?.x?.value ?? "center"} ${position?.y?.value ?? "center"}, `;
   }
   if (type === "conic") {
     const { angle, position } = input;
     output += `from ${angle ?? "0deg"} at ${position ?? "center"}, `;
   }
   output += input.stops.map((stop) => {
-    var _a2, _b2;
-    return `${stop.color} ${((_a2 = stop.offset) == null ? void 0 : _a2.value) ?? ""}${((_b2 = stop.offset) == null ? void 0 : _b2.unit) ?? ""}`.trim();
+    return `${stop.color} ${stop.offset?.value ?? ""}${stop.offset?.unit ?? ""}`.trim();
   }).join(", ");
   output += ")";
   return output;
@@ -213,22 +211,21 @@ const linearDirections = [
  * @preserve
  */
 const GradientEditor = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   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"))) {
+    if (value?.startsWith("radial-gradient") || value?.startsWith("repeating-radial-gradient")) {
       return K(value ?? "");
     }
-    if ((value == null ? void 0 : value.startsWith("conic-gradient")) || (value == null ? void 0 : value.startsWith("repeating-conic-gradient"))) {
+    if (value?.startsWith("conic-gradient") || value?.startsWith("repeating-conic-gradient")) {
       return j(value ?? "");
     }
     return P(value ?? "");
   }, [value]);
   const gradientType = useMemo(() => {
-    if (typeof value === "string" && (value == null ? void 0 : value.startsWith("radial-gradient")) || (value == null ? void 0 : value.startsWith("repeating-radial-gradient"))) {
+    if (typeof value === "string" && value?.startsWith("radial-gradient") || value?.startsWith("repeating-radial-gradient")) {
       return "radial";
     }
-    if (typeof value === "string" && (value == null ? void 0 : value.startsWith("conic-gradient")) || (value == null ? void 0 : value.startsWith("repeating-conic-gradient"))) {
+    if (typeof value === "string" && value?.startsWith("conic-gradient") || value?.startsWith("repeating-conic-gradient")) {
       return "conic";
     }
     return "linear";
@@ -275,7 +272,7 @@ const GradientEditor = (props) => {
           min: 0,
           max: 360,
           step: 1,
-          value: ((_a = gradientData == null ? void 0 : gradientData.orientation) == null ? void 0 : _a.type) === "angular" ? (_c = (_b = gradientData == null ? void 0 : gradientData.orientation) == null ? void 0 : _b.value) == null ? void 0 : _c.value : null,
+          value: gradientData?.orientation?.type === "angular" ? gradientData?.orientation?.value?.value : null,
           onChange: (angle) => {
             setGradientData({
               ...gradientData,
@@ -285,10 +282,7 @@ const GradientEditor = (props) => {
           suffix: "°",
           size: "small",
           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);
-          })) == null ? void 0 : _d.valueDegrees) ?? ""
+          placeholder: linearDirections.find(({ value: value2 }) => value2 === gradientData?.orientation?.value)?.valueDegrees ?? ""
         }
       ),
       /* @__PURE__ */ jsx(
@@ -343,7 +337,7 @@ const GradientEditor = (props) => {
         {
           icon: icons.centerPoint,
           label: __("Center point", "eightshift-ui-components"),
-          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"}`,
+          value: `${gradientData?.position?.y?.value ?? "center"} ${gradientData?.position?.x?.value ?? "center"}`,
           onChange: (position) => {
             const [x2, y2] = position.split(" ");
             setGradientData({
@@ -367,7 +361,7 @@ const GradientEditor = (props) => {
           min: 0,
           max: 360,
           step: 1,
-          value: parseInt(gradientData == null ? void 0 : gradientData.angle.replace("deg", "")),
+          value: parseInt(gradientData?.angle.replace("deg", "")),
           onChange: (value2) => {
             setGradientData({
               ...gradientData,
@@ -384,7 +378,7 @@ const GradientEditor = (props) => {
         {
           icon: icons.centerPoint,
           label: __("Center point", "eightshift-ui-components"),
-          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"}`,
+          value: `${gradientData?.position?.y?.value ?? "center"} ${gradientData?.position?.x?.value ?? "center"}`,
           onChange: (value2) => {
             setGradientData({
               ...gradientData,
@@ -412,7 +406,7 @@ const GradientEditor = (props) => {
     /* @__PURE__ */ jsx(
       DraggableList,
       {
-        items: gradientData == null ? void 0 : gradientData.stops,
+        items: gradientData?.stops,
         onChange: (items) => {
           setGradientData({
             ...gradientData,
@@ -492,7 +486,7 @@ const GradientEditor = (props) => {
           );
         }
       },
-      (_m = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _m.length
+      gradientData?.stops?.length
     ),
     /* @__PURE__ */ jsx(
       Slider,
@@ -501,11 +495,11 @@ const GradientEditor = (props) => {
         min: 0,
         max: 100,
         step: 1,
-        value: (_n = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _n.map(({ offset }, i) => {
+        value: gradientData?.stops?.map(({ offset }, i) => {
           if (!offset) {
             return i * 100 / (gradientData.stops.length - 1);
           }
-          return parseInt(offset == null ? void 0 : offset.value);
+          return parseInt(offset?.value);
         }),
         onChange: (value2) => {
           setGradientData({

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

@@ -14,14 +14,14 @@ import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-Bb
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-C9GO0IDB.js";
 import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BYi0pekx.js";
 import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DHrSdE_Q.js";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-DfSBLhDx.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D0u2bh8g.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-Dy0PXJg5.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-y0dLc_6m.js";
+import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../Form-Bnyyv3Im.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { icons } from "../../icons/icons.js";
 import { Tabs, TabList, Tab, TabPanel } from "../tabs/tabs.js";
@@ -1269,9 +1269,9 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef(fun
  */
 const SolidColorPicker = (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 value = 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;
+  const modifiedValue = value && value?.length > 1 ? $799cddbef784668f$export$6e865ea70d7724f(value) : defaultColor;
   const [color, setColor] = useState(modifiedValue.toFormat(allowTransparency ? "hsla" : "hsl"));
   if (hidden) {
     return null;
@@ -1280,12 +1280,12 @@ const SolidColorPicker = (props) => {
   if (onChangeEnd) {
     handleChangeEnd = (color2) => {
       setColor(color2 ?? defaultColor);
-      onChange(color2 == null ? void 0 : color2.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
+      onChange(color2?.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
     };
   }
   let handleChange = (color2) => {
     setColor(color2 ?? defaultColor);
-    onChange(color2 == null ? void 0 : color2.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
+    onChange(color2?.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
   };
   const valueInputClassName = clsx(
     "es:h-8 es:w-12",
@@ -1366,7 +1366,7 @@ const SolidColorPicker = (props) => {
         $3ada01a82feafb94$export$b865d4358897bb17,
         {
           value: color,
-          onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+          onChange: (color2) => handleChange(color2?.toFormat("hsl")),
           "aria-label": __("Hex color value", "eightshift-ui-components"),
           isDisabled: disabled,
           children: /* @__PURE__ */ jsx(
@@ -1409,8 +1409,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "red",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,
@@ -1425,8 +1425,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "green",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,
@@ -1441,8 +1441,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "blue",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,
@@ -1459,8 +1459,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "hue",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,
@@ -1475,8 +1475,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "saturation",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,
@@ -1491,8 +1491,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "lightness",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,
@@ -1509,8 +1509,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "hue",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,
@@ -1525,8 +1525,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "saturation",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,
@@ -1541,8 +1541,8 @@ const SolidColorPicker = (props) => {
                 /* @__PURE__ */ jsx(
                   $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
-                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
                     channel: "brightness",
                     children: /* @__PURE__ */ jsx(
                       BaseControl,

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { _ as __, s as sprintf } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __, s as sprintf } from "../../default-i18n-OFa3zAyB.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";

package/dist/components/draggable/draggable-handle.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-CT_oS1Fy.js";
+import "../../default-i18n-OFa3zAyB.js";
 import { DraggableContext } from "./draggable-context.js";
 import { useContext } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-DZCiis5V.js";
+import "../../react-jsx-parser.min-LF707GK8.js";
 /**
  * A Draggable item handle.
  *

package/dist/components/draggable/draggable.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, startTransition, createContext, memo, forwardRef, useImperativeHandle, useContext, useId } from "react";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { DraggableContext } from "./draggable-context.js";
 import { r as reactDomExports } from "../../index-CFozsmNS.js";
 var i = Symbol.for("preact-signals");
@@ -7187,10 +7187,10 @@ function move(items, event) {
   return mutate(items, event, arrayMove);
 }
 const fixIds = (items, itemIdBase) => {
-  return (items == null ? void 0 : items.map((item, i2) => ({
+  return items?.map((item, i2) => ({
     ...item,
-    id: (item == null ? void 0 : item.id) ?? `${itemIdBase}-${i2}`
-  }))) ?? [];
+    id: item?.id ?? `${itemIdBase}-${i2}`
+  })) ?? [];
 };
 const SortableItem = ({ id, index, disabled, children, axis }) => {
   const [element, setElement] = useState(null);
@@ -7274,7 +7274,7 @@ const Draggable3 = (props) => {
         {
           onDragOver: (event) => setItems((items2) => move(items2, event)),
           onDragEnd: (event) => {
-            if (event == null ? void 0 : event.canceled) {
+            if (event?.canceled) {
               return;
             }
             setItems((items2) => move(items2, event));

package/dist/components/draggable-list/draggable-list-item.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-CT_oS1Fy.js";
+import "../../default-i18n-OFa3zAyB.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { cloneElement } from "react";
-import "../../react-jsx-parser.min-DZCiis5V.js";
+import "../../react-jsx-parser.min-LF707GK8.js";
 /**
  * A DraggableList item.
  *

package/dist/components/draggable-list/draggable-list.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { L as List, a as arrayRemove, b as arrayMove } from "../../List-CZMUbkFU.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-BLeHBkfx.js";
 const fixIds = (items, itemIdBase) => {
-  return items == null ? void 0 : items.map((item, i) => ({
+  return items?.map((item, i) => ({
     ...item,
-    id: (item == null ? void 0 : item.id) ?? `${itemIdBase}-${i}`
+    id: item?.id ?? `${itemIdBase}-${i}`
   }));
 };
 /**
@@ -138,7 +138,7 @@ const DraggableList = (props) => {
                   }
                 })
               },
-              (value == null ? void 0 : value.id) ?? key
+              value?.id ?? key
             );
           }
         }

package/dist/components/expandable/expandable.js

@@ -5,7 +5,7 @@ import { AnimatedVisibility } from "../animated-visibility/animated-visibility.j
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-DH22t_SM.js";
 import { e as $bdb11010cef70236$export$f680877a34711e37, n as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, d as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-CZt7LCbO.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";

package/dist/components/index.js

@@ -38,8 +38,8 @@ import { ResponsiveLegacy } from "./responsive/responsive-legacy.js";
 import { ResponsivePreview } from "./responsive-preview/responsive-preview.js";
 import { AsyncMultiSelect } from "./select/async-multi-select.js";
 import { AsyncSelect } from "./select/async-single-select.js";
-import { __ExperimentalAsyncSelect } from "./select/v2/async-select.js";
-import { __ExperimentalSelect } from "./select/v2/single-select.js";
+import { AsyncSelectNext } from "./select/v2/async-select.js";
+import { SelectNext } from "./select/v2/single-select.js";
 import { Modal } from "./modal/modal.js";
 import { MultiSelect } from "./select/multi-select.js";
 import { RSClearIndicator, RSDropdownIndicator, RSMultiValue, RSMultiValueContainer, RSMultiValueLabel, RSMultiValueRemove, RSOption, RSSingleValue } from "./select/react-select-component-wrappers.js";
@@ -59,6 +59,7 @@ export {
   AnimatedVisibility,
   AsyncMultiSelect,
   AsyncSelect,
+  AsyncSelectNext,
   BaseControl,
   BreakpointPreview,
   Button,
@@ -120,6 +121,7 @@ export {
   ResponsivePreview,
   RichLabel,
   Select,
+  SelectNext,
   Slider,
   SolidColorPicker,
   Spacer,
@@ -133,7 +135,5 @@ export {
   ToggleButton,
   Tooltip,
   TriggeredPopover,
-  VStack,
-  __ExperimentalAsyncSelect,
-  __ExperimentalSelect
+  VStack
 };