@eightshift/ui-components 6.3.0 → 7.0.0

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

@@ -1,340 +1,275 @@
-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 { Button } 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 { 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 { play } from "../../icons/ui-icons/play.js";
+import { responsiveOverridesAlt } from "../../icons/ui-icons/responsive-overrides-alt.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/responsive/responsive-legacy.jsx
 /**
- * A component that allows the user to set different values for different breakpoints.
- *
- * Replacement for the `Responsive` component from Eightshift Frontend libs v12 (and older).
- *
- * Meant to be used with a more complex attribute setup, with one attribute per breakpoint,
- * and a single value object that contains all the values.
- *
- * 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 {Object} props.attribute - The attribute the component is linked to. `{ [breakpoint: string]: string }`.
- * @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 {any} [props.inheritValue=''] - Value that will be used as a default for breakpoints that don't have a value set. If `undefined`, needs to be used, use `allowUndefined` instead.
- * @param {boolean?} [props.allowUndefined] - If `true`, `undefined` is used as a default value for breakpoints that don't have a value set. Overrides `inheritValue`.
- * @param {Object} props.globalManifest - The global manifest.
- * @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 {Object<string, number>} [props.breakpointData] - Breakpoints to use. `{ [breakpoint: string]: number }`.
- * @param {string[]} [props.breakpoints] - Breakpoints to use. `{ [breakpoint: string]: number }`.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- * @param {'start' | 'center' | 'end' | 'stretch'} [props.innerContentAlign='start'] - Determines inner content alignment
- *
- * @returns {JSX.Element} The ResponsiveLegacy component.
- *
- * @example
- * // Basic example
- * <ResponsiveLegacy
- * 	attribute={myResponsiveAttribute} // from 'responsiveAttributes' in manifest
- * 	value={value} // attributes
- * 	onChange={(attributeName, value) => setAttributes({
- * 		[attributeName]: value,
- * 	})}
- * 	icon={icons.myIcon}
- * 	label={__('Label', 'eightshift-ui-components')}
- * 	options={[
- * 		{ value: 'value1', label: 'Value 1' },
- * 		{ value: 'value2', label: 'Value 2' },
- * 		{ value: 'value3', label: 'Value 3' },
- * 	]}
- * 	breakpointData={breakpoints} // From global manifest
- * >
- * 	{({ currentValue, options, handleChange }) => (
- * 		<Select
- * 			value={currentValue}
- * 			options={options}
- * 			onChange={handleChange}
- * 		/>
- * 	)}
- * </ResponsiveLegacy>
- *
- * @preserve
- */
-const ResponsiveLegacy = (props) => {
-  const {
-    value,
-    onChange,
-    attribute,
-    icon,
-    help,
-    label,
-    subtitle,
-    options,
-    inheritValue: rawInheritValue = "",
-    allowUndefined,
-    children,
-    inline,
-    breakpointData,
-    breakpoints: rawBreakpoints = Object.entries(breakpointData).toSorted((a, b) => a[1] - b[1]).map(([breakpoint]) => breakpoint).toReversed(),
-    hidden,
-    innerContentAlign = "start"
-  } = props;
-  const inheritValue = allowUndefined ? void 0 : rawInheritValue;
-  const [detailsVisible, setDetailsVisible] = useState(false);
-  const breakpoints = rawBreakpoints.slice(1);
-  const globalOverride = breakpoints.find((breakpoint) => value?.[attribute[breakpoint]] !== inheritValue);
-  const defaultBreakpoint = rawBreakpoints[0];
-  if (hidden) {
-    return null;
-  }
-  const DefaultTooltip = () => /* @__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: [
-          !globalOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
-          globalOverride && sprintf(__("Applied when the browser width is %dpx or wider.", "eightshift-ui-components"), breakpointData[globalOverride] + 1)
-        ] }),
-        globalOverride && /* @__PURE__ */ jsx("div", { className: "es:mx-auto es:mt-2", children: /* @__PURE__ */ jsx(
-          BreakpointPreview,
-          {
-            blocks: [
-              {
-                breakpoint: globalOverride,
-                value: options?.find((opt) => opt.value === value?.[attribute[globalOverride]])?.label ?? upperFirst(value?.[globalOverride]),
-                dotsStart: true,
-                alignEnd: true
-              },
-              {
-                breakpoint: __("Default", "eightshift-ui-components"),
-                value: options?.find((opt) => opt.value === value?.[attribute[defaultBreakpoint]])?.label ?? upperFirst(value?.[defaultBreakpoint]),
-                width: breakpointData[globalOverride] + 1,
-                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: icons[`screen${upperFirst(defaultBreakpoint)}`] ?? icons.play })
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    BaseControl,
-    {
-      icon,
-      label,
-      subtitle,
-      help,
-      className: "es:w-full",
-      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        inline && /* @__PURE__ */ jsx(
-          AnimatedVisibility,
-          {
-            visible: !detailsVisible,
-            transition: "scaleFade",
-            noInitial: true,
-            children: children({
-              breakpoint: defaultBreakpoint,
-              currentValue: value?.[attribute[defaultBreakpoint]],
-              options,
-              handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue),
-              isInlineCollapsedView: true
-            })
-          },
-          defaultBreakpoint
-        ),
-        /* @__PURE__ */ jsx(
-          ToggleButton,
-          {
-            icon: icons.responsiveOverridesAlt,
-            onChange: () => setDetailsVisible(!detailsVisible),
-            selected: detailsVisible,
-            tooltip: detailsVisible ? __("Hide responsive overrides", "eightshift-ui-components") : __("Show responsive overrides", "eightshift-ui-components")
-          }
-        )
-      ] }),
-      children: [
-        !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: defaultBreakpoint,
-                currentValue: value?.[attribute[defaultBreakpoint]],
-                options,
-                handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue)
-              }) })
-            ]
-          },
-          defaultBreakpoint
-        ),
-        inline && /* @__PURE__ */ jsxs(
-          AnimatedVisibility,
-          {
-            className: clsx(
-              "es:mb-2 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"
-            ),
-            visible: detailsVisible,
-            children: [
-              /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2 es:w-full", children: children({
-                breakpoint: defaultBreakpoint,
-                currentValue: value?.[attribute[defaultBreakpoint]],
-                options,
-                handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue),
-                isInlineExpandedView: true
-              }) })
-            ]
-          },
-          defaultBreakpoint
-        ),
-        /* @__PURE__ */ jsx(
-          AnimatedVisibility,
-          {
-            visible: detailsVisible,
-            className: "es:space-y-2",
-            children: breakpoints.map((breakpoint, i) => {
-              const isOverrideSet = value[attribute[breakpoint]] !== inheritValue;
-              const aboveOverride = rawBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => value?.[attribute[breakpoint2]] !== inheritValue);
-              const belowOverride = rawBreakpoints.slice(i + 2).find((breakpoint2) => value?.[attribute[breakpoint2]] !== inheritValue);
-              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: upperFirst(breakpoint) }),
-                          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
-                            aboveOverride && (aboveOverride !== rawBreakpoints[0] || !belowOverride) && isOverrideSet && sprintf(__("Applied when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[breakpoint]),
-                            aboveOverride && aboveOverride === rawBreakpoints[0] && belowOverride && isOverrideSet && sprintf(
-                              __("Applied when the browser width is between %dpx and %dpx.", "eightshift-ui-components"),
-                              breakpointData[belowOverride] + 1,
-                              breakpointData[breakpoint]
-                            ),
-                            (!aboveOverride || !isOverrideSet) && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint])
-                          ] }),
-                          (aboveOverride && !isOverrideSet || !aboveOverride) && /* @__PURE__ */ jsx("span", { className: "es:mt-2 es:block es:font-medium es:italic", children: __("Not set", "eightshift-ui-components") }),
-                          aboveOverride && isOverrideSet && /* @__PURE__ */ jsx("div", { className: "es:mx-auto es:mt-2", children: /* @__PURE__ */ jsx(
-                            BreakpointPreview,
-                            {
-                              blocks: [
-                                belowOverride && {
-                                  breakpoint: belowOverride,
-                                  value: options?.find((opt) => opt.value === value?.[attribute[belowOverride]])?.label ?? upperFirst(value?.[belowOverride]),
-                                  widthEnd: breakpointData[belowOverride],
-                                  dotsStart: true,
-                                  alignEnd: true
-                                },
-                                {
-                                  breakpoint,
-                                  value: options?.find((opt) => opt.value === value?.[attribute[breakpoint]])?.label ?? upperFirst(value?.[breakpoint]),
-                                  widthEnd: breakpointData[breakpoint],
-                                  active: true,
-                                  alignEnd: true,
-                                  dotsStart: aboveOverride === breakpoint
-                                },
-                                aboveOverride !== defaultBreakpoint && {
-                                  breakpoint: aboveOverride,
-                                  value: options?.find((opt) => opt.value === value?.[attribute[aboveOverride]])?.label ?? upperFirst(value?.[aboveOverride]),
-                                  dotsEnd: true
-                                },
-                                aboveOverride === defaultBreakpoint && {
-                                  breakpoint: __("Default", "eightshift-ui-components"),
-                                  value: options?.find((opt) => opt.value === value?.[attribute[defaultBreakpoint]])?.label ?? upperFirst(value?.[defaultBreakpoint]),
-                                  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",
-                              value[attribute[breakpoint]] === inheritValue ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"
-                            ),
-                            children: icons?.[`screen${upperFirst(breakpoint)}`]
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: "es:w-full", children: children({
-                      breakpoint,
-                      currentValue: value?.[attribute[breakpoint]],
-                      options,
-                      handleChange: (newValue) => onChange(attribute[breakpoint], newValue)
-                    }) }),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        onPress: () => onChange(attribute[breakpoint], inheritValue),
-                        icon: icons.clearAlt,
-                        disabled: value?.[attribute[breakpoint]] === inheritValue,
-                        type: "ghost"
-                      }
-                    )
-                  ]
-                },
-                breakpoint
-              );
-            })
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ResponsiveLegacy
+* A component that allows the user to set different values for different breakpoints.
+*
+* Replacement for the `Responsive` component from Eightshift Frontend libs v12 (and older).
+*
+* Meant to be used with a more complex attribute setup, with one attribute per breakpoint,
+* and a single value object that contains all the values.
+*
+* 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 {Object} props.attribute - The attribute the component is linked to. `{ [breakpoint: string]: string }`.
+* @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 {any} [props.inheritValue=''] - Value that will be used as a default for breakpoints that don't have a value set. If `undefined`, needs to be used, use `allowUndefined` instead.
+* @param {boolean?} [props.allowUndefined] - If `true`, `undefined` is used as a default value for breakpoints that don't have a value set. Overrides `inheritValue`.
+* @param {Object} props.globalManifest - The global manifest.
+* @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 {Object<string, number>} [props.breakpointData] - Breakpoints to use. `{ [breakpoint: string]: number }`.
+* @param {string[]} [props.breakpoints] - Breakpoints to use. `{ [breakpoint: string]: number }`.
+* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+* @param {'start' | 'center' | 'end' | 'stretch'} [props.innerContentAlign='start'] - Determines inner content alignment
+*
+* @returns {JSX.Element} The ResponsiveLegacy component.
+*
+* @example
+* // Basic example
+* <ResponsiveLegacy
+* 	attribute={myResponsiveAttribute} // from 'responsiveAttributes' in manifest
+* 	value={value} // attributes
+* 	onChange={(attributeName, value) => setAttributes({
+* 		[attributeName]: value,
+* 	})}
+* 	icon={myIcon}
+* 	label={__('Label', 'eightshift-ui-components')}
+* 	options={[
+* 		{ value: 'value1', label: 'Value 1' },
+* 		{ value: 'value2', label: 'Value 2' },
+* 		{ value: 'value3', label: 'Value 3' },
+* 	]}
+* 	breakpointData={breakpoints} // From global manifest
+* >
+* 	{({ currentValue, options, handleChange }) => (
+* 		<Select
+* 			value={currentValue}
+* 			options={options}
+* 			onChange={handleChange}
+* 		/>
+* 	)}
+* </ResponsiveLegacy>
+*/
+var ResponsiveLegacy = (props) => {
+	const { value, onChange, attribute, icon, help, label, subtitle, options, inheritValue: rawInheritValue = "", allowUndefined, children, inline, breakpointData, breakpoints: rawBreakpoints = Object.entries(breakpointData).toSorted((a, b) => a[1] - b[1]).map(([breakpoint]) => breakpoint).toReversed(), hidden, innerContentAlign = "start" } = props;
+	const inheritValue = allowUndefined ? void 0 : rawInheritValue;
+	const [detailsVisible, setDetailsVisible] = useState(false);
+	const breakpoints = rawBreakpoints.slice(1);
+	const globalOverride = breakpoints.find((breakpoint) => value?.[attribute[breakpoint]] !== inheritValue);
+	const defaultBreakpoint = rawBreakpoints[0];
+	if (hidden) return null;
+	const DefaultTooltip = () => jsx(DecorativeTooltip, {
+		placement: "left",
+		className: "es:p-3",
+		theme: "light",
+		offset: 7.5,
+		arrow: true,
+		text: jsxs("div", {
+			className: "es:max-w-64 es:p-1",
+			children: [
+				jsx("span", {
+					className: "es:block es:text-balance es:font-semibold es:tabular-nums",
+					children: __("Default", "eightshift-ui-components")
+				}),
+				jsxs("span", {
+					className: "es:block es:text-balance es:tabular-nums",
+					children: [!globalOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"), globalOverride && sprintf(__("Applied when the browser width is %dpx or wider.", "eightshift-ui-components"), breakpointData[globalOverride] + 1)]
+				}),
+				globalOverride && jsx("div", {
+					className: "es:mx-auto es:mt-2",
+					children: jsx(BreakpointPreview, { blocks: [{
+						breakpoint: globalOverride,
+						value: options?.find((opt) => opt.value === value?.[attribute[globalOverride]])?.label ?? upperFirst(value?.[globalOverride]),
+						dotsStart: true,
+						alignEnd: true
+					}, {
+						breakpoint: __("Default", "eightshift-ui-components"),
+						value: options?.find((opt) => opt.value === value?.[attribute[defaultBreakpoint]])?.label ?? upperFirst(value?.[defaultBreakpoint]),
+						width: breakpointData[globalOverride] + 1,
+						dotsEnd: true,
+						active: true
+					}] })
+				})
+			]
+		}),
+		children: 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: jsx(Icon, {
+				name: `screen${upperFirst(defaultBreakpoint)}`,
+				fallback: play
+			})
+		})
+	});
+	return jsxs(BaseControl, {
+		icon,
+		label,
+		subtitle,
+		help,
+		className: "es:w-full",
+		actions: jsxs(Fragment$1, { children: [inline && jsx(AnimatedVisibility, {
+			visible: !detailsVisible,
+			transition: "scaleFade",
+			noInitial: true,
+			children: children({
+				breakpoint: defaultBreakpoint,
+				currentValue: value?.[attribute[defaultBreakpoint]],
+				options,
+				handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue),
+				isInlineCollapsedView: true
+			})
+		}, defaultBreakpoint), jsx(ToggleButton, {
+			icon: responsiveOverridesAlt,
+			onChange: () => setDetailsVisible(!detailsVisible),
+			selected: detailsVisible,
+			tooltip: detailsVisible ? __("Hide responsive overrides", "eightshift-ui-components") : __("Show responsive overrides", "eightshift-ui-components")
+		})] }),
+		children: [
+			!inline && 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 && 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: defaultBreakpoint,
+						currentValue: value?.[attribute[defaultBreakpoint]],
+						options,
+						handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue)
+					})
+				})]
+			}, defaultBreakpoint),
+			inline && jsxs(AnimatedVisibility, {
+				className: clsx("es:mb-2 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"),
+				visible: detailsVisible,
+				children: [jsx(DefaultTooltip, {}), jsx("div", {
+					className: "es:col-start-2 es:col-end-2 es:w-full",
+					children: children({
+						breakpoint: defaultBreakpoint,
+						currentValue: value?.[attribute[defaultBreakpoint]],
+						options,
+						handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue),
+						isInlineExpandedView: true
+					})
+				})]
+			}, defaultBreakpoint),
+			jsx(AnimatedVisibility, {
+				visible: detailsVisible,
+				className: "es:space-y-2",
+				children: breakpoints.map((breakpoint, i) => {
+					const isOverrideSet = value[attribute[breakpoint]] !== inheritValue;
+					const aboveOverride = rawBreakpoints.slice(0, i + 1).toReversed().find((breakpoint) => value?.[attribute[breakpoint]] !== inheritValue);
+					const belowOverride = rawBreakpoints.slice(i + 2).find((breakpoint) => value?.[attribute[breakpoint]] !== inheritValue);
+					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", 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",
+								offset: 7.5,
+								arrow: true,
+								text: jsxs("div", {
+									className: "es:max-w-96 es:p-1",
+									children: [
+										jsx("span", {
+											className: "es:block es:font-semibold",
+											children: upperFirst(breakpoint)
+										}),
+										jsxs("span", {
+											className: "es:block es:text-balance es:tabular-nums",
+											children: [
+												aboveOverride && (aboveOverride !== rawBreakpoints[0] || !belowOverride) && isOverrideSet && sprintf(__("Applied when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[breakpoint]),
+												aboveOverride && aboveOverride === rawBreakpoints[0] && belowOverride && isOverrideSet && sprintf(__("Applied when the browser width is between %dpx and %dpx.", "eightshift-ui-components"), breakpointData[belowOverride] + 1, breakpointData[breakpoint]),
+												(!aboveOverride || !isOverrideSet) && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint])
+											]
+										}),
+										(aboveOverride && !isOverrideSet || !aboveOverride) && jsx("span", {
+											className: "es:mt-2 es:block es:font-medium es:italic",
+											children: __("Not set", "eightshift-ui-components")
+										}),
+										aboveOverride && isOverrideSet && jsx("div", {
+											className: "es:mx-auto es:mt-2",
+											children: jsx(BreakpointPreview, { blocks: [
+												belowOverride && {
+													breakpoint: belowOverride,
+													value: options?.find((opt) => opt.value === value?.[attribute[belowOverride]])?.label ?? upperFirst(value?.[belowOverride]),
+													widthEnd: breakpointData[belowOverride],
+													dotsStart: true,
+													alignEnd: true
+												},
+												{
+													breakpoint,
+													value: options?.find((opt) => opt.value === value?.[attribute[breakpoint]])?.label ?? upperFirst(value?.[breakpoint]),
+													widthEnd: breakpointData[breakpoint],
+													active: true,
+													alignEnd: true,
+													dotsStart: aboveOverride === breakpoint
+												},
+												aboveOverride !== defaultBreakpoint && {
+													breakpoint: aboveOverride,
+													value: options?.find((opt) => opt.value === value?.[attribute[aboveOverride]])?.label ?? upperFirst(value?.[aboveOverride]),
+													dotsEnd: true
+												},
+												aboveOverride === defaultBreakpoint && {
+													breakpoint: __("Default", "eightshift-ui-components"),
+													value: options?.find((opt) => opt.value === value?.[attribute[defaultBreakpoint]])?.label ?? upperFirst(value?.[defaultBreakpoint]),
+													dotsEnd: true
+												}
+											] })
+										})
+									]
+								}),
+								children: 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", value[attribute[breakpoint]] === inheritValue ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"),
+									children: jsx(Icon, { icon: `screen${upperFirst(breakpoint)}` })
+								})
+							}),
+							jsx("div", {
+								className: "es:w-full",
+								children: children({
+									breakpoint,
+									currentValue: value?.[attribute[breakpoint]],
+									options,
+									handleChange: (newValue) => onChange(attribute[breakpoint], newValue)
+								})
+							}),
+							jsx(Button, {
+								onPress: () => onChange(attribute[breakpoint], inheritValue),
+								icon: clearAlt,
+								disabled: value?.[attribute[breakpoint]] === inheritValue,
+								type: "ghost"
+							})
+						]
+					}, breakpoint);
+				})
+			})
+		]
+	});
 };
+//#endregion
+export { ResponsiveLegacy };