@eightshift/ui-components 5.6.1 → 6.0.0

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

@@ -1,35 +1,35 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { c as $319e236875307eab$export$a9b970dcc4ae71a9, a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-CQ5ZZJ2w.js";
-import { p as $ff5963eb1fccf552$export$e08e3b67e392101e, b as $3ef42575df84b30b$export$9d1611c77c2fe928, 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 { c as $319e236875307eab$export$a9b970dcc4ae71a9, a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BXjXzdW_.js";
+import { o as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $3ef42575df84b30b$export$9d1611c77c2fe928, $ 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 { d as $2d73ec29415bd339$export$712718f7aec83d5, b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, 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 { c as $b1f0cad8af73213b$export$3585ede4d035bf14, d as $b1f0cad8af73213b$export$9145995848b05025, e as $eed445e0843c11d0$export$7ff8f37d2d81a48d, f as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-DggfiuO_.js";
-import { o as $168583247155ddda$export$dc9c12ed27dd1b49, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, p as $07b14b47974efb58$export$9b9a0cd73afb7ca4, e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-BMgMUQuN.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
-import { m as $ae20dd8cbca75726$export$d6daf82dcd84e87c, r as $c5a24bc478652b5f$export$1005530eda016c13, t as $55f9b1ae81f22853$export$2b35b76d2e30e129, g as $e1995378a142960e$export$bf788dd355e3a401 } from "../../SelectionManager-B6-b5NM2.js";
+import { d as $2d73ec29415bd339$export$712718f7aec83d5, b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, 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 $b1f0cad8af73213b$export$3585ede4d035bf14, b as $b1f0cad8af73213b$export$9145995848b05025, c as $eed445e0843c11d0$export$7ff8f37d2d81a48d, d as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48, e as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-Dd37zMvs.js";
+import { w as $168583247155ddda$export$dc9c12ed27dd1b49, t as $2a25aae57d74318e$export$a05409b8bb224a5a, s as $453cc9f0df89c0a5$export$77d5aafae4e095b2, m as $5e3802645cc19319$export$1c3ebcada18427bf, n as $de32f1b87079253c$export$d2f961adcb0afbe, x as $07b14b47974efb58$export$9b9a0cd73afb7ca4, $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D8bjn-nh.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-ztX6G1zR.js";
+import { m as $ae20dd8cbca75726$export$d6daf82dcd84e87c, q as $c5a24bc478652b5f$export$1005530eda016c13, r as $55f9b1ae81f22853$export$2b35b76d2e30e129, g as $e1995378a142960e$export$bf788dd355e3a401 } from "../../SelectionManager-N8X7T_4D.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, f as $9daab02d461809db$export$683480f191c0e3ea } from "../../OverlayArrow-DraDOoRn.js";
-import React__default, { useRef, useEffect, useMemo, useState, useCallback, forwardRef, createContext, cloneElement } from "react";
-import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-BlkUH1Ma.js";
-import { b as $e5be200c675c3b3a$export$a763b9476acd3eb, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-CeNsUGWK.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-n0AVMr3Y.js";
-import { c as $a02d57049d202695$export$d085fb9e920b5ca7 } from "../../useListState-RdLrYsMP.js";
-import { J as $c87311424ea30a05$export$e1865c3bedcd822b, g as $d4ee10de306f2510$export$cd4e5573fbe2b576, c as $431fbd86ca7dc216$export$b204af158042fbac, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-BRDW3y7-.js";
-import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572 } from "../../usePress-DJskZBH9.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Cdxi6JSa.js";
-import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-BifIGnVS.js";
-import { f as $2a25aae57d74318e$export$a05409b8bb224a5a, e as $453cc9f0df89c0a5$export$77d5aafae4e095b2 } from "../../Separator-B-xeqOkC.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-eaZiN2tE.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, f as $9daab02d461809db$export$683480f191c0e3ea } from "../../OverlayArrow-DokC40S3.js";
+import $dbSRa$react__default, { useRef, useEffect, useMemo, useState, useCallback, forwardRef, createContext } from "react";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-bhxeEDg8.js";
+import { b as $e5be200c675c3b3a$export$a763b9476acd3eb, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-DQeXkyLm.js";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-BBTu4shO.js";
+import { c as $a02d57049d202695$export$d085fb9e920b5ca7 } from "../../useListState-ZKhRO8ML.js";
+import { J as $c87311424ea30a05$export$e1865c3bedcd822b, g as $d4ee10de306f2510$export$cd4e5573fbe2b576, c as $431fbd86ca7dc216$export$b204af158042fbac, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-Bycb7BsD.js";
+import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572 } from "../../usePress-B8OteQMu.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-B49ptFDX.js";
+import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-BD7Olibq.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-NETP-8H8.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { icons } from "../../icons/icons.js";
+import { Spinner } from "../../icons/spinner.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { Spacer } from "../spacer/spacer.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { RichLabel } from "../rich-label/rich-label.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncList-D52mQcrH.js";
 function $4f58c5f72bcf79f7$export$496315a1608d9602(effect, dependencies) {
   const isInitialMount = useRef(true);
@@ -1277,7 +1277,7 @@ const $d01f2c01039c0eec$export$72b9695b8216309a = /* @__PURE__ */ forwardRef(fun
   let { children, isDisabled = false, isInvalid = false, isRequired = false } = props;
   let content = useMemo(() => {
     var _props_items;
-    return /* @__PURE__ */ React__default.createElement($eed445e0843c11d0$export$7ff8f37d2d81a48d.Provider, {
+    return /* @__PURE__ */ $dbSRa$react__default.createElement($eed445e0843c11d0$export$7ff8f37d2d81a48d.Provider, {
       value: {
         items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems
       }
@@ -1296,9 +1296,9 @@ const $d01f2c01039c0eec$export$72b9695b8216309a = /* @__PURE__ */ forwardRef(fun
     props.items,
     props.defaultItems
   ]);
-  return /* @__PURE__ */ React__default.createElement($e1995378a142960e$export$bf788dd355e3a401, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($e1995378a142960e$export$bf788dd355e3a401, {
     content
-  }, (collection) => /* @__PURE__ */ React__default.createElement($d01f2c01039c0eec$var$ComboBoxInner, {
+  }, (collection) => /* @__PURE__ */ $dbSRa$react__default.createElement($d01f2c01039c0eec$var$ComboBoxInner, {
     props,
     collection,
     comboBoxRef: ref
@@ -1384,7 +1384,7 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props, collection, comboBoxRef: r
   });
   delete DOMProps.id;
   var _state_selectedKey;
-  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $d01f2c01039c0eec$export$c02625b26074192c,
@@ -1463,7 +1463,7 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props, collection, comboBoxRef: r
         validation
       ]
     ]
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...DOMProps,
     ...renderProps,
     ref,
@@ -1473,7 +1473,7 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props, collection, comboBoxRef: r
     "data-disabled": props.isDisabled || void 0,
     "data-invalid": validation.isInvalid || void 0,
     "data-required": props.isRequired || void 0
-  }), name && formValue === "key" && /* @__PURE__ */ React__default.createElement("input", {
+  }), name && formValue === "key" && /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
     type: "hidden",
     name,
     form: props.form,
@@ -1500,8 +1500,13 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props, collection, comboBoxRef: r
  * @param {number} [props.inputDebounceDelay=500] - The delay in milliseconds before the input value is considered final.
  * @param {Function} [props.suggestionTypeIconOverride] - Allows overriding the default icon for the suggestion type, e.g. when using CPTs. Should be in the format: `(type) => icon or React component`.
  * @param {boolean} [props.showSuggestionsWhenEmpty] - If `true`, the suggestion list will be shown when down arrow is pressed even the input is empty.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+ * @param {boolean} [props.keyboardShortcuts] - If `true`, keyboard shortcuts are shown in the suggestion list.
+ * @param {InputSize} [props.size='default'] - Sets the size of the input field.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
+ * @typedef {'small' | 'medium' | 'default' | 'large'} InputSize
+ *
  * @returns {JSX.Element} The LinkInput component.
  *
  * @example
@@ -1528,10 +1533,12 @@ const LinkInput = (props) => {
     showSuggestionsWhenEmpty,
     fetchSuggestions,
     className,
+    keyboardShortcuts,
+    flat,
+    size = "default",
     hidden
   } = props;
   const canShowSuggestions = typeof fetchSuggestions !== "undefined";
-  const triggerRef = useRef(null);
   let shouldShowSuggestions = true;
   if (!canShowSuggestions || !showSuggestionsWhenEmpty && url.length < 1) {
     shouldShowSuggestions = false;
@@ -1551,9 +1558,67 @@ const LinkInput = (props) => {
       };
     }
   });
+  const inputClass = cva(
+    [
+      "es:text-13 es:leading-none",
+      "es:w-fill",
+      "es:border-none",
+      "es:rounded-lg es:focus:rounded-xl es:aria-[controls]:rounded-xl",
+      "es:transition-plus",
+      "es:any-focus:outline-hidden",
+      "es:inset-ring",
+      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30",
+      "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500",
+      "es:placeholder-shown:pr-0 es:pr-10",
+      "es:focus:placeholder:text-surface-400",
+      'es:font-variation-["wdth"_80,"YTLC"_520,"wght"_300,"slnt"_0] es:tracking-wide es:placeholder-shown:font-variation-["wdth"_100,"YTLC"_500,"wght"_250,"slnt"_-8]',
+      className
+    ],
+    {
+      variants: {
+        size: {
+          small: ["es:min-h-8", "es:py-2 es:px-2.5"],
+          medium: ["es:min-h-9", "es:py-2 es:px-3"],
+          default: ["es:min-h-10", "es:py-2 es:px-3"],
+          large: ["es:min-h-12", "es:py-2 es:px-4"]
+        }
+      },
+      compoundVariants: [
+        {
+          flat: false,
+          disabled: 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: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,
+          class: [
+            "es:inset-ring-secondary-100",
+            "es:focus:text-accent-950",
+            "es:placeholder:text-secondary-500/80",
+            "es:bg-secondary-100 es:focus:bg-surface-50",
+            "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus:inset-ring-surface-200",
+            "es:shadow-none"
+          ]
+        },
+        { disabled: true, class: ["es:bg-white es:inset-ring-secondary-200 es:text-secondary-400"] }
+      ],
+      defaultVariants: { disabled: false, flat: false }
+    }
+  );
   if (hidden) {
     return null;
   }
+  const noResults = shouldShowSuggestions && !suggestionList.isLoading && suggestionList.items.length === 0;
   return /* @__PURE__ */ jsxs(
     $d01f2c01039c0eec$export$72b9695b8216309a,
     {
@@ -1568,6 +1633,7 @@ const LinkInput = (props) => {
       allowsCustomValue: true,
       allowsEmptyCollection: true,
       isDisabled: disabled,
+      className: "es:selection:bg-surface-100 es:selection:text-accent-800",
       children: [
         /* @__PURE__ */ jsx(
           BaseControl,
@@ -1579,65 +1645,48 @@ const LinkInput = (props) => {
             actions,
             labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
             help,
-            children: /* @__PURE__ */ jsxs(
-              $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
-              {
-                className: "es:relative",
-                ref: triggerRef,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    $3985021b0ad6602f$export$f5b8910cec6cf069,
-                    {
-                      placeholder: disabled ? null : placeholder,
-                      className: clsx(
-                        "es:min-h-10 es:w-full es:rounded-10 es:border es:border-secondary-300 es:py-2 es:pl-2 es:pr-1 es:text-sm es:shadow-sm es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950 es:bg-white",
-                        "es:any-focus:outline-hidden",
-                        "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                        "es:focus-visible:border-accent-500",
-                        "es:inset-ring es:inset-ring-secondary-100",
-                        "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",
-                        "es:not-readonly:focus:shadow-md",
-                        "es:[&::-webkit-search-cancel-button]:hidden",
-                        url?.length > 0 && "es:pr-10",
-                        className
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    AnimatedVisibility,
+            children: /* @__PURE__ */ jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: "es:relative es:group", children: [
+              /* @__PURE__ */ jsx(
+                $3985021b0ad6602f$export$f5b8910cec6cf069,
+                {
+                  placeholder: disabled ? null : placeholder,
+                  className: inputClass({ disabled, flat, size })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AnimatedVisibility,
+                {
+                  visible: !disabled && url?.length > 0,
+                  className: "es:absolute es:inset-y-1 es:right-1",
+                  transition: "scaleFade",
+                  children: /* @__PURE__ */ jsxs(
+                    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
                     {
-                      visible: !disabled && url?.length > 0,
-                      className: "es:absolute es:inset-y-1 es:right-1",
-                      transition: "fade",
-                      children: /* @__PURE__ */ jsxs(
-                        $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                        {
-                          slot: null,
-                          onPress: () => {
-                            onChange({ url: void 0, isAnchor: false });
-                          },
-                          className: "es:any-focus:outline-hidden",
-                          children: [
-                            !(shouldShowSuggestions && suggestionList.isLoading) && /* @__PURE__ */ jsx(Tooltip, { text: __("Clear", "eightshift-ui-components"), children: /* @__PURE__ */ jsx(
-                              "div",
-                              {
-                                className: clsx(
-                                  "es:flex es:size-8 es:items-center es:justify-center es:rounded-md es:bg-white/85 es:text-secondary-600 es:backdrop-blur es:transition es:cursor-pointer",
-                                  "es:hover:bg-red-600/5 es:hover:text-red-600",
-                                  "es:icon:size-6"
-                                ),
-                                children: removeIcon
-                              }
-                            ) }),
-                            shouldShowSuggestions && suggestionList.isLoading && /* @__PURE__ */ jsx("div", { className: "es:p-1.5", children: cloneElement(icons.loader, { className: "es:text-accent-600! es:stroke-2 es:motion-preset-spin es:motion-duration-1500" }) })
-                          ]
-                        }
-                      )
+                      slot: null,
+                      onPress: () => {
+                        onChange({ url: void 0, isAnchor: false });
+                      },
+                      className: "es:any-focus:outline-hidden es:rounded-xs es:transition-plus es:focus-visible:rounded-md es:focus-visible:bg-surface-200 es:focus-visible:text-accent-900",
+                      children: [
+                        !(shouldShowSuggestions && suggestionList.isLoading) && /* @__PURE__ */ jsx(Tooltip, { text: __("Clear", "eightshift-ui-components"), children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: clsx(
+                              "es:opacity-0 es:group-hover:opacity-100 es:group-focus-within:opacity-100 es:focus-visible:opacity-100",
+                              "es:flex es:size-8 es:items-center es:justify-center es:rounded-md es:text-secondary-600 es:backdrop-blur es:transition es:cursor-pointer",
+                              "es:hover:bg-red-600/5 es:hover:text-red-600",
+                              "es:icon:size-6"
+                            ),
+                            children: removeIcon
+                          }
+                        ) }),
+                        shouldShowSuggestions && suggestionList.isLoading && /* @__PURE__ */ jsx(Spinner, { className: "es:size-5! es:m-1.5 es:spinner-4!" })
+                      ]
                     }
                   )
-                ]
-              }
-            )
+                }
+              )
+            ] })
           }
         ),
         canShowSuggestions && shouldShowSuggestions && /* @__PURE__ */ jsxs(
@@ -1645,33 +1694,45 @@ const LinkInput = (props) => {
           {
             "aria-label": __("URL suggestions", "eightshift-ui-components"),
             className: ({ isEntering, isExiting }) => clsx(
-              "es:border es:rounded-xl es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden es:min-w-72",
-              "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
+              "es:w-(--trigger-width)",
+              "es:rounded-xl es:outline-hidden es:min-w-72",
+              "es:has-first-selected:rounded-t-18!",
+              "es:has-last-selected:rounded-b-18!",
+              "es:inset-ring es:inset-ring-surface-500/10",
+              "es:inset-shadow-sm es:inset-shadow-white/50",
+              noResults ? "es:bg-surface-50/50" : "es:bg-surface-50/65",
+              noResults ? "es:backdrop-blur-sm" : "es:backdrop-blur-md",
+              noResults ? "es:backdrop-brightness-105" : "es:backdrop-brightness-110",
+              "es:backdrop-saturate-125",
+              "es:shadow-lg es:shadow-black/10",
+              "es:transition-plus",
+              "es:motion-duration-250 es:motion-ease-spring-bouncy",
               "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
-              (isEntering || !(suggestionList.isLoading || !shouldShowSuggestions)) && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
-              (isEntering || !(suggestionList.isLoading || !shouldShowSuggestions)) && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%]",
-              isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
-              isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%]",
+              (isEntering || !(suggestionList.isLoading || !shouldShowSuggestions)) && "es:motion-scale-x-in-95 es:motion-scale-y-in-85 es:motion-opacity-in-0 es:motion-blur-in-[2px]",
+              (isEntering || !(suggestionList.isLoading || !shouldShowSuggestions)) && "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 es:motion-blur-out-xs",
+              isExiting && "es:placement-top:motion-translate-y-out-[0.5rem] es:placement-bottom:motion-translate-y-out-[-0.5rem]",
               (suggestionList.isLoading || !shouldShowSuggestions) && "es:invisible"
             ),
             offset: 3,
-            style: {
-              width: `${triggerRef.current?.offsetWidth}px`
-            },
+            maxHeight: 0.8 * (window?.innerWidth ?? 1e3),
             children: [
-              shouldShowSuggestions && !suggestionList.isLoading && suggestionList.items.length === 0 && /* @__PURE__ */ jsx(
+              noResults && /* @__PURE__ */ jsx(
                 RichLabel,
                 {
                   icon: icons.searchEmpty,
                   label: __("No results", "eightshift-ui-components"),
                   subtitle: __("Try a different search term", "eightshift-ui-components"),
-                  className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto",
-                  iconClassName: "es:text-accent-700 es:icon:size-7!",
+                  className: "es:p-4 es:w-fit es:mx-auto es:flex-col es:items-center es:gap-2.5",
+                  iconClassName: "es:text-accent-50 es:bg-linear-to-br es:from-accent-600 es:to-accent-700 es:p-2 es:rounded-full es:icon:size-7!",
+                  labelClassName: "es:mx-auto",
+                  subtitleClassName: "es:mx-auto",
+                  fullSizeSubtitle: true,
                   noColor: true
                 }
               ),
               suggestionList.items.length > 0 && !suggestionList.isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-1 es:p-1", children: (item) => {
+                /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-0.75 es:p-1.5", children: (item) => {
                   const {
                     label: title,
                     value: url2,
@@ -1701,10 +1762,13 @@ const LinkInput = (props) => {
                     {
                       id: item.value,
                       className: clsx(
-                        "es:rounded-10 es:p-1 es:text-sm es:transition",
-                        "es:hover:border-secondary-300 es:hover:bg-secondary-100",
-                        "es:focus-visible:border-secondary-300 es:focus-visible:bg-secondary-100",
-                        "selected:es:bg-accent-600/10 selected:es:text-accent-900 selected:focus-visible:es:bg-accent-600/15"
+                        "es:transition-plus",
+                        "es:px-2 es:py-2.5",
+                        "es:bg-accent-900/4 es:rounded-sm es:first:rounded-t-lg es:last:rounded-b-lg es:after-current:rounded-t-lg es:before-current:rounded-b-lg",
+                        "es:focus-visible:bg-surface-200/65 es:focus-visible:rounded-2xl es:focus-visible:text-accent-950",
+                        "es:hover:bg-surface-200/50 es:hover:rounded-2xl es:hover:text-accent-900",
+                        "es:pressed:rounded-3xl!",
+                        "es:text-surface-950"
                       ),
                       textValue: url2,
                       children: /* @__PURE__ */ jsx(
@@ -1713,32 +1777,28 @@ const LinkInput = (props) => {
                           icon: typeIcon,
                           label: title,
                           subtitle: url2?.replace(location.origin, "").replace(/\/$/, ""),
+                          className: "es:select-none",
+                          subtitleClassName: 'es:font-variation-["wdth"_40,"wght"_250]!',
+                          iconClassName: "es:p-1 es:text-accent-900 es:bg-surface-50/65 es:rounded-md",
                           noColor: true
                         }
                       )
                     }
                   );
                 } }),
-                /* @__PURE__ */ jsx(
-                  Spacer,
-                  {
-                    border: true,
-                    className: "es:opacity-40"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-wrap es:items-center es:justify-end es:gap-x-3 es:gap-y-1.5 es:p-2 es:text-sm es:text-secondary-500", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
-                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↓" }),
-                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↑" }),
-                    __("Navigate", "eightshift-ui-components")
+                keyboardShortcuts && /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-wrap es:items-center es:justify-end-safe es:gap-x-4 es:gap-y-0.5 es:px-2.5 es:pb-2 es:pt-0.5", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1 es:items-center", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-surface-600/15 es:text-surface-600 es:font-mono es:text-13 es:text-box-trim es:tracking-tighter", children: "↓" }),
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-surface-600/15 es:text-surface-600 es:font-mono es:text-13 es:text-box-trim es:tracking-tighter", children: "↑" }),
+                    /* @__PURE__ */ jsx("span", { className: 'es:font-variation-["wdth"_64,"wght"_250] es:text-12 es:text-box-trim es:text-surface-700', children: __("Navigate", "eightshift-ui-components") })
                   ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
-                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↵" }),
-                    __("Select", "eightshift-ui-components")
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1 es:items-center", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-surface-600/15 es:text-surface-600 es:font-mono es:text-13 es:text-box-trim es:tracking-tighter", children: "↵" }),
+                    /* @__PURE__ */ jsx("span", { className: 'es:font-variation-["wdth"_64,"wght"_250] es:text-12 es:text-box-trim es:text-surface-700', children: __("Select", "eightshift-ui-components") })
                   ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
-                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:h-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:tracking-tighter es:px-0.5 es:text-secondary-600", children: "Esc" }),
-                    __("Hide", "eightshift-ui-components")
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1 es:items-center", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:h-4 es:items-center es:justify-center es:rounded es:bg-surface-600/15 es:text-surface-600 es:font-mono es:text-10 es:text-box-trim es:tracking-tighter es:px-0.75", children: "Esc" }),
+                    /* @__PURE__ */ jsx("span", { className: 'es:font-variation-["wdth"_64,"wght"_250] es:text-12 es:text-box-trim es:text-surface-700', children: __("Hide", "eightshift-ui-components") })
                   ] })
                 ] })
               ] })

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

@@ -1,9 +1,12 @@
-import { jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { icons } from "../../icons/icons.js";
-import { pascalCase, upperFirst, camelCase } from "../../utilities/es-dash.js";
-import { Menu, MenuItem } from "../menu/menu.js";
+import { upperFirst, camelCase } from "../../utilities/es-dash.js";
 import { BaseControl } from "../base-control/base-control.js";
+import { TriggeredPopover } from "../popover/popover.js";
+import { $ as $b6c3ddc6086f204d$export$a98f0dcb43a68a25, a as $b6c3ddc6086f204d$export$d7b12c4107be0d61 } from "../../RadioGroup-BVFvITWO.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.
  * Replaces the default Gutenberg `AlignmentMatrixControl`/`BlockAlignmentMatrixControl`/`BlockAlignmentMatrixToolbar`.
@@ -97,6 +100,18 @@ const MatrixAlign = (props) => {
     }
   ];
   const sizeOptions = allSizeOptions.filter(({ availableOn }) => availableOn.includes(size));
+  const currentItemLabel = sizeOptions.find(({ value: itemValue }) => itemValue === value)?.label;
+  let triggerTooltip = currentItemLabel;
+  if (!label) {
+    triggerTooltip = /* @__PURE__ */ jsx(
+      RichLabel,
+      {
+        label: tooltip,
+        subtitle: currentItemLabel,
+        noColor: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     BaseControl,
     {
@@ -104,23 +119,42 @@ const MatrixAlign = (props) => {
       label,
       subtitle,
       inline: true,
-      children: /* @__PURE__ */ jsx(
-        Menu,
+      children: /* @__PURE__ */ jsxs(
+        TriggeredPopover,
         {
-          triggerIcon: icons[`position${size}${upperFirst(camelCase(value))}`],
-          triggerProps: { "aria-label": ariaLabel },
-          tooltip,
-          keepOpen: true,
-          children: sizeOptions.map(({ value: itemValue, label: label2 }) => /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              endIcon: icons?.[`position${size}${pascalCase(itemValue)}`],
-              selected: value === itemValue,
-              onClick: () => onChange(itemValue),
-              children: label2
-            },
-            itemValue
-          ))
+          triggerButtonIcon: icons[`position${size}${upperFirst(camelCase(value))}`],
+          triggerButtonProps: {
+            "aria-label": ariaLabel,
+            tooltip: triggerTooltip
+          },
+          wrapperClassName: "es:from-surface-300/30 es:to-surface-300/30 es:p-0.5",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "es:bg-accent-50/60 es:inset-ring es:inset-ring-accent-800/3 es:rounded-t-xl es:rounded-b-md", children: /* @__PURE__ */ jsx(
+              $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
+              {
+                "aria-label": tooltip,
+                value,
+                onChange,
+                orientation: "horizontal",
+                className: clsx("es:grid es:gap-1 es:w-fit es:mx-auto", size === "2x2" && "es:grid-cols-2 es:p-5", size === "3x3" && "es:grid-cols-3 es:p-3"),
+                children: sizeOptions.map(({ value: itemValue, label: label2 }) => /* @__PURE__ */ jsx(
+                  $b6c3ddc6086f204d$export$d7b12c4107be0d61,
+                  {
+                    "aria-label": label2,
+                    autoFocus: itemValue === value,
+                    value: itemValue,
+                    className: ({ isSelected }) => clsx(
+                      "es:size-6 es:rounded-sm es:transition-plus es:ease-spring-bouncy es:inset-ring es:pressed:scale-90",
+                      isSelected && "es:bg-accent-500 es:rounded-xl es:inset-ring-accent-700 es:inset-shadow-sm es:inset-shadow-accent-50/25 es:bg-linear-to-b es:from-25% es:from-accent-700/5 es:to-accent-700/30 es:shadow-xs es:shadow-black/10",
+                      !isSelected && "es:bg-surface-300 es:hover:bg-surface-400 es:hover:rounded-md es:focus-visible:rounded-lg es:pressed:rounded-xl es:inset-ring-surface-400/20"
+                    )
+                  },
+                  itemValue
+                ))
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "es:bg-accent-50/60 es:inset-ring es:inset-ring-accent-800/3 es:rounded-b-xl es:rounded-t-md es:p-2 es:mt-0.75 es:text-12 es:text-center es:text-accent-900", children: currentItemLabel })
+          ]
         }
       )
     }