@eightshift/ui-components 3.0.1 → 5.0.0

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

@@ -1,498 +0,0 @@
-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 { 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-DVSAPY-K.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 {boolean} [props.useLegacyDesktopFirst] - If `true`, the legacy desktop-first mode is used. This is only for backwards compatibility.
- * @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,
-    useLegacyDesktopFirst,
-    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);
-  let desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(1)).map((breakpoint) => breakpoint.startsWith("max-") ? breakpoint : `max-${breakpoint}`);
-  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 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: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: [
-            !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: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: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))}`] })
-      }
-    );
-  };
-  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:size-5!" }),
-            triggerButtonProps: {
-              tooltip: __("Responsive overrides", "eightshift-ui-components"),
-              className: "es:w-7"
-            },
-            className: "es:min-w-80 es:divide-y es:divide-secondary-200 es:p-0!",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:justify-between es:p-2", children: [
-                /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { className: "es:block es:text-xs es:text-secondary-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:space-y-2 es:px-2 es:py-2.5", children: [
-                !isDesktopFirst && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: clsx(
-                      "es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
-                      innerContentAlign === "start" && "es:justify-items-start",
-                      innerContentAlign === "center" && "es:justify-items-center",
-                      innerContentAlign === "end" && "es:justify-items-end",
-                      innerContentAlign === "stretch" && "es:justify-items-stretch"
-                    ),
-                    children: [
-                      /* @__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"],
-                        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:grid es:grid-cols-[minmax(0,auto)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
-                        innerContentAlign === "start" && "es:justify-items-start",
-                        innerContentAlign === "center" && "es:justify-items-center",
-                        innerContentAlign === "end" && "es:justify-items-end",
-                        innerContentAlign === "stretch" && "es:justify-items-stretch"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          DecorativeTooltip,
-                          {
-                            placement: "left",
-                            theme: "light",
-                            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__ */ 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]),
-                                  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:mt-2 es:block es:font-medium es:italic", children: __("Not set", "eightshift-ui-components") }),
-                              typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es: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: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({
-                          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:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
-                      innerContentAlign === "start" && "es:justify-items-start",
-                      innerContentAlign === "center" && "es:justify-items-center",
-                      innerContentAlign === "end" && "es:justify-items-end",
-                      innerContentAlign === "stretch" && "es:justify-items-stretch"
-                    ),
-                    children: [
-                      /* @__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"],
-                        handleChange: (newValue) => onChange({
-                          ...value,
-                          _default: newValue
-                        }),
-                        options,
-                        key: Object.keys(value),
-                        isInlineExpandedView: true
-                      }) })
-                    ]
-                  },
-                  "_default-desktop-first"
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "es:grid es:grid-cols-[1fr_auto_1fr] es:gap-x-1 es: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:my-1"
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      ResponsivePreview,
-                      {
-                        value,
-                        isDesktopFirst,
-                        breakpoints,
-                        desktopFirstBreakpoints,
-                        options,
-                        breakpointData,
-                        breakpointUiData
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Spacer,
-                  {
-                    className: "es:*:bg-secondary-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:my-1 es:justify-center",
-                    children: __("Clear all overrides", "eightshift-ui-components")
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ] })
-    }
-  );
-};
-export {
-  MiniResponsive
-};