@eightshift/ui-components 4.0.0 → 5.0.0

package/dist/components/responsive/responsive.js

@@ -1,580 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { DecorativeTooltip } from "../tooltip/tooltip.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __, s as sprintf } from "../../default-i18n-CT_oS1Fy.js";
-import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
-import { upperFirst } from "../../utilities/es-dash.js";
-import { icons } from "../../icons/icons.js";
-import { Menu, MenuItem, MenuSeparator, SubMenuItem } from "../menu/menu.js";
-import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
-import { Button, ButtonGroup } from "../button/button.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { ToggleButton } from "../toggle-button/toggle-button.js";
-import { BaseControl } from "../base-control/base-control.js";
-/**
- * A component that 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 `inline` mode, and the details are collapsed.
- * - `isInlineExpandedView: boolean` - (Optional) `true` if in `inline` mode, and the details are shown.
- *
- * @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.inline] - If `true`, the default breakpoint is shown inline with the label. In the expanded state, all breakpoints are shown below the label.
- * @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 Responsive component.
- *
- * @example
- * <Responsive
- * 	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}
- * 		/>
- * 	)}
- * </Responsive>
- *
- * @preserve
- */
-const Responsive = (props) => {
-  const {
-    value,
-    onChange,
-    icon,
-    help,
-    label,
-    subtitle,
-    options,
-    breakpoints: rawBreakpoints,
-    desktopFirstBreakpoints: rawDesktopFirstBreakpoints,
-    breakpointData,
-    breakpointUiData,
-    noModeSelect,
-    inline,
-    children,
-    hidden,
-    innerContentAlign = "start",
-    useLegacyDesktopFirst
-  } = 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);
-  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 [detailsVisible, setDetailsVisible] = useState(false);
-  const isDesktopFirst = (value == null ? void 0 : value["_desktopFirst"]) === true;
-  const firstMobileFirstOverride = breakpoints.find((breakpoint) => typeof (value == null ? void 0 : value[breakpoint]) !== "undefined");
-  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => typeof (value == null ? void 0 : value[breakpoint]) !== "undefined");
-  const 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__ */ jsxs(
-    BaseControl,
-    {
-      icon,
-      label,
-      subtitle,
-      help,
-      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        inline && /* @__PURE__ */ jsx(
-          AnimatedVisibility,
-          {
-            className: "es:mr-0.5",
-            visible: !detailsVisible,
-            transition: "scaleFade",
-            noInitial: true,
-            children: children({
-              breakpoint: "_default",
-              currentValue: value == null ? void 0 : value["_default"],
-              handleChange: (newValue) => onChange({
-                ...value,
-                _default: newValue
-              }),
-              options,
-              key: Object.keys(value),
-              isInlineCollapsedView: true
-            })
-          },
-          "_default-inline"
-        ),
-        /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-          /* @__PURE__ */ jsx(
-            ToggleButton,
-            {
-              icon: isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2,
-              onChange: () => setDetailsVisible(!detailsVisible),
-              selected: detailsVisible,
-              tooltip: detailsVisible ? __("Hide responsive overrides", "eightshift-ui-components") : __("Show responsive overrides", "eightshift-ui-components")
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Menu,
-            {
-              "aria-label": __("Responsive options", "eightshift-ui-components"),
-              tooltip: __("Responsive options", "eightshift-ui-components"),
-              popoverProps: { placement: "bottom right" },
-              triggerProps: { className: "es:w-5.5 es:stroke-[1.25]" },
-              triggerIcon: icons.dropdownCaretAlt,
-              children: [
-                !noModeSelect && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    MenuItem,
-                    {
-                      className: "es:pb-0! es:pt-1!",
-                      disabled: true,
-                      children: __("Breakpoint mode", "eightshift-ui-components")
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    MenuItem,
-                    {
-                      selected: !isDesktopFirst,
-                      onClick: () => {
-                        onChange({
-                          _default: value["_default"],
-                          _desktopFirst: false
-                        });
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        RichLabel,
-                        {
-                          label: __("Mobile-first", "eightshift-ui-components"),
-                          subtitle: __("Default", "eightshift-ui-components"),
-                          noColor: true
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    MenuItem,
-                    {
-                      selected: isDesktopFirst,
-                      onClick: () => {
-                        onChange({
-                          _default: value["_default"],
-                          _desktopFirst: true
-                        });
-                      },
-                      children: __("Desktop-first", "eightshift-ui-components")
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(MenuSeparator, {})
-                ] }),
-                Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined") && /* @__PURE__ */ jsx(SubMenuItem, { trigger: /* @__PURE__ */ jsx(MenuItem, { icon: icons.previewResponsive, children: __("Responsive preview", "eightshift-ui-components") }), children: /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(
-                  ResponsivePreview,
-                  {
-                    value,
-                    isDesktopFirst,
-                    breakpoints,
-                    desktopFirstBreakpoints,
-                    options,
-                    breakpointData,
-                    breakpointUiData
-                  }
-                ) }) }),
-                Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined") && /* @__PURE__ */ jsx(MenuSeparator, {}),
-                /* @__PURE__ */ jsx(
-                  MenuItem,
-                  {
-                    icon: icons.clearAlt,
-                    onClick: () => {
-                      const newValue = { ...value };
-                      [...breakpoints, ...desktopFirstBreakpoints].forEach((breakpoint) => {
-                        delete newValue[breakpoint];
-                      });
-                      onChange(newValue);
-                    },
-                    children: __("Clear all overrides", "eightshift-ui-components")
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ] }),
-      children: [
-        !isDesktopFirst && !inline && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              "es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-end] es:duration-150",
-              innerContentAlign === "start" && "es:justify-items-start",
-              innerContentAlign === "center" && "es:justify-items-center",
-              innerContentAlign === "end" && "es:justify-items-end",
-              innerContentAlign === "stretch" && "es:justify-items-stretch",
-              detailsVisible ? "es:mb-2 es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
-            ),
-            children: [
-              detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
-                breakpoint: "_default",
-                currentValue: value == null ? void 0 : value["_default"],
-                handleChange: (newValue) => onChange({
-                  ...value,
-                  _default: newValue
-                }),
-                options,
-                key: Object.keys(value)
-              }) })
-            ]
-          },
-          "_default-mobile-first"
-        ),
-        !isDesktopFirst && inline && /* @__PURE__ */ jsxs(
-          AnimatedVisibility,
-          {
-            className: clsx(
-              "es:mb-2 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"
-            ),
-            visible: detailsVisible,
-            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-inline"
-        ),
-        /* @__PURE__ */ jsx(
-          AnimatedVisibility,
-          {
-            visible: detailsVisible,
-            className: "es:space-y-2",
-            children: breakpointsToMap.map((breakpoint, i) => {
-              var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
-              const realBreakpointName = breakpoint.replace("max-", "");
-              const filterBreakpoints = isDesktopFirst ? [...breakpointsToMap, "_default"] : ["_default", ...breakpointsToMap];
-              const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined") : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined");
-              const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined") : filterBreakpoints.slice(i + 2).find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined");
-              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 && !inline && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              "es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-start] es:duration-150",
-              innerContentAlign === "start" && "es:justify-items-start",
-              innerContentAlign === "center" && "es:justify-items-center",
-              innerContentAlign === "end" && "es:justify-items-end",
-              innerContentAlign === "stretch" && "es:justify-items-stretch",
-              detailsVisible ? "es:mt-2! es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
-            ),
-            children: [
-              detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
-                breakpoint: "_default",
-                currentValue: value == null ? void 0 : value["_default"],
-                handleChange: (newValue) => onChange({
-                  ...value,
-                  _default: newValue
-                }),
-                options,
-                key: Object.keys(value)
-              }) })
-            ]
-          },
-          "_default-desktop-first"
-        ),
-        isDesktopFirst && inline && /* @__PURE__ */ jsxs(
-          AnimatedVisibility,
-          {
-            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 es:pt-1",
-              innerContentAlign === "start" && "es:justify-items-start",
-              innerContentAlign === "center" && "es:justify-items-center",
-              innerContentAlign === "end" && "es:justify-items-end",
-              innerContentAlign === "stretch" && "es:justify-items-stretch"
-            ),
-            visible: detailsVisible,
-            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-inline"
-        )
-      ]
-    }
-  );
-};
-export {
-  Responsive
-};