@eightshift/ui-components 5.6.1 → 6.0.0

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

@@ -1,20 +1,21 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default, { forwardRef, createContext, useRef, useState, cloneElement } from "react";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
-import { a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $3985021b0ad6602f$export$37fb8590cf2c088c, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-8yja_IHC.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-CQ5ZZJ2w.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import $dbSRa$react__default, { forwardRef, createContext, useRef } 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-CNNksOWg.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BXjXzdW_.js";
+import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DGpXyJOJ.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DwBG6m1U.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-ztX6G1zR.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D16dDfYF.js";
-import { Button } from "../button/button.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BQvmiUqb.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D2fUHql3.js";
+import { ButtonGroup, Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
 const $b91743d66a0ed188$export$6cc906c6cff9bec5 = /* @__PURE__ */ createContext(null);
 const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(function NumberField(props, ref) {
@@ -49,7 +50,7 @@ const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(fun
     global: true
   });
   delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $b91743d66a0ed188$export$6cc906c6cff9bec5,
@@ -96,7 +97,7 @@ const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(fun
         validation
       ]
     ]
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...DOMProps,
     ...renderProps,
     ref,
@@ -104,7 +105,7 @@ const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(fun
     "data-disabled": props.isDisabled || void 0,
     "data-required": props.isRequired || void 0,
     "data-invalid": validation.isInvalid || void 0
-  }), props.name && /* @__PURE__ */ React__default.createElement("input", {
+  }), props.name && /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
     type: "hidden",
     name: props.name,
     form: props.form,
@@ -134,12 +135,13 @@ const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(fun
  * @param {number} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values.
  * @param {boolean} [props.inline] - If `true`, the number picker is displayed inline.
  * @param {boolean} [props.noScrollToChange=false] - If `true`, the number picker does not change value when scrolling.
- * @param {NumberPickerSize} [props.size='default'] - Determines the input field size.
+ * @param {InputSize} [props.size='default'] - Determines the input field size.
+ * @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 NumberPicker component.
  *
- * @typedef {'compact' | 'small' | 'default'} NumberPickerSize
+ * @typedef {'small' | 'medium' | 'default' | 'large'} InputSize
  *
  * @example
  * <NumberPicker
@@ -169,31 +171,78 @@ const NumberPicker = ({
   inline,
   noScrollToChange = false,
   size = "default",
-  "aria-label": ariaLabel,
+  flat,
+  className,
   hidden,
   ...props
 }) => {
-  const [isInputFocused, setIsInputFocused] = useState(false);
   if (hidden) {
     return null;
   }
-  const sizes = {
-    compact: {
-      field: "es:min-h-5",
-      noPrefixPadding: "es:pl-1.5",
-      extraContentSeparator: "es:h-[1.875rem]"
-    },
-    small: {
-      field: "es:min-h-9",
-      noPrefixPadding: "es:pl-2",
-      extraContentSeparator: "es:h-[2.125rem]"
-    },
-    default: {
-      field: "es:min-h-10",
-      noPrefixPadding: "es:pl-2",
-      extraContentSeparator: "es:h-[2.375rem]"
+  const inputClass = cva(
+    [
+      "es:group",
+      "es:overflow-clip",
+      "es:flex es:items-center",
+      "es:leading-none",
+      "es:w-fit",
+      "es:rounded-lg es:focus-within:rounded-xl",
+      "es:transition-plus",
+      "es:inset-ring",
+      "es:focus-visible-within:ring-2 es:focus-visible-within:ring-accent-500/30",
+      "es:focus-visible-within:text-accent-950 es:focus-visible-within:inset-ring-accent-500",
+      "es:focus:placeholder:text-surface-400",
+      "es:text-13",
+      className
+    ],
+    {
+      variants: {
+        size: {
+          small: ["es:min-h-8", "es:px-2.5 es:py-1"],
+          medium: ["es:min-h-9", "es:px-3 es:py-1"],
+          default: ["es:min-h-10", "es:px-3 es:py-1.5"],
+          large: ["es:min-h-12", "es:px-4 es:py-1.5"]
+        },
+        disabled: {
+          false: "es:selection:bg-surface-100 es:selection:text-accent-800",
+          true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
+        }
+      },
+      compoundVariants: [
+        {
+          flat: false,
+          disabled: false,
+          readOnly: false,
+          class: [
+            "es:bg-white",
+            "es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
+            "es:hover:from-surface-100/0 es:hover:to-surface-100/50",
+            "es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus-within:inset-ring-surface-400",
+            "es:inset-shadow-sm es:inset-shadow-secondary-100/50",
+            "es:hover:placeholder:text-surface-400",
+            "es:placeholder:text-secondary-400",
+            "es:shadow-xs es:shadow-black/5"
+          ]
+        },
+        {
+          flat: true,
+          disabled: false,
+          readOnly: false,
+          class: [
+            "es:inset-ring-secondary-100",
+            "es:focus-within:text-accent-950",
+            "es:placeholder:text-secondary-500/80",
+            "es:bg-secondary-100 es:focus-within:bg-surface-50",
+            "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus-within:inset-ring-surface-200"
+          ]
+        },
+        { disabled: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-200 es:text-secondary-400"] },
+        { readOnly: true, flat: false, class: ["es:bg-secondary-50 es:inset-ring-secondary-300 es:text-secondary-400"] },
+        { readOnly: true, flat: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-300/60 es:text-secondary-400"] }
+      ],
+      defaultVariants: { disabled: false, flat: false, size: "default", readOnly: false }
     }
-  };
+  );
   return /* @__PURE__ */ jsx(
     $b91743d66a0ed188$export$63c5fa0b2fdccd2e,
     {
@@ -215,75 +264,76 @@ const NumberPicker = ({
           subtitle,
           help,
           inline,
-          className: "es:text-sm",
-          children: /* @__PURE__ */ jsxs(
-            $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
-            {
-              className: clsx(
-                "es:group es:flex es:w-fit es:items-center es:rounded-10 es:border es:border-secondary-300 es:pl-1 es:pr-0.5 es:shadow-sm es:focus-within:shadow-md es:transition",
-                "es:inset-ring es:inset-ring-secondary-100",
-                isInputFocused && "es:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                !prefix && (sizes?.[size]?.noPrefixPadding ?? sizes.default.noPrefixPadding),
-                sizes?.[size]?.field ?? sizes.default.field,
-                "es:disabled:shadow-none es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50"
+          children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
+            /* @__PURE__ */ jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: inputClass({ disabled, flat, size, readOnly }), children: [
+              prefix && /* @__PURE__ */ jsx(
+                "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',
+                  children: prefix
+                }
               ),
-              children: [
-                prefix && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    slot: "prefix",
-                    className: "es:col-start-1 es:row-span-2 es:mr-0.5 es:select-none es:self-center es:text-sm es:text-secondary-400",
-                    children: prefix
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  $3985021b0ad6602f$export$f5b8910cec6cf069,
-                  {
-                    onFocus: () => setIsInputFocused(true),
-                    onBlur: () => setIsInputFocused(false),
-                    className: "es:col-start-2 es:row-span-2 es:border-none! es:bg-transparent es:px-0! es:py-1! es:text-sm es:tabular-nums es:shadow-none! es:outline-hidden! es:selection:bg-accent-500/20 es:selection:text-accent-950 es:focus:shadow-none! es:any-focus:outline-hidden",
-                    placeholder,
-                    style: {
-                      width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(max ?? 1e3)?.toString()?.length} * 1ch)`
-                    },
-                    "aria-label": ariaLabel ?? __("Enter a number", "eightshift-ui-components")
+              /* @__PURE__ */ jsx(
+                $3985021b0ad6602f$export$f5b8910cec6cf069,
+                {
+                  className: 'es:tracking-wide 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',
+                  placeholder,
+                  style: {
+                    width: fixedWidth ? `calc(${fixedWidth}ch + 2px)` : `calc(${min < 0 ? "0.75ch + " : "0.5ch + "}${(max ?? 1e3)?.toString()?.length} * 1ch)`
                   }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: clsx("es:opacity-0 es:group-hover:opacity-100 es:group-focus-visible:opacity-100 es:transition-opacity", disabled && "es:invisible"), children: [
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "ghost",
-                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
-                      slot: "increment",
-                      icon: icons.caretUpFill
-                    }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                ButtonGroup,
+                {
+                  className: clsx(
+                    "es:hidden es:transition-discrete es:gap-0! es:transition es:pl-0.5 es:ease-spring-smooth es:duration-300 es:origin-left",
+                    "es:starting:opacity-0 es:starting:blur-[2px] es:starting:translate-x-2",
+                    "es:opacity-100 es:blur-none es:translate-x-0",
+                    !disabled && !readOnly && "es:group-hover:flex es:group-focus-within:flex",
+                    disabled && "es:hidden"
                   ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "ghost",
-                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
-                      slot: "decrement",
-                      icon: icons.caretDownFill
-                    }
-                  )
-                ] }),
-                suffix && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    slot: "suffix",
-                    className: "es:col-start-3 es:row-span-2 es:select-none es:self-center es:text-sm es:text-secondary-400 es:mr-0.5",
-                    children: suffix
-                  }
-                ),
-                children && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("div", { className: clsx("es:w-px es:bg-secondary-300", sizes?.[size]?.extraContentSeparator ?? sizes.default.extraContentSeparator) }),
-                  /* @__PURE__ */ jsx("div", { className: "es:p-0.5 es:pr-0", children: Array.isArray(children) ? children.map((child) => cloneElement(child, { slot: null })) : cloneElement(children, { slot: null }) })
-                ] })
-              ]
-            }
-          )
+                  vertical: true,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "ghost",
+                        className: clsx(
+                          "es:col-start-4 es:w-4 es:disabled:opacity-40 es:text-current/80 es:group-focus-within:text-surface-500 es:icon:size-[0.65rem] es:icon:stroke-2",
+                          size === "small" ? "es:h-3" : "es:h-3.5"
+                        ),
+                        slot: "increment",
+                        icon: icons.chevronUp
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "ghost",
+                        className: clsx(
+                          "es:col-start-4 es:w-4 es:disabled:opacity-40 es:text-current/80 es:group-focus-within:text-surface-500 es:icon:size-[0.65rem] es:icon:stroke-2",
+                          size === "small" ? "es:h-3" : "es:h-3.5"
+                        ),
+                        slot: "decrement",
+                        icon: icons.chevronDown
+                      }
+                    )
+                  ]
+                }
+              ),
+              suffix && /* @__PURE__ */ jsx(
+                "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',
+                  children: suffix
+                }
+              )
+            ] }),
+            children
+          ] })
         }
       )
     }

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

@@ -7,7 +7,7 @@ import { SubMenuItem, MenuSeparator, MenuItem, Menu } from "../menu/menu.js";
 import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 /**
  * A component that allows the user to select an option from a list of options.
  *
@@ -126,11 +126,23 @@ const OptionSelect = (props) => {
               subtitle: optionSubtitle,
               separator: optionHasSeparator,
               sectionTitle: optionSectionTitle,
+              sectionIcon: optionSectionIcon,
+              sectionSubtitle: optionSectionSubtitle,
+              sectionEndIcon: optionSectionEndIcon,
               shortcut: optionShortcut,
               disabled: optionDisabled
             }) => /* @__PURE__ */ jsxs(Fragment, { children: [
               (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
-              optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
+              optionSectionTitle && /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: typeof optionSectionIcon === "string" ? icons?.[optionSectionIcon] : optionSectionIcon,
+                  endIcon: typeof optionSectionEndIcon === "string" ? icons?.[optionSectionEndIcon] : optionSectionEndIcon,
+                  subtitle: optionSectionSubtitle,
+                  disabled: true,
+                  children: optionSectionTitle
+                }
+              ),
               /* @__PURE__ */ jsxs(
                 MenuItem,
                 {
@@ -176,11 +188,23 @@ const OptionSelect = (props) => {
           subtitle: optionSubtitle,
           separator: optionHasSeparator,
           sectionTitle: optionSectionTitle,
+          sectionIcon: optionSectionIcon,
+          sectionSubtitle: optionSectionSubtitle,
+          sectionEndIcon: optionSectionEndIcon,
           shortcut: optionShortcut,
           disabled: optionDisabled
         }) => /* @__PURE__ */ jsxs(Fragment, { children: [
           (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
-          optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
+          optionSectionTitle && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: typeof optionSectionIcon === "string" ? icons?.[optionSectionIcon] : optionSectionIcon,
+              endIcon: typeof optionSectionEndIcon === "string" ? icons?.[optionSectionEndIcon] : optionSectionEndIcon,
+              subtitle: optionSectionSubtitle,
+              disabled: true,
+              children: optionSectionTitle
+            }
+          ),
           /* @__PURE__ */ jsxs(
             MenuItem,
             {
@@ -325,11 +349,23 @@ const OptionSelect = (props) => {
                   subtitle: optionSubtitle,
                   separator: optionHasSeparator,
                   sectionTitle: optionSectionTitle,
+                  sectionIcon: optionSectionIcon,
+                  sectionSubtitle: optionSectionSubtitle,
+                  sectionEndIcon: optionSectionEndIcon,
                   shortcut: optionShortcut,
                   disabled: optionDisabled
                 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
                   (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
-                  optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
+                  optionSectionTitle && /* @__PURE__ */ jsx(
+                    MenuItem,
+                    {
+                      icon: typeof optionSectionIcon === "string" ? icons?.[optionSectionIcon] : optionSectionIcon,
+                      endIcon: typeof optionSectionEndIcon === "string" ? icons?.[optionSectionEndIcon] : optionSectionEndIcon,
+                      subtitle: optionSectionSubtitle,
+                      disabled: true,
+                      children: optionSectionTitle
+                    }
+                  ),
                   /* @__PURE__ */ jsxs(
                     MenuItem,
                     {

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

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-B5aEynOM.js";
+import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-BmRX4BRL.js";
+import { cloneElement } from "react";
 /**
  * Component that provides a container panel for options, with an optional title.
  * Best used within the Gutenberg sidebar, instead of the default `PanelBody` component.
@@ -30,24 +31,23 @@ const OptionsPanel = (props) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: "es:not-last:mb-10", children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("es:bg-white es:rounded-xl es:border es:border-secondary-300 es:overflow-clip es:max-w-lg es:shadow-xs", className), children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("es:overflow-clip es:max-w-lg", className), children: [
       title && /* @__PURE__ */ jsx(
         RichLabel,
         {
           icon,
           label: title,
           subtitle,
-          className: clsx(
-            "es:bg-secondary-50 es:shrink-0 es:text-secondary-700 es:px-4 es:**:first:text-base! es:border-b es:border-b-secondary-200",
-            subtitle ? "es:py-3" : "es:pt-2.25 es:pb-1.75"
-          ),
+          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",
           noColor: true
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "es:divide-y es:divide-secondary-200/75 es:py-4", children })
+      /* @__PURE__ */ jsx("div", { className: "es:flex es:flex-col es:gap-1", children })
     ] }),
-    help && /* @__PURE__ */ jsx("span", { className: "es:mx-0.5 es:mt-1 es:block es:text-sm es:text-secondary-400", children: help })
+    help && /* @__PURE__ */ jsx("span", { className: "es:mx-1 es:mt-2 es:block es:text-sm es:text-secondary-400", children: help })
   ] });
 };
 /**
@@ -71,7 +71,19 @@ const OptionsPanelSection = ({ children, className, hidden }) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-2.5 es:not-last:pb-4 es:not-first:pt-4 es:px-4", className), children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "es:flex es:flex-col es:gap-5",
+        "es:p-4",
+        "es:bg-secondary-50 es:inset-ring es:inset-ring-secondary-100",
+        "es:rounded-md es:first:rounded-t-2xl es:last:rounded-b-2xl",
+        className
+      ),
+      children
+    }
+  );
 };
 /**
  * Component that provides a header for the top of an options page.
@@ -99,12 +111,12 @@ const OptionsPanelHeader = ({ children, sticky, title, className, actions, level
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es:space-y-2.5", limitWidth && "es:max-w-md", sticky && "es:sticky es:top-0 es:z-10 es:bg-white", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es:space-y-2.5", limitWidth && "es:max-w-2xl", sticky && "es:sticky es:top-0 es:z-10 es:bg-white", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-wrap es:items-center es:justify-between es:gap-x-8 es:gap-y-4", children: [
       /* @__PURE__ */ jsx(
         $5cb03073d3f54797$export$a8a3e93435678ff9,
         {
-          className: "es:text-2xl es:font-medium es:tracking-tight",
+          className: 'es:text-3xl es:text-surface-800 es:font-variation-["wdth"_180,"YTLC"_540,"wght"_300]',
           level,
           children: title
         }
@@ -119,12 +131,14 @@ const OptionsPanelHeader = ({ children, sticky, title, className, actions, level
  *
  * @component
  * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to show on the right.
  * @param {string} [props.title] - Title to show.
  * @param {string} [props.subtitle] - Subtitle to show.
  * @param {Number} [props.level=2] - Heading level of the title.
  * @param {string} [props.className] - Classes to pass to the container.
+ * @param {string} [props.iconClassName] - Classes to pass to the icon.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Controls to show on the right side of the header.
- * @param {boolean} [props.border] - If `true`, a border is shown below the text.
+ * @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 OptionsPanelIntro component.
@@ -134,21 +148,34 @@ const OptionsPanelHeader = ({ children, sticky, title, className, actions, level
  *
  * @preserve
  */
-const OptionsPanelIntro = ({ title, subtitle, className, level = 3, border, hidden }) => {
+const OptionsPanelIntro = ({ icon, title, subtitle, className, iconClassName, level = 3, flat, hidden }) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es:pb-2.5", border && "es:mb-5 es:border-b es:border-b-secondary-200", className), children: [
-    /* @__PURE__ */ jsx(
-      $5cb03073d3f54797$export$a8a3e93435678ff9,
-      {
-        className: "es:text-lg es:tracking-tight es:text-secondary-800",
-        level,
-        children: title
-      }
-    ),
-    subtitle && /* @__PURE__ */ jsx("p", { className: "es:text-sm es:text-secondary-500 es:mt-0.5", children: subtitle })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "es:relative es:overflow-clip",
+        "es:py-5 es:px-6 es:rounded-2xl es:max-w-lg",
+        "es:bg-surface-100 es:inset-ring es:inset-ring-surface-600/5",
+        !flat && "es:shadow-xs es:shadow-black/5",
+        className
+      ),
+      children: [
+        /* @__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]',
+            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 }),
+        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) })
+      ]
+    }
+  );
 };
 export {
   OptionsPanel,

package/dist/components/placeholders/file-picker-shell.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
 import "react";
-import "../../react-jsx-parser.min-VUl-CuCv.js";
+import "../../react-jsx-parser.min-B_hvYYa1.js";
 import { truncateMiddle } from "../../utilities/text-helpers.js";
 import { SmartImage } from "../smart-image/smart-image.js";
 /**
@@ -67,15 +67,15 @@ const FilePickerShell = (props) => {
       {
         ...rest,
         className: clsx(
-          "es:border es:border-secondary-200 es:bg-white es:flex es:justify-between es:rounded-2xl es:isolate es:relative es:flex-col es:gap-2 es:overflow-clip es:aspect-cinema es:group es:p-2",
+          "es:border es:border-surface-200 es:bg-white es:bg-linear-to-br es:from-surface-50/5 es:to-surface-50/30 es:flex es:justify-between es:rounded-2xl es:isolate es:relative es:flex-col es:gap-2 es:overflow-clip es:group es:p-2",
           className
         ),
         children: [
-          type === "file" && /* @__PURE__ */ jsxs("div", { className: "es:grow es:flex es:flex-col es:gap-2 es:text-sm es:items-center-safe es:justify-center-safe es:font-mono es:icon:size-6 es:rounded-xl es:bg-secondary-50 es:inset-ring es:inset-ring-secondary-100 es:icon:text-secondary-500", children: [
+          type === "file" && /* @__PURE__ */ jsxs("div", { className: "es:grow es:flex es:flex-col es:gap-2 es:text-sm es:items-center-safe es:justify-center-safe es:font-mono es:icon:size-6 es:rounded-xl es:bg-surface-50 es:inset-ring es:inset-ring-surface-100 es:icon:text-surface-500 es:text-surface-700 es:p-2", children: [
             icon,
             /* @__PURE__ */ jsx("span", { className: "es:line-clamp-1", children: truncateMiddle(url, 34) })
           ] }),
-          children && /* @__PURE__ */ jsx("div", { className: "es:flex es:items-center-safe es:gap-2", children })
+          children && /* @__PURE__ */ jsx("div", { className: "es:flex es:items-center-safe es:gap-0.75 es-button-group-h", children })
         ]
       }
     );
@@ -93,10 +93,10 @@ const FilePickerShell = (props) => {
         hasAnalysed && isTransparent && "es:bg-white/60 es:object-contain es:mx-auto",
         hasAnalysed && isTransparent && (transparencyInfo?.left || transparencyInfo?.right) && "es:w-full!",
         hasAnalysed && isTransparent && (transparencyInfo?.top || transparencyInfo?.bottom) && "es:h-full!",
-        hasAnalysed && !isTransparent && "es:w-full es:aspect-3-2 es:object-cover",
-        hasAnalysed && "es:grow es:rounded-xl"
+        hasAnalysed && !isTransparent && "es:w-full! es:aspect-3-2 es:object-cover",
+        hasAnalysed && "es:grow es:rounded-xl es:h-fill!"
       ),
-      errorClassName: "es:aspect-3-2 es:rounded-2xl es:bg-gradient-to-br es:from-white es:to-secondary-50 es:border es:border-dashed es:border-secondary-200",
+      errorClassName: "es:aspect-3-2 es:rounded-2xl es:bg-linear-to-br es:from-white es:to-secondary-50 es:border es:border-dashed es:border-secondary-200",
       imageAnalysisSettings: { yFrom: 0.25, yTo: 0.75 },
       ...rest,
       children: ({ image, dominantColors, isDark, hasAnalysed, isTransparent }) => /* @__PURE__ */ jsxs(
@@ -106,7 +106,7 @@ const FilePickerShell = (props) => {
             "es:border es:justify-between es:rounded-2xl es:isolate es:relative es:flex-col es:gap-y-2 es:grid es:grid-cols-1 es:overflow-clip es:aspect-3-2 es:transition",
             hasAnalysed ? "es:border-secondary-200" : "es:border-secondary-200/0",
             hasAnalysed && !isTransparent && "es:group es:grid-rows-1",
-            hasAnalysed && isTransparent && "es:p-2 es:grid-rows-[minmax(0,_1fr)_auto] es:h-fit",
+            hasAnalysed && isTransparent && "es:p-2 es:grid-rows-[minmax(0,1fr)_auto] es:h-fit",
             !hasAnalysed && "es:shimmer-dark es:bg-secondary-50",
             className
           ),
@@ -117,7 +117,8 @@ const FilePickerShell = (props) => {
               "div",
               {
                 className: clsx(
-                  "es:flex es:items-center-safe es:gap-2",
+                  "es:flex es:items-center-safe es:gap-0.75",
+                  "es-button-group-h",
                   !isTransparent && "es:absolute es:bottom-2 es:left-2 es:right-2 es:translate-y-[125%] es:group-hover:translate-y-0 es:has-aria-expanded:translate-y-0 es:has-focus-visible:translate-y-0 es:transition-transform es:ease-spring-smooth"
                 ),
                 children: typeof children === "function" ? children({ dominantColors, isDark, isTransparent }) : children