@eightshift/ui-components 6.2.0 → 6.3.0

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

@@ -1,25 +1,24 @@
 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-CFnNdpNZ.js";
-import { o as $ff5963eb1fccf552$export$e08e3b67e392101e, b as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$df3a06d6289f983e } from "../../utils-Cr3pLd9c.js";
+import { c as $319e236875307eab$export$a9b970dcc4ae71a9, a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-DtRmB6b8.js";
+import { o as $ff5963eb1fccf552$export$e08e3b67e392101e, b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$df3a06d6289f983e } from "../../utils-Cr3pLd9c.js";
 import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-BPG0hKfB.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { 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-B4X6-x6r.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { b as $b1f0cad8af73213b$export$3585ede4d035bf14, c as $b1f0cad8af73213b$export$9145995848b05025, d as $eed445e0843c11d0$export$7ff8f37d2d81a48d, e as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48, f as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-ByPsaVVK.js";
-import { x as $168583247155ddda$export$dc9c12ed27dd1b49, u as $2a25aae57d74318e$export$a05409b8bb224a5a, t as $453cc9f0df89c0a5$export$77d5aafae4e095b2, n as $5e3802645cc19319$export$1c3ebcada18427bf, o as $de32f1b87079253c$export$d2f961adcb0afbe, y as $07b14b47974efb58$export$9b9a0cd73afb7ca4, f as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-DDfABlp4.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-BG9DaxYN.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
+import { b as $b1f0cad8af73213b$export$3585ede4d035bf14, c as $b1f0cad8af73213b$export$9145995848b05025, d as $eed445e0843c11d0$export$7ff8f37d2d81a48d, e as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48, f as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-DXFyyj_r.js";
+import { x as $168583247155ddda$export$dc9c12ed27dd1b49, u as $2a25aae57d74318e$export$a05409b8bb224a5a, t as $453cc9f0df89c0a5$export$77d5aafae4e095b2, n as $5e3802645cc19319$export$1c3ebcada18427bf, y as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98, o as $de32f1b87079253c$export$d2f961adcb0afbe, z as $07b14b47974efb58$export$9b9a0cd73afb7ca4, f as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-DTIxSDhz.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-CjFEHSfr.js";
-import { o as $ae20dd8cbca75726$export$d6daf82dcd84e87c, s as $c5a24bc478652b5f$export$1005530eda016c13, t as $55f9b1ae81f22853$export$2b35b76d2e30e129, g as $e1995378a142960e$export$bf788dd355e3a401 } from "../../SelectionManager-iru59gc4.js";
+import { o as $ae20dd8cbca75726$export$d6daf82dcd84e87c, s as $c5a24bc478652b5f$export$1005530eda016c13, t as $55f9b1ae81f22853$export$2b35b76d2e30e129, g as $e1995378a142960e$export$bf788dd355e3a401 } from "../../SelectionManager-B02LcxLr.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, d as $9daab02d461809db$export$683480f191c0e3ea } from "../../OverlayArrow-Dy0qw7WL.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, d as $9daab02d461809db$export$683480f191c0e3ea } from "../../OverlayArrow-Fuxj-1QM.js";
 import $dbSRa$react__default, { useRef, useEffect, useMemo, useState, useCallback, forwardRef, createContext } from "react";
-import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-NhAlifsK.js";
-import { b as $e5be200c675c3b3a$export$a763b9476acd3eb, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-DTmPrTD8.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-BtrMHGeE.js";
-import { c as $a02d57049d202695$export$d085fb9e920b5ca7 } from "../../useListState-HOvCQJFf.js";
-import { b as $8ae05eaa5c114e9c$export$7f54fc3180508a52, L as $ea8dcbcb9ea1b556$export$9a302a45f65d0572, K as $c87311424ea30a05$export$e1865c3bedcd822b, i as $d4ee10de306f2510$export$cd4e5573fbe2b576, d as $431fbd86ca7dc216$export$b204af158042fbac, g as $d4ee10de306f2510$export$4282f70798064fe0, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-CmyvqeWX.js";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-Bg5C34XC.js";
+import { b as $e5be200c675c3b3a$export$a763b9476acd3eb, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-BrbMhS2N.js";
+import { a as $e72dd72e1c76a225$export$2f645645f7bca764, c as $a02d57049d202695$export$d085fb9e920b5ca7 } from "../../useListState-BjnzKozj.js";
+import { c as $8ae05eaa5c114e9c$export$7f54fc3180508a52, M as $ea8dcbcb9ea1b556$export$9a302a45f65d0572, L as $c87311424ea30a05$export$e1865c3bedcd822b, j as $d4ee10de306f2510$export$cd4e5573fbe2b576, e as $431fbd86ca7dc216$export$b204af158042fbac, b as $d4ee10de306f2510$export$e58f029f0fbfdb29, h as $d4ee10de306f2510$export$4282f70798064fe0, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-DkmPQdGE.js";
 import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-D8O3gOdV.js";
-import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-Zze2g7CX.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-BxtOoO5Q.js";
+import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-Bfy68GHZ.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-BoxsKyJ9.js";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-CEDs0LsA.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { icons } from "../../icons/icons.js";
@@ -828,7 +827,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
         state.commit();
         break;
       case "Escape":
-        if (state.selectedKey !== null || state.inputValue === "" || props.allowsCustomValue) e.continuePropagation();
+        if (!state.selectionManager.isEmpty || state.inputValue === "" || props.allowsCustomValue) e.continuePropagation();
         state.revert();
         break;
       case "ArrowDown":
@@ -855,6 +854,10 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
     if (props.onFocus) props.onFocus(e);
     state.setFocused(true);
   };
+  let valueId = $c350ade66beef0af$var$useValueId([
+    state.selectedItems,
+    state.selectionManager.selectionMode
+  ]);
   let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
   let { labelProps, inputProps, descriptionProps, errorMessageProps } = $2d73ec29415bd339$export$712718f7aec83d5({
     ...props,
@@ -866,9 +869,13 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
     onFocus,
     autoComplete: "off",
     validate: void 0,
-    [$e5be200c675c3b3a$export$a763b9476acd3eb]: state
+    [$e5be200c675c3b3a$export$a763b9476acd3eb]: state,
+    "aria-describedby": [
+      valueId,
+      props["aria-describedby"]
+    ].filter(Boolean).join(" ") || void 0
   }, inputRef);
-  $99facab73266f662$export$5add1d006293d136(inputRef, state.defaultSelectedKey, state.setSelectedKey);
+  $99facab73266f662$export$5add1d006293d136(inputRef, state.defaultValue, state.setValue);
   let onPress = (e) => {
     if (e.pointerType === "touch") {
       var _inputRef_current;
@@ -902,7 +909,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
       (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
       return;
     }
-    let rect = e.target.getBoundingClientRect();
+    let rect = $d4ee10de306f2510$export$e58f029f0fbfdb29(e).getBoundingClientRect();
     let touch = e.changedTouches[0];
     let centerX = Math.ceil(rect.left + 0.5 * rect.width);
     let centerY = Math.ceil(rect.top + 0.5 * rect.height);
@@ -984,6 +991,15 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
   $e9faafb641e167db$export$90fc3a17d93f704c(listBoxRef, "react-aria-item-action", state.isOpen ? () => {
     state.close();
   } : void 0);
+  $e0b6e0b68ec7f50f$export$872b660ac5a1ff98({
+    ref: popoverRef,
+    onInteractOutside: (e) => {
+      let target = $d4ee10de306f2510$export$e58f029f0fbfdb29(e);
+      if ($d4ee10de306f2510$export$4282f70798064fe0(buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current, target) || $d4ee10de306f2510$export$4282f70798064fe0(inputRef.current, target)) return;
+      state.close();
+    },
+    isDisabled: !state.isOpen
+  });
   return {
     labelProps,
     buttonProps: {
@@ -1016,6 +1032,9 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
       linkBehavior: "selection",
       ["UNSTABLE_itemBehavior"]: "action"
     }),
+    valueProps: {
+      id: valueId
+    },
     descriptionProps,
     errorMessageProps,
     isInvalid,
@@ -1023,28 +1042,102 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
     validationDetails
   };
 }
+function $c350ade66beef0af$var$useValueId(depArray = []) {
+  let id = $bdb11010cef70236$export$f680877a34711e37();
+  let [exists, setExists] = useState(true);
+  let [lastDeps, setLastDeps] = useState(depArray);
+  if (lastDeps.some((v, i) => !Object.is(v, depArray[i]))) {
+    setExists(true);
+    setLastDeps(depArray);
+  }
+  useEffect(() => {
+    if (exists && !document.getElementById(id))
+      setExists(false);
+  }, [
+    id,
+    exists,
+    lastDeps
+  ]);
+  return exists ? id : void 0;
+}
+const $a9e7382a7d111cb5$var$EMPTY_VALUE = [];
 function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
   var _collection_getItem;
-  let { defaultFilter, menuTrigger = "input", allowsEmptyCollection = false, allowsCustomValue, shouldCloseOnBlur = true } = props;
+  let { defaultFilter, menuTrigger = "input", allowsEmptyCollection = false, allowsCustomValue, shouldCloseOnBlur = true, selectionMode = "single" } = props;
   let [showAllItems, setShowAllItems] = useState(false);
   let [isFocused, setFocusedState] = useState(false);
   let [focusStrategy, setFocusStrategy] = useState(null);
-  let onSelectionChange = (key) => {
-    if (props.onSelectionChange) props.onSelectionChange(key);
-    if (key === selectedKey) {
-      resetInputValue();
-      closeMenu();
+  let defaultValue = useMemo(() => {
+    var _props_defaultSelectedKey2;
+    return props.defaultValue !== void 0 ? props.defaultValue : selectionMode === "single" ? (_props_defaultSelectedKey2 = props.defaultSelectedKey) !== null && _props_defaultSelectedKey2 !== void 0 ? _props_defaultSelectedKey2 : null : [];
+  }, [
+    props.defaultValue,
+    props.defaultSelectedKey,
+    selectionMode
+  ]);
+  let value = useMemo(() => {
+    return props.value !== void 0 ? props.value : selectionMode === "single" ? props.selectedKey : void 0;
+  }, [
+    props.value,
+    props.selectedKey,
+    selectionMode
+  ]);
+  let [controlledValue, setControlledValue] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, props.onChange);
+  let displayValue = selectionMode === "single" && Array.isArray(controlledValue) ? controlledValue[0] : controlledValue;
+  let setValue = (value2) => {
+    if (selectionMode === "single") {
+      var _props_onSelectionChange;
+      var _value_;
+      let key = Array.isArray(value2) ? (_value_ = value2[0]) !== null && _value_ !== void 0 ? _value_ : null : value2;
+      setControlledValue(key);
+      if (key !== displayValue) (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, key);
+    } else {
+      let keys = [];
+      if (Array.isArray(value2)) keys = value2;
+      else if (value2 != null) keys = [
+        value2
+      ];
+      setControlledValue(keys);
     }
   };
   var _props_items;
-  let { collection, selectionManager, selectedKey, setSelectedKey, selectedItem, disabledKeys } = $a0d645289fe9b86b$export$e7f05e985daf4b5f({
+  let { collection, selectionManager, disabledKeys } = $e72dd72e1c76a225$export$2f645645f7bca764({
     ...props,
-    onSelectionChange,
-    items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems
+    items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems,
+    selectionMode,
+    disallowEmptySelection: selectionMode === "single",
+    allowDuplicateSelectionEvents: true,
+    selectedKeys: useMemo(() => $a9e7382a7d111cb5$var$convertValue(displayValue), [
+      displayValue
+    ]),
+    onSelectionChange: (keys) => {
+      if (keys === "all") return;
+      if (selectionMode === "single") {
+        var _keys_values_next_value;
+        let key = (_keys_values_next_value = keys.values().next().value) !== null && _keys_values_next_value !== void 0 ? _keys_values_next_value : null;
+        if (key === displayValue) {
+          var _props_onSelectionChange;
+          (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, key);
+          resetInputValue();
+          closeMenu();
+        } else setValue(key);
+      } else setValue([
+        ...keys
+      ]);
+    }
   });
+  let selectedKey = selectionMode === "single" ? selectionManager.firstSelectedKey : null;
+  let selectedItems = useMemo(() => {
+    return [
+      ...selectionManager.selectedKeys
+    ].map((key) => collection.getItem(key)).filter((item) => item != null);
+  }, [
+    selectionManager.selectedKeys,
+    collection
+  ]);
   let [inputValue, setInputValue] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.inputValue, $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, selectedKey, collection) || "", props.onInputChange);
-  let [initialSelectedKey] = useState(selectedKey);
-  let [initialValue] = useState(inputValue);
+  let [initialValue] = useState(displayValue);
+  let [initialInputValue] = useState(inputValue);
   let originalCollection = collection;
   let filteredCollection = useMemo(() => (
     // No default filter if items are controlled.
@@ -1118,41 +1211,42 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
     setLastValue(itemText);
     setInputValue(itemText);
   };
-  var _props_selectedKey, _ref;
-  let lastSelectedKey = useRef((_ref = (_props_selectedKey = props.selectedKey) !== null && _props_selectedKey !== void 0 ? _props_selectedKey : props.defaultSelectedKey) !== null && _ref !== void 0 ? _ref : null);
+  let lastValueRef = useRef(displayValue);
   var _collection_getItem_textValue;
   let lastSelectedKeyText = useRef(selectedKey != null ? (_collection_getItem_textValue = (_collection_getItem = collection.getItem(selectedKey)) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.textValue) !== null && _collection_getItem_textValue !== void 0 ? _collection_getItem_textValue : "" : "");
   useEffect(() => {
     var _collection_getItem2;
     if (isFocused && (filteredCollection.size > 0 || allowsEmptyCollection) && !triggerState.isOpen && inputValue !== lastValue && menuTrigger !== "manual") open(null, "input");
     if (!showAllItems && !allowsEmptyCollection && triggerState.isOpen && filteredCollection.size === 0) closeMenu();
-    if (selectedKey != null && selectedKey !== lastSelectedKey.current) closeMenu();
+    if (displayValue != null && displayValue !== lastValueRef.current && selectionMode === "single") closeMenu();
     if (inputValue !== lastValue) {
       selectionManager.setFocusedKey(null);
       setShowAllItems(false);
-      if (inputValue === "" && (props.inputValue === void 0 || props.selectedKey === void 0)) setSelectedKey(null);
+      if (selectionMode === "single" && inputValue === "" && (props.inputValue === void 0 || value === void 0)) setValue(null);
     }
-    if (selectedKey !== lastSelectedKey.current && (props.inputValue === void 0 || props.selectedKey === void 0)) resetInputValue();
+    if (displayValue !== lastValueRef.current && (props.inputValue === void 0 || value === void 0)) resetInputValue();
     else if (lastValue !== inputValue) setLastValue(inputValue);
     var _collection_getItem_textValue2;
     let selectedItemText = selectedKey != null ? (_collection_getItem_textValue2 = (_collection_getItem2 = collection.getItem(selectedKey)) === null || _collection_getItem2 === void 0 ? void 0 : _collection_getItem2.textValue) !== null && _collection_getItem_textValue2 !== void 0 ? _collection_getItem_textValue2 : "" : "";
-    if (!isFocused && selectedKey != null && props.inputValue === void 0 && selectedKey === lastSelectedKey.current) {
+    if (!isFocused && selectedKey != null && props.inputValue === void 0 && selectedKey === lastValueRef.current) {
       if (lastSelectedKeyText.current !== selectedItemText) {
         setLastValue(selectedItemText);
         setInputValue(selectedItemText);
       }
     }
-    lastSelectedKey.current = selectedKey;
+    lastValueRef.current = displayValue;
     lastSelectedKeyText.current = selectedItemText;
   });
   let validation = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
     ...props,
-    value: useMemo(() => ({
+    value: useMemo(() => Array.isArray(displayValue) && displayValue.length === 0 ? null : {
       inputValue,
+      value: displayValue,
       selectedKey
-    }), [
+    }, [
       inputValue,
-      selectedKey
+      selectedKey,
+      displayValue
     ])
   });
   let revert = () => {
@@ -1160,14 +1254,16 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
     else commitSelection();
   };
   let commitCustomValue = () => {
-    lastSelectedKey.current = null;
-    setSelectedKey(null);
+    let value2 = selectionMode === "multiple" ? $a9e7382a7d111cb5$var$EMPTY_VALUE : null;
+    lastValueRef.current = value2;
+    setValue(value2);
     closeMenu();
   };
   let commitSelection = () => {
-    if (props.selectedKey !== void 0 && props.inputValue !== void 0) {
-      var _props_onSelectionChange, _collection_getItem2;
+    if (value !== void 0 && props.inputValue !== void 0) {
+      var _props_onSelectionChange, _props_onChange, _collection_getItem2;
       (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, selectedKey);
+      (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, displayValue);
       var _collection_getItem_textValue2;
       let itemText = selectedKey != null ? (_collection_getItem_textValue2 = (_collection_getItem2 = collection.getItem(selectedKey)) === null || _collection_getItem2 === void 0 ? void 0 : _collection_getItem2.textValue) !== null && _collection_getItem_textValue2 !== void 0 ? _collection_getItem_textValue2 : "" : "";
       setLastValue(itemText);
@@ -1188,8 +1284,8 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
   };
   let commit = () => {
     if (triggerState.isOpen && selectionManager.focusedKey != null) {
-      if (selectedKey === selectionManager.focusedKey) commitSelection();
-      else setSelectedKey(selectionManager.focusedKey);
+      if (selectionManager.isSelected(selectionManager.focusedKey) && selectionMode === "single") commitSelection();
+      else selectionManager.select(selectionManager.focusedKey);
     } else commitValue();
   };
   let valueOnFocus = useRef(inputValue);
@@ -1216,8 +1312,8 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
     lastCollection
   ]);
   var _props_defaultSelectedKey;
-  let defaultSelectedKey = (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : initialSelectedKey;
-  var _getDefaultInputValue;
+  let defaultSelectedKey = (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : selectionMode === "single" ? initialValue : null;
+  var _selectedItems_, _getDefaultInputValue;
   return {
     ...validation,
     ...triggerState,
@@ -1226,16 +1322,20 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
     open,
     close: commitValue,
     selectionManager,
+    value: displayValue,
+    defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue,
+    setValue,
     selectedKey,
+    selectedItems,
     defaultSelectedKey,
-    setSelectedKey,
+    setSelectedKey: setValue,
     disabledKeys,
     isFocused,
     setFocused,
-    selectedItem,
+    selectedItem: (_selectedItems_ = selectedItems[0]) !== null && _selectedItems_ !== void 0 ? _selectedItems_ : null,
     collection: displayedCollection,
     inputValue,
-    defaultInputValue: (_getDefaultInputValue = $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, defaultSelectedKey, collection)) !== null && _getDefaultInputValue !== void 0 ? _getDefaultInputValue : initialValue,
+    defaultInputValue: (_getDefaultInputValue = $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, defaultSelectedKey, collection)) !== null && _getDefaultInputValue !== void 0 ? _getDefaultInputValue : initialInputValue,
     setInputValue,
     commit,
     revert
@@ -1272,6 +1372,13 @@ function $a9e7382a7d111cb5$var$getDefaultInputValue(defaultInputValue, selectedK
   }
   return defaultInputValue;
 }
+function $a9e7382a7d111cb5$var$convertValue(value) {
+  if (value === void 0) return void 0;
+  if (value === null) return [];
+  return Array.isArray(value) ? value : [
+    value
+  ];
+}
 const $d01f2c01039c0eec$export$d414ccceff7063c3 = /* @__PURE__ */ createContext(null);
 const $d01f2c01039c0eec$export$c02625b26074192c = /* @__PURE__ */ createContext(null);
 const $d01f2c01039c0eec$export$72b9695b8216309a = /* @__PURE__ */ forwardRef(function ComboBox(props, ref) {
@@ -1336,7 +1443,7 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props, collection, comboBoxRef: r
   let listBoxRef = useRef(null);
   let popoverRef = useRef(null);
   let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  let { buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, ...validation } = $c350ade66beef0af$export$8c18d1b4f7232bbf({
+  let { buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, valueProps, ...validation } = $c350ade66beef0af$export$8c18d1b4f7232bbf({
     ...$64fa3d84918910a7$export$ef03459518577ad4(props),
     label,
     inputRef,
@@ -1385,7 +1492,22 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props, collection, comboBoxRef: r
     global: true
   });
   delete DOMProps.id;
-  var _state_selectedKey;
+  let inputs = [];
+  if (name && formValue === "key") {
+    let values = Array.isArray(state.value) ? state.value : [
+      state.value
+    ];
+    if (values.length === 0) values = [
+      null
+    ];
+    inputs = values.map((value, i) => /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
+      key: i,
+      type: "hidden",
+      name,
+      form: props.form,
+      value: value !== null && value !== void 0 ? value : ""
+    }));
+  }
   return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
@@ -1463,6 +1585,10 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props, collection, comboBoxRef: r
       [
         $ee014567cb39d3f0$export$ff05c3ac10437e03,
         validation
+      ],
+      [
+        $d01f2c01039c0eec$export$5c804022b41722df,
+        valueProps
       ]
     ]
   }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
@@ -1475,13 +1601,9 @@ 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__ */ $dbSRa$react__default.createElement("input", {
-    type: "hidden",
-    name,
-    form: props.form,
-    value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
-  }));
+  }, renderProps.children, inputs));
 }
+const $d01f2c01039c0eec$export$5c804022b41722df = /* @__PURE__ */ createContext(null);
 /**
  * Component that allows URL selection, with a suggestionList of suggestions and type-to-search.
  *
@@ -1575,7 +1697,7 @@ const LinkInput = (props) => {
       "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]',
+      'es:font-variation-["wdth"_80,"wght"_325,"slnt"_0,"ROND"_100] es:placeholder-shown:font-variation-["wdth"_60,"wght"_300,"slnt"_-10,"ROND"_0]',
       inline && "es:min-w-48",
       className
     ],
@@ -1700,6 +1822,7 @@ const LinkInput = (props) => {
           {
             "aria-label": __("URL suggestions", "eightshift-ui-components"),
             className: ({ isEntering, isExiting }) => clsx(
+              "es:font-sans",
               "es:w-(--trigger-width)",
               "es:rounded-xl es:outline-hidden es:min-w-72",
               "es:has-first-selected:rounded-t-18!",
@@ -1784,7 +1907,7 @@ const LinkInput = (props) => {
                           label: title,
                           subtitle: url2?.replace(location.origin, "").replace(/\/$/, ""),
                           className: "es:select-none",
-                          subtitleClassName: 'es:font-variation-["wdth"_40,"wght"_250]!',
+                          subtitleClassName: 'es:font-variation-["wdth"_80,"wght"_250,"ROND"_100,"slnt"_-2]!',
                           iconClassName: "es:p-1 es:text-accent-900 es:bg-surface-50/65 es:rounded-md",
                           noColor: true
                         }
@@ -1794,17 +1917,17 @@ const LinkInput = (props) => {
                 } }),
                 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__ */ jsx("kbd", { className: 'es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-surface-600/10 es:text-surface-600 es:font-sans es:font-variation-["wdth"_100,"wght"_450,"ROND"_100] es:text-13 es:text-box-trim', children: "↓" }),
+                    /* @__PURE__ */ jsx("kbd", { className: 'es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-surface-600/10 es:text-surface-600 es:font-sans es:font-variation-["wdth"_100,"wght"_450,"ROND"_100] es:text-13 es:text-box-trim', children: "↑" }),
+                    /* @__PURE__ */ jsx("span", { className: 'es:font-variation-["wdth"_75,"wght"_325,"ROND"_100,"slnt"_-4] 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 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__ */ jsx("kbd", { className: 'es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-surface-600/10 es:text-surface-600 es:font-sans es:font-variation-["wdth"_100,"wght"_450,"ROND"_100] es:text-13 es:text-box-trim', children: "↵" }),
+                    /* @__PURE__ */ jsx("span", { className: 'es:font-variation-["wdth"_75,"wght"_325,"ROND"_100,"slnt"_-4] 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 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") })
+                    /* @__PURE__ */ jsx("kbd", { className: 'es:flex es:h-4 es:items-center es:justify-center es:rounded es:bg-surface-600/10 es:text-surface-600 es:font-sans es:font-variation-["wdth"_67,"wght"_450,"ROND"_100] es:text-10 es:text-box-trim es:px-0.75', children: "Esc" }),
+                    /* @__PURE__ */ jsx("span", { className: 'es:font-variation-["wdth"_75,"wght"_325,"ROND"_100,"slnt"_-4] es:text-12 es:text-box-trim es:text-surface-700', children: __("Hide", "eightshift-ui-components") })
                   ] })
                 ] })
               ] })

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

@@ -5,7 +5,7 @@ import { upperFirst, camelCase } from "../../utilities/es-dash.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.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-CjCAbUr4.js";
+import { $ as $b6c3ddc6086f204d$export$a98f0dcb43a68a25, a as $b6c3ddc6086f204d$export$d7b12c4107be0d61 } from "../../RadioGroup-DCeiLxLK.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.

package/dist/components/menu/menu.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { $ as $3674c52c6b3c5bce$export$27d2ad3c5815583e, a as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, b as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, c as $3674c52c6b3c5bce$export$4b1545b4f2016d26, d as $431f98aba6844401$export$1ff3c3f08ae963c0, e as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-DDfABlp4.js";
+import { $ as $3674c52c6b3c5bce$export$27d2ad3c5815583e, a as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, b as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, c as $3674c52c6b3c5bce$export$4b1545b4f2016d26, d as $431f98aba6844401$export$1ff3c3f08ae963c0, e as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-DTIxSDhz.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { icons } from "../../icons/icons.js";
 import { Button } from "../button/button.js";
@@ -309,7 +309,7 @@ const SubMenuItem = (props) => {
         "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
         offset: -1,
         ...popoverProps,
-        className: clsx("es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
+        className: clsx("es:font-sans", "es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
         children: /* @__PURE__ */ jsx(
           $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
           {
@@ -352,10 +352,10 @@ const MenuSectionHeader = (props) => {
     {
       ...props,
       className: clsx(
-        '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: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"_76,"wght"_325,"ROND"_100]',
+        "es:select-none es:text-13",
         "es:icon:shrink-0",
-        "es:text-surface-500/80",
+        "es:text-surface-500",
         className
       ),
       isDisabled: true,

package/dist/components/modal/modal.js

@@ -1,12 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { k as $a11501f3d1d39e6c$export$ea8f71083e90600f, l as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, m as $337b884510726a0d$export$14c98a7594375490, n as $5e3802645cc19319$export$1c3ebcada18427bf, o as $de32f1b87079253c$export$d2f961adcb0afbe, p as $86ea4cb521eb2e37$export$2317d149ed6f78c4, q as $337b884510726a0d$export$c6fdb837b070b4ff, h as $de32f1b87079253c$export$2e1e1122cf0cba88, g as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-DDfABlp4.js";
+import { k as $a11501f3d1d39e6c$export$ea8f71083e90600f, l as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, m as $337b884510726a0d$export$14c98a7594375490, n as $5e3802645cc19319$export$1c3ebcada18427bf, o as $de32f1b87079253c$export$d2f961adcb0afbe, p as $86ea4cb521eb2e37$export$2317d149ed6f78c4, q as $337b884510726a0d$export$c6fdb837b070b4ff, h as $de32f1b87079253c$export$2e1e1122cf0cba88, g as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-DTIxSDhz.js";
 import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-CY-_gt-U.js";
 import { m as $b5e257d569688ac6$export$535bd6ca7f90a273, b as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, k as $df56164dff5785e2$export$4338b53315abf666, l as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-Cr3pLd9c.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { d as $21f1aa98acb08317$export$c57958e35f31ed73, e as $cc38e7bd3fc7b213$export$2bb74740c4e19def } from "../../SelectionManager-iru59gc4.js";
+import { d as $21f1aa98acb08317$export$c57958e35f31ed73, e as $cc38e7bd3fc7b213$export$2bb74740c4e19def } from "../../SelectionManager-B02LcxLr.js";
+import { d as $c87311424ea30a05$export$fedb369cb70207f1, b as $d4ee10de306f2510$export$e58f029f0fbfdb29, j as $d4ee10de306f2510$export$cd4e5573fbe2b576 } from "../../useHover-DkmPQdGE.js";
 import $dbSRa$react__default, { useState, useEffect, forwardRef, useContext, useRef, createContext, useMemo } from "react";
 import { $ as $d3f049242431219c$export$45fda7c47f93fd48, a as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../animation-Dfl8uEb3.js";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../OverlayArrow-Dy0qw7WL.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../OverlayArrow-Fuxj-1QM.js";
 import { Button } from "../button/button.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
@@ -34,21 +35,22 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
     let frame;
     let onBlur = (e) => {
       if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
-      if ($21f1aa98acb08317$export$c57958e35f31ed73(e.target))
+      if ($21f1aa98acb08317$export$c57958e35f31ed73($d4ee10de306f2510$export$e58f029f0fbfdb29(e)))
         frame = requestAnimationFrame(() => {
-          if (!document.activeElement || !$21f1aa98acb08317$export$c57958e35f31ed73(document.activeElement)) updateSize({
+          let activeElement = $d4ee10de306f2510$export$cd4e5573fbe2b576();
+          if (!activeElement || !$21f1aa98acb08317$export$c57958e35f31ed73(activeElement)) updateSize({
             width: document.documentElement.clientWidth,
             height: document.documentElement.clientHeight
           });
         });
     };
     updateSize($5df64b3807dc15ee$var$getViewportSize());
-    window.addEventListener("blur", onBlur, true);
+    if ($c87311424ea30a05$export$fedb369cb70207f1()) window.addEventListener("blur", onBlur, true);
     if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener("resize", onResize);
     else $5df64b3807dc15ee$var$visualViewport.addEventListener("resize", onResize);
     return () => {
       cancelAnimationFrame(frame);
-      window.removeEventListener("blur", onBlur, true);
+      if ($c87311424ea30a05$export$fedb369cb70207f1()) window.removeEventListener("blur", onBlur, true);
       if (!$5df64b3807dc15ee$var$visualViewport) window.removeEventListener("resize", onResize);
       else $5df64b3807dc15ee$var$visualViewport.removeEventListener("resize", onResize);
     };
@@ -332,6 +334,7 @@ const ModalInternal = (props) => {
       onOpenChange,
       isKeyboardDismissDisabled: noKeyboardDismiss,
       className: ({ isEntering, isExiting }) => clsx(
+        "es:font-sans",
         "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-hidden es:p-4",
         !noBackdrop && "es:bg-accent-950/20 es:backdrop-blur-xs",
         isEntering && "es:motion-opacity-in es:motion-duration-150",
@@ -360,7 +363,7 @@ const ModalInternal = (props) => {
                   title && /* @__PURE__ */ jsx(
                     $5cb03073d3f54797$export$a8a3e93435678ff9,
                     {
-                      className: 'es:text-balance es:text-xl! es:my-0! es:text-accent-800 es:font-variation-["wdth"_200,"YTLC"_520,"wght"_425]',
+                      className: 'es:text-balance es:text-3xl! es:my-0! es:text-accent-800 es:font-variation-["wdth"_40,"wght"_425,"slnt"_-3,"ROND"_100]',
                       slot: "title",
                       children: title
                     }

package/dist/components/notice/notice.js

@@ -114,7 +114,7 @@ const Notice = (props) => {
             className: clsx(
               "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]',
+              'es:font-variation-["wdth"_78,"wght"_325,"ROND"_100]',
               styles[type].textColorClassName
             ),
             children: label
@@ -124,8 +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.25",
-              'es:font-variation-["wdth"_76,"wght"_350]',
+              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tighter es:pt-0.75",
+              'es:font-variation-["wdth"_90,"wght"_350,"slnt"_-1]',
               styles[type].subtitleColorClassName,
               label ? "es:self-start" : "es:row-span-2 es:self-center-safe"
             ),