@eightshift/ui-components 0.0.1

package/dist/components/repeater/repeater.js

@@ -0,0 +1,248 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { $ as $72e60046c03fbe42$export$54fe942636b6416d, a as $72e60046c03fbe42$export$a7bfbda1311ca015 } from "../../GridList-BZPXp3_O.js";
+import { b as $d8f176866e6dc039$export$2cfc5be7a55829f6, c as $d8f176866e6dc039$export$62ed72bc21f6b8a6 } from "../../ListBox-w9gDaJkV.js";
+import { B as Button, a as ButtonGroup } from "../../button-BkkdyHfJ.js";
+import { icons } from "../../icons/icons.js";
+import { useId, useState, useEffect } from "react";
+import { classnames } from "../../utilities/classnames.js";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { ToggleButton } from "../toggle-button/toggle-button.js";
+import { $ as $0d86e9c8f07f9a7b$export$762f73dccccd255d } from "../../useListData-BelKu4kx.js";
+/**
+ * A component that allows re-ordering a list of items with additional sub-options.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display in the label.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {string} [props.help] - Help text to display below the input.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
+ * @param {Object[]<string, any>} props.items - Data to display in the repeater.
+ * @param {string} [props.itemLabelProp] - Property of an item to use as the label when re-ordering items.
+ * @param {boolean} [props.hideEmptyState] - If `true`, the empty state will not be displayed when there are no items.
+ * @param {Object<string, any>} [props.addDefaultItem] - Additional properties to add to a new item.
+ * @param {boolean} [props.addDisabled] - If `true`, the add button is disabled.
+ * @param {Function} props.onChange - Function to run when the items change.
+ * @param {Function} [props.onAfterItemAdd] - Function to run after an item is added.
+ * @param {Function} [props.onAfterItemRemove] - Function to run after an item is removed.
+ * @param {Number} [props.minItems] - The minimum number of items that must be present. If there are less items than this, deleting items will be disabled.
+ *
+ * @returns {JSX.Element} The Repeater component.
+ *
+ * @example
+ * <Repeater
+ * 	label='My repeater'
+ * 	items={items}
+ * 	onChange={setItems}
+ * >
+ * 	{(item) => {
+ * 		const { title, updateData } = item;
+ *
+ * 		return (
+ * 			<RepeaterItem
+ * 				label={title ?? 'New item'}
+ * 				icon={icons.myIcon}
+ * 			>
+ * 				<InputField
+ * 					label='Title'
+ * 					type='text'
+ * 					value={title}
+ * 					onChange={(value) => updateData({ title: value })}
+ * 				/>
+ * 			</RepeaterItem>
+ * 		);
+ * 	}}
+ * </Repeater>
+ *
+ * @preserve
+ */
+const Repeater = (props) => {
+  const itemIdBase = useId("repeater-item-");
+  const {
+    children,
+    onChange,
+    items,
+    itemLabelProp,
+    "aria-label": ariaLabel,
+    icon,
+    label,
+    subtitle,
+    help,
+    actions,
+    hideEmptyState,
+    addDefaultItem = {},
+    addDisabled,
+    onAfterItemAdd,
+    onAfterItemRemove,
+    minItems,
+    ...rest
+  } = props;
+  const list = $0d86e9c8f07f9a7b$export$762f73dccccd255d({
+    initialItems: items == null ? void 0 : items.map((item, i) => ({ id: item.id ?? `${itemIdBase}${i}`, ...item })),
+    getKey: ({ id }) => id
+  });
+  const [selectable, setSelectable] = useState(false);
+  const [canDelete, setCanDelete] = useState(false);
+  const [canReorder, setCanReorder] = useState(true);
+  let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
+    isDisabled: selectable || !canReorder,
+    getItems: (keys) => [...keys].map((key) => ({
+      "text/plain": list.getItem(key)[itemLabelProp] ?? __("New item", "eightshift-ui-components")
+    })),
+    onReorder(e) {
+      if (e.target.dropPosition === "before") {
+        list.moveBefore(e.target.key, e.keys);
+      } else if (e.target.dropPosition === "after") {
+        list.moveAfter(e.target.key, e.keys);
+      }
+    },
+    renderDropIndicator(target) {
+      return /* @__PURE__ */ jsx(
+        $d8f176866e6dc039$export$62ed72bc21f6b8a6,
+        {
+          target,
+          className: ({ isDropTarget }) => classnames(
+            "es-uic-h-10 es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-transition",
+            isDropTarget ? "es-uic-border-teal-500 es-uic-bg-teal-500/5" : "es-uic-border-dashed"
+          )
+        }
+      );
+    },
+    renderDragPreview(items2) {
+      let label2 = items2[0]["text/plain"];
+      if (!label2 || label2 === "") {
+        label2 = __("New item", "eightshift-ui-components");
+      }
+      return /* @__PURE__ */ jsx("div", { className: "es-uic-rounded-md es-uic-bg-teal-500 es-uic-px-1.5 es-uic-py-1 es-uic-text-xs es-uic-text-white es-uic-shadow-lg es-uic-shadow-teal-500/30", children: label2 });
+    },
+    async onInsert(e) {
+      let items2 = await Promise.all(
+        e.items.map(async (item) => {
+          let name = item.kind === "text" ? await item.getText("text/plain") : item.name;
+          return { id: Math.random(), name };
+        })
+      );
+      if (e.target.dropPosition === "before") {
+        list.insertBefore(e.target.key, ...items2);
+      } else if (e.target.dropPosition === "after") {
+        list.insertAfter(e.target.key, ...items2);
+      }
+    }
+  });
+  useEffect(() => {
+    const items2 = list.items.map((item) => {
+      const { id, ...rest2 } = item;
+      return rest2;
+    });
+    onChange(items2);
+  }, [list.items]);
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      help,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        actions,
+        /* @__PURE__ */ jsx(
+          AnimatedVisibility,
+          {
+            visible: selectable,
+            transition: "scaleFade",
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPress: () => {
+                  var _a;
+                  const removedItems = [
+                    ...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((key) => list.getItem(key))) ?? []
+                  ];
+                  list.removeSelectedItems();
+                  setSelectable(false);
+                  setCanDelete(false);
+                  if (onAfterItemRemove) {
+                    onAfterItemRemove(removedItems);
+                  }
+                },
+                size: "small",
+                icon: icons.trash,
+                tooltip: __("Remove selected", "eightshift-ui-components"),
+                disabled: !canDelete,
+                "aria-label": __("Remove selected", "eightshift-ui-components"),
+                type: "danger"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onPress: () => {
+                const newItem = { id: `${itemIdBase}${list.items.length + 1}`, ...addDefaultItem };
+                list.append(newItem);
+                if (onAfterItemAdd) {
+                  onAfterItemAdd(newItem);
+                }
+              },
+              size: "small",
+              icon: icons.add,
+              tooltip: __("Add item", "eightshift-ui-components"),
+              disabled: addDisabled || selectable
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToggleButton,
+            {
+              selected: selectable,
+              onChange: () => {
+                list.setSelectedKeys([]);
+                setSelectable(!selectable);
+              },
+              size: "small",
+              icon: icons.checkSquare,
+              tooltip: __("Select items", "eightshift-ui-components"),
+              disabled: minItems && items.length <= minItems
+            }
+          )
+        ] })
+      ] }),
+      className: "es-uic-w-full",
+      children: /* @__PURE__ */ jsx($72e60046c03fbe42$export$54fe942636b6416d.Provider, { value: { setCanReorder }, children: /* @__PURE__ */ jsx(
+        $72e60046c03fbe42$export$a7bfbda1311ca015,
+        {
+          "aria-label": ariaLabel ?? __("Repeater", "eightshift-ui-components"),
+          selectionMode: selectable ? "multiple" : "none",
+          selectionBehavior: "toggle",
+          selectedKeys: list.selectedKeys,
+          onSelectionChange: (selected) => {
+            list.setSelectedKeys(selected);
+            setCanDelete((selected.size ?? 0) > 0);
+          },
+          items: list.items.map((item, index) => ({
+            ...item,
+            updateData: (newValue) => {
+              list.update(item.id, { ...list.getItem(item.id), ...newValue });
+            },
+            itemIndex: index,
+            deleteItem: () => list.remove(item.id),
+            canReorder,
+            setCanReorder
+          })),
+          dragAndDropHooks,
+          renderEmptyState: () => hideEmptyState ? null : /* @__PURE__ */ jsx("div", { className: "es-uic-rounded-md es-uic-border es-uic-border-dashed es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-text-gray-400", children: __("No items", "eightshift-ui-components") }),
+          className: "es-uic-space-y-1.5",
+          ...rest,
+          children
+        }
+      ) })
+    }
+  );
+};
+export {
+  Repeater
+};

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

@@ -0,0 +1,326 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { D as DecorativeTooltip } from "../../tooltip-CkCndvTI.js";
+import { classnames } from "../../utilities/classnames.js";
+import { _ as __, s as sprintf } from "../../default-i18n-BhE-OUmt.js";
+import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
+import { upperFirst } from "../../utilities/text-helpers.js";
+import { icons } from "../../icons/icons.js";
+import { B as Button } from "../../button-BkkdyHfJ.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.
+ *
+ * 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 }`.
+ *
+ * @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.keys(breakpointData).toReversed()
+  } = props;
+  const inheritValue = allowUndefined ? void 0 : rawInheritValue;
+  const [detailsVisible, setDetailsVisible] = useState(false);
+  const breakpoints = rawBreakpoints.slice(1);
+  const globalOverride = breakpoints.find((breakpoint) => (value == null ? void 0 : value[attribute[breakpoint]]) !== inheritValue);
+  const defaultBreakpoint = rawBreakpoints[0];
+  const DefaultTooltip = () => {
+    var _a, _b;
+    return /* @__PURE__ */ jsx(
+      DecorativeTooltip,
+      {
+        placement: "left",
+        className: "es-uic-p-3",
+        theme: "light",
+        offset: 7.5,
+        arrow: true,
+        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-64 es-uic-p-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-text-balance es-uic-font-semibold es-uic-tabular-nums", children: __("Default", "eightshift-ui-components") }),
+          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-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-uic-mx-auto es-uic-mt-2", children: /* @__PURE__ */ jsx(
+            BreakpointPreview,
+            {
+              blocks: [
+                {
+                  breakpoint: globalOverride,
+                  value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[globalOverride]]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value[globalOverride]),
+                  dotsStart: true,
+                  alignEnd: true
+                },
+                {
+                  breakpoint: __("Default", "eightshift-ui-components"),
+                  value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[defaultBreakpoint]]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value[defaultBreakpoint]),
+                  width: breakpointData[breakpoints.at(-1)],
+                  dotsEnd: true,
+                  active: true
+                }
+              ]
+            }
+          ) })
+        ] }),
+        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-8 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-gray-200 es-uic-p-0.5 es-uic-text-gray-950 [&>svg]:es-uic-size-4", children: icons[`screen${upperFirst(defaultBreakpoint)}`] ?? icons.play })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      help,
+      className: "es-uic-w-full",
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        inline && /* @__PURE__ */ jsx(
+          AnimatedVisibility,
+          {
+            visible: !detailsVisible,
+            transition: "scaleFade",
+            noInitial: true,
+            children: children({
+              breakpoint: defaultBreakpoint,
+              currentValue: value == null ? void 0 : 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: classnames(
+              "es-uic-grid es-uic-items-center es-uic-gap-x-2 es-uic-transition-[grid-template-columns,_margin-block-end] es-uic-duration-150",
+              detailsVisible ? "es-uic-mb-2 es-uic-grid-cols-[minmax(0,_2rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+            ),
+            children: [
+              detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
+              /* @__PURE__ */ jsx("div", { className: classnames(detailsVisible ? "es-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
+                breakpoint: defaultBreakpoint,
+                currentValue: value == null ? void 0 : value[attribute[defaultBreakpoint]],
+                options,
+                handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue)
+              }) })
+            ]
+          },
+          defaultBreakpoint
+        ),
+        inline && /* @__PURE__ */ jsxs(
+          AnimatedVisibility,
+          {
+            className: "es-uic-mb-2 es-uic-grid es-uic-grid-cols-[minmax(0,_auto),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
+            visible: detailsVisible,
+            children: [
+              /* @__PURE__ */ jsx(DefaultTooltip, {}),
+              /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+                breakpoint: defaultBreakpoint,
+                currentValue: value == null ? void 0 : value[attribute[defaultBreakpoint]],
+                options,
+                handleChange: (newValue) => onChange(attribute[defaultBreakpoint], newValue),
+                isInlineExpandedView: true
+              }) })
+            ]
+          },
+          defaultBreakpoint
+        ),
+        /* @__PURE__ */ jsx(
+          AnimatedVisibility,
+          {
+            visible: detailsVisible,
+            className: "es-uic-space-y-2",
+            children: breakpoints.map((breakpoint, i) => {
+              var _a, _b, _c, _d, _e;
+              const isOverrideSet = value[attribute[breakpoint]] !== inheritValue;
+              const aboveOverride = rawBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => (value == null ? void 0 : value[attribute[breakpoint2]]) !== inheritValue);
+              const belowOverride = rawBreakpoints.slice(i + 2).find((breakpoint2) => (value == null ? void 0 : value[attribute[breakpoint2]]) !== inheritValue);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "es-uic-grid es-uic-grid-cols-[minmax(0,_auto),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      DecorativeTooltip,
+                      {
+                        placement: "left",
+                        theme: "light",
+                        offset: 7.5,
+                        arrow: true,
+                        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-96 es-uic-p-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-font-semibold", children: upperFirst(breakpoint) }),
+                          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+                            aboveOverride && aboveOverride === breakpoint && isOverrideSet && sprintf(
+                              __("Applied when the browser width is %dpx or less.", "eightshift-ui-components"),
+                              breakpointData[breakpoint]
+                            ),
+                            aboveOverride && aboveOverride !== breakpoint && isOverrideSet && sprintf(
+                              __("Applied when the browser width is between %dpx and %dpx.", "eightshift-ui-components"),
+                              breakpointData[aboveOverride] + 1,
+                              breakpointData[breakpoint]
+                            ),
+                            (!aboveOverride || !isOverrideSet) && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint])
+                          ] }),
+                          (aboveOverride && !isOverrideSet || !aboveOverride) && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-2 es-uic-block es-uic-font-medium es-uic-italic", children: __("Not set", "eightshift-ui-components") }),
+                          aboveOverride && isOverrideSet && /* @__PURE__ */ jsx("div", { className: "es-uic-mx-auto es-uic-mt-2", children: /* @__PURE__ */ jsx(
+                            BreakpointPreview,
+                            {
+                              blocks: [
+                                belowOverride && {
+                                  breakpoint: belowOverride,
+                                  value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[belowOverride]]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value[belowOverride]),
+                                  widthEnd: breakpointData[belowOverride],
+                                  dotsStart: true,
+                                  alignEnd: true
+                                },
+                                {
+                                  breakpoint,
+                                  value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[breakpoint]]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value[breakpoint]),
+                                  widthEnd: breakpointData[breakpoint],
+                                  active: true,
+                                  alignEnd: true,
+                                  dotsStart: aboveOverride === breakpoint
+                                },
+                                aboveOverride !== defaultBreakpoint && {
+                                  breakpoint: aboveOverride,
+                                  value: ((_c = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[aboveOverride]]))) == null ? void 0 : _c.label) ?? upperFirst(value == null ? void 0 : value[aboveOverride]),
+                                  dotsEnd: true
+                                },
+                                aboveOverride === defaultBreakpoint && {
+                                  breakpoint: __("Default", "eightshift-ui-components"),
+                                  value: ((_d = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[attribute[defaultBreakpoint]]))) == null ? void 0 : _d.label) ?? upperFirst(value == null ? void 0 : value[defaultBreakpoint]),
+                                  dotsEnd: true
+                                }
+                              ]
+                            }
+                          ) })
+                        ] }),
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: classnames(
+                              "es-uic-flex es-uic-size-8 es-uic-shrink-0 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-gray-100 es-uic-p-0.5 es-uic-text-gray-800",
+                              value[attribute[breakpoint]] === inheritValue && "[&>svg]:es-uic-opacity-25"
+                            ),
+                            children: (_e = icons) == null ? void 0 : _e[`screen${upperFirst(breakpoint)}`]
+                          }
+                        )
+                      }
+                    ),
+                    children({
+                      breakpoint,
+                      currentValue: value == null ? void 0 : value[attribute[breakpoint]],
+                      options,
+                      handleChange: (newValue) => onChange(attribute[breakpoint], newValue)
+                    }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        onPress: () => onChange(attribute[breakpoint], inheritValue),
+                        icon: icons.clearAlt,
+                        disabled: (value == null ? void 0 : value[attribute[breakpoint]]) === inheritValue,
+                        type: "ghost"
+                      }
+                    )
+                  ]
+                },
+                breakpoint
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ResponsiveLegacy
+};