@eightshift/ui-components 5.6.0 → 6.0.0

package/dist/components/repeater/repeater.js

@@ -1,20 +1,14 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useId, useState } from "react";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RepeaterContext } from "./repeater-context.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { L as List, a as arrayRemove, b as arrayMove } from "../../List-Bll1lQEW.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-BGHOoFf0.js";
 import { Menu, MenuItem, MenuSeparator } from "../menu/menu.js";
-const fixIds = (items, itemIdBase) => {
-  return items?.map((item, i) => ({
-    ...item,
-    id: item?.id ?? `${itemIdBase}-${i}`
-  }));
-};
 /**
  * A component that allows re-ordering a list of items with additional sub-options.
  *
@@ -77,7 +71,7 @@ const Repeater = (props) => {
   const {
     children,
     onChange,
-    items: rawItems,
+    items,
     icon,
     label,
     subtitle,
@@ -104,7 +98,6 @@ const Repeater = (props) => {
   if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
     console.warn(__("Repeater: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
-  const items = fixIds(rawItems ?? [], itemIdBase);
   const canDelete = items.length > (minItems ?? 0);
   const canAdd = items.length < (maxItems ?? Number.MAX_SAFE_INTEGER) && !addDisabled;
   if (hidden) {
@@ -154,7 +147,8 @@ const Repeater = (props) => {
             icon: icons.add,
             className: clsx("es:icon:size-4", !hideEmptyState && items.length < 1 && "es:invisible"),
             tooltip: __("Add item", "eightshift-ui-components"),
-            disabled: addDisabled || !canAdd
+            disabled: addDisabled || !canAdd,
+            type: "simple"
           }
         ),
         addButton && /* @__PURE__ */ jsx("div", { className: clsx(!hideEmptyState && items.length < 1 && "es:invisible"), children: addButton({
@@ -173,14 +167,14 @@ const Repeater = (props) => {
         /* @__PURE__ */ jsx(
           List,
           {
-            values: items.map((item) => ({ ...item, disabled: openItems[item.id] })),
+            values: items.map((item) => ({ ...item, disabled: openItems?.[item?.id] })),
             onChange: ({ oldIndex, newIndex }) => onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex)),
             renderList: ({ children: children2, props: props2 }) => {
               const { key, ...rest } = props2;
               return /* @__PURE__ */ jsx(
                 "ul",
                 {
-                  className: clsx("es:w-full es:list-none", className),
+                  className: clsx("es:w-full es:list-none es:m-0! es:flex es:flex-col es:gap-1", className),
                   ...rest,
                   children: children2
                 },
@@ -192,7 +186,7 @@ const Repeater = (props) => {
               return /* @__PURE__ */ jsx(
                 "li",
                 {
-                  className: "es:group es:w-full es:list-none es:any-focus:outline-hidden",
+                  className: "es:group es:w-full es:list-none es:any-focus:outline-hidden es:m-0!",
                   ...rest,
                   children: /* @__PURE__ */ jsx(
                     RepeaterContext.Provider,
@@ -241,7 +235,7 @@ const Repeater = (props) => {
                     }
                   )
                 },
-                item?.id ?? key
+                key
               );
             },
             removableByMove: !noDragToRemove

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

@@ -3,18 +3,16 @@ import { cloneElement } from "react";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/es-dash.js";
-import "../../sha256-C56UDWfQ.js";
 import { icons } from "../../icons/icons.js";
 import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
 import { ButtonGroup, Button } from "../button/button.js";
-import { Spacer } from "../spacer/spacer.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { OptionSelect } from "../option-select/option-select.js";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-AxKZjtFm.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-ztX6G1zR.js";
 /**
  * A compact, inline version of `Responsive`. Allows the user to set different values for different breakpoints.
  *
@@ -119,13 +117,13 @@ const MiniResponsive = (props) => {
         offset: 7.5,
         arrow: true,
         text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-64 es:p-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "es:block es:text-balance es:font-semibold es:tabular-nums", children: __("Default", "eightshift-ui-components") }),
-          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
+          /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_180,"wght"_500] es:text-base es:leading-none es:text-surface-600', children: __("Default", "eightshift-ui-components") }),
+          /* @__PURE__ */ jsxs("span", { className: 'es:block es:text-balance es:tabular-nums es:font-variation-["wdth"_60,"wght"_300] es:text-surface-500 es:mt-1', children: [
             !firstMobileFirstOverride && !lastDesktopFirstOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
             firstMobileFirstOverride && !isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[firstMobileFirstOverride] - 1),
             lastDesktopFirstOverride && isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[lastDesktopFirstOverride.replace("max-", "")])
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "es:mx-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-5", children: [
             firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
               BreakpointPreview,
               {
@@ -168,7 +166,7 @@ const MiniResponsive = (props) => {
             )
           ] })
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:border-accent-500/10 es:bg-accent-50 es:p-0.5 es:text-accent-800 es:shadow-sm es:shadow-accent-600/25 es:icon:size-5", children: icons?.[overrideIcon] ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
+        children: /* @__PURE__ */ jsx("div", { className: "es:icon:size-6 es:mx-0.5 es:text-accent-700", children: icons?.[overrideIcon] ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
       }
     );
   };
@@ -195,43 +193,22 @@ const MiniResponsive = (props) => {
         /* @__PURE__ */ jsxs(
           TriggeredPopover,
           {
-            triggerButtonIcon: cloneElement(isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2, { className: "es:size-5!" }),
+            triggerButtonIcon: cloneElement(icons.dropdownCaretAlt, { className: "es:size-5!" }),
             triggerButtonProps: {
               tooltip: __("Responsive overrides", "eightshift-ui-components"),
-              className: "es:w-7"
+              className: "es:w-6"
             },
-            className: "es:min-w-80 es:divide-y es:divide-secondary-200 es:p-0!",
+            className: "es:min-w-80 es:p-0!",
+            wrapperClassName: "es:rounded-3xl",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:justify-between es:p-2", children: [
-                /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { className: "es:block es:text-xs es:text-secondary-500", children: __("Responsive overrides", "eightshift-ui-components") }),
-                /* @__PURE__ */ jsx(
-                  OptionSelect,
-                  {
-                    hidden: noModeSelect,
-                    "aria-label": __("Breakpoint mode", "eightshift-ui-components"),
-                    value: isDesktopFirst,
-                    onChange: (newMode) => {
-                      onChange({
-                        _default: value["_default"],
-                        _desktopFirst: newMode
-                      });
-                    },
-                    options: [
-                      { label: __("Mobile-first", "eightshift-ui-components"), subtitle: __("Default", "eightshift-ui-components"), value: false },
-                      { label: __("Desktop-first", "eightshift-ui-components"), value: true }
-                    ],
-                    wrapperProps: { triggerProps: { size: "small" } },
-                    type: "menu",
-                    tooltip: true
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "es:space-y-2 es:px-2 es:py-2.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "es:flex es:items-center es:justify-between es:pt-3 es:px-3.5", children: /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { className: 'es:block es:text-lg es:text-surface-600 es:font-variation-["wdth"_180,"wght"_325]', children: __("Responsive overrides", "eightshift-ui-components") }) }),
+              /* @__PURE__ */ jsxs("div", { className: "es:px-2 es:mt-1 es:space-y-0.5", children: [
                 !isDesktopFirst && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: clsx(
                       "es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                      "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25",
                       innerContentAlign === "start" && "es:justify-items-start",
                       innerContentAlign === "center" && "es:justify-items-center",
                       innerContentAlign === "end" && "es:justify-items-end",
@@ -263,7 +240,8 @@ const MiniResponsive = (props) => {
                     "div",
                     {
                       className: clsx(
-                        "es:grid es:grid-cols-[minmax(0,auto)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                        "es:grid es:grid-cols-[minmax(0,auto)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-1.5",
+                        "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-surface-200/60",
                         innerContentAlign === "start" && "es:justify-items-start",
                         innerContentAlign === "center" && "es:justify-items-center",
                         innerContentAlign === "end" && "es:justify-items-end",
@@ -278,8 +256,8 @@ const MiniResponsive = (props) => {
                             offset: 7.5,
                             arrow: true,
                             text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-96 es:p-1", children: [
-                              /* @__PURE__ */ jsx("span", { className: "es:block es:font-semibold", children: breakpointUiData?.[realBreakpointName]?.label ?? upperFirst(realBreakpointName) }),
-                              /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
+                              /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_180,"wght"_500] es:text-base es:leading-none es:text-surface-600', children: breakpointUiData?.[realBreakpointName]?.label ?? upperFirst(realBreakpointName) }),
+                              /* @__PURE__ */ jsxs("span", { className: 'es:block es:text-balance es:tabular-nums es:font-variation-["wdth"_60,"wght"_300] es:text-surface-500 es:mt-1', children: [
                                 !isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
                                   !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(__("Applied when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[realBreakpointName]),
                                   belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
@@ -299,8 +277,8 @@ const MiniResponsive = (props) => {
                                   typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint?.replace("max-", "")])
                                 ] })
                               ] }),
-                              typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: "es:mt-2 es:block es:font-medium es:italic", children: __("Not set", "eightshift-ui-components") }),
-                              typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-2", children: [
+                              typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: 'es:mt-2 es:block es:font-variation-["wdth"_100,"YTLC"_520,"wght"_350,"slnt"_-10]', children: __("Not set", "eightshift-ui-components") }),
+                              typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-5", children: [
                                 !isDesktopFirst && /* @__PURE__ */ jsx(
                                   BreakpointPreview,
                                   {
@@ -369,10 +347,7 @@ const MiniResponsive = (props) => {
                             children: /* @__PURE__ */ jsx(
                               "div",
                               {
-                                className: clsx(
-                                  "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:p-0.5 es:shadow-sm es:transition-colors es:icon:size-5",
-                                  typeof value[breakpoint] !== "undefined" ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"
-                                ),
+                                className: clsx("es:transition-colors es:icon:size-6 es:mx-0.5", typeof value[breakpoint] !== "undefined" ? "es:text-surface-600" : "es:text-surface-300"),
                                 children: icons?.[breakpointUiData?.[realBreakpointName]?.icon] ?? breakpointUiData?.[realBreakpointName]?.icon ?? icons?.[`screen${upperFirst(realBreakpointName)}`]
                               }
                             )
@@ -413,6 +388,7 @@ const MiniResponsive = (props) => {
                   {
                     className: clsx(
                       "es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                      "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25",
                       innerContentAlign === "start" && "es:justify-items-start",
                       innerContentAlign === "center" && "es:justify-items-center",
                       innerContentAlign === "end" && "es:justify-items-end",
@@ -436,15 +412,15 @@ const MiniResponsive = (props) => {
                   "_default-desktop-first"
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "es:grid es:grid-cols-[1fr_auto_1fr] es:gap-x-1 es:px-1", children: [
-                /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(ButtonGroup, { className: clsx("es:mx-2 es:mt-3", "es:w-fill es:grid es:grid-cols-2", noModeSelect ? "es:mb-2" : "es:mb-0.5"), children: [
+                /* @__PURE__ */ jsx("div", { className: clsx("es:bg-white/50 es:inset-ring es:p-1.5 es:inset-ring-surface-200/60 es:rounded-tl-2xl es:rounded-sm", noModeSelect && "es:rounded-bl-2xl"), children: /* @__PURE__ */ jsx(
                   TriggeredPopover,
                   {
                     triggerButtonLabel: __("Responsive preview", "eightshift-ui-components"),
                     triggerButtonProps: {
                       disabled: !Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined"),
                       type: "ghost",
-                      className: "es:my-1"
+                      className: "es:w-fill"
                     },
                     children: /* @__PURE__ */ jsx(
                       ResponsivePreview,
@@ -459,16 +435,8 @@ const MiniResponsive = (props) => {
                       }
                     )
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  Spacer,
-                  {
-                    className: "es:*:bg-secondary-200!",
-                    vertical: true,
-                    border: true
-                  }
-                ),
-                /* @__PURE__ */ jsx(
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: clsx("es:bg-white/50 es:inset-ring es:p-1.5 es:inset-ring-surface-200/60 es:rounded-sm es:rounded-tr-2xl", noModeSelect && "es:rounded-br-2xl"), children: /* @__PURE__ */ jsx(
                   Button,
                   {
                     icon: icons.clearAlt,
@@ -481,11 +449,34 @@ const MiniResponsive = (props) => {
                       onChange(newValue);
                     },
                     type: "ghost",
-                    className: "es:my-1 es:justify-center",
-                    children: __("Clear all overrides", "eightshift-ui-components")
+                    className: "es:w-fill",
+                    children: __("Clear overrides", "eightshift-ui-components")
                   }
-                )
-              ] })
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                OptionSelect,
+                {
+                  hidden: noModeSelect,
+                  icon: icons.responsiveOverridesAlt3Fill,
+                  label: __("Breakpoint mode", "eightshift-ui-components"),
+                  value: isDesktopFirst,
+                  onChange: (newMode) => {
+                    onChange({
+                      _default: value["_default"],
+                      _desktopFirst: newMode
+                    });
+                  },
+                  options: [
+                    { label: __("Mobile-first", "eightshift-ui-components"), subtitle: __("Default", "eightshift-ui-components"), value: false },
+                    { label: __("Desktop-first", "eightshift-ui-components"), value: true }
+                  ],
+                  wrapperProps: { triggerProps: { type: "simple", className: "es:grow" } },
+                  type: "menu",
+                  inline: true,
+                  className: "es:pl-3 es:mx-2 es:mb-2 es:bg-white/50 es:inset-ring es:p-1.5 es:inset-ring-surface-200/60 es:rounded-t-sm es:rounded-b-2xl"
+                }
+              )
             ]
           }
         )

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

@@ -3,10 +3,9 @@ import { useState } from "react";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/es-dash.js";
-import "../../sha256-C56UDWfQ.js";
 import { icons } from "../../icons/icons.js";
 import { Button } from "../button/button.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";

package/dist/components/responsive/responsive.js

@@ -3,10 +3,9 @@ import { useState } from "react";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/es-dash.js";
-import "../../sha256-C56UDWfQ.js";
 import { icons } from "../../icons/icons.js";
 import { Menu, MenuSectionHeader, MenuItem, MenuSeparator, SubMenuItem } from "../menu/menu.js";
 import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
@@ -119,18 +118,18 @@ const Responsive = (props) => {
       DecorativeTooltip,
       {
         placement: "left",
-        className: "es:p-3",
+        className: "es:p-4! es:rounded-2xl!",
         theme: "light",
         offset: 7.5,
         arrow: true,
         text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-64 es:p-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "es:block es:text-balance es:font-semibold es:tabular-nums", children: __("Default", "eightshift-ui-components") }),
-          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
+          /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_180,"wght"_500] es:text-base es:leading-none es:text-surface-600', children: __("Default", "eightshift-ui-components") }),
+          /* @__PURE__ */ jsxs("span", { className: 'es:block es:text-balance es:tabular-nums es:font-variation-["wdth"_60,"wght"_300] es:text-surface-500 es:mt-1', children: [
             !firstMobileFirstOverride && !lastDesktopFirstOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
             firstMobileFirstOverride && !isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[firstMobileFirstOverride] - 1),
             lastDesktopFirstOverride && isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[lastDesktopFirstOverride.replace("max-", "")])
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "es:mx-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-5", children: [
             firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
               BreakpointPreview,
               {
@@ -173,7 +172,7 @@ const Responsive = (props) => {
             )
           ] })
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:border-accent-500/10 es:bg-accent-50 es:p-0.5 es:text-accent-800 es:shadow-sm es:shadow-accent-600/25 es:icon:size-5", children: icons?.[overrideIcon] ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
+        children: /* @__PURE__ */ jsx("div", { className: "es:icon:size-6 es:mx-0.5 es:text-accent-700", children: icons?.[overrideIcon] ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
       }
     );
   };
@@ -211,7 +210,7 @@ const Responsive = (props) => {
           /* @__PURE__ */ jsx(
             ToggleButton,
             {
-              icon: isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2,
+              icon: icons.responsiveOverridesAlt3Fill,
               onChange: () => setDetailsVisible(!detailsVisible),
               selected: detailsVisible,
               tooltip: detailsVisible ? __("Hide responsive overrides", "eightshift-ui-components") : __("Show responsive overrides", "eightshift-ui-components")
@@ -223,7 +222,7 @@ const Responsive = (props) => {
               "aria-label": __("Responsive options", "eightshift-ui-components"),
               tooltip: __("Responsive options", "eightshift-ui-components"),
               popoverProps: { placement: "bottom right" },
-              triggerProps: { className: "es:w-5.5 es:stroke-[1.25]" },
+              triggerProps: { className: "es:w-6 es:stroke-[1.25]" },
               triggerIcon: icons.dropdownCaretAlt,
               children: [
                 !noModeSelect && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -295,6 +294,7 @@ const Responsive = (props) => {
                       });
                       onChange(newValue);
                     },
+                    danger: true,
                     children: __("Clear all overrides", "eightshift-ui-components")
                   }
                 )
@@ -308,12 +308,13 @@ const Responsive = (props) => {
           "div",
           {
             className: clsx(
-              "es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-end] es:duration-150",
+              "es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-end] es:duration-200",
+              detailsVisible && "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25",
               innerContentAlign === "start" && "es:justify-items-start",
               innerContentAlign === "center" && "es:justify-items-center",
               innerContentAlign === "end" && "es:justify-items-end",
               innerContentAlign === "stretch" && "es:justify-items-stretch",
-              detailsVisible ? "es:mb-2 es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
+              detailsVisible ? "es:mb-0.5 es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
             ),
             children: [
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
@@ -335,7 +336,8 @@ const Responsive = (props) => {
           AnimatedVisibility,
           {
             className: clsx(
-              "es:mb-2 es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+              "es:mb-0.5 es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+              "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25",
               innerContentAlign === "start" && "es:justify-items-start",
               innerContentAlign === "center" && "es:justify-items-center",
               innerContentAlign === "end" && "es:justify-items-end",
@@ -363,7 +365,7 @@ const Responsive = (props) => {
           AnimatedVisibility,
           {
             visible: detailsVisible,
-            className: "es:space-y-2",
+            className: "es:space-y-0.5",
             children: breakpointsToMap.map((breakpoint, i) => {
               const realBreakpointName = breakpoint.replace("max-", "");
               const filterBreakpoints = isDesktopFirst ? [...breakpointsToMap, "_default"] : ["_default", ...breakpointsToMap];
@@ -374,6 +376,9 @@ const Responsive = (props) => {
                 {
                   className: clsx(
                     "es:grid es:grid-cols-[minmax(0,auto)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                    "es:bg-white/50 es:p-1.5 es:rounded-sm es:inset-ring es:inset-ring-surface-200/60",
+                    !isDesktopFirst && "es:last:rounded-b-2xl",
+                    isDesktopFirst && "es:first:rounded-t-2xl",
                     innerContentAlign === "start" && "es:justify-items-start",
                     innerContentAlign === "center" && "es:justify-items-center",
                     innerContentAlign === "end" && "es:justify-items-end",
@@ -385,11 +390,12 @@ const Responsive = (props) => {
                       {
                         placement: "left",
                         theme: "light",
+                        className: "es:p-4! es:rounded-2xl!",
                         offset: 7.5,
                         arrow: true,
                         text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-96 es:p-1", children: [
-                          /* @__PURE__ */ jsx("span", { className: "es:block es:font-semibold", children: breakpointUiData?.[realBreakpointName]?.label ?? upperFirst(realBreakpointName) }),
-                          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
+                          /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_180,"wght"_500] es:text-base es:leading-none es:text-surface-600', children: breakpointUiData?.[realBreakpointName]?.label ?? upperFirst(realBreakpointName) }),
+                          /* @__PURE__ */ jsxs("span", { className: 'es:block es:text-balance es:tabular-nums es:font-variation-["wdth"_60,"wght"_300] es:text-surface-500 es:mt-1', children: [
                             !isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
                               !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(__("Applied when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[realBreakpointName]),
                               belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
@@ -409,8 +415,8 @@ const Responsive = (props) => {
                               typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint?.replace("max-", "")])
                             ] })
                           ] }),
-                          typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: "es:mt-2 es:block es:font-medium es:italic", children: __("Not set", "eightshift-ui-components") }),
-                          typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-2", children: [
+                          typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: 'es:mt-2 es:block es:font-variation-["wdth"_100,"YTLC"_520,"wght"_350,"slnt"_-10]', children: __("Not set", "eightshift-ui-components") }),
+                          typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-5", children: [
                             !isDesktopFirst && /* @__PURE__ */ jsx(
                               BreakpointPreview,
                               {
@@ -476,16 +482,7 @@ const Responsive = (props) => {
                             )
                           ] })
                         ] }),
-                        children: /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: clsx(
-                              "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:p-0.5 es:shadow-sm es:transition-colors es:icon:size-5",
-                              typeof value[breakpoint] !== "undefined" ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"
-                            ),
-                            children: icons?.[breakpointUiData?.[realBreakpointName]?.icon] ?? breakpointUiData?.[realBreakpointName]?.icon ?? icons?.[`screen${upperFirst(realBreakpointName)}`]
-                          }
-                        )
+                        children: /* @__PURE__ */ jsx("div", { className: clsx("es:transition-colors es:icon:size-6 es:mx-0.5", typeof value[breakpoint] !== "undefined" ? "es:text-surface-600" : "es:text-surface-300"), children: icons?.[breakpointUiData?.[realBreakpointName]?.icon] ?? breakpointUiData?.[realBreakpointName]?.icon ?? icons?.[`screen${upperFirst(realBreakpointName)}`] })
                       }
                     ),
                     children({
@@ -525,11 +522,12 @@ const Responsive = (props) => {
           {
             className: clsx(
               "es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-start] es:duration-150",
+              detailsVisible && "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25 es:transition-plus",
               innerContentAlign === "start" && "es:justify-items-start",
               innerContentAlign === "center" && "es:justify-items-center",
               innerContentAlign === "end" && "es:justify-items-end",
               innerContentAlign === "stretch" && "es:justify-items-stretch",
-              detailsVisible ? "es:mt-2! es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
+              detailsVisible ? "es:mt-0.5 es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
             ),
             children: [
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
@@ -552,6 +550,7 @@ const Responsive = (props) => {
           {
             className: clsx(
               "es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2 es:pt-1",
+              "es:bg-white/50 es:p-1.5 es:rounded-sm es:first:rounded-t-2xl es:last:rounded-b-2xl es:inset-ring es:inset-ring-accent-600/25",
               innerContentAlign === "start" && "es:justify-items-start",
               innerContentAlign === "center" && "es:justify-items-center",
               innerContentAlign === "end" && "es:justify-items-end",

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

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { upperFirst } from "../../utilities/es-dash.js";
-import "../../sha256-C56UDWfQ.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";

package/dist/components/rich-label/rich-label.js

@@ -55,20 +55,20 @@ const RichLabel = (props) => {
   const ComponentToRender = as ?? "div";
   if (contentsOnly) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5", !noColor && "es:text-slate-500", iconClassName), children: icon }),
+      icon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5", !noColor && "es:text-secondary-500", iconClassName), children: icon }),
       label && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance", !noColor && "es:text-secondary-800", labelClassName), children: label }),
-      subtitle && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance es:text-xs es:not-contrast-more:opacity-65", !noColor && "es:text-secondary-800", subtitleClassName), children: subtitle })
+      subtitle && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance es:text-xs es:not-contrast-more:opacity-65", !noColor && "es:text-secondary-700", subtitleClassName), children: subtitle })
     ] });
   }
   return /* @__PURE__ */ jsxs(
     ComponentToRender,
     {
-      className: clsx("es:flex es:items-center es:gap-2 es:text-sm", !noColor && "es:text-secondary-800 es:[&>span>svg]:text-slate-500", fullWidth && "es:grow", className),
+      className: clsx("es:flex es:items-center es:gap-1.75 es:text-sm", !noColor && "es:text-secondary-700 es:any-icon:text-secondary-500", fullWidth && "es:grow", className),
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5 es:shrink-0", noColor && "es:not-contrast-more:opacity-80", iconClassName), children: icon }),
         (label || subtitle) && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-start es:text-balance es:text-start", inlineSubtitle ? "es:gap-1.5" : "es:flex-col", labelSubtitleWrapClassName), children: [
-          label && /* @__PURE__ */ jsx("span", { className: labelClassName, children: label }),
-          subtitle && /* @__PURE__ */ jsx("span", { className: clsx(!fullSizeSubtitle && "es:text-xs", "es:not-contrast-more:opacity-65", subtitleClassName), children: subtitle })
+          label && /* @__PURE__ */ jsx("span", { className: clsx('es:font-variation-["wdth"_120,"wght"_400]', labelClassName), children: label }),
+          subtitle && /* @__PURE__ */ jsx("span", { className: clsx(!fullSizeSubtitle && "es:text-12", "es:not-contrast-more:opacity-65", subtitleClassName), children: subtitle })
         ] })
       ]
     }