@eightshift/ui-components 5.0.9 → 5.1.0

package/dist/components/radio/radio.js

@@ -2,14 +2,13 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
 import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
 import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DHrSdE_Q.js";
-import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { b as $e93e671b31057976$export$b8473d3665f3a75a, a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Bnyyv3Im.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
 import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-D2YaWRIA.js";
 import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DWBuejBp.js";
 import { a as $f645667febf57a63$export$4c014de7c8940b4c, b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
-import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-Dy0PXJg5.js";
 import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-BEPI2m7u.js";
 import { a as $9ab94262bd0047c7$export$420e68273165f4ec, $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
@@ -428,9 +427,9 @@ const RadioButton = (props) => {
               isSelected && "es:text-white es:from-accent-500 es:to-accent-600",
               isSelected && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
               isSelected && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
-              !(design == null ? void 0 : design.startsWith("segmented")) && "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
-              !(design == null ? void 0 : design.startsWith("segmented")) && !isSelected && "es:group-focus-visible:border-accent-500",
-              !(design == null ? void 0 : design.startsWith("segmented")) && !alignEnd && subtitle && "es:mb-auto"
+              !design?.startsWith("segmented") && "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
+              !design?.startsWith("segmented") && !isSelected && "es:group-focus-visible:border-accent-500",
+              !design?.startsWith("segmented") && !alignEnd && subtitle && "es:mb-auto"
             ),
             children: /* @__PURE__ */ jsx(
               AnimatedVisibility,

package/dist/components/repeater/repeater-item.js

@@ -5,7 +5,7 @@ import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { useContext } from "react";
 import { Expandable } from "../expandable/expandable.js";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { RepeaterContext } from "./repeater-context.js";
 /**
  * A Repeater item.

package/dist/components/repeater/repeater.js

@@ -1,18 +1,18 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useId, useState } from "react";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RepeaterContext } from "./repeater-context.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";
 import { Menu, MenuItem, MenuSeparator } from "../menu/menu.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}`
   }));
 };
 /**
@@ -123,7 +123,7 @@ const Repeater = (props) => {
             tooltip: __("More options", "eightshift-ui-components"),
             triggerIcon: icons.moreH,
             triggerProps: { type: "ghost", size: "small" },
-            hidden: (items == null ? void 0 : items.length) < 1 || noExpandAllButton && !moreOptions,
+            hidden: items?.length < 1 || noExpandAllButton && !moreOptions,
             children: [
               !noExpandAllButton && /* @__PURE__ */ jsx(
                 MenuItem,
@@ -238,7 +238,7 @@ const Repeater = (props) => {
                     }
                   )
                 },
-                (item == null ? void 0 : item.id) ?? key
+                item?.id ?? key
               );
             },
             removableByMove: !noDragToRemove

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cloneElement } 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";
@@ -99,16 +99,15 @@ const MiniResponsive = (props) => {
   if (useLegacyDesktopFirst) {
     desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1)).map((breakpoint) => breakpoint.startsWith("max-") ? breakpoint : `max-${breakpoint}`);
   }
-  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,
       {
@@ -132,14 +131,14 @@ const MiniResponsive = (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
                   }
                 ]
@@ -150,14 +149,14 @@ const MiniResponsive = (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
@@ -167,7 +166,7 @@ const MiniResponsive = (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))}`] })
       }
     );
   };
@@ -182,7 +181,7 @@ const MiniResponsive = (props) => {
       children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
         children({
           breakpoint: "_default",
-          currentValue: value == null ? void 0 : value["_default"],
+          currentValue: value?.["_default"],
           handleChange: (newValue) => onChange({
             ...value,
             _default: newValue
@@ -240,7 +239,7 @@ const MiniResponsive = (props) => {
                       /* @__PURE__ */ jsx(DefaultTooltip, {}),
                       /* @__PURE__ */ jsx("div", { className: "es:w-full 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
@@ -254,11 +253,10 @@ const MiniResponsive = (props) => {
                   "_default-mobile-first"
                 ),
                 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",
                     {
@@ -278,7 +276,7 @@ const MiniResponsive = (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]),
@@ -293,10 +291,10 @@ const MiniResponsive = (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") }),
@@ -306,28 +304,28 @@ const MiniResponsive = (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
                                       }
@@ -341,24 +339,24 @@ const MiniResponsive = (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
                                       }
                                     ]
@@ -373,14 +371,14 @@ const MiniResponsive = (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,
@@ -399,7 +397,7 @@ const MiniResponsive = (props) => {
                               onChange(newValue);
                             },
                             icon: icons.clearAlt,
-                            disabled: typeof (value == null ? void 0 : value[breakpoint]) === "undefined",
+                            disabled: typeof value?.[breakpoint] === "undefined",
                             type: "ghost"
                           }
                         )
@@ -422,7 +420,7 @@ const MiniResponsive = (props) => {
                       /* @__PURE__ */ jsx(DefaultTooltip, {}),
                       /* @__PURE__ */ jsx("div", { className: "es:w-full 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
@@ -442,7 +440,7 @@ const MiniResponsive = (props) => {
                   {
                     triggerButtonLabel: __("Responsive preview", "eightshift-ui-components"),
                     triggerButtonProps: {
-                      disabled: !Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined"),
+                      disabled: !Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined"),
                       type: "ghost",
                       className: "es:my-1"
                     },
@@ -472,7 +470,7 @@ const MiniResponsive = (props) => {
                   Button,
                   {
                     icon: icons.clearAlt,
-                    disabled: !Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined"),
+                    disabled: !Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined"),
                     onPress: () => {
                       const newValue = { ...value };
                       [...breakpoints, ...desktopFirstBreakpoints].forEach((breakpoint) => {

package/dist/components/responsive/responsive-legacy.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 { s as sprintf, _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { s as sprintf, _ as __ } 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";
@@ -98,52 +98,49 @@ const ResponsiveLegacy = (props) => {
   const inheritValue = allowUndefined ? void 0 : rawInheritValue;
   const [detailsVisible, setDetailsVisible] = useState(false);
   const breakpoints = rawBreakpoints.slice(1);
-  const globalOverride = breakpoints.find((breakpoint) => (value == null ? void 0 : value[attribute[breakpoint]]) !== inheritValue);
+  const globalOverride = breakpoints.find((breakpoint) => value?.[attribute[breakpoint]] !== inheritValue);
   const defaultBreakpoint = rawBreakpoints[0];
   if (hidden) {
     return null;
   }
-  const DefaultTooltip = () => {
-    var _a, _b;
-    return /* @__PURE__ */ jsx(
-      DecorativeTooltip,
-      {
-        placement: "left",
-        className: "es:p-3",
-        theme: "light",
-        offset: 7.5,
-        arrow: true,
-        text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-64 es:p-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "es:block es:text-balance es:font-semibold es:tabular-nums", children: __("Default", "eightshift-ui-components") }),
-          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
-            !globalOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
-            globalOverride && sprintf(__("Applied when the browser width is %dpx or wider.", "eightshift-ui-components"), breakpointData[globalOverride] + 1)
-          ] }),
-          globalOverride && /* @__PURE__ */ jsx("div", { className: "es:mx-auto es:mt-2", children: /* @__PURE__ */ jsx(
-            BreakpointPreview,
-            {
-              blocks: [
-                {
-                  breakpoint: globalOverride,
-                  value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[globalOverride]]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value[globalOverride]),
-                  dotsStart: true,
-                  alignEnd: true
-                },
-                {
-                  breakpoint: __("Default", "eightshift-ui-components"),
-                  value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[defaultBreakpoint]]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value[defaultBreakpoint]),
-                  width: breakpointData[globalOverride] + 1,
-                  dotsEnd: true,
-                  active: true
-                }
-              ]
-            }
-          ) })
+  const DefaultTooltip = () => /* @__PURE__ */ jsx(
+    DecorativeTooltip,
+    {
+      placement: "left",
+      className: "es:p-3",
+      theme: "light",
+      offset: 7.5,
+      arrow: true,
+      text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-64 es:p-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "es:block es:text-balance es:font-semibold es:tabular-nums", children: __("Default", "eightshift-ui-components") }),
+        /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
+          !globalOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
+          globalOverride && sprintf(__("Applied when the browser width is %dpx or wider.", "eightshift-ui-components"), breakpointData[globalOverride] + 1)
         ] }),
-        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[`screen${upperFirst(defaultBreakpoint)}`] ?? icons.play })
-      }
-    );
-  };
+        globalOverride && /* @__PURE__ */ jsx("div", { className: "es:mx-auto es:mt-2", children: /* @__PURE__ */ jsx(
+          BreakpointPreview,
+          {
+            blocks: [
+              {
+                breakpoint: globalOverride,
+                value: options?.find((opt) => opt.value === value?.[attribute[globalOverride]])?.label ?? upperFirst(value?.[globalOverride]),
+                dotsStart: true,
+                alignEnd: true
+              },
+              {
+                breakpoint: __("Default", "eightshift-ui-components"),
+                value: options?.find((opt) => opt.value === value?.[attribute[defaultBreakpoint]])?.label ?? upperFirst(value?.[defaultBreakpoint]),
+                width: breakpointData[globalOverride] + 1,
+                dotsEnd: true,
+                active: true
+              }
+            ]
+          }
+        ) })
+      ] }),
+      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[`screen${upperFirst(defaultBreakpoint)}`] ?? icons.play })
+    }
+  );
   return /* @__PURE__ */ jsxs(
     BaseControl,
     {
@@ -161,7 +158,7 @@ const ResponsiveLegacy = (props) => {
             noInitial: true,
             children: children({
               breakpoint: defaultBreakpoint,
-              currentValue: value == null ? void 0 : value[attribute[defaultBreakpoint]],
+              currentValue: value?.[attribute[defaultBreakpoint]],
               options,
               handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue),
               isInlineCollapsedView: true
@@ -195,7 +192,7 @@ const ResponsiveLegacy = (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: defaultBreakpoint,
-                currentValue: value == null ? void 0 : value[attribute[defaultBreakpoint]],
+                currentValue: value?.[attribute[defaultBreakpoint]],
                 options,
                 handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue)
               }) })
@@ -218,7 +215,7 @@ const ResponsiveLegacy = (props) => {
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
               /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
                 breakpoint: defaultBreakpoint,
-                currentValue: value == null ? void 0 : value[attribute[defaultBreakpoint]],
+                currentValue: value?.[attribute[defaultBreakpoint]],
                 options,
                 handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue),
                 isInlineExpandedView: true
@@ -233,10 +230,9 @@ const ResponsiveLegacy = (props) => {
             visible: detailsVisible,
             className: "es:space-y-2",
             children: breakpoints.map((breakpoint, i) => {
-              var _a, _b, _c, _d, _e;
               const isOverrideSet = value[attribute[breakpoint]] !== inheritValue;
-              const aboveOverride = rawBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => (value == null ? void 0 : value[attribute[breakpoint2]]) !== inheritValue);
-              const belowOverride = rawBreakpoints.slice(i + 2).find((breakpoint2) => (value == null ? void 0 : value[attribute[breakpoint2]]) !== inheritValue);
+              const aboveOverride = rawBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => value?.[attribute[breakpoint2]] !== inheritValue);
+              const belowOverride = rawBreakpoints.slice(i + 2).find((breakpoint2) => value?.[attribute[breakpoint2]] !== inheritValue);
               return /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -273,14 +269,14 @@ const ResponsiveLegacy = (props) => {
                               blocks: [
                                 belowOverride && {
                                   breakpoint: belowOverride,
-                                  value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[belowOverride]]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value[belowOverride]),
+                                  value: options?.find((opt) => opt.value === value?.[attribute[belowOverride]])?.label ?? upperFirst(value?.[belowOverride]),
                                   widthEnd: breakpointData[belowOverride],
                                   dotsStart: true,
                                   alignEnd: true
                                 },
                                 {
                                   breakpoint,
-                                  value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[breakpoint]]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value[breakpoint]),
+                                  value: options?.find((opt) => opt.value === value?.[attribute[breakpoint]])?.label ?? upperFirst(value?.[breakpoint]),
                                   widthEnd: breakpointData[breakpoint],
                                   active: true,
                                   alignEnd: true,
@@ -288,12 +284,12 @@ const ResponsiveLegacy = (props) => {
                                 },
                                 aboveOverride !== defaultBreakpoint && {
                                   breakpoint: aboveOverride,
-                                  value: ((_c = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[aboveOverride]]))) == null ? void 0 : _c.label) ?? upperFirst(value == null ? void 0 : value[aboveOverride]),
+                                  value: options?.find((opt) => opt.value === value?.[attribute[aboveOverride]])?.label ?? upperFirst(value?.[aboveOverride]),
                                   dotsEnd: true
                                 },
                                 aboveOverride === defaultBreakpoint && {
                                   breakpoint: __("Default", "eightshift-ui-components"),
-                                  value: ((_d = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[defaultBreakpoint]]))) == null ? void 0 : _d.label) ?? upperFirst(value == null ? void 0 : value[defaultBreakpoint]),
+                                  value: options?.find((opt) => opt.value === value?.[attribute[defaultBreakpoint]])?.label ?? upperFirst(value?.[defaultBreakpoint]),
                                   dotsEnd: true
                                 }
                               ]
@@ -307,14 +303,14 @@ const ResponsiveLegacy = (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",
                               value[attribute[breakpoint]] === inheritValue ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"
                             ),
-                            children: (_e = icons) == null ? void 0 : _e[`screen${upperFirst(breakpoint)}`]
+                            children: icons?.[`screen${upperFirst(breakpoint)}`]
                           }
                         )
                       }
                     ),
                     /* @__PURE__ */ jsx("div", { className: "es:w-full", children: children({
                       breakpoint,
-                      currentValue: value == null ? void 0 : value[attribute[breakpoint]],
+                      currentValue: value?.[attribute[breakpoint]],
                       options,
                       handleChange: (newValue) => onChange(attribute[breakpoint], newValue)
                     }) }),
@@ -323,7 +319,7 @@ const ResponsiveLegacy = (props) => {
                       {
                         onPress: () => onChange(attribute[breakpoint], inheritValue),
                         icon: icons.clearAlt,
-                        disabled: (value == null ? void 0 : value[attribute[breakpoint]]) === inheritValue,
+                        disabled: value?.[attribute[breakpoint]] === inheritValue,
                         type: "ghost"
                       }
                     )