@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/responsive/responsive.js

@@ -1,567 +1,450 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { DecorativeTooltip } from "../tooltip/tooltip.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
-import { upperFirst } from "../../utilities/es-dash.js";
-import { icons } from "../../icons/icons.js";
-import { Menu, MenuSectionHeader, MenuSeparator, SubMenuItem, MenuItem } from "../menu/menu.js";
-import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
-import { Button, ButtonGroup } from "../button/button.js";
+import { t as clsx } from "../../clsx-BUU5J41u.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { ToggleButton } from "../toggle-button/toggle-button.js";
+import { t as DecorativeTooltip } from "../../tooltip-BzJzYlcc.js";
+import { t as ToggleButton } from "../../toggle-button-DJ8jNQ-9.js";
+import { n as ButtonGroup, t as Button } from "../../button-COTeluL8.js";
 import { BaseControl } from "../base-control/base-control.js";
+import { f as upperFirst } from "../../es-dash-HqXWZZ3_.js";
+import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
+import { r as sprintf, t as __ } from "../../build-module-sxK3nxOK.js";
+import { Icon } from "../../icons/icon.js";
+import { clearAlt } from "../../icons/ui-icons/clear-alt.js";
+import { dropdownCaretAlt } from "../../icons/ui-icons/dropdown-caret-alt.js";
+import { previewResponsive } from "../../icons/ui-icons/preview-responsive.js";
+import { responsiveOverridesAltFill } from "../../icons/ui-icons/responsive-overrides-alt-fill.js";
+import { responsiveOverridesAlt2Fill } from "../../icons/ui-icons/responsive-overrides-alt2-fill.js";
+import { responsiveOverridesAlt3Fill } from "../../icons/ui-icons/responsive-overrides-alt3-fill.js";
+import { Menu, MenuItem, MenuSectionHeader, MenuSeparator, SubMenuItem } from "../menu/menu.js";
 import { OptionSelect } from "../option-select/option-select.js";
+import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/responsive/responsive.jsx
 /**
- * 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?.["_desktopFirst"] === true;
-  const firstMobileFirstOverride = breakpoints.find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
-  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
-  const breakpointsToMap = isDesktopFirst ? desktopFirstBreakpoints : breakpoints;
-  if (hidden) {
-    return null;
-  }
-  const DefaultTooltip = () => {
-    const overrideIcon = breakpointUiData?.[isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0)]?.icon;
-    return /* @__PURE__ */ jsx(
-      DecorativeTooltip,
-      {
-        placement: "left",
-        className: "es:p-4! es:rounded-2xl! es:max-w-96!",
-        theme: "light",
-        offset: 7.5,
-        arrow: true,
-        text: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_95,"wght"_475,"ROND"_100] es:text-14 es:leading-none es:text-surface-600', children: __("Default", "eightshift-ui-components") }),
-          /* @__PURE__ */ jsxs("span", { className: 'es:block es:text-balance es:tabular-nums es:font-variation-["wdth"_64,"wght"_275,"ROND"_50,"slnt"_-2] es:text-surface-500 es:mt-1', 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-", "")])
-          ] }),
-          (firstMobileFirstOverride && !isDesktopFirst || lastDesktopFirstOverride && isDesktopFirst) && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-5", children: [
-            firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
-              BreakpointPreview,
-              {
-                blocks: [
-                  {
-                    breakpoint: __("Default", "eightshift-ui-components"),
-                    widthEnd: breakpointData[firstMobileFirstOverride] - 1,
-                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
-                    dotsStart: true,
-                    alignEnd: true,
-                    active: true
-                  },
-                  {
-                    breakpoint: breakpointUiData?.[firstMobileFirstOverride]?.label ?? firstMobileFirstOverride,
-                    value: options?.find((opt) => opt.value === value?.[firstMobileFirstOverride])?.label ?? upperFirst(value?.[firstMobileFirstOverride]),
-                    dotsEnd: true
-                  }
-                ]
-              }
-            ),
-            lastDesktopFirstOverride && isDesktopFirst && /* @__PURE__ */ jsx(
-              BreakpointPreview,
-              {
-                blocks: [
-                  {
-                    breakpoint: breakpointUiData?.[lastDesktopFirstOverride.replace("max-", "")]?.label ?? lastDesktopFirstOverride.replace("max-", ""),
-                    value: options?.find((opt) => opt.value === value?.[lastDesktopFirstOverride])?.label ?? upperFirst(value?.[lastDesktopFirstOverride]),
-                    dotsStart: true,
-                    alignEnd: true
-                  },
-                  {
-                    breakpoint: __("Default", "eightshift-ui-components"),
-                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
-                    width: breakpointData[lastDesktopFirstOverride.replace("max-", "")],
-                    dotsEnd: true,
-                    active: true
-                  }
-                ]
-              }
-            )
-          ] })
-        ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es:icon:size-6 es:mx-0.5 es:text-accent-700", children: icons?.[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?.["_default"],
-              handleChange: (newValue) => onChange({
-                ...value,
-                _default: newValue
-              }),
-              options,
-              key: Object.keys(value),
-              isInlineCollapsedView: true
-            })
-          },
-          "_default-inline"
-        ),
-        /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-          /* @__PURE__ */ jsx(
-            ToggleButton,
-            {
-              icon: icons.responsiveOverridesAlt3Fill,
-              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-6 es:stroke-[1.25]" },
-              triggerIcon: icons.dropdownCaretAlt,
-              children: [
-                !noModeSelect && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(MenuSectionHeader, { children: __("Mode", "eightshift-ui-components") }),
-                  /* @__PURE__ */ jsx(
-                    OptionSelect,
-                    {
-                      value: isDesktopFirst,
-                      onChange: (newMode) => {
-                        onChange({
-                          _default: value["_default"],
-                          _desktopFirst: newMode
-                        });
-                      },
-                      options: [
-                        { endIcon: icons.responsiveOverridesAltFill, label: __("Mobile-first", "eightshift-ui-components"), value: false },
-                        { endIcon: icons.responsiveOverridesAlt2Fill, label: __("Desktop-first", "eightshift-ui-components"), value: true }
-                      ],
-                      type: "standaloneMenuItems"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(MenuSeparator, {})
-                ] }),
-                Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined") && /* @__PURE__ */ jsx(
-                  SubMenuItem,
-                  {
-                    manualWidth: true,
-                    popoverProps: { className: "es:max-w-full!" },
-                    trigger: /* @__PURE__ */ jsx(MenuItem, { icon: icons.previewResponsive, children: __("Breakpoint 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?.startsWith("_") && typeof 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);
-                    },
-                    danger: true,
-                    children: __("Clear 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-200",
-              detailsVisible && "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25",
-              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-0.5 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?.["_default"],
-                handleChange: (newValue) => onChange({
-                  ...value,
-                  _default: newValue
-                }),
-                options,
-                key: Object.keys(value)
-              }) })
-            ]
-          },
-          "_default-mobile-first"
-        ),
-        !isDesktopFirst && inline && /* @__PURE__ */ jsxs(
-          AnimatedVisibility,
-          {
-            className: clsx(
-              "es:mb-0.5 es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
-              "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25",
-              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 es:w-full", children: children({
-                breakpoint: "_default",
-                currentValue: 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-0.5",
-            children: breakpointsToMap.map((breakpoint, i) => {
-              const realBreakpointName = breakpoint.replace("max-", "");
-              const filterBreakpoints = isDesktopFirst ? [...breakpointsToMap, "_default"] : ["_default", ...breakpointsToMap];
-              const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined") : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined");
-              const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined") : filterBreakpoints.slice(i + 2).find((breakpoint2) => typeof 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",
-                    "es:bg-white/50 es:p-1.5 es:rounded-sm es:inset-ring es:inset-ring-surface-200/60",
-                    !isDesktopFirst && "es:last:rounded-b-2xl",
-                    isDesktopFirst && "es:first:rounded-t-2xl",
-                    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",
-                        className: "es:p-4! es:rounded-2xl! es:max-w-96!",
-                        offset: 7.5,
-                        arrow: true,
-                        text: /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_95,"wght"_475,"ROND"_100] es:text-14 es:leading-none es:text-surface-600', children: breakpointUiData?.[realBreakpointName]?.label ?? upperFirst(realBreakpointName) }),
-                          /* @__PURE__ */ jsxs("span", { className: 'es:block es:text-balance es:tabular-nums es:font-variation-["wdth"_64,"wght"_275,"ROND"_50,"slnt"_-2] es:text-surface-500 es:mt-1', 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?.replace("max-", "")],
-                                breakpointData[realBreakpointName] - 1
-                              ),
-                              typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint?.replace("max-", "")])
-                            ] })
-                          ] }),
-                          typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: 'es:mt-2 es:text-sm es:leading-none es:block es:font-variation-["wdth"_75,"wght"_300,"slnt"_-5]', children: __("Not set", "eightshift-ui-components") }),
-                          typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-5", children: [
-                            !isDesktopFirst && /* @__PURE__ */ jsx(
-                              BreakpointPreview,
-                              {
-                                dotsStart: belowOverride,
-                                blocks: [
-                                  aboveOverride !== "_default" && typeof value?.[aboveOverride] !== "undefined" && {
-                                    breakpoint: breakpointUiData?.[aboveOverride]?.label ?? aboveOverride,
-                                    value: options?.find((opt) => opt.value === value?.[aboveOverride])?.label ?? upperFirst(value?.[aboveOverride]),
-                                    dotsStart: !belowOverride,
-                                    alignEnd: !belowOverride
-                                  },
-                                  aboveOverride === "_default" && typeof value?.["_default"] !== "undefined" && {
-                                    breakpoint: __("Default", "eightshift-ui-components"),
-                                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
-                                    dotsStart: !belowOverride,
-                                    alignEnd: !belowOverride
-                                  },
-                                  {
-                                    breakpoint: breakpointUiData?.[realBreakpointName]?.label ?? realBreakpointName,
-                                    value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[breakpoint]),
-                                    width: breakpointData[realBreakpointName],
-                                    active: true,
-                                    dotsEnd: !belowOverride
-                                  },
-                                  belowOverride && typeof value?.[belowOverride] !== "undefined" && {
-                                    breakpoint: breakpointUiData?.[belowOverride]?.label ?? belowOverride,
-                                    value: options?.find((opt) => opt.value === value?.[belowOverride])?.label ?? upperFirst(value?.[belowOverride]),
-                                    width: breakpointData[belowOverride],
-                                    dotsEnd: true
-                                  }
-                                ]
-                              }
-                            ),
-                            isDesktopFirst && /* @__PURE__ */ jsx(
-                              BreakpointPreview,
-                              {
-                                dotsStart: true,
-                                dotsEnd: aboveOverride !== "_default",
-                                blocks: [
-                                  belowOverride && {
-                                    breakpoint: breakpointUiData?.[belowOverride?.replace("max-", "")]?.label ?? belowOverride?.replace("max-", ""),
-                                    value: options?.find((opt) => opt.value === value?.[belowOverride])?.label ?? upperFirst(value?.[belowOverride])
-                                  },
-                                  {
-                                    breakpoint: breakpointUiData?.[realBreakpointName]?.label ?? realBreakpointName,
-                                    value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[realBreakpointName]),
-                                    width: breakpointData[filterBreakpoints[i - 1]?.replace("max-", "")],
-                                    active: true
-                                  },
-                                  aboveOverride !== "_default" && {
-                                    breakpoint: breakpointUiData?.[aboveOverride?.replace("max-", "")]?.label ?? aboveOverride?.replace("max-", ""),
-                                    value: options?.find((opt) => opt.value === value?.[aboveOverride])?.label ?? upperFirst(value?.[aboveOverride]),
-                                    width: breakpointData[breakpoint?.replace("max-", "")]
-                                  },
-                                  aboveOverride === "_default" && {
-                                    breakpoint: __("Default", "eightshift-ui-components"),
-                                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
-                                    width: breakpointData[breakpoint?.replace("max-", "")],
-                                    dotsEnd: true
-                                  }
-                                ]
-                              }
-                            )
-                          ] })
-                        ] }),
-                        children: /* @__PURE__ */ jsx("div", { className: clsx("es:transition-colors es:icon:size-6 es:mx-0.5", typeof value[breakpoint] !== "undefined" ? "es:text-surface-600" : "es:text-surface-300"), children: icons?.[breakpointUiData?.[realBreakpointName]?.icon] ?? breakpointUiData?.[realBreakpointName]?.icon ?? icons?.[`screen${upperFirst(realBreakpointName)}`] })
-                      }
-                    ),
-                    children({
-                      breakpoint,
-                      currentValue: 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?.[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",
-              detailsVisible && "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25 es:transition-plus",
-              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-0.5 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?.["_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",
-              "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25",
-              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?.["_default"],
-                handleChange: (newValue) => onChange({
-                  ...value,
-                  _default: newValue
-                }),
-                options,
-                key: Object.keys(value),
-                isInlineExpandedView: true
-              }) })
-            ]
-          },
-          "_default-desktop-first-inline"
-        )
-      ]
-    }
-  );
-};
-export {
-  Responsive
+* 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={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>
+*/
+var 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;
+	const [detailsVisible, setDetailsVisible] = useState(false);
+	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 isDesktopFirst = value?.["_desktopFirst"] === true;
+	const firstMobileFirstOverride = breakpoints.find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
+	const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
+	const breakpointsToMap = isDesktopFirst ? desktopFirstBreakpoints : breakpoints;
+	if (hidden) return null;
+	const DefaultTooltip = () => {
+		const overrideIcon = breakpointUiData?.[isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0)]?.icon;
+		return jsx(DecorativeTooltip, {
+			placement: "left",
+			className: "es:p-4! es:rounded-2xl! es:max-w-96!",
+			theme: "light",
+			offset: 7.5,
+			arrow: true,
+			text: jsxs(Fragment$1, { children: [
+				jsx("span", {
+					className: "es:block es:font-variation-[\"wdth\"_95,\"wght\"_475,\"ROND\"_100] es:text-14 es:leading-none es:text-surface-600",
+					children: __("Default", "eightshift-ui-components")
+				}),
+				jsxs("span", {
+					className: "es:block es:text-balance es:tabular-nums es:font-variation-[\"wdth\"_64,\"wght\"_275,\"ROND\"_50,\"slnt\"_-2] es:text-surface-500 es:mt-1",
+					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-", "")])
+					]
+				}),
+				(firstMobileFirstOverride && !isDesktopFirst || lastDesktopFirstOverride && isDesktopFirst) && jsxs("div", {
+					className: "es:mx-auto es:mt-5",
+					children: [firstMobileFirstOverride && !isDesktopFirst && jsx(BreakpointPreview, { blocks: [{
+						breakpoint: __("Default", "eightshift-ui-components"),
+						widthEnd: breakpointData[firstMobileFirstOverride] - 1,
+						value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
+						dotsStart: true,
+						alignEnd: true,
+						active: true
+					}, {
+						breakpoint: breakpointUiData?.[firstMobileFirstOverride]?.label ?? firstMobileFirstOverride,
+						value: options?.find((opt) => opt.value === value?.[firstMobileFirstOverride])?.label ?? upperFirst(value?.[firstMobileFirstOverride]),
+						dotsEnd: true
+					}] }), lastDesktopFirstOverride && isDesktopFirst && jsx(BreakpointPreview, { blocks: [{
+						breakpoint: breakpointUiData?.[lastDesktopFirstOverride.replace("max-", "")]?.label ?? lastDesktopFirstOverride.replace("max-", ""),
+						value: options?.find((opt) => opt.value === value?.[lastDesktopFirstOverride])?.label ?? upperFirst(value?.[lastDesktopFirstOverride]),
+						dotsStart: true,
+						alignEnd: true
+					}, {
+						breakpoint: __("Default", "eightshift-ui-components"),
+						value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
+						width: breakpointData[lastDesktopFirstOverride.replace("max-", "")],
+						dotsEnd: true,
+						active: true
+					}] })]
+				})
+			] }),
+			children: jsx("div", {
+				className: "es:icon:size-6 es:mx-0.5 es:text-accent-700",
+				children: jsx(Icon, {
+					icon: overrideIcon,
+					fallback: jsx(Icon, { icon: `screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}` })
+				})
+			})
+		});
+	};
+	return jsxs(BaseControl, {
+		icon,
+		label,
+		subtitle,
+		help,
+		className,
+		actions: jsxs(Fragment$1, { children: [inline && jsx(AnimatedVisibility, {
+			className: "es:mr-0.5",
+			visible: !detailsVisible,
+			transition: "scaleFade",
+			noInitial: true,
+			children: children({
+				breakpoint: "_default",
+				currentValue: value?.["_default"],
+				handleChange: (newValue) => onChange({
+					...value,
+					_default: newValue
+				}),
+				options,
+				key: Object.keys(value),
+				isInlineCollapsedView: true
+			})
+		}, "_default-inline"), jsxs(ButtonGroup, { children: [jsx(ToggleButton, {
+			icon: responsiveOverridesAlt3Fill,
+			onChange: () => setDetailsVisible(!detailsVisible),
+			selected: detailsVisible,
+			tooltip: detailsVisible ? __("Hide responsive overrides", "eightshift-ui-components") : __("Show responsive overrides", "eightshift-ui-components")
+		}), jsxs(Menu, {
+			"aria-label": __("Responsive options", "eightshift-ui-components"),
+			tooltip: __("Responsive options", "eightshift-ui-components"),
+			popoverProps: { placement: "bottom right" },
+			triggerProps: { className: "es:w-6 es:stroke-[1.25]" },
+			triggerIcon: dropdownCaretAlt,
+			children: [
+				!noModeSelect && jsxs(Fragment$1, { children: [
+					jsx(MenuSectionHeader, { children: __("Mode", "eightshift-ui-components") }),
+					jsx(OptionSelect, {
+						value: isDesktopFirst,
+						onChange: (newMode) => {
+							onChange({
+								_default: value["_default"],
+								_desktopFirst: newMode
+							});
+						},
+						options: [{
+							endIcon: responsiveOverridesAltFill,
+							label: __("Mobile-first", "eightshift-ui-components"),
+							value: false
+						}, {
+							endIcon: responsiveOverridesAlt2Fill,
+							label: __("Desktop-first", "eightshift-ui-components"),
+							value: true
+						}],
+						type: "standaloneMenuItems"
+					}),
+					jsx(MenuSeparator, {})
+				] }),
+				Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined") && jsx(SubMenuItem, {
+					manualWidth: true,
+					popoverProps: { className: "es:max-w-full!" },
+					trigger: jsx(MenuItem, {
+						icon: previewResponsive,
+						children: __("Breakpoint preview", "eightshift-ui-components")
+					}),
+					children: jsx(MenuItem, {
+						disabled: true,
+						children: jsx(ResponsivePreview, {
+							value,
+							isDesktopFirst,
+							breakpoints,
+							desktopFirstBreakpoints,
+							options,
+							breakpointData,
+							breakpointUiData
+						})
+					})
+				}),
+				Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined") && jsx(MenuSeparator, {}),
+				jsx(MenuItem, {
+					icon: clearAlt,
+					onClick: () => {
+						const newValue = { ...value };
+						[...breakpoints, ...desktopFirstBreakpoints].forEach((breakpoint) => {
+							delete newValue[breakpoint];
+						});
+						onChange(newValue);
+					},
+					danger: true,
+					children: __("Clear overrides", "eightshift-ui-components")
+				})
+			]
+		})] })] }),
+		children: [
+			!isDesktopFirst && !inline && jsxs("div", {
+				className: clsx("es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-end] es:duration-200", detailsVisible && "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25", 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-0.5 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 && jsx(DefaultTooltip, {}), 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?.["_default"],
+						handleChange: (newValue) => onChange({
+							...value,
+							_default: newValue
+						}),
+						options,
+						key: Object.keys(value)
+					})
+				})]
+			}, "_default-mobile-first"),
+			!isDesktopFirst && inline && jsxs(AnimatedVisibility, {
+				className: clsx("es:mb-0.5 es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2", "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25", 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: [jsx(DefaultTooltip, {}), jsx("div", {
+					className: "es:col-start-2 es:col-end-2 es:w-full",
+					children: children({
+						breakpoint: "_default",
+						currentValue: value?.["_default"],
+						handleChange: (newValue) => onChange({
+							...value,
+							_default: newValue
+						}),
+						options,
+						key: Object.keys(value),
+						isInlineExpandedView: true
+					})
+				})]
+			}, "_default-mobile-first-inline"),
+			jsx(AnimatedVisibility, {
+				visible: detailsVisible,
+				className: "es:space-y-0.5",
+				children: breakpointsToMap.map((breakpoint, i) => {
+					const realBreakpointName = breakpoint.replace("max-", "");
+					const filterBreakpoints = isDesktopFirst ? [...breakpointsToMap, "_default"] : ["_default", ...breakpointsToMap];
+					const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint) => typeof value?.[breakpoint] !== "undefined") : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
+					const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint) => typeof value?.[breakpoint] !== "undefined") : filterBreakpoints.slice(i + 2).find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
+					return 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", "es:bg-white/50 es:p-1.5 es:rounded-sm es:inset-ring es:inset-ring-surface-200/60", !isDesktopFirst && "es:last:rounded-b-2xl", isDesktopFirst && "es:first:rounded-t-2xl", 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: [
+							jsx(DecorativeTooltip, {
+								placement: "left",
+								theme: "light",
+								className: "es:p-4! es:rounded-2xl! es:max-w-96!",
+								offset: 7.5,
+								arrow: true,
+								text: jsxs(Fragment$1, { children: [
+									jsx("span", {
+										className: "es:block es:font-variation-[\"wdth\"_95,\"wght\"_475,\"ROND\"_100] es:text-14 es:leading-none es:text-surface-600",
+										children: breakpointUiData?.[realBreakpointName]?.label ?? upperFirst(realBreakpointName)
+									}),
+									jsxs("span", {
+										className: "es:block es:text-balance es:tabular-nums es:font-variation-[\"wdth\"_64,\"wght\"_275,\"ROND\"_50,\"slnt\"_-2] es:text-surface-500 es:mt-1",
+										children: [!isDesktopFirst && jsxs(Fragment$1, { 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 && jsxs(Fragment$1, { 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?.replace("max-", "")], breakpointData[realBreakpointName] - 1),
+											typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint?.replace("max-", "")])
+										] })]
+									}),
+									typeof value[breakpoint] === "undefined" && jsx("span", {
+										className: "es:mt-2 es:text-sm es:leading-none es:block es:font-variation-[\"wdth\"_75,\"wght\"_300,\"slnt\"_-5]",
+										children: __("Not set", "eightshift-ui-components")
+									}),
+									typeof value[breakpoint] !== "undefined" && jsxs("div", {
+										className: "es:mx-auto es:mt-5",
+										children: [!isDesktopFirst && jsx(BreakpointPreview, {
+											dotsStart: belowOverride,
+											blocks: [
+												aboveOverride !== "_default" && typeof value?.[aboveOverride] !== "undefined" && {
+													breakpoint: breakpointUiData?.[aboveOverride]?.label ?? aboveOverride,
+													value: options?.find((opt) => opt.value === value?.[aboveOverride])?.label ?? upperFirst(value?.[aboveOverride]),
+													dotsStart: !belowOverride,
+													alignEnd: !belowOverride
+												},
+												aboveOverride === "_default" && typeof value?.["_default"] !== "undefined" && {
+													breakpoint: __("Default", "eightshift-ui-components"),
+													value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
+													dotsStart: !belowOverride,
+													alignEnd: !belowOverride
+												},
+												{
+													breakpoint: breakpointUiData?.[realBreakpointName]?.label ?? realBreakpointName,
+													value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[breakpoint]),
+													width: breakpointData[realBreakpointName],
+													active: true,
+													dotsEnd: !belowOverride
+												},
+												belowOverride && typeof value?.[belowOverride] !== "undefined" && {
+													breakpoint: breakpointUiData?.[belowOverride]?.label ?? belowOverride,
+													value: options?.find((opt) => opt.value === value?.[belowOverride])?.label ?? upperFirst(value?.[belowOverride]),
+													width: breakpointData[belowOverride],
+													dotsEnd: true
+												}
+											]
+										}), isDesktopFirst && jsx(BreakpointPreview, {
+											dotsStart: true,
+											dotsEnd: aboveOverride !== "_default",
+											blocks: [
+												belowOverride && {
+													breakpoint: breakpointUiData?.[belowOverride?.replace("max-", "")]?.label ?? belowOverride?.replace("max-", ""),
+													value: options?.find((opt) => opt.value === value?.[belowOverride])?.label ?? upperFirst(value?.[belowOverride])
+												},
+												{
+													breakpoint: breakpointUiData?.[realBreakpointName]?.label ?? realBreakpointName,
+													value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[realBreakpointName]),
+													width: breakpointData[filterBreakpoints[i - 1]?.replace("max-", "")],
+													active: true
+												},
+												aboveOverride !== "_default" && {
+													breakpoint: breakpointUiData?.[aboveOverride?.replace("max-", "")]?.label ?? aboveOverride?.replace("max-", ""),
+													value: options?.find((opt) => opt.value === value?.[aboveOverride])?.label ?? upperFirst(value?.[aboveOverride]),
+													width: breakpointData[breakpoint?.replace("max-", "")]
+												},
+												aboveOverride === "_default" && {
+													breakpoint: __("Default", "eightshift-ui-components"),
+													value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
+													width: breakpointData[breakpoint?.replace("max-", "")],
+													dotsEnd: true
+												}
+											]
+										})]
+									})
+								] }),
+								children: jsx("div", {
+									className: clsx("es:transition-colors es:icon:size-6 es:mx-0.5", typeof value[breakpoint] !== "undefined" ? "es:text-surface-600" : "es:text-surface-300"),
+									children: jsx(Icon, {
+										icon: breakpointUiData?.[realBreakpointName]?.icon,
+										fallback: jsx(Icon, { icon: `screen${upperFirst(realBreakpointName)}` })
+									})
+								})
+							}),
+							children({
+								breakpoint,
+								currentValue: value?.[breakpoint],
+								handleChange: (newValue) => {
+									onChange({
+										...value,
+										[breakpoint]: newValue
+									});
+								},
+								options,
+								key: Object.keys(value)
+							}),
+							jsx(Button, {
+								onPress: () => {
+									const newValue = { ...value };
+									delete newValue[breakpoint];
+									onChange(newValue);
+								},
+								icon: clearAlt,
+								disabled: typeof value?.[breakpoint] === "undefined",
+								type: "ghost"
+							})
+						]
+					}, realBreakpointName);
+				})
+			}),
+			isDesktopFirst && !inline && jsxs("div", {
+				className: clsx("es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-start] es:duration-150", detailsVisible && "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25 es:transition-plus", 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-0.5 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 && jsx(DefaultTooltip, {}), 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?.["_default"],
+						handleChange: (newValue) => onChange({
+							...value,
+							_default: newValue
+						}),
+						options,
+						key: Object.keys(value)
+					})
+				})]
+			}, "_default-desktop-first"),
+			isDesktopFirst && inline && 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", "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25", 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: [jsx(DefaultTooltip, {}), jsx("div", {
+					className: "es:col-start-2 es:col-end-2",
+					children: children({
+						breakpoint: "_default",
+						currentValue: value?.["_default"],
+						handleChange: (newValue) => onChange({
+							...value,
+							_default: newValue
+						}),
+						options,
+						key: Object.keys(value),
+						isInlineExpandedView: true
+					})
+				})]
+			}, "_default-desktop-first-inline")
+		]
+	});
 };
+//#endregion
+export { Responsive };