@eightshift/ui-components 5.6.0 → 6.0.0

package/dist/components/menu/menu.js

@@ -1,13 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-DcqCdD4k.js";
-import { $ as $3674c52c6b3c5bce$export$27d2ad3c5815583e, a as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, b as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, c as $3674c52c6b3c5bce$export$4b1545b4f2016d26, d as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-B8p4Ymh7.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { a as $3674c52c6b3c5bce$export$27d2ad3c5815583e, b as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, c as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, d as $3674c52c6b3c5bce$export$4b1545b4f2016d26, e as $431f98aba6844401$export$1ff3c3f08ae963c0, f as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-D8bjn-nh.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { icons } from "../../icons/icons.js";
 import { Button } from "../button/button.js";
 import { Popover } from "../popover/popover.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { cloneElement } from "react";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 /**
  * @typedef {import('../button/button').ButtonProps} ButtonProps
  * @typedef {import('../popover/popover').PopoverProps} PopoverProps
@@ -121,8 +120,12 @@ const Menu = (props) => {
           Popover,
           {
             "aria-label": ariaLabel,
+            popoverProps: {
+              maxHeight: Math.max(240, window.innerHeight * 0.42),
+              ...popoverProps
+            },
             ...popoverProps,
-            className: clsx("es:p-0! es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
+            className: clsx("es:p-1.5 es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
             wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverProps?.wrapperClassName),
             children: /* @__PURE__ */ jsx(
               $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
@@ -156,20 +159,11 @@ const Menu = (props) => {
  */
 const MenuSection = (props) => {
   const { children, label } = props;
-  return /* @__PURE__ */ jsxs(
-    $3674c52c6b3c5bce$export$4b1545b4f2016d26,
-    {
-      className: clsx(
-        "es:space-y-1 es:border-b es:border-b-secondary-200 es:last:border-b-0",
-        label && "es:pt-2 es:first:pt-2.5 es:last:pb-0",
-        !label && "es:has-[>_:only-child]:pb-0"
-      ),
-      children: [
-        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:ml-2.5 es:text-sm es:text-secondary-500", children: label }),
-        children
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MenuSectionHeader, { hidden: !label, children: label }),
+    /* @__PURE__ */ jsx($3674c52c6b3c5bce$export$4b1545b4f2016d26, { className: "es:flex es:flex-col es:gap-1", children }),
+    /* @__PURE__ */ jsx(MenuSeparator, { className: "es:last:hidden" })
+  ] });
 };
 /**
  * A menu separator.
@@ -180,8 +174,8 @@ const MenuSection = (props) => {
  *
  * @preserve
  */
-const MenuSeparator = () => {
-  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es:my-1 es:border-b es:border-secondary-300" });
+const MenuSeparator = ({ className }) => {
+  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: clsx("es:my-1.5 es:w-fill es:h-px es:bg-surface-500/15 es:mx-1.5 es:rounded-full", className) });
 };
 /**
  * A menu item.
@@ -238,18 +232,16 @@ const MenuItem = (props) => {
       "aria-label": ariaLabel,
       isDisabled: disabled,
       className: clsx(
-        "es:mx-1 es:mb-0.5 es:flex es:min-w-44 es:min-h-9.5 es:items-center es:gap-1.5",
-        "es:first:mt-1",
-        "es:last:mb-1",
-        "es:select-none es:rounded-xl es:py-1.5 es:px-2.5 es:text-sm es:transition",
+        "es:flex es:min-w-44 es:min-h-10 es:items-center es:gap-1.5",
+        "es:select-none es:rounded-xl es:py-1 es:px-3 es:text-sm es:transition",
         "es:any-focus:outline-hidden",
         "es:icon:shrink-0",
         !disabled && "es:focus-visible:inset-ring",
-        !disabled && !(danger || primary) && "es:hover:bg-secondary-950/5 es:focus-visible:inset-ring-secondary-950/10 es:focus-visible:bg-secondary-950/5 es:contrast-more:focus-visible:bg-accent-800",
+        !disabled && !(danger || primary) && "es:hover:bg-surface-600/5 es:focus-visible:inset-ring-secondary-950/10 es:focus-visible:bg-secondary-950/5 es:contrast-more:focus-visible:bg-accent-800",
         !disabled && danger && "es:hover:bg-red-500/5 es:focus-visible:inset-ring-red-600/30 es:focus-visible:bg-red-600/5 es:hover:text-red-900 es:focus-visible:text-red-950 es:contrast-more:focus-visible:bg-red-800",
-        !disabled && primary && "es:hover:bg-accent-500/5 es:focus-visible:inset-ring-accent-600/30 es:focus-visible:bg-accent-600/5 es:hover:text-accent-900 es:focus-visible:text-accent-950 es:contrast-more:focus-visible:bg-accent-700",
+        !disabled && primary && "es:hover:bg-accent-600/6 es:focus-visible:inset-ring-accent-600/20 es:focus-visible:bg-accent-600/5 es:hover:text-accent-900 es:focus-visible:text-accent-950 es:contrast-more:focus-visible:bg-accent-700",
         !disabled && "es:contrast-more:focus-visible:text-white! es:contrast-more:focus-visible:icon:text-white!",
-        disabled ? "es:text-secondary-400" : "es:text-secondary-800",
+        disabled ? "es:text-surface-400" : "es:text-surface-700",
         className
       ),
       onAction: onClick,
@@ -261,11 +253,11 @@ const MenuItem = (props) => {
             icon: itemIcon,
             label: children,
             subtitle,
-            iconClassName: clsx(danger && "es:not-contrast-more:icon:text-red-700!", primary && "es:not-contrast-more:icon:text-accent-600!"),
+            iconClassName: clsx(danger && "es:not-contrast-more:icon:text-red-700!", primary && "es:not-contrast-more:icon:text-accent-700!"),
             noColor: true
           }
         ),
-        shortcut && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:pl-2 es:text-[0.6875rem] es:tracking-tight es:text-secondary-400 es:contrast-more:text-current es:shrink-0", children: shortcut }),
+        shortcut && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:pl-2 es:text-[0.6875rem] es:tracking-tight es:text-surface-400 es:contrast-more:text-current es:shrink-0", children: shortcut }),
         endIcon && /* @__PURE__ */ jsx("div", { className: clsx("es:shrink-0 es:icon:shrink-0", !shortcut && "es:ml-auto es:pl-2"), children: endIcon })
       ]
     }
@@ -302,7 +294,7 @@ const SubMenuItem = (props) => {
   }
   return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
     cloneElement(trigger, {
-      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-500 es:contrast-more:text-current es:icon:size-3! es:icon:stroke-2!", children: icons.chevronRight })
+      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-surface-500 es:contrast-more:text-current es:icon:size-3! es:icon:stroke-2!", children: icons.chevronRight })
     }),
     /* @__PURE__ */ jsx(
       Popover,
@@ -310,7 +302,7 @@ const SubMenuItem = (props) => {
         "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
         offset: -1,
         ...popoverProps,
-        className: clsx("es:p-0! es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
+        className: clsx("es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
         children: /* @__PURE__ */ jsx(
           $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
           {
@@ -353,10 +345,10 @@ const MenuSectionHeader = (props) => {
     {
       ...props,
       className: clsx(
-        "es:mx-1 es:p-2.5 es:pb-1 es:flex es:min-w-44 es:items-center es:gap-1.5",
+        'es:mx-1 es:px-1 es:pt-1.5 es:pb-2 es:first:pt-2 es:flex es:min-w-44 es:items-center es:gap-1.5 es:font-variation-["wdth"_144,"wght"_350]',
         "es:select-none es:text-sm",
         "es:icon:shrink-0",
-        "es:text-secondary-500",
+        "es:text-surface-500/80",
         className
       ),
       isDisabled: true,

package/dist/components/modal/modal.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { h as $a11501f3d1d39e6c$export$ea8f71083e90600f, i as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, j as $337b884510726a0d$export$14c98a7594375490, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, m as $86ea4cb521eb2e37$export$2317d149ed6f78c4, n as $337b884510726a0d$export$c6fdb837b070b4ff, g as $de32f1b87079253c$export$2e1e1122cf0cba88, f as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-B8p4Ymh7.js";
-import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-B5aEynOM.js";
-import { n as $b5e257d569688ac6$export$535bd6ca7f90a273, b as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
+import { j as $a11501f3d1d39e6c$export$ea8f71083e90600f, k as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, l as $337b884510726a0d$export$14c98a7594375490, m as $5e3802645cc19319$export$1c3ebcada18427bf, n as $de32f1b87079253c$export$d2f961adcb0afbe, o as $86ea4cb521eb2e37$export$2317d149ed6f78c4, p as $337b884510726a0d$export$c6fdb837b070b4ff, h as $de32f1b87079253c$export$2e1e1122cf0cba88, g as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-D8bjn-nh.js";
+import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-BmRX4BRL.js";
+import { m as $b5e257d569688ac6$export$535bd6ca7f90a273, a as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, k as $df56164dff5785e2$export$4338b53315abf666, l as $5dc95899b306f630$export$c9058316764c140e, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DGpXyJOJ.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { c as $21f1aa98acb08317$export$c57958e35f31ed73, d as $cc38e7bd3fc7b213$export$2bb74740c4e19def } from "../../SelectionManager-D77bfEbg.js";
-import React__default, { useState, useEffect, forwardRef, useContext, createContext, useRef, useMemo } from "react";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-DDfa8khI.js";
+import { c as $21f1aa98acb08317$export$c57958e35f31ed73, d as $cc38e7bd3fc7b213$export$2bb74740c4e19def } from "../../SelectionManager-N8X7T_4D.js";
+import $dbSRa$react__default, { useState, useEffect, forwardRef, useContext, createContext, useRef, useMemo } from "react";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-DokC40S3.js";
 import { Button } from "../button/button.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-VUl-CuCv.js";
+import "../../react-jsx-parser.min-B_hvYYa1.js";
 import { HStack } from "../layout/hstack.js";
 let $5df64b3807dc15ee$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 function $5df64b3807dc15ee$export$d699905dd57c73ca() {
@@ -107,13 +107,13 @@ const $f3f84453ead64de5$export$2b77a92f1a5ad772 = /* @__PURE__ */ forwardRef(fun
       const invalidProps = Object.keys(props).filter((key) => invalidSet.has(key));
       console.warn(`This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(", ")}] should be placed on the ModalOverlay instead.`);
     }
-    return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalContent, {
+    return /* @__PURE__ */ $dbSRa$react__default.createElement($f3f84453ead64de5$var$ModalContent, {
       ...props,
       modalRef: ref
     }, props.children);
   }
   let { isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, onOpenChange, children, isEntering, isExiting, UNSTABLE_portalContainer, shouldCloseOnInteractOutside, ...otherProps } = props;
-  return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$export$8948f78d83984c69, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($f3f84453ead64de5$export$8948f78d83984c69, {
     isDismissable,
     isKeyboardDismissDisabled,
     isOpen,
@@ -123,7 +123,7 @@ const $f3f84453ead64de5$export$2b77a92f1a5ad772 = /* @__PURE__ */ forwardRef(fun
     isExiting,
     UNSTABLE_portalContainer,
     shouldCloseOnInteractOutside
-  }, /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalContent, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($f3f84453ead64de5$var$ModalContent, {
     ...otherProps,
     modalRef: ref
   }, children));
@@ -143,7 +143,7 @@ function $f3f84453ead64de5$var$ModalOverlayWithForwardRef(props, ref) {
   let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;
   let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
   if (!state.isOpen && !isExiting || isSSR) return null;
-  return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalOverlayInner, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($f3f84453ead64de5$var$ModalOverlayInner, {
     ...props,
     state,
     isExiting,
@@ -178,10 +178,10 @@ function $f3f84453ead64de5$var$ModalOverlayInner({ UNSTABLE_portalContainer, ...
     "--visual-viewport-height": viewport.height + "px",
     "--page-height": pageHeight !== void 0 ? pageHeight + "px" : void 0
   };
-  return /* @__PURE__ */ React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, {
     isExiting: props.isExiting,
     portalContainer: UNSTABLE_portalContainer
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
       global: true
     }), underlayProps),
@@ -190,7 +190,7 @@ function $f3f84453ead64de5$var$ModalOverlayInner({ UNSTABLE_portalContainer, ...
     ref: props.overlayRef,
     "data-entering": entering || void 0,
     "data-exiting": props.isExiting || void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $f3f84453ead64de5$var$InternalModalContext,
@@ -226,7 +226,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
       state
     }
   });
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
       global: true
     }), modalProps),
@@ -234,7 +234,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
     ref,
     "data-entering": entering || void 0,
     "data-exiting": isExiting || void 0
-  }, isDismissable && /* @__PURE__ */ React__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+  }, isDismissable && /* @__PURE__ */ $dbSRa$react__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
     onDismiss: state.close
   }), renderProps.children);
 }
@@ -260,6 +260,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  * @param {boolean} [props.noCloseButton] - If `true`, the close button will not be displayed.
  * @param {boolean} [props.noClickToDismiss] - If `true`, the modal will not close when clicking outside of it.
  * @param {boolean} [props.noKeyboardDismiss] - If `true`, the modal will not close when pressing the `Esc` key.
+ * @param {boolean} [props.noBackdrop] - If `true`, the modal will not have a visible backdrop. Functionally, it'll still be there. For an experience without a backdrop, consider using the `Popover` component instead.
  * @param {string} [props.className] - Classes to pass to the modal container.
  * @param {string} [props.overlayClassName] - Classes to pass to the modal backdrop.
  * @param {string} [props.actionsClassName] - Classes to pass to the modal footer (actions) container.
@@ -308,6 +309,7 @@ const ModalInternal = (props) => {
     noCloseButton,
     noClickToDismiss,
     noKeyboardDismiss,
+    noBackdrop,
     "aria-label": ariaLabel,
     className,
     headerClassName,
@@ -326,7 +328,8 @@ const ModalInternal = (props) => {
       onOpenChange,
       isKeyboardDismissDisabled: noKeyboardDismiss,
       className: ({ isEntering, isExiting }) => clsx(
-        "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-y-auto es:p-4 es:text-center es:bg-black/30 es:backdrop-blur-sm",
+        "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-y-auto es:p-4",
+        !noBackdrop && "es:bg-accent-950/20 es:backdrop-blur-xs",
         isEntering && "es:motion-opacity-in es:motion-duration-150",
         isExiting && "es:motion-opacity-out es:motion-duration-150",
         overlayClassName
@@ -336,32 +339,32 @@ const ModalInternal = (props) => {
         $f3f84453ead64de5$export$2b77a92f1a5ad772,
         {
           className: ({ isEntering, isExiting }) => clsx(
-            "es:w-full es:max-w-lg es:overflow-hidden es:rounded-3xl es:border es:border-secondary-100 es:bg-white es:text-left es:align-middle es:shadow-xl es:inset-ring es:inset-ring-secondary-50",
-            isEntering && "es:motion-safe:motion-scale-in-95 es:motion-fade-in es:motion-duration-300 es:motion-ease-spring-smooth/scale",
-            isExiting && "es:motion-safe:motion-scale-out-95 es:motion-fade-out es:motion-duration-250 es:motion-ease-spring-smooth/scale",
+            "es:w-full es:max-w-lg es:overflow-hidden es:rounded-3xl es:inset-ring es:inset-ring-surface-400/30 es:bg-white es:bg-linear-to-b es:from-accent-300/3 es:to-accent-300/1 es:text-left es:align-middle es:shadow-xl es:text-surface-900",
+            isEntering && "es:motion-scale-in-95 es:motion-fade-in es:motion-blur-in-xs es:motion-translate-y-in-[2rem] es:motion-duration-300 es:motion-ease-spring-smooth/scale",
+            isExiting && "es:motion-scale-out-95 es:motion-fade-out es:motion-blur-out-xs es:motion-translate-y-out-[2rem] es:motion-duration-250 es:motion-ease-spring-smooth/scale",
             className
           ),
           children: /* @__PURE__ */ jsx(
             $de32f1b87079253c$export$3ddf2d174ce01153,
             {
-              className: "es:relative es:text-sm es:outline-hidden",
+              className: clsx("es:relative es:text-sm es:outline-hidden", (!title || headerActions) && "es:pt-8"),
               "aria-label": ariaLabel,
               children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs(HStack, { className: clsx(title && "es:px-5 es:py-3 es:justify-between es:bg-secondary-50 es:border-b es:border-secondary-200", headerClassName), children: [
+                /* @__PURE__ */ jsxs(HStack, { className: clsx(title && "es:px-6 es:pt-6 es:justify-between", headerClassName), children: [
                   title && /* @__PURE__ */ jsx(
                     $5cb03073d3f54797$export$a8a3e93435678ff9,
                     {
-                      className: "es:text-balance es:text-base! es:my-0! es:font-medium!",
+                      className: 'es:text-balance es:text-xl! es:my-0! es:text-accent-800 es:font-variation-["wdth"_200,"YTLC"_520,"wght"_425]',
                       slot: "title",
                       children: title
                     }
                   ),
-                  (!noCloseButton || headerActions) && /* @__PURE__ */ jsxs(HStack, { className: !title && "es:absolute es:top-4 es:right-4 es:z-20", children: [
+                  (!noCloseButton || headerActions) && /* @__PURE__ */ jsxs(HStack, { className: !title && "es:absolute es:top-3 es:right-3 es:z-20", children: [
                     headerActions,
                     !noCloseButton && /* @__PURE__ */ jsx(
                       Button,
                       {
-                        className: !title && "es:bg-white/60 es:backdrop-blur-lg",
+                        className: !title && "es:bg-surface-50/60 es:backdrop-blur-lg",
                         onPress: close,
                         type: "ghost",
                         size: "small",
@@ -372,8 +375,8 @@ const ModalInternal = (props) => {
                     )
                   ] })
                 ] }),
-                children && /* @__PURE__ */ jsx("div", { className: clsx("es:p-5 es:space-y-2.5", contentContainerClassName), children }),
-                actions && /* @__PURE__ */ jsx(HStack, { className: clsx("es:justify-end es:px-5 es:py-3 es:border-t es:border-secondary-100", actionsClassName), children: actions })
+                children && /* @__PURE__ */ jsx("div", { className: clsx("es:p-6 es:space-y-2.5", contentContainerClassName), children }),
+                actions && /* @__PURE__ */ jsx(HStack, { className: clsx("es:justify-end es:px-6 es:py-4", actionsClassName), children: actions })
               ] })
             }
           )

package/dist/components/notice/notice.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
 /**
@@ -12,6 +12,7 @@ import { icons } from "../../icons/icons.js";
  * @param {string} [props.className] - Classes to pass to the notice.
  * @param {NoticeType} [props.type='default'] - The type of the notice.
  * @param {boolean} [props.alignIconToTitle=false] - If `true`, the icon will be aligned to the first row of title, instead of vertically centered.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Notice component.
@@ -24,61 +25,75 @@ import { icons } from "../../icons/icons.js";
  * @preserve
  */
 const Notice = (props) => {
-  const { icon, label, subtitle, className, type = "default", alignIconToTitle = false, hidden } = props;
+  const { icon, label, subtitle, className, type = "default", alignIconToTitle = false, flat, hidden } = props;
   if (hidden) {
     return null;
   }
   const styles = {
     info: {
       icon: icons.info,
-      className: "es:border-blue-500/75 es:shadow-blue-500/15 es:bg-blue-200/5 es:inset-ring-blue-100",
-      iconColorClassName: "es:text-blue-500",
-      textColorClassName: "es:text-blue-500 es:saturate-75",
-      subtitleColorClassName: "es:text-blue-950/60"
+      className: "es:inset-ring-blue-600/15 es:shadow-blue-800/5 es:from-blue-400/2 es:to-blue-600/5 es:inset-shadow-blue-500/10",
+      iconColorClassName: "es:text-blue-600",
+      textColorClassName: "es:text-blue-600",
+      subtitleColorClassName: "es:text-blue-950/55",
+      selectionClassName: "es:selection:bg-blue-100 es:selection:text-blue-700"
     },
     success: {
       icon: icons.checkSquare,
-      className: "es:border-green-600/75 es:shadow-green-500/15 es:bg-green-200/5 es:inset-ring-green-100",
+      className: "es:inset-ring-green-800/15 es:shadow-green-800/5 es:from-green-400/2 es:to-green-600/5 es:inset-shadow-green-500/10",
       iconColorClassName: "es:text-green-600",
-      textColorClassName: "es:text-green-700",
-      subtitleColorClassName: "es:text-green-950/60"
+      textColorClassName: "es:text-green-600",
+      subtitleColorClassName: "es:text-green-950/55",
+      selectionClassName: "es:selection:bg-green-100 es:selection:text-green-700"
     },
     warning: {
       icon: icons.warning,
-      className: "es:border-orange-500/75 es:shadow-orange-500/15 es:bg-orange-200/5 es:inset-ring-orange-100",
-      iconColorClassName: "es:text-orange-500",
-      textColorClassName: "es:text-orange-700",
-      subtitleColorClassName: "es:text-orange-950/60"
+      className: "es:inset-ring-orange-800/15 es:shadow-orange-800/5 es:from-orange-400/2 es:to-orange-600/5 es:inset-shadow-orange-500/10",
+      iconColorClassName: "es:text-orange-600",
+      textColorClassName: "es:text-orange-600",
+      subtitleColorClassName: "es:text-orange-950/55",
+      selectionClassName: "es:selection:bg-orange-100 es:selection:text-orange-700"
     },
     error: {
       icon: icons.errorCircle,
-      className: "es:border-red-600/60 es:shadow-red-500/15 es:bg-red-200/5 es:inset-ring-red-100",
+      className: "es:inset-ring-red-800/15 es:shadow-red-800/5 es:from-red-400/2 es:to-red-600/5 es:inset-shadow-red-500/10",
       iconColorClassName: "es:text-red-600",
       textColorClassName: "es:text-red-700",
-      subtitleColorClassName: "es:text-red-900/70"
+      subtitleColorClassName: "es:text-red-950/55",
+      selectionClassName: "es:selection:bg-red-100 es:selection:text-red-700"
     },
     placeholder: {
       icon: icons.componentGeneric,
-      className: "es:border-indigo-600/60 es:shadow-indigo-500/15 es:bg-white es:outline-2 es:outline-white es:inset-ring-indigo-100/0 es:border-dashed",
+      className: "es:inset-ring-indigo-700/15 es:shadow-indigo-800/5 es:from-indigo-400/2 es:to-indigo-600/5 es:inset-shadow-indigo-500/10",
       iconColorClassName: "es:text-indigo-600",
-      textColorClassName: "es:text-indigo-700",
-      subtitleColorClassName: "es:text-indigo-800/70"
+      textColorClassName: "es:text-indigo-600",
+      subtitleColorClassName: "es:text-indigo-900/55",
+      selectionClassName: "es:selection:bg-indigo-100 es:selection:text-indigo-700"
     },
     default: {
-      className: "es:border-secondary-400 es:shadow-secondary-300/25 es:bg-secondary-200/5 es:inset-ring-secondary-100",
-      iconColorClassName: "es:text-secondary-500",
-      textColorClassName: "es:text-secondary-900",
-      subtitleColorClassName: "es:text-secondary-500"
+      className: "es:inset-ring-surface-700/10 es:shadow-surface-800/5 es:from-surface-400/2 es:to-surface-600/5 es:inset-shadow-surface-500/10",
+      iconColorClassName: "es:text-surface-500",
+      textColorClassName: "es:text-surface-500",
+      subtitleColorClassName: "es:text-surface-800/50",
+      selectionClassName: "es:selection:bg-accent-100 es:selection:text-accent-700"
     }
   };
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx(
-        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-xl es:border es:bg-linear-to-tr es:shadow-sm es:inset-ring-1",
+        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto]",
+        "es:rounded-xl",
+        "es:bg-white",
+        "es:inset-ring",
+        "es:bg-linear-to-b es:from-35%",
+        "es:inset-shadow-sm",
+        flat ? "es:shadow-2xs" : "es:shadow-sm",
         styles[type].className,
         "es:icon:shrink-0",
-        icon || styles[type].icon ? "es:gap-x-2 es:py-2 es:pl-2 es:pr-3" : "es:py-2.5 es:px-3",
+        "es:selection:p-2",
+        styles[type].selectionClassName,
+        icon || styles[type].icon ? "es:gap-x-2 es:py-3 es:pl-2.5 es:pr-3" : "es:py-3 es:px-3.5",
         className
       ),
       children: [
@@ -97,8 +112,9 @@ const Notice = (props) => {
           "span",
           {
             className: clsx(
-              "es:col-span-2 es:col-start-2 es:text-balance es:text-sm es:leading-tight",
+              "es:col-span-2 es:col-start-2 es:text-balance es:text-14",
               subtitle ? "es:self-end" : "es:row-span-2 es:self-center-safe",
+              'es:font-variation-["wdth"_110,"wght"_375,"YTLC"_520]',
               styles[type].textColorClassName
             ),
             children: label
@@ -108,7 +124,8 @@ const Notice = (props) => {
           "span",
           {
             className: clsx(
-              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tight es:pt-0.5",
+              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tight es:pt-0.25",
+              'es:font-variation-["wdth"_76,"wght"_350]',
               styles[type].subtitleColorClassName,
               label ? "es:self-start" : "es:row-span-2 es:self-center-safe"
             ),
@@ -117,7 +134,7 @@ const Notice = (props) => {
         )
       ]
     }
-  ) });
+  );
 };
 export {
   Notice