@eightshift/ui-components 1.1.3 → 1.2.0

package/dist/{button-CD8Q1eok.js → button-MFj-FKsM.js}

@@ -6,7 +6,7 @@ import React__default, { useState, useRef, forwardRef, createContext } from "rea
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-4oSz1ItD.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.js";
 import { c as clsx } from "./lite-DVmmD_-j.js";
-import { T as Tooltip } from "./tooltip-BRQ4tvZL.js";
+import { T as Tooltip } from "./tooltip-Do_imFfg.js";
 import { _ as __ } from "./default-i18n-BqwLkgZv.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;

package/dist/components/button/button.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "../../Button-CbFrFO04.js";
-import { B, a } from "../../button-CD8Q1eok.js";
+import { B, a } from "../../button-MFj-FKsM.js";
 import "../../lite-DVmmD_-j.js";
-import "../../tooltip-BRQ4tvZL.js";
+import "../../tooltip-Do_imFfg.js";
 import "../../default-i18n-BqwLkgZv.js";
 import "../../utils-Dc35LwuT.js";
 export {

package/dist/components/checkbox/checkbox.js

@@ -79,13 +79,13 @@ const Checkbox = (props) => {
           {
             className: clsx(
               "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded-md es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
-              isSelected ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300"
+              isSelected || indeterminate ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300"
             ),
             children: [
               /* @__PURE__ */ jsx(
                 AnimatedVisibility,
                 {
-                  transition: "scaleRotateFade",
+                  transition: "scaleFade",
                   visible: isIndeterminate,
                   children: /* @__PURE__ */ jsx("div", { className: "es-uic-h-[1.5px] es-uic-w-3 es-uic-rounded es-uic-bg-white" })
                 }

package/dist/components/color-pickers/gradient-editor.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { _ as __, s as sprintf } from "../../default-i18n-BqwLkgZv.js";
 import { useMemo } from "react";
-import { a as ButtonGroup } from "../../button-CD8Q1eok.js";
+import { a as ButtonGroup } from "../../button-MFj-FKsM.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { Repeater } from "../repeater/repeater.js";
 import { RepeaterItem } from "../repeater/repeater-item.js";
@@ -146,42 +146,50 @@ const linearDirections = [
   {
     label: __("Right"),
     value: "right",
-    iconClass: "es-uic-bg-gradient-to-r"
+    iconClass: "es-uic-bg-gradient-to-r",
+    valueDegrees: 90
   },
   {
     label: __("Left"),
     value: "left",
-    iconClass: "es-uic-bg-gradient-to-l"
+    iconClass: "es-uic-bg-gradient-to-l",
+    valueDegrees: 180
   },
   {
     label: __("Top"),
     value: "top",
-    iconClass: "es-uic-bg-gradient-to-t"
+    iconClass: "es-uic-bg-gradient-to-t",
+    valueDegrees: 270
   },
   {
     label: __("Bottom"),
     value: "bottom",
-    iconClass: "es-uic-bg-gradient-to-b"
+    iconClass: "es-uic-bg-gradient-to-b",
+    valueDegrees: 90
   },
   {
     label: __("Top-right"),
     value: "top right",
-    iconClass: "es-uic-bg-gradient-to-tr"
+    iconClass: "es-uic-bg-gradient-to-tr",
+    valueDegrees: 45
   },
   {
     label: __("Top-left"),
     value: "top left",
-    iconClass: "es-uic-bg-gradient-to-tl"
+    iconClass: "es-uic-bg-gradient-to-tl",
+    valueDegrees: 315
   },
   {
     label: __("Bottom-right"),
     value: "bottom right",
-    iconClass: "es-uic-bg-gradient-to-br"
+    iconClass: "es-uic-bg-gradient-to-br",
+    valueDegrees: 135
   },
   {
     label: __("Bottom-left"),
     value: "bottom left",
-    iconClass: "es-uic-bg-gradient-to-bl"
+    iconClass: "es-uic-bg-gradient-to-bl",
+    valueDegrees: 225
   }
 ];
 /**
@@ -205,7 +213,7 @@ const linearDirections = [
  * @preserve
  */
 const GradientEditor = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const { value, onChange, hidden } = props;
   const gradientData = useMemo(() => {
     if ((value == null ? void 0 : value.startsWith("radial-gradient")) || (value == null ? void 0 : value.startsWith("repeating-radial-gradient"))) {
@@ -273,7 +281,11 @@ const GradientEditor = (props) => {
           },
           suffix: "°",
           size: "small",
-          className: "es-uic-grow"
+          className: "es-uic-grow",
+          placeholder: ((_d = linearDirections.find(({ value: value2 }) => {
+            var _a2;
+            return value2 === ((_a2 = gradientData == null ? void 0 : gradientData.orientation) == null ? void 0 : _a2.value);
+          })) == null ? void 0 : _d.valueDegrees) ?? ""
         }
       ),
       /* @__PURE__ */ jsx(
@@ -347,7 +359,7 @@ const GradientEditor = (props) => {
         {
           icon: icons.centerPoint,
           label: __("Center point", "eightshift-ui-components"),
-          value: `${((_e = (_d = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _d.y) == null ? void 0 : _e.value) ?? "center"} ${((_g = (_f = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _f.x) == null ? void 0 : _g.value) ?? "center"}`,
+          value: `${((_f = (_e = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _e.y) == null ? void 0 : _f.value) ?? "center"} ${((_h = (_g = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _g.x) == null ? void 0 : _h.value) ?? "center"}`,
           onChange: (position) => {
             const [x2, y2] = position.split(" ");
             setGradientData({
@@ -387,7 +399,7 @@ const GradientEditor = (props) => {
         {
           icon: icons.centerPoint,
           label: __("Center point", "eightshift-ui-components"),
-          value: `${((_i = (_h = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _h.y) == null ? void 0 : _i.value) ?? "center"} ${((_k = (_j = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _j.x) == null ? void 0 : _k.value) ?? "center"}`,
+          value: `${((_j = (_i = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _i.y) == null ? void 0 : _j.value) ?? "center"} ${((_l = (_k = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _k.x) == null ? void 0 : _l.value) ?? "center"}`,
           onChange: (value2) => {
             setGradientData({
               ...gradientData,
@@ -473,7 +485,7 @@ const GradientEditor = (props) => {
         min: 0,
         max: 100,
         step: 1,
-        value: (_l = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _l.map(({ offset }, i) => {
+        value: (_m = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _m.map(({ offset }, i) => {
           if (!offset) {
             return i * 100 / (gradientData.stops.length - 1);
           }

package/dist/components/color-pickers/solid-color-picker.js

@@ -24,7 +24,7 @@ import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
-import { T as TriggeredPopover } from "../../popover-Dk2o4S7K.js";
+import { T as TriggeredPopover } from "../../popover-CdonDPqG.js";
 import { icons } from "../../icons/icons.js";
 import { Spacer } from "../spacer/spacer.js";
 const $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = /* @__PURE__ */ createContext(null);
@@ -1246,9 +1246,12 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef($1c
  * @param {boolean} [props.disabled] - Whether the color picker is disabled.
  * @param {Function} [props.onChangeEnd] - The change end handler.
  * @param {boolean} [props.allowTransparency=false] - Whether the color picker allows transparency.
- * @param {import('react-aria-components').ColorFormat} [props.outputFormat] - The output format. Default is 'hex' (or 'hexa' if `allowTransparency` is true).
+ * @param {OutputColorFormat} [props.outputFormat] - The output format. Default is 'hex' (or 'hexa' if `allowTransparency` is true).
+ * @param {boolean} [props.noAdvancedOptions] - If `true`, the advanced options are hidden.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
+ * @typedef {'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba'} OutputColorFormat
+ *
  * @returns {JSX.Element} The ButtonGroup component.
  *
  * @example
@@ -1257,7 +1260,7 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef($1c
  * @preserve
  */
 const SolidColorPicker = (props) => {
-  const { value: rawValue, onChange, disabled, onChangeEnd, allowTransparency = false, outputFormat, hidden } = props;
+  const { value: rawValue, onChange, disabled, onChangeEnd, allowTransparency = false, outputFormat, hidden, noAdvancedOptions } = props;
   const value = rawValue == null ? void 0 : rawValue.replace("transparent", "rgba(0, 0, 0, 0)");
   const defaultColor = $799cddbef784668f$export$6e865ea70d7724f("#00000000").toFormat(allowTransparency ? "hsla" : "hsl");
   const modifiedValue = value && (value == null ? void 0 : value.length) > 1 ? $799cddbef784668f$export$6e865ea70d7724f(value) : defaultColor;
@@ -1405,6 +1408,7 @@ const SolidColorPicker = (props) => {
             disabled,
             tooltip: __("Advanced color options", "eightshift-ui-components")
           },
+          hidden: noAdvancedOptions,
           children: [
             /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "es-uic-text-sm", children: __("Advanced color options", "eightshift-ui-components") }),
             /* @__PURE__ */ jsx(

package/dist/components/component-toggle/component-toggle.js

@@ -3,8 +3,8 @@ import { s as sprintf, _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";
-import { T as TriggeredPopover } from "../../popover-Dk2o4S7K.js";
-import { a as ButtonGroup } from "../../button-CD8Q1eok.js";
+import { T as TriggeredPopover } from "../../popover-CdonDPqG.js";
+import { a as ButtonGroup } from "../../button-MFj-FKsM.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { Spacer } from "../spacer/spacer.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { Switch } from "../toggle/switch.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { B as Button } from "../../button-CD8Q1eok.js";
+import { B as Button } from "../../button-MFj-FKsM.js";
 import { icons } from "../../icons/icons.js";
 import { HStack } from "../layout/hstack.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -36,7 +36,7 @@ import { BaseControl } from "../base-control/base-control.js";
 const ContainerPanel = (props) => {
   const { children, className, title, icon, subtitle, use, onUseChange, closable, startOpen = false, actions } = props;
   const [open, setOpen] = useState(startOpen);
-  if (!title) {
+  if (!title && typeof use === "undefined") {
     return /* @__PURE__ */ jsx("div", { className: "es-uic-space-y-2 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-4", children });
   }
   const justUse = !closable && typeof onUseChange !== "undefined";
@@ -90,14 +90,14 @@ const ContainerPanel = (props) => {
         justUse && use && "es-uic-pb-4",
         useAndClosable && use && open && "es-uic-pb-4",
         !justClosable && !justUse && !useAndClosable && "es-uic-pb-4",
-        !closable && !onUseChange && "es-uic-px-4",
+        !closable && !onUseChange && typeof use === "undefined" && "es-uic-px-4",
         className
       ),
       labelContainerClassName: clsx((closable || onUseChange) && "es-uic-pl-4 es-uic-pr-3 es-uic-min-h-12", !(closable || onUseChange) && "es-uic-mt-3", "!es-uic-pb-0"),
       controlContainerClassName: "es-uic-px-4",
       labelClassName: "!es-uic-text-gray-500",
       children: [
-        !closable && !onUseChange && children,
+        !closable && !onUseChange && typeof use === "undefined" && children,
         closable && typeof use === "undefined" && /* @__PURE__ */ jsx(
           AnimatedVisibility,
           {
@@ -106,7 +106,7 @@ const ContainerPanel = (props) => {
             children
           }
         ),
-        typeof use !== "undefined" && /* @__PURE__ */ jsx(
+        typeof use !== "undefined" && !closable && /* @__PURE__ */ jsx(
           AnimatedVisibility,
           {
             visible: closable ? use && open : use,

package/dist/components/draggable-list/draggable-list-item.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { a as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-CEzzyr-l.js";
-import { B as Button } from "../../button-CD8Q1eok.js";
+import { B as Button } from "../../button-MFj-FKsM.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-BqwLkgZv.js";

package/dist/components/expandable/expandable.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { B as Button } from "../../button-CD8Q1eok.js";
+import { B as Button } from "../../button-MFj-FKsM.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
@@ -113,7 +113,7 @@ const Expandable = (props) => {
           AnimatedVisibility,
           {
             visible: isOpen,
-            className: clsx("es-uic-space-y-2.5 es-uic-border-t es-uic-p-2", contentClassName),
+            className: clsx("es-uic-space-y-2.5 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-2", contentClassName),
             transition: "slideFade",
             noInitial: true,
             children

package/dist/components/index.js

@@ -1,7 +1,7 @@
 import { AnimatedVisibility } from "./animated-visibility/animated-visibility.js";
 import { BaseControl } from "./base-control/base-control.js";
 import { BreakpointPreview } from "./breakpoint-preview/breakpoint-preview.js";
-import { B, a } from "../button-CD8Q1eok.js";
+import { B, a } from "../button-MFj-FKsM.js";
 import { Checkbox } from "./checkbox/checkbox.js";
 import { ComponentToggle } from "./component-toggle/component-toggle.js";
 import { ContainerPanel } from "./container-panel/container-panel.js";
@@ -24,7 +24,7 @@ import { MediaPlaceholder } from "./placeholders/media-placeholder.js";
 import { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from "./menu/menu.js";
 import { Notice } from "./notice/notice.js";
 import { NumberPicker } from "./number-picker/number-picker.js";
-import { P, T } from "../popover-Dk2o4S7K.js";
+import { P, T } from "../popover-CdonDPqG.js";
 import { RadioButton, RadioButtonGroup } from "./radio/radio.js";
 import { Repeater } from "./repeater/repeater.js";
 import { RepeaterItem } from "./repeater/repeater-item.js";
@@ -45,7 +45,7 @@ import { Tab, TabList, TabPanel, Tabs } from "./tabs/tabs.js";
 import { Toggle } from "./toggle/toggle.js";
 import { Switch } from "./toggle/switch.js";
 import { ToggleButton } from "./toggle-button/toggle-button.js";
-import { D, T as T2 } from "../tooltip-BRQ4tvZL.js";
+import { D, T as T2 } from "../tooltip-Do_imFfg.js";
 import { VStack } from "./layout/vstack.js";
 export {
   AnimatedVisibility,

package/dist/components/input-field/input-field.js

@@ -185,6 +185,7 @@ const InputField = (props) => {
               $3985021b0ad6602f$export$f5b8910cec6cf069,
               {
                 ...other,
+                type,
                 className: clsx(
                   "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
                   "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",

package/dist/components/link-input/link-input.js

@@ -11,16 +11,16 @@ import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMP
 import React__default, { useReducer, useRef, useEffect, forwardRef, createContext, useMemo, useState } from "react";
 import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-BS4dllCW.js";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-BQCMno9k.js";
-import { $ as $13c3c67164f4d5be$export$4c260019440d418f, B as Button } from "../../button-CD8Q1eok.js";
+import { $ as $13c3c67164f4d5be$export$4c260019440d418f, B as Button } from "../../button-MFj-FKsM.js";
 import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { Spacer } from "../spacer/spacer.js";
-import { T as Tooltip } from "../../tooltip-BRQ4tvZL.js";
+import { T as Tooltip } from "../../tooltip-Do_imFfg.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { P as Popover } from "../../popover-Dk2o4S7K.js";
+import { P as Popover } from "../../popover-CdonDPqG.js";
 import { a as $0d86e9c8f07f9a7b$export$79c0c687a5963b0a } from "../../useListData-BpYQj7kK.js";
 var $03c9a1a10de12f06$exports = {};
 $03c9a1a10de12f06$exports = {
@@ -649,7 +649,6 @@ function c(e, u, c2) {
  * @param {JSX.Element} [props.icon=icons.globe] - Icon to display in the label.
  * @param {JSX.Element} [props.removeIcon=icons.clearAlt] - Icon to display in the input's clear button.
  * @param {boolean} [props.disabled=false] - If `true`, the input is disabled.
- * @param {Function} [props.suggestionTypeIconOverride] - Function
  * @param {Function} [props.fetchSuggestions] - A function that fetches suggestions based on the input value.
  * @param {string} [props.className] - Classes to pass to the input field.
  * @param {number} [props.inputDebounceDelay=500] - The delay in milliseconds before the input value is considered final.

package/dist/components/matrix-align/matrix-align.js

@@ -1,12 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
-import { P as Popover } from "../../popover-Dk2o4S7K.js";
-import { B as Button } from "../../button-CD8Q1eok.js";
+import { P as Popover } from "../../popover-CdonDPqG.js";
+import { B as Button } from "../../button-MFj-FKsM.js";
 import { icons } from "../../icons/icons.js";
 import { upperFirst, camelCase } from "../../utilities/es-dash.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { T as Tooltip } from "../../tooltip-BRQ4tvZL.js";
+import { T as Tooltip } from "../../tooltip-Do_imFfg.js";
 import { BaseControl } from "../base-control/base-control.js";
 /**
  * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.

package/dist/components/menu/menu.js

@@ -3,10 +3,10 @@ import { $ as $982254629710d113$export$b95089534ab7c1fd, b as $453cc9f0df89c0a5$
 import { p as $8a26561d2877236e$export$c24ed0104d07eab9, f as $880e95eb8b93ba9a$export$ecf600387e221c37, $ as $7af3f5b51489e0b5$export$253fe78d46329472, a as $7613b1592d41b092$export$6cd28814d92fa9c9, b as $d496c0a20b6e58ec$export$6c8a5aaad13c9852, j as $7135fc7d473fd974$export$e7c29ae2353b16ea, n as $7135fc7d473fd974$export$6cd28814d92fa9c9, o as $7135fc7d473fd974$export$727c8fc270210f13, q as $7135fc7d473fd974$export$6e2c8f0811a474ce } from "../../SelectionManager-XOAt-Ekx.js";
 import { e as $bdb11010cef70236$export$f680877a34711e37, d as $3ef42575df84b30b$export$9d1611c77c2fe928, k as $bdb11010cef70236$export$b4cc09c592e8fdb8, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52, g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, j as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, m as $5dc95899b306f630$export$c9058316764c140e, l as $df56164dff5785e2$export$4338b53315abf666, c as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-Dc35LwuT.js";
 import React__default, { useRef, useState, useEffect, useCallback, useMemo, createContext, forwardRef, useContext, cloneElement } from "react";
-import { $ as $628037886ba31236$export$f9d5c8beee7d008d, a as $de32f1b87079253c$export$d2f961adcb0afbe, b as $07b14b47974efb58$export$9b9a0cd73afb7ca4, c as $f1ab8c75478c6f73$export$3351871ee4b288b8, d as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98, P as Popover } from "../../popover-Dk2o4S7K.js";
+import { $ as $628037886ba31236$export$f9d5c8beee7d008d, a as $de32f1b87079253c$export$d2f961adcb0afbe, b as $07b14b47974efb58$export$9b9a0cd73afb7ca4, c as $f1ab8c75478c6f73$export$3351871ee4b288b8, d as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98, P as Popover } from "../../popover-CdonDPqG.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-WqetJduR.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $9daab02d461809db$export$683480f191c0e3ea, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../tooltip-BRQ4tvZL.js";
+import { $ as $9daab02d461809db$export$683480f191c0e3ea, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../tooltip-Do_imFfg.js";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456, a as $507fabe10e71c6fb$export$b9b3dfddab17db27, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, w as $507fabe10e71c6fb$export$98e20ec92f614cfe, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-BS4dllCW.js";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-BQCMno9k.js";
 import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572, $ as $f6c31cce2adf654f$export$45712eceda6fad21, a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-CScNeV3V.js";
@@ -15,7 +15,7 @@ import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-4o
 import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope-Bw-IatMO.js";
 import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-SPRI0-SN.js";
 import { icons } from "../../icons/icons.js";
-import { B as Button } from "../../button-CD8Q1eok.js";
+import { B as Button } from "../../button-MFj-FKsM.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 var $c0398ad35c3639b7$exports = {};
@@ -1417,10 +1417,20 @@ const Menu = (props) => {
  */
 const MenuSection = (props) => {
   const { children, label } = props;
-  return /* @__PURE__ */ jsxs($7135fc7d473fd974$export$6e2c8f0811a474ce, { className: clsx("es-uic-space-y-1 es-uic-border-b es-uic-pb-1 last:es-uic-border-b-0", label && "es-uic-pt-2 first:es-uic-pt-1.5", !label && "last:es-uic-pb-1"), children: [
-    label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es-uic-ml-1.5 es-uic-text-xs es-uic-font-medium es-uic-text-gray-400", children: label }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    $7135fc7d473fd974$export$6e2c8f0811a474ce,
+    {
+      className: clsx(
+        "es-uic-space-y-1 es-uic-border-b es-uic-border-b-gray-200 es-uic-pb-1 last:es-uic-border-b-0",
+        label && "es-uic-pt-2 first:es-uic-pt-1.5",
+        !label && "last:es-uic-pb-1"
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es-uic-ml-1.5 es-uic-text-xs es-uic-font-medium es-uic-text-gray-400", children: label }),
+        children
+      ]
+    }
+  );
 };
 /**
  * A menu separator.

package/dist/components/number-picker/number-picker.js

@@ -11,7 +11,7 @@ import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-WqetJ
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-4oSz1ItD.js";
 import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberFieldState-BegO5X6F.js";
-import { B as Button } from "../../button-CD8Q1eok.js";
+import { B as Button } from "../../button-MFj-FKsM.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";

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

@@ -2,7 +2,7 @@ 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-CD8Q1eok.js";
+import { a as ButtonGroup } from "../../button-MFj-FKsM.js";
 import { Menu, MenuSeparator, MenuItem } from "../menu/menu.js";
 import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
 import { RichLabel } from "../rich-label/rich-label.js";

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

@@ -36,7 +36,7 @@ const OptionsPanel = (props) => {
       }
     ),
     /* @__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 })
+    help && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-1.5 es-uic-block es-uic-text-sm es-uic-text-gray-400", children: help })
   ] });
 };
 const OptionsPanelSection = ({ children, className }) => {

package/dist/components/popover/popover.js

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

package/dist/components/radio/radio.js

@@ -375,12 +375,12 @@ const RadioButton = (props) => {
   }
   const styleClassName = {
     segmented: clsx(
-      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition es-uic-min-h-10",
+      "es-uic-py-1 es-uic-px-1.5 es-uic-border es-uic-border-gray-300 hover:es-uic-bg-gray-50 es-uic-transition es-uic-min-h-10",
       "first:es-uic-rounded-t-lg last:es-uic-rounded-b-lg",
       "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
     ),
     segmentedHorizontal: clsx(
-      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition es-uic-grow es-uic-min-h-10",
+      "es-uic-py-1 es-uic-px-1.5 es-uic-border es-uic-border-gray-300 hover:es-uic-bg-gray-50 es-uic-transition es-uic-grow es-uic-min-h-10",
       "first:es-uic-rounded-l-lg last:es-uic-rounded-r-lg",
       "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
     )

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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 { B as Button } from "../../button-MFj-FKsM.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { Expandable } from "../expandable/expandable.js";

package/dist/components/repeater/repeater.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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 { B as Button, a as ButtonGroup } from "../../button-MFj-FKsM.js";
 import { icons } from "../../icons/icons.js";
 import { useId, useState } from "react";
 import { BaseControl } from "../base-control/base-control.js";
@@ -108,7 +108,7 @@ const Repeater = (props) => {
     selectedKeys: rawList.selectionManager.selectedKeys,
     setSelectedKeys: (ids) => rawList.selectionManager.setSelectedKeys(ids),
     getKey: ({ id }) => items.find((item) => item.id === id),
-    getItem: (id) => items.find((item) => item.id === id),
+    getItem: (id) => items == null ? void 0 : items.find((item) => item.id === id),
     update: (id, newValue) => {
       const index = [...items].findIndex((item) => item.id === id);
       items[index] = { ...items[index], ...newValue };
@@ -135,7 +135,10 @@ const Repeater = (props) => {
   };
   let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
     isDisabled: selectable || !canReorder,
-    getItems: (ids) => [...ids].map((id) => ({ "text/plain": list.getItem(id).id })),
+    getItems: (ids) => [...ids].map((id) => {
+      var _a;
+      return { "text/plain": (_a = list == null ? void 0 : list.getItem(id)) == null ? void 0 : _a.id };
+    }),
     onReorder(e) {
       if (e.target.dropPosition === "before") {
         list.move(e.target.key, e.keys);
@@ -178,7 +181,7 @@ const Repeater = (props) => {
               {
                 onPress: () => {
                   var _a;
-                  const removedItems = [...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((id) => list.getItem(id))) ?? []];
+                  const removedItems = [...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((id) => list == null ? void 0 : list.getItem(id))) ?? []];
                   list.removeSelectedItems();
                   setSelectable(false);
                   setCanDelete(false);

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-BRQ4tvZL.js";
+import { D as DecorativeTooltip } from "../../tooltip-Do_imFfg.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-CD8Q1eok.js";
+import { B as Button } from "../../button-MFj-FKsM.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";
@@ -91,7 +91,7 @@ const ResponsiveLegacy = (props) => {
     children,
     inline,
     breakpointData,
-    breakpoints: rawBreakpoints = Object.keys(breakpointData).toReversed(),
+    breakpoints: rawBreakpoints = Object.entries(breakpointData).toSorted((a, b) => a[1] - b[1]).map(([breakpoint]) => breakpoint).toReversed(),
     hidden,
     innerContentAlign = "start"
   } = props;
@@ -132,7 +132,7 @@ const ResponsiveLegacy = (props) => {
                 {
                   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)],
+                  width: breakpointData[globalOverride] + 1,
                   dotsEnd: true,
                   active: true
                 }
@@ -258,10 +258,10 @@ 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(
+                            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[aboveOverride] + 1,
+                              breakpointData[belowOverride] + 1,
                               breakpointData[breakpoint]
                             ),
                             (!aboveOverride || !isOverrideSet) && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint])

package/dist/components/responsive/responsive.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { D as DecorativeTooltip } from "../../tooltip-BRQ4tvZL.js";
+import { D as DecorativeTooltip } from "../../tooltip-Do_imFfg.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";
@@ -8,7 +8,7 @@ import { upperFirst } from "../../utilities/es-dash.js";
 import { icons } from "../../icons/icons.js";
 import { Menu, MenuItem, MenuSeparator, SubMenuItem } from "../menu/menu.js";
 import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
-import { a as ButtonGroup, B as Button } from "../../button-CD8Q1eok.js";
+import { a as ButtonGroup, B as Button } from "../../button-MFj-FKsM.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";