@eightshift/ui-components 5.0.0 → 5.0.2

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

@@ -0,0 +1,498 @@
+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-BuJgePCv.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:w-full 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:w-full 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
+};