@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/responsive/responsive.js

@@ -0,0 +1,583 @@
+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 {string} [props.className] - Classes to pass to the control base.
+ * @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,
+    className
+  } = 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,
+      className,
+      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("es:w-full", 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("es:w-full", 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
+};