@eightshift/ui-components 1.6.1 → 1.7.0

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

@@ -0,0 +1,495 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import { D as DecorativeTooltip } from "../../tooltip-eKaARDoV.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { _ as __, s as sprintf } from "../../default-i18n-DRnM8y4w.js";
+import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
+import { upperFirst } from "../../utilities/es-dash.js";
+import { icons } from "../../icons/icons.js";
+import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
+import { ButtonGroup, Button } from "../button/button.js";
+import { Spacer } from "../spacer/spacer.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { TriggeredPopover } from "../popover/popover.js";
+import { OptionSelect } from "../option-select/option-select.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-BVIXT8qq.js";
+/**
+ * A compact, inline version of `Responsive`. Allows the user to set different values for different breakpoints.
+ *
+ * Inner items should be passed as a render function.
+ * The following props are passed to the render function:
+ * - `breakpoint: string` - Name of the current breakpoint.
+ * - `currentValue: any` - Current value.
+ * - `handleChange: Function<(attributeName: string, value: any) => void>` - A function to change the value for the breakpoint..
+ * - `options: Object<string, any>` - (Optional) Options list passed to the `ResponsiveLegacy` component. (optional)
+ * - `isInlineCollapsedView: boolean` - (Optional) `true` if in the main view, with the detail popover closed.
+ * - `isInlineExpandedView: boolean` - (Optional) `true` if the detail popover is open.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Object} props.value - The current value of the component.
+ * @param {Function} props.onChange - Function to run when the value changes. `(newValue: Object) => void`.
+ * @param {JSX.Element} props.icon - The icon of the component.
+ * @param {string} props.help - The help text of the component.
+ * @param {string} props.label - The label of the component.
+ * @param {string} props.subtitle - The subtitle of the component.
+ * @param {{label: string, value: string}[]} props.options - Options of the attribute the component is linked to. `{ value: string, label: string }[]`.
+ * @param {string[]} props.breakpoints - Breakpoints to use.
+ * @param {string[]} [props.desktopFirstBreakpoints] - Breakpoints to use in desktop-first mode. If not provided, the breakpoints will be used in reverse order.
+ * @param {Object<string, number>} [props.breakpointData] - Currently used breakpoint data. `{ [breakpoint: string]: number }`.
+ * @param {Object<string, number>} [props.breakpointUiData] - Allows overriding breakpoint names and icons. `{ [breakpoint: string]: { label: string, icon: JSX.Element|string } }`.
+ * @param {boolean} [props.noModeSelect] - If `true`, the mode selection (desktop-first/mobile-first) is hidden.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {'start' | 'center' | 'end' | 'stretch'} [props.innerContentAlign='start'] - Determines inner content alignment
+ *
+ * @returns {JSX.Element} The MiniResponsive component.
+ *
+ * @example
+ * <MiniResponsive
+ * 	value={value}
+ * 	onChange={onChange}
+ * 	icon={icons.myIcon}
+ * 	label={__('Label', 'eightshift-ui-components')}
+ * 	options={[
+ * 		{ value: 'value1', label: 'Value 1' },
+ * 		{ value: 'value2', label: 'Value 2' },
+ * 		{ value: 'value3', label: 'Value 3' },
+ * 	]}
+ * 	breakpoints={['mobile', 'tablet', 'desktop', 'large']}
+ * 	breakpointData={breakpointData}
+ * >
+ * 	{({ breakpoint, currentValue, options, handleChange }) => (
+ * 		<Select
+ * 			label={breakpoint}
+ * 			value={currentValue}
+ * 			options={options}
+ * 			onChange={handleChange}
+ * 		/>
+ * 	)}
+ * </MiniResponsive>
+ *
+ * @preserve
+ */
+const MiniResponsive = (props) => {
+  const {
+    value,
+    onChange,
+    icon,
+    help,
+    label,
+    subtitle,
+    options,
+    breakpoints: rawBreakpoints,
+    desktopFirstBreakpoints: rawDesktopFirstBreakpoints,
+    breakpointData,
+    breakpointUiData,
+    noModeSelect,
+    children,
+    hidden,
+    innerContentAlign = "start"
+  } = props;
+  if (typeof rawBreakpoints === "undefined" || !Array.isArray(rawBreakpoints)) {
+    console.warn(__("MiniResponsive: Missing or invalid 'breakpoints' prop.", "eightshift-ui-components"));
+    return null;
+  }
+  const breakpoints = rawBreakpoints.slice(1);
+  const 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 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;
+    return /* @__PURE__ */ jsx(
+      DecorativeTooltip,
+      {
+        placement: "left",
+        className: "es-uic-p-3",
+        theme: "light",
+        offset: 7.5,
+        arrow: true,
+        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-64 es-uic-p-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-text-balance es-uic-font-semibold es-uic-tabular-nums", children: __("Default", "eightshift-ui-components") }),
+          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+            !firstMobileFirstOverride && !lastDesktopFirstOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
+            firstMobileFirstOverride && !isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[firstMobileFirstOverride] - 1),
+            lastDesktopFirstOverride && isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[lastDesktopFirstOverride.replace("max-", "")])
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto", children: [
+            firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
+              BreakpointPreview,
+              {
+                blocks: [
+                  {
+                    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"]),
+                    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]),
+                    dotsEnd: true
+                  }
+                ]
+              }
+            ),
+            lastDesktopFirstOverride && isDesktopFirst && /* @__PURE__ */ jsx(
+              BreakpointPreview,
+              {
+                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]),
+                    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"]),
+                    width: breakpointData[lastDesktopFirstOverride.replace("max-", "")],
+                    dotsEnd: true,
+                    active: true
+                  }
+                ]
+              }
+            )
+          ] })
+        ] }),
+        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-border-teal-500/10 es-uic-bg-teal-50 es-uic-p-0.5 es-uic-text-teal-800 es-uic-shadow-sm es-uic-shadow-teal-600/25 [&>svg]:es-uic-size-5", children: ((_h = icons) == null ? void 0 : _h[overrideIcon]) ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      help,
+      inline: true,
+      children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        children({
+          breakpoint: "_default",
+          currentValue: value == null ? void 0 : value["_default"],
+          handleChange: (newValue) => onChange({
+            ...value,
+            _default: newValue
+          }),
+          options,
+          key: Object.keys(value),
+          isInlineCollapsedView: true
+        }),
+        /* @__PURE__ */ jsxs(
+          TriggeredPopover,
+          {
+            triggerButtonIcon: cloneElement(isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2, { className: "!es-uic-size-5" }),
+            triggerButtonProps: {
+              tooltip: __("Responsive overrides", "eightshift-ui-components"),
+              className: "es-uic-w-7"
+            },
+            className: "es-uic-min-w-80 es-uic-divide-y es-uic-divide-gray-200 !es-uic-p-0",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-justify-between es-uic-p-2", children: [
+                /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { className: "es-uic-block es-uic-text-xs es-uic-text-gray-500", children: __("Responsive overrides", "eightshift-ui-components") }),
+                /* @__PURE__ */ jsx(
+                  OptionSelect,
+                  {
+                    hidden: noModeSelect,
+                    "aria-label": __("Breakpoint mode", "eightshift-ui-components"),
+                    value: isDesktopFirst,
+                    onChange: (newMode) => {
+                      onChange({
+                        _default: value["_default"],
+                        _desktopFirst: newMode
+                      });
+                    },
+                    options: [
+                      { label: __("Mobile-first", "eightshift-ui-components"), subtitle: __("Default", "eightshift-ui-components"), value: false },
+                      { label: __("Desktop-first", "eightshift-ui-components"), value: true }
+                    ],
+                    wrapperProps: { triggerProps: { size: "small" } },
+                    type: "menu",
+                    tooltip: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "es-uic-space-y-2 es-uic-px-2 es-uic-py-2.5", children: [
+                !isDesktopFirst && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: clsx(
+                      "es-uic-grid es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
+                      innerContentAlign === "start" && "es-uic-justify-items-start",
+                      innerContentAlign === "center" && "es-uic-justify-items-center",
+                      innerContentAlign === "end" && "es-uic-justify-items-end",
+                      innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(DefaultTooltip, {}),
+                      /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+                        breakpoint: "_default",
+                        currentValue: value == null ? void 0 : value["_default"],
+                        handleChange: (newValue) => onChange({
+                          ...value,
+                          _default: newValue
+                        }),
+                        options,
+                        key: Object.keys(value),
+                        isInlineExpandedView: true
+                      }) })
+                    ]
+                  },
+                  "_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");
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: clsx(
+                        "es-uic-grid es-uic-grid-cols-[minmax(0,_auto),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
+                        innerContentAlign === "start" && "es-uic-justify-items-start",
+                        innerContentAlign === "center" && "es-uic-justify-items-center",
+                        innerContentAlign === "end" && "es-uic-justify-items-end",
+                        innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DecorativeTooltip,
+                          {
+                            placement: "left",
+                            theme: "light",
+                            offset: 7.5,
+                            arrow: true,
+                            text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-96 es-uic-p-1", children: [
+                              /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-font-semibold", children: ((_a = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _a.label) ?? upperFirst(realBreakpointName) }),
+                              /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-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]),
+                                  belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
+                                    __("Applied when the browser width is between %dpx and %dpx.", "eightshift-ui-components"),
+                                    breakpointData[realBreakpointName],
+                                    breakpointData[belowOverride] - 1
+                                  ),
+                                  typeof value[breakpoint] === "undefined" && sprintf(__("From %dpx", "eightshift-ui-components"), breakpointData[realBreakpointName])
+                                ] }),
+                                isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  !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[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" && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-2 es-uic-block es-uic-font-medium es-uic-italic", children: __("Not set", "eightshift-ui-components") }),
+                              typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto es-uic-mt-2", children: [
+                                !isDesktopFirst && /* @__PURE__ */ jsx(
+                                  BreakpointPreview,
+                                  {
+                                    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]),
+                                        dotsStart: !belowOverride,
+                                        alignEnd: !belowOverride
+                                      },
+                                      aboveOverride === "_default" && typeof (value == null ? void 0 : 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"]),
+                                        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]),
+                                        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]),
+                                        width: breakpointData[belowOverride],
+                                        dotsEnd: true
+                                      }
+                                    ]
+                                  }
+                                ),
+                                isDesktopFirst && /* @__PURE__ */ jsx(
+                                  BreakpointPreview,
+                                  {
+                                    dotsStart: true,
+                                    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: ((_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-", "")],
+                                        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-", "")]
+                                      },
+                                      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-", "")],
+                                        dotsEnd: true
+                                      }
+                                    ]
+                                  }
+                                )
+                              ] })
+                            ] }),
+                            children: /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: clsx(
+                                  "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-shadow-sm es-uic-transition-colors [&>svg]:es-uic-size-5",
+                                  typeof value[breakpoint] !== "undefined" ? "es-uic-border-gray-200 es-uic-bg-gray-50 es-uic-text-gray-700" : "es-uic-border-gray-100 es-uic-bg-white es-uic-text-gray-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({
+                          breakpoint,
+                          currentValue: value == null ? void 0 : value[breakpoint],
+                          handleChange: (newValue) => {
+                            onChange({
+                              ...value,
+                              [breakpoint]: newValue
+                            });
+                          },
+                          options,
+                          key: Object.keys(value)
+                        }),
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            onPress: () => {
+                              const newValue = { ...value };
+                              delete newValue[breakpoint];
+                              onChange(newValue);
+                            },
+                            icon: icons.clearAlt,
+                            disabled: typeof (value == null ? void 0 : value[breakpoint]) === "undefined",
+                            type: "ghost"
+                          }
+                        )
+                      ]
+                    },
+                    realBreakpointName
+                  );
+                }),
+                isDesktopFirst && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: clsx(
+                      "es-uic-grid es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
+                      innerContentAlign === "start" && "es-uic-justify-items-start",
+                      innerContentAlign === "center" && "es-uic-justify-items-center",
+                      innerContentAlign === "end" && "es-uic-justify-items-end",
+                      innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(DefaultTooltip, {}),
+                      /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+                        breakpoint: "_default",
+                        currentValue: value == null ? void 0 : value["_default"],
+                        handleChange: (newValue) => onChange({
+                          ...value,
+                          _default: newValue
+                        }),
+                        options,
+                        key: Object.keys(value),
+                        isInlineExpandedView: true
+                      }) })
+                    ]
+                  },
+                  "_default-desktop-first"
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "es-uic-grid es-uic-grid-cols-[1fr_auto_1fr] es-uic-gap-x-1 es-uic-px-1", children: [
+                /* @__PURE__ */ jsx(
+                  TriggeredPopover,
+                  {
+                    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"),
+                      type: "ghost",
+                      className: "es-uic-my-1"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      ResponsivePreview,
+                      {
+                        value,
+                        isDesktopFirst,
+                        breakpoints,
+                        desktopFirstBreakpoints,
+                        options,
+                        breakpointData,
+                        breakpointUiData
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Spacer,
+                  {
+                    className: "*:!es-uic-bg-gray-200",
+                    vertical: true,
+                    border: true
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: icons.clearAlt,
+                    disabled: !Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined"),
+                    onPress: () => {
+                      const newValue = { ...value };
+                      [...breakpoints, ...desktopFirstBreakpoints].forEach((breakpoint) => {
+                        delete newValue[breakpoint];
+                      });
+                      onChange(newValue);
+                    },
+                    type: "ghost",
+                    className: "es-uic-my-1 es-uic-justify-center",
+                    children: __("Clear all overrides", "eightshift-ui-components")
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  MiniResponsive
+};

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

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { D as DecorativeTooltip } from "../../tooltip-srrt1p-b.js";
+import { D as DecorativeTooltip } from "../../tooltip-eKaARDoV.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __, s as sprintf } from "../../default-i18n-BqWys-1G.js";
+import { _ as __, s as sprintf } from "../../default-i18n-DRnM8y4w.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 import { icons } from "../../icons/icons.js";

package/dist/components/responsive/responsive.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { D as DecorativeTooltip } from "../../tooltip-srrt1p-b.js";
+import { D as DecorativeTooltip } from "../../tooltip-eKaARDoV.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __, s as sprintf } from "../../default-i18n-BqWys-1G.js";
+import { _ as __, s as sprintf } from "../../default-i18n-DRnM8y4w.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 import { icons } from "../../icons/icons.js";
@@ -90,6 +90,10 @@ const Responsive = (props) => {
     hidden,
     innerContentAlign = "start"
   } = props;
+  if (typeof rawBreakpoints === "undefined" || !Array.isArray(rawBreakpoints)) {
+    console.warn(__("Responsive: Missing or invalid 'breakpoints' prop.", "eightshift-ui-components"));
+    return null;
+  }
   const breakpoints = rawBreakpoints.slice(1);
   const desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1)).map(
     (breakpoint) => breakpoint.startsWith("max-") ? breakpoint : `max-${breakpoint}`
@@ -117,7 +121,7 @@ const Responsive = (props) => {
           /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-text-balance es-uic-font-semibold es-uic-tabular-nums", children: __("Default", "eightshift-ui-components") }),
           /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
             !firstMobileFirstOverride && !lastDesktopFirstOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
-            firstMobileFirstOverride && !isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or narrower.", "eightshift-ui-components"), breakpointData[firstMobileFirstOverride] - 1),
+            firstMobileFirstOverride && !isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[firstMobileFirstOverride] - 1),
             lastDesktopFirstOverride && isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[lastDesktopFirstOverride.replace("max-", "")])
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto", children: [

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-BqWys-1G.js";
+import { _ as __ } from "../../default-i18n-DRnM8y4w.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { icons } from "../../icons/icons.js";

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

@@ -143,6 +143,7 @@ const AsyncMultiSelect = (props) => {
                 DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
                 ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
               },
+              menuPortalTarget: document.body,
               ...additionalProps
             }
           ) })

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

@@ -125,6 +125,7 @@ const AsyncSelect = (props) => {
             DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
             ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
           },
+          menuPortalTarget: document.body,
           ...additionalProps
         }
       )

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

@@ -137,6 +137,7 @@ const MultiSelect = (props) => {
                 DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
                 ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
               },
+              menuPortalTarget: document.body,
               ...additionalProps
             }
           ) })

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

@@ -119,6 +119,7 @@ const Select = (props) => {
             DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
             ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
           },
+          menuPortalTarget: document.body,
           ...additionalProps
         }
       )

package/dist/components/select/styles.js

@@ -16,7 +16,7 @@ const multiValueLabelStyles = "es-uic-select-none";
 const multiValueRemoveStyles = "hover:es-uic-bg-red-500/15 hover:es-uic-text-red-900 es-uic-text-gray-500 es-uic-rounded es-uic-p-0.5 [&>svg]:es-uic-size-3.5 [&>svg]:es-uic-stroke-[1.5] es-uic-transition";
 const clearIndicatorStyles = "es-uic-text-gray-500 es-uic-p-1 es-uic-rounded-md hover:bg-red-50 hover:text-red-800 es-uic-transition";
 const dropdownIndicatorStyles = "es-uic-text-gray-500 es-uic-px-1 group-hover:es-uic-text-black [&>svg]:es-uic-transition-transform [&>svg]:es-uic-duration-500 [&>svg]:es-uic-size-5.5";
-const menuStyles = "es-uic-z-50 es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-mt-1 es-uic-text-sm es-uic-overflow-x-hidden";
+const menuStyles = "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-mt-1 es-uic-text-sm es-uic-overflow-x-hidden";
 const optionStyles = {
   base: "es-uic-p-2 !es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-gray-800 es-uic-rounded [&>svg]:es-uic-size-5 [&>svg]:es-uic-text-gray-500 es-uic-transition es-uic-mx-1 first:es-uic-mt-1 last:es-uic-mb-1 !es-uic-w-auto es-uic-min-h-9",
   focus: "es-uic-bg-gray-100 active:es-uic-bg-teal-700/15",

package/dist/components/slider/column-config-slider.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-BqWys-1G.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BqW0M3HN.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-Dkj8Slw3.js";
+import { _ as __ } from "../../default-i18n-DRnM8y4w.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BwqMVkuV.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-D9Cs6yKr.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";

package/dist/components/slider/slider.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-Du2x3YVu.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-BqW0M3HN.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, c as $6f909507e6374d18$export$a590f758a961cb5b, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-Dkj8Slw3.js";
+import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-BCJajCwh.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-BwqMVkuV.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, c as $6f909507e6374d18$export$a590f758a961cb5b, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-D9Cs6yKr.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { NumberPicker } from "../number-picker/number-picker.js";

package/dist/components/slider/utils.js

@@ -1,4 +1,4 @@
-import { _ as __, s as sprintf, a as _n } from "../../default-i18n-BqWys-1G.js";
+import { _ as __, s as sprintf, a as _n } from "../../default-i18n-DRnM8y4w.js";
 /**
  * Generates an array of markers based on the provided minimum and maximum values and step.
  * If the step is less than 10, only markers divisible by 5 and 10 are included.