@eightshift/ui-components 1.0.5 → 1.1.0

package/dist/components/option-select/option-select.js

@@ -2,13 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { icons } from "../../icons/icons.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { a as ButtonGroup } from "../../button-idVI4jmd.js";
+import { a as ButtonGroup } from "../../button-CD8Q1eok.js";
 import { Menu, MenuSeparator, MenuItem } from "../menu/menu.js";
 import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 /**
  * A component that allows the user to select an option from a list of options.
  *
@@ -56,7 +55,7 @@ import { c as clsx } from "../../lite-pbIeT7tm.js";
  * @preserve
  */
 const OptionSelect = (props) => {
-  var _a, _b;
+  var _a;
   const {
     icon,
     label,
@@ -106,42 +105,33 @@ const OptionSelect = (props) => {
             vertical,
             "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
             ...wrapperProps,
-            children: options.map(
-              ({
-                label: optionLabel,
-                value: optionValue,
-                icon: optionIcon,
-                tooltip: optionTooltip,
-                ariaLabel: optionAriaLabel,
-                subtitle: optionSubtitle
-              }) => {
-                var _a2;
-                return /* @__PURE__ */ jsxs(
-                  ToggleButton,
-                  {
-                    selected: optionValue === value,
-                    onChange: () => onChange(optionValue),
-                    disabled,
-                    className: itemClassName,
-                    icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
-                    tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
-                    "aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
-                    ...itemProps,
-                    children: [
-                      !noItemLabel && !optionSubtitle && optionLabel,
-                      !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
-                        RichLabel,
-                        {
-                          label: optionLabel,
-                          subtitle: optionSubtitle
-                        }
-                      )
-                    ]
-                  },
-                  optionValue
-                );
-              }
-            )
+            children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, tooltip: optionTooltip, ariaLabel: optionAriaLabel, subtitle: optionSubtitle }) => {
+              var _a2;
+              return /* @__PURE__ */ jsxs(
+                ToggleButton,
+                {
+                  selected: optionValue === value,
+                  onChange: () => onChange(optionValue),
+                  disabled,
+                  className: itemClassName,
+                  icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                  tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
+                  "aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
+                  ...itemProps,
+                  children: [
+                    !noItemLabel && !optionSubtitle && optionLabel,
+                    !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
+                      RichLabel,
+                      {
+                        label: optionLabel,
+                        subtitle: optionSubtitle
+                      }
+                    )
+                  ]
+                },
+                optionValue
+              );
+            })
           }
         ),
         (type === "radios" || type === "radiosSegmented") && /* @__PURE__ */ jsx(
@@ -153,38 +143,31 @@ const OptionSelect = (props) => {
             "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
             value,
             ...wrapperProps,
-            children: options.map(
-              ({
-                label: optionLabel,
-                value: optionValue,
-                icon: optionIcon,
-                ariaLabel: optionAriaLabel,
-                subtitle: optionSubtitle
-              }) => {
-                var _a2;
-                return /* @__PURE__ */ jsx(
-                  RadioButton,
-                  {
-                    value: optionValue,
-                    disabled,
-                    className: itemClassName,
-                    subtitle: !noItemLabel && optionSubtitle,
-                    icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
-                    "aria-label": optionAriaLabel ?? optionLabel,
-                    label: !noItemLabel && optionLabel,
-                    ...itemProps
-                  },
-                  optionValue
-                );
-              }
-            )
+            children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle }) => {
+              var _a2;
+              return /* @__PURE__ */ jsx(
+                RadioButton,
+                {
+                  value: optionValue,
+                  disabled,
+                  className: itemClassName,
+                  subtitle: !noItemLabel && optionSubtitle,
+                  icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                  "aria-label": optionAriaLabel ?? optionLabel,
+                  label: !noItemLabel && optionLabel,
+                  ...itemProps
+                },
+                optionValue
+              );
+            })
           }
         ),
         type === "menu" && /* @__PURE__ */ jsxs(
           Menu,
           {
             triggerLabel: !noTriggerLabel && (currentItem ? currentItem == null ? void 0 : currentItem.label : notSetLabel),
-            triggerIcon: !noTriggerIcon && (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
+            triggerIcon: !noTriggerIcon && // eslint-disable-next-line no-nested-ternary
+            (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
             tooltip: noTriggerLabel ? /* @__PURE__ */ jsx(
               RichLabel,
               {
@@ -195,8 +178,7 @@ const OptionSelect = (props) => {
             ) : tooltip,
             triggerProps: {
               ...wrapperProps == null ? void 0 : wrapperProps.triggerProps,
-              "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
-              className: clsx((_b = wrapperProps == null ? void 0 : wrapperProps.triggerProps) == null ? void 0 : _b.className, "es-uic-mr-auto")
+              "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"]
             },
             keepOpen: true,
             ...wrapperProps,
@@ -213,7 +195,7 @@ const OptionSelect = (props) => {
                   sectionTitle: optionSectionTitle,
                   shortcut: optionShortcut
                 }) => {
-                  var _a2, _b2;
+                  var _a2, _b;
                   return /* @__PURE__ */ jsxs(Fragment, { children: [
                     (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
                     optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
@@ -224,7 +206,7 @@ const OptionSelect = (props) => {
                         disabled,
                         className: itemClassName,
                         icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
-                        endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
+                        endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b = icons) == null ? void 0 : _b[optionEndIcon] : optionEndIcon),
                         "aria-label": optionAriaLabel ?? optionLabel,
                         onClick: () => onChange(optionValue),
                         shortcut: optionShortcut,

package/dist/components/options-panel/options-panel.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * Component that provides a container panel for options, with an optional title.
@@ -35,7 +35,7 @@ const OptionsPanel = (props) => {
         className: "es-uic-mb-1 es-uic-text-[0.875rem] es-uic-tracking-[-0.01em] !es-uic-text-gray-500"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "es-uic-bg-white es-uic-divide-y es-uic-rounded-lg es-uic-divide-gray-200 es-uic-shadow es-uic-border es-uic-border-gray-200", children }),
+    /* @__PURE__ */ jsx("div", { className: "es-uic-divide-y es-uic-divide-gray-200 es-uic-rounded-lg es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow", children }),
     help && /* @__PURE__ */ jsx("span", { className: "text-sm es-uic-mt-1.5 es-uic-block es-uic-text-gray-400", children: help })
   ] });
 };
@@ -44,7 +44,7 @@ const OptionsPanelSection = ({ children, className }) => {
     "div",
     {
       className: clsx(
-        "es-uic-space-y-2.5 first:es-uic-rounded-t-lg last:rounded-b-lg only:es-uic-rounded-lg es-uic-px-3 es-uic-py-4 first:es-uic-pt-3.5 last:es-uic-pb-3.5",
+        "last:rounded-b-lg es-uic-space-y-2.5 es-uic-px-3 es-uic-py-4 first:es-uic-rounded-t-lg first:es-uic-pt-3.5 last:es-uic-pb-3.5 only:es-uic-rounded-lg",
         className
       ),
       children

package/dist/components/placeholders/file-placeholder.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 /**
  * A simple file placeholder.
  *

package/dist/components/placeholders/image-placeholder.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
 /**
  * A simple image placeholder, with an empty state.

package/dist/components/placeholders/media-placeholder.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
 /**
  * A simple media placeholder, with an empty state.

package/dist/components/popover/popover.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
-import { P, T } from "../../popover-o2Q28Ljn.js";
-import "../../lite-pbIeT7tm.js";
-import "../../default-i18n-Bk1GxDHz.js";
-import "../../button-idVI4jmd.js";
+import { P, T } from "../../popover-Dk2o4S7K.js";
+import "../../lite-DVmmD_-j.js";
+import "../../default-i18n-BqwLkgZv.js";
+import "../../button-CD8Q1eok.js";
 export {
   P as Popover,
   T as TriggeredPopover

package/dist/components/radio/radio.js

@@ -1,21 +1,21 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-DIBzm1e4.js";
-import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-ILxgMZy5.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Bg5O81Wb.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-Dc35LwuT.js";
+import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-J1-YPbi6.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cyxp9ewv.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-WqetJduR.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
-import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidationState-CdYmOaXI.js";
-import { d as $9ab94262bd0047c7$export$420e68273165f4ec, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-B0hyd-S4.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-B9b0VMib.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BAcFg5GO.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-aHn6-wRk.js";
-import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "../../useFocusable-CHfpEdlE.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-B42RawCH.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CRx_hYC4.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-BPJVSUyp.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidationState-CthG9Fbc.js";
+import { d as $9ab94262bd0047c7$export$420e68273165f4ec, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-BS4dllCW.js";
+import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-Bw-IatMO.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-4oSz1ItD.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-BVWgcyGO.js";
+import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "../../useFocusable-CLmhO94g.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-CScNeV3V.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-SPRI0-SN.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-Di1zXprL.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -25,8 +25,7 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
   const isDisabled = props.isDisabled || state.isDisabled;
   let hasChildren = children != null;
   let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
-  if (!hasChildren && !hasAriaLabel)
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+  if (!hasChildren && !hasAriaLabel) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
   let checked = state.selectedValue === value;
   let onChange = (e) => {
     e.stopPropagation();
@@ -50,12 +49,9 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
   });
   let tabIndex = -1;
   if (state.selectedValue != null) {
-    if (state.selectedValue === value)
-      tabIndex = 0;
-  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null)
-    tabIndex = 0;
-  if (isDisabled)
-    tabIndex = void 0;
+    if (state.selectedValue === value) tabIndex = 0;
+  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) tabIndex = 0;
+  if (isDisabled) tabIndex = void 0;
   let { name, descriptionId, errorMessageId, validationBehavior } = $884aeceb3d67f00f$export$37b65e5b5444d35c.get(state);
   $99facab73266f662$export$5add1d006293d136(ref, state.selectedValue, state.setSelectedValue);
   $e93e671b31057976$export$b8473d3665f3a75a({
@@ -105,8 +101,7 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
     onBlurWithin(e) {
       var _props_onBlur;
       (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
-      if (!state.selectedValue)
-        state.setLastFocusedValue(null);
+      if (!state.selectedValue) state.setLastFocusedValue(null);
     },
     onFocusWithin: props.onFocus,
     onFocusWithinChange: props.onFocusChange
@@ -115,16 +110,12 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
     let nextDir;
     switch (e.key) {
       case "ArrowRight":
-        if (direction === "rtl" && orientation !== "vertical")
-          nextDir = "prev";
-        else
-          nextDir = "next";
+        if (direction === "rtl" && orientation !== "vertical") nextDir = "prev";
+        else nextDir = "next";
         break;
       case "ArrowLeft":
-        if (direction === "rtl" && orientation !== "vertical")
-          nextDir = "next";
-        else
-          nextDir = "prev";
+        if (direction === "rtl" && orientation !== "vertical") nextDir = "next";
+        else nextDir = "prev";
         break;
       case "ArrowDown":
         nextDir = "next";
@@ -398,11 +389,7 @@ const RadioButton = (props) => {
     $b6c3ddc6086f204d$export$d7b12c4107be0d61,
     {
       isDisabled: disabled,
-      className: clsx(
-        "es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm",
-        styleClassName[design],
-        className
-      ),
+      className: clsx("es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm", styleClassName[design], className),
       ...rest,
       children: ({ isSelected, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         alignEnd && (label || subtitle || icon) && /* @__PURE__ */ jsx(

package/dist/components/repeater/repeater-item.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-BN0TEda-.js";
-import { b as $72e60046c03fbe42$export$54fe942636b6416d, a as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-CzpWxJsS.js";
-import { B as Button } from "../../button-idVI4jmd.js";
+import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-Cv3pZDHg.js";
+import { b as $72e60046c03fbe42$export$54fe942636b6416d, a as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-CEzzyr-l.js";
+import { B as Button } from "../../button-CD8Q1eok.js";
 import { icons } from "../../icons/icons.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { Expandable } from "../expandable/expandable.js";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { useRef } from "react";
 import { useCellEditMode } from "../../hooks/use-cell-edit-mode.js";
@@ -29,18 +29,7 @@ import { useCellEditMode } from "../../hooks/use-cell-edit-mode.js";
  * @preserve
  */
 const RepeaterItem = (props) => {
-  const {
-    children,
-    icon,
-    label,
-    subtitle,
-    "aria-label": ariaLabel,
-    className,
-    actions,
-    textValue,
-    expandDisabled,
-    ...rest
-  } = props;
+  const { children, icon, label, subtitle, "aria-label": ariaLabel, className, actions, textValue, expandDisabled, ...rest } = props;
   let a11yLabel = textValue;
   if ((label == null ? void 0 : label.length) > 0) {
     a11yLabel = label;

package/dist/components/repeater/repeater.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { b as $72e60046c03fbe42$export$54fe942636b6416d, $ as $72e60046c03fbe42$export$a7bfbda1311ca015 } from "../../GridList-CzpWxJsS.js";
-import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6, a as $d8f176866e6dc039$export$62ed72bc21f6b8a6 } from "../../ListBox-D3Vr4vvC.js";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
-import { B as Button, a as ButtonGroup } from "../../button-idVI4jmd.js";
+import { b as $72e60046c03fbe42$export$54fe942636b6416d, $ as $72e60046c03fbe42$export$a7bfbda1311ca015 } from "../../GridList-CEzzyr-l.js";
+import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6, a as $d8f176866e6dc039$export$62ed72bc21f6b8a6 } from "../../ListBox-CCWXTj0t.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
+import { B as Button, a as ButtonGroup } from "../../button-CD8Q1eok.js";
 import { icons } from "../../icons/icons.js";
 import { useId, useState } from "react";
 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 { arrayMoveMultiple } from "../../utilities/array-helpers.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
-import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "../../useListState-BRsq7O1C.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "../../useListState-DnWZa__1.js";
 /**
  * A component that allows re-ordering a list of items with additional sub-options.
  *
@@ -137,7 +137,6 @@ const Repeater = (props) => {
     isDisabled: selectable || !canReorder,
     getItems: (ids) => [...ids].map((id) => ({ "text/plain": list.getItem(id).id })),
     onReorder(e) {
-      console.log(e);
       if (e.target.dropPosition === "before") {
         list.move(e.target.key, e.keys);
       } else if (e.target.dropPosition === "after") {

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

@@ -1,12 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { D as DecorativeTooltip } from "../../tooltip-T6H9uF-Z.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
-import { _ as __, s as sprintf } from "../../default-i18n-Bk1GxDHz.js";
+import { D as DecorativeTooltip } from "../../tooltip-BRQ4tvZL.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { _ as __, s as sprintf } from "../../default-i18n-BqwLkgZv.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 import { icons } from "../../icons/icons.js";
-import { B as Button } from "../../button-idVI4jmd.js";
+import { B as Button } from "../../button-CD8Q1eok.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";
@@ -44,6 +44,7 @@ import { BaseControl } from "../base-control/base-control.js";
  * @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.
  *
@@ -91,7 +92,8 @@ const ResponsiveLegacy = (props) => {
     inline,
     breakpointData,
     breakpoints: rawBreakpoints = Object.keys(breakpointData).toReversed(),
-    hidden
+    hidden,
+    innerContentAlign = "start"
   } = props;
   const inheritValue = allowUndefined ? void 0 : rawInheritValue;
   const [detailsVisible, setDetailsVisible] = useState(false);
@@ -115,10 +117,7 @@ const ResponsiveLegacy = (props) => {
           /* @__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 && 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,
@@ -186,6 +185,10 @@ const ResponsiveLegacy = (props) => {
           {
             className: clsx(
               "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",
+              innerContentAlign === "start" && "es-uic-justify-items-start",
+              innerContentAlign === "center" && "es-uic-justify-items-center",
+              innerContentAlign === "end" && "es-uic-justify-items-end",
+              innerContentAlign === "stretch" && "es-uic-justify-items-stretch",
               detailsVisible ? "es-uic-mb-2 es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
             ),
             children: [
@@ -203,7 +206,13 @@ const ResponsiveLegacy = (props) => {
         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",
+            className: clsx(
+              "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",
+              innerContentAlign === "start" && "es-uic-justify-items-start",
+              innerContentAlign === "center" && "es-uic-justify-items-center",
+              innerContentAlign === "end" && "es-uic-justify-items-end",
+              innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+            ),
             visible: detailsVisible,
             children: [
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
@@ -231,7 +240,13 @@ const ResponsiveLegacy = (props) => {
               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",
+                  className: clsx(
+                    "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",
+                    innerContentAlign === "start" && "es-uic-justify-items-start",
+                    innerContentAlign === "center" && "es-uic-justify-items-center",
+                    innerContentAlign === "end" && "es-uic-justify-items-end",
+                    innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                  ),
                   children: [
                     /* @__PURE__ */ jsx(
                       DecorativeTooltip,
@@ -243,10 +258,7 @@ const ResponsiveLegacy = (props) => {
                         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 %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,