@eightshift/ui-components 5.0.9 → 5.1.0

package/dist/components/responsive/responsive.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __, s as sprintf } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __, s as sprintf } from "../../default-i18n-OFa3zAyB.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 import { icons } from "../../icons/icons.js";
@@ -104,16 +104,15 @@ const Responsive = (props) => {
     desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1)).map((breakpoint) => breakpoint.startsWith("max-") ? breakpoint : `max-${breakpoint}`);
   }
   const [detailsVisible, setDetailsVisible] = useState(false);
-  const isDesktopFirst = (value == null ? void 0 : value["_desktopFirst"]) === true;
-  const firstMobileFirstOverride = breakpoints.find((breakpoint) => typeof (value == null ? void 0 : value[breakpoint]) !== "undefined");
-  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => typeof (value == null ? void 0 : value[breakpoint]) !== "undefined");
+  const isDesktopFirst = value?.["_desktopFirst"] === true;
+  const firstMobileFirstOverride = breakpoints.find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
+  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
   const breakpointsToMap = isDesktopFirst ? desktopFirstBreakpoints : breakpoints;
   if (hidden) {
     return null;
   }
   const DefaultTooltip = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const overrideIcon = (_a = breakpointUiData == null ? void 0 : breakpointUiData[isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0)]) == null ? void 0 : _a.icon;
+    const overrideIcon = breakpointUiData?.[isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0)]?.icon;
     return /* @__PURE__ */ jsx(
       DecorativeTooltip,
       {
@@ -137,14 +136,14 @@ const Responsive = (props) => {
                   {
                     breakpoint: __("Default", "eightshift-ui-components"),
                     widthEnd: breakpointData[firstMobileFirstOverride] - 1,
-                    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"]),
+                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
                     dotsStart: true,
                     alignEnd: true,
                     active: true
                   },
                   {
-                    breakpoint: ((_c = breakpointUiData == null ? void 0 : breakpointUiData[firstMobileFirstOverride]) == null ? void 0 : _c.label) ?? firstMobileFirstOverride,
-                    value: ((_d = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[firstMobileFirstOverride]))) == null ? void 0 : _d.label) ?? upperFirst(value == null ? void 0 : value[firstMobileFirstOverride]),
+                    breakpoint: breakpointUiData?.[firstMobileFirstOverride]?.label ?? firstMobileFirstOverride,
+                    value: options?.find((opt) => opt.value === value?.[firstMobileFirstOverride])?.label ?? upperFirst(value?.[firstMobileFirstOverride]),
                     dotsEnd: true
                   }
                 ]
@@ -155,14 +154,14 @@ const Responsive = (props) => {
               {
                 blocks: [
                   {
-                    breakpoint: ((_e = breakpointUiData == null ? void 0 : breakpointUiData[lastDesktopFirstOverride.replace("max-", "")]) == null ? void 0 : _e.label) ?? lastDesktopFirstOverride.replace("max-", ""),
-                    value: ((_f = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[lastDesktopFirstOverride]))) == null ? void 0 : _f.label) ?? upperFirst(value == null ? void 0 : value[lastDesktopFirstOverride]),
+                    breakpoint: breakpointUiData?.[lastDesktopFirstOverride.replace("max-", "")]?.label ?? lastDesktopFirstOverride.replace("max-", ""),
+                    value: options?.find((opt) => opt.value === value?.[lastDesktopFirstOverride])?.label ?? upperFirst(value?.[lastDesktopFirstOverride]),
                     dotsStart: true,
                     alignEnd: true
                   },
                   {
                     breakpoint: __("Default", "eightshift-ui-components"),
-                    value: ((_g = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _g.label) ?? upperFirst(value == null ? void 0 : value["_default"]),
+                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
                     width: breakpointData[lastDesktopFirstOverride.replace("max-", "")],
                     dotsEnd: true,
                     active: true
@@ -172,7 +171,7 @@ const Responsive = (props) => {
             )
           ] })
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:border-accent-500/10 es:bg-accent-50 es:p-0.5 es:text-accent-800 es:shadow-sm es:shadow-accent-600/25 es:icon:size-5", children: ((_h = icons) == null ? void 0 : _h[overrideIcon]) ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
+        children: /* @__PURE__ */ jsx("div", { className: "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:border-accent-500/10 es:bg-accent-50 es:p-0.5 es:text-accent-800 es:shadow-sm es:shadow-accent-600/25 es:icon:size-5", children: icons?.[overrideIcon] ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
       }
     );
   };
@@ -194,7 +193,7 @@ const Responsive = (props) => {
             noInitial: true,
             children: children({
               breakpoint: "_default",
-              currentValue: value == null ? void 0 : value["_default"],
+              currentValue: value?.["_default"],
               handleChange: (newValue) => onChange({
                 ...value,
                 _default: newValue
@@ -269,7 +268,7 @@ const Responsive = (props) => {
                   ),
                   /* @__PURE__ */ jsx(MenuSeparator, {})
                 ] }),
-                Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined") && /* @__PURE__ */ jsx(SubMenuItem, { trigger: /* @__PURE__ */ jsx(MenuItem, { icon: icons.previewResponsive, children: __("Responsive preview", "eightshift-ui-components") }), children: /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(
+                Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined") && /* @__PURE__ */ jsx(SubMenuItem, { trigger: /* @__PURE__ */ jsx(MenuItem, { icon: icons.previewResponsive, children: __("Responsive preview", "eightshift-ui-components") }), children: /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(
                   ResponsivePreview,
                   {
                     value,
@@ -281,7 +280,7 @@ const Responsive = (props) => {
                     breakpointUiData
                   }
                 ) }) }),
-                Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined") && /* @__PURE__ */ jsx(MenuSeparator, {}),
+                Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined") && /* @__PURE__ */ jsx(MenuSeparator, {}),
                 /* @__PURE__ */ jsx(
                   MenuItem,
                   {
@@ -317,7 +316,7 @@ const Responsive = (props) => {
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
               /* @__PURE__ */ jsx("div", { className: clsx("es:w-full", detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
                 breakpoint: "_default",
-                currentValue: value == null ? void 0 : value["_default"],
+                currentValue: value?.["_default"],
                 handleChange: (newValue) => onChange({
                   ...value,
                   _default: newValue
@@ -344,7 +343,7 @@ const Responsive = (props) => {
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
               /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
                 breakpoint: "_default",
-                currentValue: value == null ? void 0 : value["_default"],
+                currentValue: value?.["_default"],
                 handleChange: (newValue) => onChange({
                   ...value,
                   _default: newValue
@@ -363,11 +362,10 @@ const Responsive = (props) => {
             visible: detailsVisible,
             className: "es:space-y-2",
             children: breakpointsToMap.map((breakpoint, i) => {
-              var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
               const realBreakpointName = breakpoint.replace("max-", "");
               const filterBreakpoints = isDesktopFirst ? [...breakpointsToMap, "_default"] : ["_default", ...breakpointsToMap];
-              const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined") : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined");
-              const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined") : filterBreakpoints.slice(i + 2).find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined");
+              const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined") : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined");
+              const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined") : filterBreakpoints.slice(i + 2).find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined");
               return /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -387,7 +385,7 @@ const Responsive = (props) => {
                         offset: 7.5,
                         arrow: true,
                         text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-96 es:p-1", children: [
-                          /* @__PURE__ */ jsx("span", { className: "es:block es:font-semibold", children: ((_a = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _a.label) ?? upperFirst(realBreakpointName) }),
+                          /* @__PURE__ */ jsx("span", { className: "es:block es:font-semibold", children: breakpointUiData?.[realBreakpointName]?.label ?? upperFirst(realBreakpointName) }),
                           /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
                             !isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
                               !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(__("Applied when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[realBreakpointName]),
@@ -402,10 +400,10 @@ const Responsive = (props) => {
                               !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(__("Applied when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[realBreakpointName] - 1),
                               belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
                                 __("Applied when the browser width is between %dpx and %dpx.", "eightshift-ui-components"),
-                                breakpointData[belowOverride == null ? void 0 : belowOverride.replace("max-", "")],
+                                breakpointData[belowOverride?.replace("max-", "")],
                                 breakpointData[realBreakpointName] - 1
                               ),
-                              typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint == null ? void 0 : breakpoint.replace("max-", "")])
+                              typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint?.replace("max-", "")])
                             ] })
                           ] }),
                           typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: "es:mt-2 es:block es:font-medium es:italic", children: __("Not set", "eightshift-ui-components") }),
@@ -415,28 +413,28 @@ const Responsive = (props) => {
                               {
                                 dotsStart: belowOverride,
                                 blocks: [
-                                  aboveOverride !== "_default" && typeof (value == null ? void 0 : value[aboveOverride]) !== "undefined" && {
-                                    breakpoint: ((_b = breakpointUiData == null ? void 0 : breakpointUiData[aboveOverride]) == null ? void 0 : _b.label) ?? aboveOverride,
-                                    value: ((_c = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[aboveOverride]))) == null ? void 0 : _c.label) ?? upperFirst(value == null ? void 0 : value[aboveOverride]),
+                                  aboveOverride !== "_default" && typeof value?.[aboveOverride] !== "undefined" && {
+                                    breakpoint: breakpointUiData?.[aboveOverride]?.label ?? aboveOverride,
+                                    value: options?.find((opt) => opt.value === value?.[aboveOverride])?.label ?? upperFirst(value?.[aboveOverride]),
                                     dotsStart: !belowOverride,
                                     alignEnd: !belowOverride
                                   },
-                                  aboveOverride === "_default" && typeof (value == null ? void 0 : value["_default"]) !== "undefined" && {
+                                  aboveOverride === "_default" && typeof value?.["_default"] !== "undefined" && {
                                     breakpoint: __("Default", "eightshift-ui-components"),
-                                    value: ((_d = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _d.label) ?? upperFirst(value == null ? void 0 : value["_default"]),
+                                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
                                     dotsStart: !belowOverride,
                                     alignEnd: !belowOverride
                                   },
                                   {
-                                    breakpoint: ((_e = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _e.label) ?? realBreakpointName,
-                                    value: ((_f = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _f.label) ?? upperFirst(value == null ? void 0 : value[breakpoint]),
+                                    breakpoint: breakpointUiData?.[realBreakpointName]?.label ?? realBreakpointName,
+                                    value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[breakpoint]),
                                     width: breakpointData[realBreakpointName],
                                     active: true,
                                     dotsEnd: !belowOverride
                                   },
-                                  belowOverride && typeof (value == null ? void 0 : value[belowOverride]) !== "undefined" && {
-                                    breakpoint: ((_g = breakpointUiData == null ? void 0 : breakpointUiData[belowOverride]) == null ? void 0 : _g.label) ?? belowOverride,
-                                    value: ((_h = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[belowOverride]))) == null ? void 0 : _h.label) ?? upperFirst(value == null ? void 0 : value[belowOverride]),
+                                  belowOverride && typeof value?.[belowOverride] !== "undefined" && {
+                                    breakpoint: breakpointUiData?.[belowOverride]?.label ?? belowOverride,
+                                    value: options?.find((opt) => opt.value === value?.[belowOverride])?.label ?? upperFirst(value?.[belowOverride]),
                                     width: breakpointData[belowOverride],
                                     dotsEnd: true
                                   }
@@ -450,24 +448,24 @@ const Responsive = (props) => {
                                 dotsEnd: aboveOverride !== "_default",
                                 blocks: [
                                   belowOverride && {
-                                    breakpoint: ((_i = breakpointUiData == null ? void 0 : breakpointUiData[belowOverride == null ? void 0 : belowOverride.replace("max-", "")]) == null ? void 0 : _i.label) ?? (belowOverride == null ? void 0 : belowOverride.replace("max-", "")),
-                                    value: ((_j = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[belowOverride]))) == null ? void 0 : _j.label) ?? upperFirst(value == null ? void 0 : value[belowOverride])
+                                    breakpoint: breakpointUiData?.[belowOverride?.replace("max-", "")]?.label ?? belowOverride?.replace("max-", ""),
+                                    value: options?.find((opt) => opt.value === value?.[belowOverride])?.label ?? upperFirst(value?.[belowOverride])
                                   },
                                   {
-                                    breakpoint: ((_k = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _k.label) ?? realBreakpointName,
-                                    value: ((_l = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _l.label) ?? upperFirst(value == null ? void 0 : value[realBreakpointName]),
-                                    width: breakpointData[(_m = filterBreakpoints[i - 1]) == null ? void 0 : _m.replace("max-", "")],
+                                    breakpoint: breakpointUiData?.[realBreakpointName]?.label ?? realBreakpointName,
+                                    value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[realBreakpointName]),
+                                    width: breakpointData[filterBreakpoints[i - 1]?.replace("max-", "")],
                                     active: true
                                   },
                                   aboveOverride !== "_default" && {
-                                    breakpoint: ((_n = breakpointUiData == null ? void 0 : breakpointUiData[aboveOverride == null ? void 0 : aboveOverride.replace("max-", "")]) == null ? void 0 : _n.label) ?? (aboveOverride == null ? void 0 : aboveOverride.replace("max-", "")),
-                                    value: ((_o = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[aboveOverride]))) == null ? void 0 : _o.label) ?? upperFirst(value == null ? void 0 : value[aboveOverride]),
-                                    width: breakpointData[breakpoint == null ? void 0 : breakpoint.replace("max-", "")]
+                                    breakpoint: breakpointUiData?.[aboveOverride?.replace("max-", "")]?.label ?? aboveOverride?.replace("max-", ""),
+                                    value: options?.find((opt) => opt.value === value?.[aboveOverride])?.label ?? upperFirst(value?.[aboveOverride]),
+                                    width: breakpointData[breakpoint?.replace("max-", "")]
                                   },
                                   aboveOverride === "_default" && {
                                     breakpoint: __("Default", "eightshift-ui-components"),
-                                    value: ((_p = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _p.label) ?? upperFirst(value == null ? void 0 : value["_default"]),
-                                    width: breakpointData[breakpoint == null ? void 0 : breakpoint.replace("max-", "")],
+                                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
+                                    width: breakpointData[breakpoint?.replace("max-", "")],
                                     dotsEnd: true
                                   }
                                 ]
@@ -482,14 +480,14 @@ const Responsive = (props) => {
                               "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:p-0.5 es:shadow-sm es:transition-colors es:icon:size-5",
                               typeof value[breakpoint] !== "undefined" ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"
                             ),
-                            children: ((_r = icons) == null ? void 0 : _r[(_q = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _q.icon]) ?? ((_s = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _s.icon) ?? ((_t = icons) == null ? void 0 : _t[`screen${upperFirst(realBreakpointName)}`])
+                            children: icons?.[breakpointUiData?.[realBreakpointName]?.icon] ?? breakpointUiData?.[realBreakpointName]?.icon ?? icons?.[`screen${upperFirst(realBreakpointName)}`]
                           }
                         )
                       }
                     ),
                     children({
                       breakpoint,
-                      currentValue: value == null ? void 0 : value[breakpoint],
+                      currentValue: value?.[breakpoint],
                       handleChange: (newValue) => {
                         onChange({
                           ...value,
@@ -508,7 +506,7 @@ const Responsive = (props) => {
                           onChange(newValue);
                         },
                         icon: icons.clearAlt,
-                        disabled: typeof (value == null ? void 0 : value[breakpoint]) === "undefined",
+                        disabled: typeof value?.[breakpoint] === "undefined",
                         type: "ghost"
                       }
                     )
@@ -534,7 +532,7 @@ const Responsive = (props) => {
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
               /* @__PURE__ */ jsx("div", { className: clsx("es:w-full", detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
                 breakpoint: "_default",
-                currentValue: value == null ? void 0 : value["_default"],
+                currentValue: value?.["_default"],
                 handleChange: (newValue) => onChange({
                   ...value,
                   _default: newValue
@@ -561,7 +559,7 @@ const Responsive = (props) => {
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
               /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
                 breakpoint: "_default",
-                currentValue: value == null ? void 0 : value["_default"],
+                currentValue: value?.["_default"],
                 handleChange: (newValue) => onChange({
                   ...value,
                   _default: newValue

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { icons } from "../../icons/icons.js";
@@ -33,7 +33,6 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @preserve
  */
 const ResponsivePreview = (props) => {
-  var _a, _b;
   const {
     value,
     isDesktopFirst: rawIsDesktopFirst,
@@ -43,39 +42,37 @@ const ResponsivePreview = (props) => {
     breakpointData,
     breakpointUiData
   } = props;
-  const isDesktopFirst = rawIsDesktopFirst ?? (value == null ? void 0 : value["_desktopFirst"]) ?? false;
+  const isDesktopFirst = rawIsDesktopFirst ?? 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]);
+  const firstMobileFirstOverride = breakpoints.find((breakpoint) => value?.[breakpoint]);
+  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => value?.[breakpoint]);
   let previewItems = [];
   if (firstMobileFirstOverride && !isDesktopFirst) {
     previewItems = [
       ...previewItems,
       {
         breakpoint: __("Default", "eightshift-ui-components"),
-        value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value["_default"])
+        value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"])
       }
     ];
     breakpoints.forEach((breakpoint) => {
-      var _a2, _b2;
-      if (typeof (value == null ? void 0 : value[breakpoint]) === "undefined") {
+      if (typeof value?.[breakpoint] === "undefined") {
         return;
       }
       previewItems = [
         ...previewItems,
         {
           width: breakpointData[breakpoint],
-          breakpoint: ((_a2 = breakpointUiData == null ? void 0 : breakpointUiData[breakpoint]) == null ? void 0 : _a2.label) ?? breakpoint,
-          value: ((_b2 = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _b2.label) ?? upperFirst(value == null ? void 0 : value[breakpoint])
+          breakpoint: breakpointUiData?.[breakpoint]?.label ?? breakpoint,
+          value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[breakpoint])
         }
       ];
     });
   }
   if (lastDesktopFirstOverride && isDesktopFirst) {
     desktopFirstBreakpoints.forEach((breakpoint) => {
-      var _a2, _b2;
-      if (typeof (value == null ? void 0 : value[breakpoint]) === "undefined") {
+      if (typeof value?.[breakpoint] === "undefined") {
         return;
       }
       previewItems = [
@@ -83,8 +80,8 @@ const ResponsivePreview = (props) => {
         {
           alignEnd: true,
           widthEnd: breakpointData[breakpoint.replace("max-", "")],
-          breakpoint: ((_a2 = breakpointUiData == null ? void 0 : breakpointUiData[breakpoint.replace("max-", "")]) == null ? void 0 : _a2.label) ?? breakpoint.replace("max-", ""),
-          value: ((_b2 = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _b2.label) ?? upperFirst(value == null ? void 0 : value[breakpoint])
+          breakpoint: breakpointUiData?.[breakpoint.replace("max-", "")]?.label ?? breakpoint.replace("max-", ""),
+          value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[breakpoint])
         }
       ];
     });
@@ -92,7 +89,7 @@ const ResponsivePreview = (props) => {
       ...previewItems,
       {
         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"])
+        value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"])
       }
     ];
   }

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { A as AsyncSelect$1 } from "../../react-select-async.esm-D937XTWW.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValueRemove, b as getMultiValue } from "../../multi-select-components-Sp-JEFEX.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValueRemove, b as getMultiValue } from "../../multi-select-components-BcKzA24f.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultClearIndicator, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultMultiValueRemove } from "./custom-select-default-components.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -92,17 +92,17 @@ const AsyncMultiSelect = (props) => {
   const idBase = useId();
   const value = rawValue.map((item, index) => ({
     ...item,
-    id: (item == null ? void 0 : item.value) ?? `${idBase}-${index}`
+    id: item?.value ?? `${idBase}-${index}`
   }));
   const modifiedOnChange = (v) => {
-    onChange(v == null ? void 0 : v.map((item) => ({ ...item, id: void 0 })));
+    onChange(v?.map((item) => ({ ...item, id: void 0 })));
   };
   if (hidden) {
     return null;
   }
   const customLoadOptions = async (searchText) => {
     const results = await loadOptions(searchText);
-    return processLoadedOptions((results == null ? void 0 : results.map((item) => ({ id: item.value, ...item }))) ?? []);
+    return processLoadedOptions(results?.map((item) => ({ id: item.value, ...item })) ?? []);
   };
   return /* @__PURE__ */ jsx(
     BaseControl,

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

@@ -87,7 +87,7 @@ const AsyncSelect = (props) => {
   }
   const customLoadOptions = async (searchText) => {
     const results = await loadOptions(searchText);
-    return processLoadedOptions((results == null ? void 0 : results.map((item) => ({ id: item.value, ...item }))) ?? []);
+    return processLoadedOptions(results?.map((item) => ({ id: item.value, ...item })) ?? []);
   };
   return /* @__PURE__ */ jsx(
     BaseControl,

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

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { g, b, a } from "../../multi-select-components-Sp-JEFEX.js";
+import { g, b, a } from "../../multi-select-components-BcKzA24f.js";
 import "../../lite-DVmmD_-j.js";
 export {
   g as getDragEndHandler,

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { S as StateManagedSelect$1 } from "../../react-select.esm-Ciai3aKf.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValueRemove, b as getMultiValue } from "../../multi-select-components-Sp-JEFEX.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValueRemove, b as getMultiValue } from "../../multi-select-components-BcKzA24f.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultClearIndicator, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultMultiValueRemove } from "./custom-select-default-components.js";
 import { getValue } from "./shared.js";
@@ -87,14 +87,14 @@ const MultiSelect = (props) => {
   const idBase = useId();
   const value = getValue(simpleValue, rawValue, options).map((item, index) => ({
     ...item,
-    id: (simpleValue ? item : item == null ? void 0 : item.value) ?? `${idBase}-${index}`
+    id: (simpleValue ? item : item?.value) ?? `${idBase}-${index}`
   }));
   const modifiedOnChange = (v) => {
     if (simpleValue) {
-      onChange(v == null ? void 0 : v.map(({ value: value2 }) => value2));
+      onChange(v?.map(({ value: value2 }) => value2));
       return;
     }
-    onChange(v == null ? void 0 : v.map((item) => ({ ...item, id: void 0 })));
+    onChange(v?.map((item) => ({ ...item, id: void 0 })));
   };
   if (hidden) {
     return null;

package/dist/components/select/shared.js

@@ -12,12 +12,12 @@
 const getValue = (simpleValue, value, options) => {
   if (Array.isArray(value)) {
     if (simpleValue) {
-      return value.map((value2) => options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value2));
+      return value.map((value2) => options?.find(({ value: itemValue }) => itemValue === value2));
     }
     return value;
   }
   if (simpleValue) {
-    return options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value);
+    return options?.find(({ value: itemValue }) => itemValue === value);
   }
   return value;
 };

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

@@ -97,7 +97,7 @@ const Select = (props) => {
           value: getValue(simpleValue, value, options),
           onChange: (v) => {
             if (simpleValue) {
-              onChange(v == null ? void 0 : v.value);
+              onChange(v?.value);
               return;
             }
             if (v && "id" in v) {

package/dist/components/select/styles.js

@@ -5,7 +5,7 @@ const controlStyles = {
 };
 const placeholderStyles = "es:text-gray-400 es:ml-1";
 const selectInputStyles = "es:any-focus:outline-hidden es:[&_input]:shadow-none! es:[&_input:focus]:shadow-none!";
-const valueContainerStyles = "es:gap-1 es:ml-1 es:my-1 es:overflow-visible!";
+const valueContainerStyles = "es:gap-1 es:ml-1.25 es:my-1 es:overflow-visible!";
 const singleValueStyles = "es:ml-0.5 es:px-1";
 const multiValueStyles = clsx(
   "es:bg-gray-100 es:rounded-md es:py-1 es:px-1.5 es:border es:border-gray-100 hover:border-gray-300 es:items-center es:gap-1.5 es:transition es:overflow-visible es:max-w-40",
@@ -16,9 +16,9 @@ const multiValueLabelStyles = "es:select-none";
 const multiValueRemoveStyles = "es:hover:bg-red-500/15 es:hover:text-red-900 es:text-gray-500 es:rounded es:p-0.5 es:icon:size-3.5 es:icon:stroke-[1.5] es:transition";
 const clearIndicatorStyles = "es:text-gray-500 es:p-1 es:rounded-md hover:bg-red-50 hover:text-red-800 es:transition";
 const dropdownIndicatorStyles = "es:text-gray-500 es:px-1 es:group-hover:text-black es:icon:transition-transform es:icon:duration-500 es:icon:size-5.5";
-const menuStyles = "es:rounded-lg es:border es:border-gray-200 es:bg-white es:shadow-lg es:mt-1 es:text-sm es:overflow-x-hidden es:min-w-48";
+const menuStyles = "es:rounded-2xl es:border es:border-gray-200 es:bg-white es:shadow-lg es:mt-1 es:text-sm es:overflow-x-hidden es:min-w-48";
 const optionStyles = {
-  base: "es:p-2 es:flex! es:items-center es:gap-1.5 es:text-gray-800 es:rounded-md es:icon:size-5 es:icon:text-gray-500 es:transition es:mx-1 es:first:mt-1 es:last:mb-1 es:w-auto! es:min-h-9",
+  base: "es:p-2 es:flex! es:items-center es:gap-1.5 es:text-gray-800 es:rounded-xl es:icon:size-5 es:icon:text-gray-500 es:transition es:mx-1 es:first:mt-1 es:last:mb-1 es:w-auto! es:min-h-9",
   focus: "es:bg-gray-100 es:active:bg-accent-700/15",
   selected: "es:bg-accent-600/15 es:text-accent-950"
 };