@eightshift/ui-components 6.2.0 → 6.3.0

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

@@ -1,16 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import $dbSRa$react__default, { forwardRef, useRef, createContext } from "react";
 import "../../default-i18n-CnQeC5Pl.js";
-import { a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $3985021b0ad6602f$export$37fb8590cf2c088c, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-B4X6-x6r.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-CFnNdpNZ.js";
+import { a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $3985021b0ad6602f$export$37fb8590cf2c088c, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BG9DaxYN.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-DtRmB6b8.js";
 import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$df3a06d6289f983e } from "../../utils-Cr3pLd9c.js";
 import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-BPG0hKfB.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-CjFEHSfr.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-iUFQCK8m.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CTkI-U9a.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CsygZKz9.js";
 import { ButtonGroup, Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
@@ -270,14 +270,14 @@ const NumberPicker = ({
                 "span",
                 {
                   slot: "prefix",
-                  className: 'es:mr-1 es:select-none es:leading-none es:text-current/60 es:font-variation-["wdth"_100,"wght"_400,"slnt"_-1] es:group-focus-within:text-surface-500',
+                  className: 'es:mr-1 es:-translate-y-px es:select-none es:leading-none es:text-current/65 es:font-variation-["wdth"_76,"wght"_325,"slnt"_-2,"ROND"_100] es:group-focus-within:text-surface-500',
                   children: prefix
                 }
               ),
               /* @__PURE__ */ jsx(
                 $3985021b0ad6602f$export$f5b8910cec6cf069,
                 {
-                  className: 'es:font-variation-["wdth"_84,"YTLC"_520,"wght"_325,"slnt"_0,"YTFI"_788] es:placeholder-shown:font-variation-["wdth"_100,"YTLC"_500,"wght"_250,"slnt"_-8] es:any-focus:outline-hidden! es:p-px! es:border-none! es:shadow-none! es:bg-transparent es:text-13!',
+                  className: 'es:font-variation-["wdth"_80,"wght"_325,"slnt"_0,"ROND"_100] es:placeholder-shown:font-variation-["wdth"_60,"wght"_300,"slnt"_-10,"ROND"_0] es:any-focus:outline-hidden! es:p-px! es:border-none! es:shadow-none! es:bg-transparent es:text-13!',
                   placeholder,
                   style: {
                     width: fixedWidth ? `calc(${fixedWidth}ch + 2px)` : `calc(${min < 0 ? "1ch + " : "0.75ch + "}${Math.max((max ?? 1e3)?.toString()?.length, (placeholder ?? "")?.length)} * 1ch)`
@@ -327,7 +327,7 @@ const NumberPicker = ({
                 "span",
                 {
                   slot: "suffix",
-                  className: 'es:ml-1 es:select-none es:leading-none es:text-current/60 es:font-variation-["wdth"_100,"wght"_400,"slnt"_-1] es:group-focus-within:text-surface-500',
+                  className: 'es:ml-1 es:-translate-y-px es:select-none es:leading-none es:text-current/60 es:font-variation-["wdth"_76,"wght"_325,"slnt"_-2,"ROND"_100] es:group-focus-within:text-surface-500',
                   children: suffix
                 }
               )

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

@@ -39,9 +39,9 @@ const OptionsPanel = (props) => {
           icon,
           label: title,
           subtitle,
-          className: clsx("es:shrink-0 es:text-secondary-700 es:px-1 es:pt-5 es:pb-1"),
-          labelClassName: "es:text-lg es:leading-tight",
-          subtitleClassName: "es:text-base es:leading-tight",
+          className: clsx("es:shrink-0 es:text-surface-700 es:px-1 es:pt-5 es:pb-1"),
+          labelClassName: "es:text-base es:leading-tight",
+          subtitleClassName: "es:text-13 es:leading-tight",
           noColor: true
         }
       ),
@@ -116,7 +116,7 @@ const OptionsPanelHeader = ({ children, sticky, title, className, actions, level
       /* @__PURE__ */ jsx(
         $5cb03073d3f54797$export$a8a3e93435678ff9,
         {
-          className: 'es:text-3xl es:text-surface-800 es:font-variation-["wdth"_180,"YTLC"_540,"wght"_300] es:m-0!',
+          className: 'es:text-2xl es:text-surface-800 es:font-variation-["wdth"_100,"wght"_450,"ROND"_100] es:m-0!',
           level,
           children: title
         }
@@ -166,12 +166,12 @@ const OptionsPanelIntro = ({ icon, title, subtitle, className, iconClassName, le
         /* @__PURE__ */ jsx(
           $5cb03073d3f54797$export$a8a3e93435678ff9,
           {
-            className: 'es:text-2xl es:my-0! es:text-accent-900 es:font-variation-["wdth"_180,"YTLC"_540,"wght"_350]',
+            className: 'es:text-3xl es:my-0! es:text-accent-900 es:font-variation-["wdth"_50,"wght"_325,"slnt"_-4,"ROND"_100]',
             level,
             children: title
           }
         ),
-        subtitle && /* @__PURE__ */ jsx("p", { className: 'es:text-13 es:my-0! es:text-surface-500 es:mt-0.75 es:font-variation-["wdth"_90,"YTLC"_560,"wght"_325]', children: subtitle }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: 'es:text-13 es:my-0! es:text-surface-500 es:mt-0.75 es:font-variation-["wdth"_95,"wght"_275]', children: subtitle }),
         icon && cloneElement(icon, { className: clsx("es:absolute es:-top-2 es:right-2.5 es:rotate-12 es:text-surface-500/10 es:size-18", iconClassName) })
       ]
     }

package/dist/components/popover/popover.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, g as $de32f1b87079253c$export$3ddf2d174ce01153, h as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-DDfABlp4.js";
+import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, g as $de32f1b87079253c$export$3ddf2d174ce01153, h as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-DTIxSDhz.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { Button } from "../button/button.js";
@@ -108,18 +108,19 @@ const Popover = (props) => {
       crossOffset,
       containerPadding,
       className: ({ isEntering, isExiting }) => clsx(
+        "es:font-sans",
         "es:rounded-2xl es:bg-linear-to-br es:from-surface-50/85 es:to-surface-50/85 es:inset-ring es:inset-ring-surface-500/15 es:shadow-xl es:outline-hidden",
         "es:backdrop-blur-xl es:backdrop-brightness-110 es:backdrop-saturate-125",
         "es:inset-shadow-xs es:inset-shadow-white/50",
         "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
         "es:placement-left:origin-right es:placement-right:origin-left",
-        "es:motion-duration-250 es:motion-ease-spring-bouncy",
-        isEntering && "es:*:pointer-events-none",
+        "es:motion-ease-spring-bouncy",
+        isEntering && "es:*:pointer-events-none es:motion-duration-300",
         "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
-        isEntering && "es:motion-scale-x-in-95 es:motion-scale-y-in-85 es:motion-opacity-in-0",
-        isEntering && "es:placement-top:motion-translate-y-in-[0.5rem] es:placement-bottom:motion-translate-y-in-[-0.5rem]",
-        isExiting && "es:motion-scale-x-out-95 es:motion-scale-y-out-85 es:motion-opacity-out-0",
-        isExiting && "es:placement-top:motion-translate-y-out-[0.5rem] es:placement-bottom:motion-translate-y-out-[-0.5rem]",
+        isEntering && "es:motion-scale-x-in-95 es:motion-scale-y-in-90 es:motion-opacity-in-0",
+        isEntering && "es:placement-top:motion-translate-y-in-[0.25rem] es:placement-bottom:motion-translate-y-in-[-0.25rem]",
+        isExiting && "es:motion-scale-x-out-95 es:motion-scale-y-out-90 es:motion-opacity-out-0 es:motion-duration-200",
+        isExiting && "es:placement-top:motion-translate-y-out-[0.25rem] es:placement-bottom:motion-translate-y-out-[-0.25rem]",
         wrapperClassName
       ),
       style,

package/dist/components/radio/radio.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { a as $b6c3ddc6086f204d$export$d7b12c4107be0d61, $ as $b6c3ddc6086f204d$export$a98f0dcb43a68a25 } from "../../RadioGroup-CjCAbUr4.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
+import { a as $b6c3ddc6086f204d$export$d7b12c4107be0d61, $ as $b6c3ddc6086f204d$export$a98f0dcb43a68a25 } from "../../RadioGroup-DCeiLxLK.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RichLabel } from "../rich-label/rich-label.js";

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

@@ -13,6 +13,8 @@ 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-CjFEHSfr.js";
+import { ContainerGroup, Container } from "../base-control/container.js";
+import { HStack } from "../layout/hstack.js";
 /**
  * A compact, inline version of `Responsive`. Allows the user to set different values for different breakpoints.
  *
@@ -112,13 +114,13 @@ const MiniResponsive = (props) => {
       DecorativeTooltip,
       {
         placement: "left",
-        className: "es:p-3",
+        className: "es:p-4! es:rounded-2xl! es:max-w-96!",
         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: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: [
+        text: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_95,"wght"_475,"ROND"_100] es:text-14 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"_64,"wght"_275,"ROND"_50,"slnt"_-2] 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-", "")])
@@ -201,7 +203,7 @@ const MiniResponsive = (props) => {
             className: "es:min-w-80 es:p-0!",
             wrapperClassName: "es:rounded-3xl",
             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__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { className: 'es:px-4 es:pt-3 es:pb-0.5 es:text-center es:block es:text-base es:text-surface-600 es:font-variation-["wdth"_105,"wght"_425,"ROND"_100]', 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",
@@ -253,11 +255,12 @@ const MiniResponsive = (props) => {
                           {
                             placement: "left",
                             theme: "light",
+                            className: "es:p-4! es:rounded-2xl! es:max-w-96!",
                             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-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: [
+                            text: /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_95,"wght"_475,"ROND"_100] es:text-14 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"_64,"wght"_275,"ROND"_50,"slnt"_-2] 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(
@@ -277,7 +280,7 @@ 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-variation-["wdth"_100,"YTLC"_520,"wght"_350,"slnt"_-10]', children: __("Not set", "eightshift-ui-components") }),
+                              typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: 'es:mt-2 es:text-sm es:leading-none es:block es:font-variation-["wdth"_75,"wght"_300,"slnt"_-5]', 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,
@@ -412,69 +415,77 @@ const MiniResponsive = (props) => {
                   "_default-desktop-first"
                 )
               ] }),
-              /* @__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:w-fill"
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      ResponsivePreview,
+              /* @__PURE__ */ jsxs(
+                ContainerGroup,
+                {
+                  wrapClassName: "es:m-2 es:mt-4",
+                  label: __("Breakpoints", "eightshift-ui-components"),
+                  children: [
+                    /* @__PURE__ */ jsx(Container, { lessSpaceEnd: true, children: /* @__PURE__ */ jsx(
+                      BaseControl,
                       {
-                        value,
-                        isDesktopFirst,
-                        breakpoints,
-                        desktopFirstBreakpoints,
-                        options,
-                        breakpointData,
-                        breakpointUiData
+                        label: __("Actions", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsxs(HStack, { children: [
+                          /* @__PURE__ */ jsx(
+                            TriggeredPopover,
+                            {
+                              triggerButtonLabel: __("Preview", "eightshift-ui-components"),
+                              triggerButtonProps: {
+                                disabled: !Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined")
+                              },
+                              children: /* @__PURE__ */ jsx(
+                                ResponsivePreview,
+                                {
+                                  value,
+                                  isDesktopFirst,
+                                  breakpoints,
+                                  desktopFirstBreakpoints,
+                                  options,
+                                  breakpointData,
+                                  breakpointUiData
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              icon: icons.clearAlt,
+                              disabled: !Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined"),
+                              onPress: () => {
+                                const newValue = { ...value };
+                                [...breakpoints, ...desktopFirstBreakpoints].forEach((breakpoint) => {
+                                  delete newValue[breakpoint];
+                                });
+                                onChange(newValue);
+                              },
+                              children: __("Clear overrides", "eightshift-ui-components")
+                            }
+                          )
+                        ] })
                       }
-                    )
-                  }
-                ) }),
-                /* @__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,
-                    disabled: !Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined"),
-                    onPress: () => {
-                      const newValue = { ...value };
-                      [...breakpoints, ...desktopFirstBreakpoints].forEach((breakpoint) => {
-                        delete newValue[breakpoint];
-                      });
-                      onChange(newValue);
-                    },
-                    type: "ghost",
-                    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"
+                    ) }),
+                    /* @__PURE__ */ jsx(Container, { lessSpaceEnd: true, children: /* @__PURE__ */ jsx(
+                      OptionSelect,
+                      {
+                        hidden: noModeSelect,
+                        label: __("Mode", "eightshift-ui-components"),
+                        value: isDesktopFirst,
+                        onChange: (newMode) => {
+                          onChange({
+                            _default: value["_default"],
+                            _desktopFirst: newMode
+                          });
+                        },
+                        options: [
+                          { icon: icons.responsiveOverridesAltFill, label: __("Mobile-first", "eightshift-ui-components"), value: false },
+                          { icon: icons.responsiveOverridesAlt2Fill, label: __("Desktop-first", "eightshift-ui-components"), value: true }
+                        ],
+                        inline: true
+                      }
+                    ) })
+                  ]
                 }
               )
             ]

package/dist/components/responsive/responsive.js

@@ -7,13 +7,13 @@ import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 import { icons } from "../../icons/icons.js";
-import { Menu, MenuSectionHeader, MenuItem, MenuSeparator, SubMenuItem } from "../menu/menu.js";
+import { Menu, MenuSectionHeader, MenuSeparator, SubMenuItem, MenuItem } from "../menu/menu.js";
 import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
 import { Button, ButtonGroup } from "../button/button.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";
 import { BaseControl } from "../base-control/base-control.js";
+import { OptionSelect } from "../option-select/option-select.js";
 /**
  * A component that allows the user to set different values for different breakpoints.
  *
@@ -118,18 +118,18 @@ const Responsive = (props) => {
       DecorativeTooltip,
       {
         placement: "left",
-        className: "es:p-4! es:rounded-2xl!",
+        className: "es:p-4! es:rounded-2xl! es:max-w-96!",
         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: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: [
+        text: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_95,"wght"_475,"ROND"_100] es:text-14 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"_64,"wght"_275,"ROND"_50,"slnt"_-2] 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 es:mt-5", children: [
+          (firstMobileFirstOverride && !isDesktopFirst || lastDesktopFirstOverride && isDesktopFirst) && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-5", children: [
             firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
               BreakpointPreview,
               {
@@ -226,38 +226,22 @@ const Responsive = (props) => {
               triggerIcon: icons.dropdownCaretAlt,
               children: [
                 !noModeSelect && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(MenuSectionHeader, { children: __("Breakpoint mode", "eightshift-ui-components") }),
+                  /* @__PURE__ */ jsx(MenuSectionHeader, { children: __("Mode", "eightshift-ui-components") }),
                   /* @__PURE__ */ jsx(
-                    MenuItem,
+                    OptionSelect,
                     {
-                      selected: !isDesktopFirst,
-                      onClick: () => {
+                      value: isDesktopFirst,
+                      onChange: (newMode) => {
                         onChange({
                           _default: value["_default"],
-                          _desktopFirst: false
+                          _desktopFirst: newMode
                         });
                       },
-                      children: /* @__PURE__ */ jsx(
-                        RichLabel,
-                        {
-                          label: __("Mobile-first", "eightshift-ui-components"),
-                          subtitle: __("Default", "eightshift-ui-components"),
-                          noColor: true
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    MenuItem,
-                    {
-                      selected: isDesktopFirst,
-                      onClick: () => {
-                        onChange({
-                          _default: value["_default"],
-                          _desktopFirst: true
-                        });
-                      },
-                      children: __("Desktop-first", "eightshift-ui-components")
+                      options: [
+                        { endIcon: icons.responsiveOverridesAltFill, label: __("Mobile-first", "eightshift-ui-components"), value: false },
+                        { endIcon: icons.responsiveOverridesAlt2Fill, label: __("Desktop-first", "eightshift-ui-components"), value: true }
+                      ],
+                      type: "standaloneMenuItems"
                     }
                   ),
                   /* @__PURE__ */ jsx(MenuSeparator, {})
@@ -267,7 +251,7 @@ const Responsive = (props) => {
                   {
                     manualWidth: true,
                     popoverProps: { className: "es:max-w-full!" },
-                    trigger: /* @__PURE__ */ jsx(MenuItem, { icon: icons.previewResponsive, children: __("Responsive preview", "eightshift-ui-components") }),
+                    trigger: /* @__PURE__ */ jsx(MenuItem, { icon: icons.previewResponsive, children: __("Breakpoint preview", "eightshift-ui-components") }),
                     children: /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(
                       ResponsivePreview,
                       {
@@ -295,7 +279,7 @@ const Responsive = (props) => {
                       onChange(newValue);
                     },
                     danger: true,
-                    children: __("Clear all overrides", "eightshift-ui-components")
+                    children: __("Clear overrides", "eightshift-ui-components")
                   }
                 )
               ]
@@ -390,12 +374,12 @@ const Responsive = (props) => {
                       {
                         placement: "left",
                         theme: "light",
-                        className: "es:p-4! es:rounded-2xl!",
+                        className: "es:p-4! es:rounded-2xl! es:max-w-96!",
                         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-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: [
+                        text: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("span", { className: 'es:block es:font-variation-["wdth"_95,"wght"_475,"ROND"_100] es:text-14 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"_64,"wght"_275,"ROND"_50,"slnt"_-2] 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(
@@ -415,7 +399,7 @@ 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-variation-["wdth"_100,"YTLC"_520,"wght"_350,"slnt"_-10]', children: __("Not set", "eightshift-ui-components") }),
+                          typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: 'es:mt-2 es:text-sm es:leading-none es:block es:font-variation-["wdth"_75,"wght"_300,"slnt"_-5]', 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,

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

@@ -99,7 +99,7 @@ const ResponsivePreview = (props) => {
         RichLabel,
         {
           icon: icons.previewResponsive,
-          label: __("Responsive preview", "eightshift-ui-components")
+          label: __("Breakpoint preview", "eightshift-ui-components")
         }
       ),
       /* @__PURE__ */ jsx("span", { className: "es:ml-auto es:select-none es:rounded es:bg-secondary-100 es:px-1 es:py-0.5 es:text-xs es:text-secondary-500", children: isDesktopFirst ? __("Desktop-first", "eightshift-ui-components") : __("Mobile-first", "eightshift-ui-components") })

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

@@ -53,19 +53,21 @@ const RichLabel = (props) => {
     return null;
   }
   const ComponentToRender = as ?? "div";
+  const labelBaseClassName = 'es:font-variation-["wdth"_100,"wght"_330,"ROND"_15]';
+  const subtitleBaseClassName = 'es:font-variation-["wdth"_90,"wght"_365,"ROND"_85,"slnt"_-1]';
   if (contentsOnly) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       icon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5 es:not-contrast-more:opacity-85", iconClassName), children: icon }),
-      label && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance", labelClassName), children: label }),
-      subtitle && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance es:text-xs es:not-contrast-more:opacity-65", subtitleClassName), children: subtitle }),
+      label && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance", labelBaseClassName, labelClassName), children: label }),
+      subtitle && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance es:text-xs es:not-contrast-more:opacity-65", subtitleBaseClassName, subtitleClassName), children: subtitle }),
       endIcon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5 es:not-contrast-more:opacity-85 es:ml-auto", iconClassName), children: endIcon })
     ] });
   }
   return /* @__PURE__ */ jsxs(ComponentToRender, { className: clsx("es:flex es:items-center es:gap-1.75 es:text-sm", fullWidth && "es:grow", className), children: [
     icon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5 es:shrink-0", "es:not-contrast-more:opacity-85", 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: 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 })
+      label && /* @__PURE__ */ jsx("span", { className: clsx(labelBaseClassName, labelClassName), children: label }),
+      subtitle && /* @__PURE__ */ jsx("span", { className: clsx(!fullSizeSubtitle && "es:text-12", subtitleBaseClassName, "es:not-contrast-more:opacity-65", subtitleClassName), children: subtitle })
     ] }),
     endIcon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5 es:shrink-0", "es:not-contrast-more:opacity-85 es:ml-auto", iconClassName), children: endIcon })
   ] });

package/dist/components/select/async-multi-select.js

@@ -2,14 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __, a as _n } from "../../default-i18n-CnQeC5Pl.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-BME59dt-.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-CFnNdpNZ.js";
-import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, i as $72a5793c14baf454$export$8b251419efc915eb } from "../../Dialog-DDfABlp4.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-B4X6-x6r.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$dca12b0bb56e4fc } from "../../ListBox-ByPsaVVK.js";
-import { g as getGroupedOptions, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-HdRrpnhs.js";
-import { $ as $e1995378a142960e$export$fb8073518f34e6ec } from "../../SelectionManager-iru59gc4.js";
+import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-B_yKFXRk.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-DtRmB6b8.js";
+import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, i as $72a5793c14baf454$export$8b251419efc915eb } from "../../Dialog-DTIxSDhz.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BG9DaxYN.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$dca12b0bb56e4fc } from "../../ListBox-DXFyyj_r.js";
+import { g as getGroupedOptions, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-CNH8QfV9.js";
+import { $ as $e1995378a142960e$export$fb8073518f34e6ec } from "../../SelectionManager-B02LcxLr.js";
 import { useMemo, useRef, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-DAh4myol.js";
@@ -231,7 +231,7 @@ const AsyncMultiSelect = (props) => {
     }).filter(Boolean);
     onChange(selectedValues);
   };
-  const ref = useRef();
+  const ref = useRef(null);
   const currentValueKeys = value?.map((item) => item?.value ?? item);
   const buttonClass = cva("es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", {
     variants: {
@@ -413,10 +413,12 @@ const AsyncMultiSelect = (props) => {
                         slot: null
                       },
                       className: "es:grid es:grid-cols-1 es:grid-rows-[auto_minmax(0,1fr)] es:p-0!",
-                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip es:rounded-20!",
+                      wrapperClassName: "es:w-(--select-width) es:min-w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip es:rounded-20!",
                       hidden: noReorder || disabled || (value ?? [])?.length < 2,
+                      style: { "--select-width": ref.current ? `${ref.current.offsetWidth}px` : "var(--trigger-width)" },
+                      triggerRef: ref,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: 'es:text-base es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
+                        /* @__PURE__ */ jsx("span", { className: 'es:text-sm es:ml-3 es:mt-2 es:mb-1 es:font-variation-["wdth"_100,"wght"_325,"ROND"_100] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
                         /* @__PURE__ */ jsx(
                           DraggableList,
                           {
@@ -464,7 +466,8 @@ const AsyncMultiSelect = (props) => {
               $07b14b47974efb58$export$5b6b19405a83ff9d,
               {
                 className: ({ isEntering, isExiting }) => clsx(
-                  "es:w-(--trigger-width) es:min-w-72",
+                  "es:font-sans",
+                  "es:w-(--select-width) es:min-w-72",
                   "es:outline-hidden",
                   "es:rounded-b-xl es:rounded-t-3xl",
                   "es:overflow-clip es:grid es:grid-cols-1",
@@ -488,6 +491,7 @@ const AsyncMultiSelect = (props) => {
                 placement: "bottom left",
                 maxHeight: 260,
                 triggerRef: ref,
+                style: { "--select-width": ref.current ? `${ref.current.offsetWidth}px` : "var(--trigger-width)" },
                 children: /* @__PURE__ */ jsxs(
                   $d2f53cda644affe3$export$2f2b9559550c7bbc,
                   {