@react-spectrum/tag 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/module.js

@@ -1,17 +1,18 @@
 import "./main.css";
 import {Item as $c14698d57a91452e$re_export$Item} from "@react-stately/collections";
-import {useDOMRef as $fUaQ2$useDOMRef, useStyleProps as $fUaQ2$useStyleProps, classNames as $fUaQ2$classNames, SlotProvider as $fUaQ2$SlotProvider, useSlotProps as $fUaQ2$useSlotProps} from "@react-spectrum/utils";
-import {GridCollection as $fUaQ2$GridCollection, useGridState as $fUaQ2$useGridState} from "@react-stately/grid";
-import {mergeProps as $fUaQ2$mergeProps} from "@react-aria/utils";
-import $fUaQ2$react, {useMemo as $fUaQ2$useMemo, useRef as $fUaQ2$useRef} from "react";
+import {ActionButton as $fUaQ2$ActionButton, ClearButton as $fUaQ2$ClearButton} from "@react-spectrum/button";
 import {TagKeyboardDelegate as $fUaQ2$TagKeyboardDelegate, useTagGroup as $fUaQ2$useTagGroup, useTag as $fUaQ2$useTag} from "@react-aria/tag";
-import {useGrid as $fUaQ2$useGrid} from "@react-aria/grid";
-import {useListState as $fUaQ2$useListState} from "@react-stately/list";
-import {useLocale as $fUaQ2$useLocale} from "@react-aria/i18n";
-import {useProviderProps as $fUaQ2$useProviderProps} from "@react-spectrum/provider";
-import {ClearButton as $fUaQ2$ClearButton} from "@react-spectrum/button";
+import {useDOMRef as $fUaQ2$useDOMRef, classNames as $fUaQ2$classNames, useStyleProps as $fUaQ2$useStyleProps, SlotProvider as $fUaQ2$SlotProvider, ClearSlots as $fUaQ2$ClearSlots} from "@react-spectrum/utils";
+import {Field as $fUaQ2$Field} from "@react-spectrum/label";
+import {FocusScope as $fUaQ2$FocusScope, useFocusRing as $fUaQ2$useFocusRing} from "@react-aria/focus";
+import {ListCollection as $fUaQ2$ListCollection} from "@react-stately/list";
+import {useProviderProps as $fUaQ2$useProviderProps, Provider as $fUaQ2$Provider} from "@react-spectrum/provider";
+import $fUaQ2$react, {useRef as $fUaQ2$useRef, useState as $fUaQ2$useState, useMemo as $fUaQ2$useMemo, useCallback as $fUaQ2$useCallback, useEffect as $fUaQ2$useEffect} from "react";
+import {useFormProps as $fUaQ2$useFormProps} from "@react-spectrum/form";
+import {useValueEffect as $fUaQ2$useValueEffect, useId as $fUaQ2$useId, useResizeObserver as $fUaQ2$useResizeObserver, useLayoutEffect as $fUaQ2$useLayoutEffect, mergeProps as $fUaQ2$mergeProps} from "@react-aria/utils";
+import {useLocale as $fUaQ2$useLocale, useLocalizedStringFormatter as $fUaQ2$useLocalizedStringFormatter} from "@react-aria/i18n";
+import {useTagGroupState as $fUaQ2$useTagGroupState} from "@react-stately/tag";
 import {Text as $fUaQ2$Text} from "@react-spectrum/text";
-import {useFocusRing as $fUaQ2$useFocusRing} from "@react-aria/focus";
 import {useHover as $fUaQ2$useHover} from "@react-aria/interactions";
 
 function $parcel$interopDefault(a) {
@@ -44,16 +45,338 @@ function $parcel$export(e, n, v, s) {
 
 
 
+
+var $70cc9ce0ced2eb4a$exports = {};
+var $4f97095b36611c9c$exports = {};
+$4f97095b36611c9c$exports = {
+    "actions": `الإجراءات`,
+    "hideButtonLabel": `إظهار أقل`,
+    "showAllButtonLabel": (args)=>`إظهار الكل (${args.tagCount})`
+};
+
+
+var $d1606ced019b0a9e$exports = {};
+$d1606ced019b0a9e$exports = {
+    "actions": `Действия`,
+    "hideButtonLabel": `Показване на по-малко`,
+    "showAllButtonLabel": (args)=>`Показване на всички (${args.tagCount})`
+};
+
+
+var $01e300f7d0078144$exports = {};
+$01e300f7d0078144$exports = {
+    "actions": `Akce`,
+    "hideButtonLabel": `Zobrazit méně`,
+    "showAllButtonLabel": (args)=>`Zobrazit vše (${args.tagCount})`
+};
+
+
+var $f3862a5e5adf53a4$exports = {};
+$f3862a5e5adf53a4$exports = {
+    "actions": `Handlinger`,
+    "hideButtonLabel": `Vis mindre`,
+    "showAllButtonLabel": (args)=>`Vis alle (${args.tagCount})`
+};
+
+
+var $74c0b6e11258b497$exports = {};
+$74c0b6e11258b497$exports = {
+    "actions": `Aktionen`,
+    "hideButtonLabel": `Weniger zeigen`,
+    "showAllButtonLabel": (args)=>`Alle anzeigen (${args.tagCount})`
+};
+
+
+var $54fc4e3090259431$exports = {};
+$54fc4e3090259431$exports = {
+    "actions": `Ενέργειες`,
+    "hideButtonLabel": `Εμφάνιση λιγότερων`,
+    "showAllButtonLabel": (args)=>`Εμφάνιση όλων (${args.tagCount})`
+};
+
+
+var $edf02907a7caaf96$exports = {};
+$edf02907a7caaf96$exports = {
+    "showAllButtonLabel": (args)=>`Show all (${args.tagCount})`,
+    "hideButtonLabel": `Show less`,
+    "actions": `Actions`
+};
+
+
+var $b15ad3cf4b213b8e$exports = {};
+$b15ad3cf4b213b8e$exports = {
+    "actions": `Acciones`,
+    "hideButtonLabel": `Mostrar menos`,
+    "showAllButtonLabel": (args)=>`Mostrar todo (${args.tagCount})`
+};
+
+
+var $36cfda096c3db653$exports = {};
+$36cfda096c3db653$exports = {
+    "actions": `Toimingud`,
+    "hideButtonLabel": `Kuva vähem`,
+    "showAllButtonLabel": (args)=>`Kuva kõik (${args.tagCount})`
+};
+
+
+var $1a42e74299cab64d$exports = {};
+$1a42e74299cab64d$exports = {
+    "actions": `Toiminnot`,
+    "hideButtonLabel": `Näytä vähemmän`,
+    "showAllButtonLabel": (args)=>`Näytä kaikki (${args.tagCount})`
+};
+
+
+var $dd8d3f41a5bfc373$exports = {};
+$dd8d3f41a5bfc373$exports = {
+    "actions": `Actions`,
+    "hideButtonLabel": `Afficher moins`,
+    "showAllButtonLabel": (args)=>`Tout afficher (${args.tagCount})`
+};
+
+
+var $35d68da324c3ed3e$exports = {};
+$35d68da324c3ed3e$exports = {
+    "actions": `פעולות`,
+    "hideButtonLabel": `הצג פחות`,
+    "showAllButtonLabel": (args)=>`הצג הכל (${args.tagCount})`
+};
+
+
+var $92746ce1284cd29f$exports = {};
+$92746ce1284cd29f$exports = {
+    "actions": `Radnje`,
+    "hideButtonLabel": `Prikaži manje`,
+    "showAllButtonLabel": (args)=>`Prikaži sve (${args.tagCount})`
+};
+
+
+var $570956f4f59f34b9$exports = {};
+$570956f4f59f34b9$exports = {
+    "actions": `Műveletek`,
+    "hideButtonLabel": `Mutass kevesebbet`,
+    "showAllButtonLabel": (args)=>`Összes megjelenítése (${args.tagCount})`
+};
+
+
+var $f680d16d6f0d92d8$exports = {};
+$f680d16d6f0d92d8$exports = {
+    "actions": `Azioni`,
+    "hideButtonLabel": `Mostra meno`,
+    "showAllButtonLabel": (args)=>`Mostra tutto (${args.tagCount})`
+};
+
+
+var $d28c56f33dc08452$exports = {};
+$d28c56f33dc08452$exports = {
+    "actions": `アクション`,
+    "hideButtonLabel": `表示を減らす`,
+    "showAllButtonLabel": (args)=>`(${args.tagCount}) 個をすべて表示`
+};
+
+
+var $fc6f973338bd2d9c$exports = {};
+$fc6f973338bd2d9c$exports = {
+    "actions": `액션`,
+    "hideButtonLabel": `간단히 표시`,
+    "showAllButtonLabel": (args)=>`모두 표시 (${args.tagCount})`
+};
+
+
+var $8664f3f6a18cfaa6$exports = {};
+$8664f3f6a18cfaa6$exports = {
+    "actions": `Veiksmai`,
+    "hideButtonLabel": `Rodyti mažiau`,
+    "showAllButtonLabel": (args)=>`Rodyti viską (${args.tagCount})`
+};
+
+
+var $bd6e0fb18b482534$exports = {};
+$bd6e0fb18b482534$exports = {
+    "actions": `Darbības`,
+    "hideButtonLabel": `Rādīt mazāk`,
+    "showAllButtonLabel": (args)=>`Rādīt visu (${args.tagCount})`
+};
+
+
+var $3df66303c61fb25b$exports = {};
+$3df66303c61fb25b$exports = {
+    "actions": `Handlinger`,
+    "hideButtonLabel": `Vis mindre`,
+    "showAllButtonLabel": (args)=>`Vis alle (${args.tagCount})`
+};
+
+
+var $0f533b61cdf70176$exports = {};
+$0f533b61cdf70176$exports = {
+    "actions": `Acties`,
+    "hideButtonLabel": `Minder weergeven`,
+    "showAllButtonLabel": (args)=>`Alles weergeven (${args.tagCount})`
+};
+
+
+var $03a6cd8f61b18787$exports = {};
+$03a6cd8f61b18787$exports = {
+    "actions": `Działania`,
+    "hideButtonLabel": `Wyświetl mniej`,
+    "showAllButtonLabel": (args)=>`Wyświetl wszystkie (${args.tagCount})`
+};
+
+
+var $c726a9d931f60c66$exports = {};
+$c726a9d931f60c66$exports = {
+    "actions": `Ações`,
+    "hideButtonLabel": `Mostrar menos`,
+    "showAllButtonLabel": (args)=>`Mostrar todos (${args.tagCount})`
+};
+
+
+var $ae9982f17f7235eb$exports = {};
+$ae9982f17f7235eb$exports = {
+    "actions": `Ações`,
+    "hideButtonLabel": `Mostrar menos`,
+    "showAllButtonLabel": (args)=>`Mostrar tudo (${args.tagCount})`
+};
+
+
+var $c756723b814c63fa$exports = {};
+$c756723b814c63fa$exports = {
+    "actions": `Acțiuni`,
+    "hideButtonLabel": `Se afișează mai puțin`,
+    "showAllButtonLabel": (args)=>`Se afișează tot (${args.tagCount})`
+};
+
+
+var $1601284ef6ec0730$exports = {};
+$1601284ef6ec0730$exports = {
+    "actions": `Действия`,
+    "hideButtonLabel": `Показать меньше`,
+    "showAllButtonLabel": (args)=>`Показать все (${args.tagCount})`
+};
+
+
+var $0388aac8e3bc5b59$exports = {};
+$0388aac8e3bc5b59$exports = {
+    "actions": `Akcie`,
+    "hideButtonLabel": `Zobraziť menej`,
+    "showAllButtonLabel": (args)=>`Zobraziť všetko (${args.tagCount})`
+};
+
+
+var $247d9c4a71da6b08$exports = {};
+$247d9c4a71da6b08$exports = {
+    "actions": `Dejanja`,
+    "hideButtonLabel": `Prikaži manj`,
+    "showAllButtonLabel": (args)=>`Prikaži vse (${args.tagCount})`
+};
+
+
+var $91424dbafdc02f68$exports = {};
+$91424dbafdc02f68$exports = {
+    "actions": `Radnje`,
+    "hideButtonLabel": `Prikaži manje`,
+    "showAllButtonLabel": (args)=>`Prikaži sve (${args.tagCount})`
+};
+
+
+var $23c23096b6c1b0fa$exports = {};
+$23c23096b6c1b0fa$exports = {
+    "actions": `Åtgärder`,
+    "hideButtonLabel": `Visa mindre`,
+    "showAllButtonLabel": (args)=>`Visa allt (${args.tagCount})`
+};
+
+
+var $d82875ae28963e58$exports = {};
+$d82875ae28963e58$exports = {
+    "actions": `Eylemler`,
+    "hideButtonLabel": `Daha az göster`,
+    "showAllButtonLabel": (args)=>`Tümünü göster (${args.tagCount})`
+};
+
+
+var $1dd153688f5574fc$exports = {};
+$1dd153688f5574fc$exports = {
+    "actions": `Дії`,
+    "hideButtonLabel": `Показувати менше`,
+    "showAllButtonLabel": (args)=>`Показати всі (${args.tagCount})`
+};
+
+
+var $6427307c9596258c$exports = {};
+$6427307c9596258c$exports = {
+    "actions": `操作`,
+    "hideButtonLabel": `显示更少`,
+    "showAllButtonLabel": (args)=>`显示全部 (${args.tagCount})`
+};
+
+
+var $18b85da2aafaaf3e$exports = {};
+$18b85da2aafaaf3e$exports = {
+    "actions": `動作`,
+    "hideButtonLabel": `顯示較少`,
+    "showAllButtonLabel": (args)=>`顯示全部 (${args.tagCount})`
+};
+
+
+$70cc9ce0ced2eb4a$exports = {
+    "ar-AE": $4f97095b36611c9c$exports,
+    "bg-BG": $d1606ced019b0a9e$exports,
+    "cs-CZ": $01e300f7d0078144$exports,
+    "da-DK": $f3862a5e5adf53a4$exports,
+    "de-DE": $74c0b6e11258b497$exports,
+    "el-GR": $54fc4e3090259431$exports,
+    "en-US": $edf02907a7caaf96$exports,
+    "es-ES": $b15ad3cf4b213b8e$exports,
+    "et-EE": $36cfda096c3db653$exports,
+    "fi-FI": $1a42e74299cab64d$exports,
+    "fr-FR": $dd8d3f41a5bfc373$exports,
+    "he-IL": $35d68da324c3ed3e$exports,
+    "hr-HR": $92746ce1284cd29f$exports,
+    "hu-HU": $570956f4f59f34b9$exports,
+    "it-IT": $f680d16d6f0d92d8$exports,
+    "ja-JP": $d28c56f33dc08452$exports,
+    "ko-KR": $fc6f973338bd2d9c$exports,
+    "lt-LT": $8664f3f6a18cfaa6$exports,
+    "lv-LV": $bd6e0fb18b482534$exports,
+    "nb-NO": $3df66303c61fb25b$exports,
+    "nl-NL": $0f533b61cdf70176$exports,
+    "pl-PL": $03a6cd8f61b18787$exports,
+    "pt-BR": $c726a9d931f60c66$exports,
+    "pt-PT": $ae9982f17f7235eb$exports,
+    "ro-RO": $c756723b814c63fa$exports,
+    "ru-RU": $1601284ef6ec0730$exports,
+    "sk-SK": $0388aac8e3bc5b59$exports,
+    "sl-SI": $247d9c4a71da6b08$exports,
+    "sr-SP": $91424dbafdc02f68$exports,
+    "sv-SE": $23c23096b6c1b0fa$exports,
+    "tr-TR": $d82875ae28963e58$exports,
+    "uk-UA": $1dd153688f5574fc$exports,
+    "zh-CN": $6427307c9596258c$exports,
+    "zh-TW": $18b85da2aafaaf3e$exports
+};
+
+
+
+
+
 var $c033a7c057e84ef1$exports = {};
 
 $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-item", () => $c033a7c057e84ef1$export$950d8dc0a3751654, (v) => $c033a7c057e84ef1$export$950d8dc0a3751654 = v);
 $parcel$export($c033a7c057e84ef1$exports, "focus-ring", () => $c033a7c057e84ef1$export$f39a09f249340e2a, (v) => $c033a7c057e84ef1$export$f39a09f249340e2a = v);
 $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags", () => $c033a7c057e84ef1$export$eb7e80013a1212da, (v) => $c033a7c057e84ef1$export$eb7e80013a1212da = v);
+$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-container", () => $c033a7c057e84ef1$export$3300169c5d27fe96, (v) => $c033a7c057e84ef1$export$3300169c5d27fe96 = v);
 $parcel$export($c033a7c057e84ef1$exports, "is-disabled", () => $c033a7c057e84ef1$export$d35bc1e505d1ebbf, (v) => $c033a7c057e84ef1$export$d35bc1e505d1ebbf = v);
-$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-action", () => $c033a7c057e84ef1$export$c5a1243e33faa2d4, (v) => $c033a7c057e84ef1$export$c5a1243e33faa2d4 = v);
+$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-removeButton", () => $c033a7c057e84ef1$export$23a76b996f0a6c1, (v) => $c033a7c057e84ef1$export$23a76b996f0a6c1 = v);
+$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-cell", () => $c033a7c057e84ef1$export$9c4fd4d7faada408, (v) => $c033a7c057e84ef1$export$9c4fd4d7faada408 = v);
 $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-icon", () => $c033a7c057e84ef1$export$21f5254139e14871, (v) => $c033a7c057e84ef1$export$21f5254139e14871 = v);
+$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-avatar", () => $c033a7c057e84ef1$export$7b57f5221a1b5306, (v) => $c033a7c057e84ef1$export$7b57f5221a1b5306 = v);
 $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-content", () => $c033a7c057e84ef1$export$d281c967f4ee071e, (v) => $c033a7c057e84ef1$export$d281c967f4ee071e = v);
-$parcel$export($c033a7c057e84ef1$exports, "tags-removable", () => $c033a7c057e84ef1$export$7427262f66a3b803, (v) => $c033a7c057e84ef1$export$7427262f66a3b803 = v);
+$parcel$export($c033a7c057e84ef1$exports, "is-removable", () => $c033a7c057e84ef1$export$52d72cb84c5fde5e, (v) => $c033a7c057e84ef1$export$52d72cb84c5fde5e = v);
+$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-actions", () => $c033a7c057e84ef1$export$8afaa02110915bbb, (v) => $c033a7c057e84ef1$export$8afaa02110915bbb = v);
+$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-actionButton", () => $c033a7c057e84ef1$export$e6882f8db018e3bd, (v) => $c033a7c057e84ef1$export$e6882f8db018e3bd = v);
+$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-fieldWrapper", () => $c033a7c057e84ef1$export$c9b7ca327d69b2b5, (v) => $c033a7c057e84ef1$export$c9b7ca327d69b2b5 = v);
+$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-fieldWrapper--positionSide", () => $c033a7c057e84ef1$export$a7c11d4acc244e09, (v) => $c033a7c057e84ef1$export$a7c11d4acc244e09 = v);
 $parcel$export($c033a7c057e84ef1$exports, "is-hovered", () => $c033a7c057e84ef1$export$b8813cd5d7824ce7, (v) => $c033a7c057e84ef1$export$b8813cd5d7824ce7 = v);
 $parcel$export($c033a7c057e84ef1$exports, "is-selected", () => $c033a7c057e84ef1$export$1e0fb04f31d3c22a, (v) => $c033a7c057e84ef1$export$1e0fb04f31d3c22a = v);
 $parcel$export($c033a7c057e84ef1$exports, "is-invalid", () => $c033a7c057e84ef1$export$14a30de2866685fa, (v) => $c033a7c057e84ef1$export$14a30de2866685fa = v);
@@ -66,11 +389,18 @@ $parcel$export($c033a7c057e84ef1$exports, "is-focused", () => $c033a7c057e84ef1$
 var $c033a7c057e84ef1$export$950d8dc0a3751654;
 var $c033a7c057e84ef1$export$f39a09f249340e2a;
 var $c033a7c057e84ef1$export$eb7e80013a1212da;
+var $c033a7c057e84ef1$export$3300169c5d27fe96;
 var $c033a7c057e84ef1$export$d35bc1e505d1ebbf;
-var $c033a7c057e84ef1$export$c5a1243e33faa2d4;
+var $c033a7c057e84ef1$export$23a76b996f0a6c1;
+var $c033a7c057e84ef1$export$9c4fd4d7faada408;
 var $c033a7c057e84ef1$export$21f5254139e14871;
+var $c033a7c057e84ef1$export$7b57f5221a1b5306;
 var $c033a7c057e84ef1$export$d281c967f4ee071e;
-var $c033a7c057e84ef1$export$7427262f66a3b803;
+var $c033a7c057e84ef1$export$52d72cb84c5fde5e;
+var $c033a7c057e84ef1$export$8afaa02110915bbb;
+var $c033a7c057e84ef1$export$e6882f8db018e3bd;
+var $c033a7c057e84ef1$export$c9b7ca327d69b2b5;
+var $c033a7c057e84ef1$export$a7c11d4acc244e09;
 var $c033a7c057e84ef1$export$b8813cd5d7824ce7;
 var $c033a7c057e84ef1$export$1e0fb04f31d3c22a;
 var $c033a7c057e84ef1$export$14a30de2866685fa;
@@ -83,11 +413,18 @@ var $c033a7c057e84ef1$export$e7dc768d35940237;
 $c033a7c057e84ef1$export$950d8dc0a3751654 = "spectrum-Tags-item_8407eb";
 $c033a7c057e84ef1$export$f39a09f249340e2a = "focus-ring_8407eb";
 $c033a7c057e84ef1$export$eb7e80013a1212da = "spectrum-Tags_8407eb";
+$c033a7c057e84ef1$export$3300169c5d27fe96 = "spectrum-Tags-container_8407eb";
 $c033a7c057e84ef1$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
-$c033a7c057e84ef1$export$c5a1243e33faa2d4 = "spectrum-Tag-action_8407eb";
+$c033a7c057e84ef1$export$23a76b996f0a6c1 = "spectrum-Tag-removeButton_8407eb";
+$c033a7c057e84ef1$export$9c4fd4d7faada408 = "spectrum-Tag-cell_8407eb";
 $c033a7c057e84ef1$export$21f5254139e14871 = "spectrum-Tag-icon_8407eb";
+$c033a7c057e84ef1$export$7b57f5221a1b5306 = "spectrum-Tag-avatar_8407eb";
 $c033a7c057e84ef1$export$d281c967f4ee071e = "spectrum-Tag-content_8407eb";
-$c033a7c057e84ef1$export$7427262f66a3b803 = "tags-removable_8407eb";
+$c033a7c057e84ef1$export$52d72cb84c5fde5e = "is-removable_8407eb";
+$c033a7c057e84ef1$export$8afaa02110915bbb = "spectrum-Tags-actions_8407eb";
+$c033a7c057e84ef1$export$e6882f8db018e3bd = "spectrum-Tags-actionButton_8407eb";
+$c033a7c057e84ef1$export$c9b7ca327d69b2b5 = "spectrum-Tags-fieldWrapper_8407eb";
+$c033a7c057e84ef1$export$a7c11d4acc244e09 = "spectrum-Tags-fieldWrapper--positionSide_8407eb";
 $c033a7c057e84ef1$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
 $c033a7c057e84ef1$export$1e0fb04f31d3c22a = "is-selected_8407eb";
 $c033a7c057e84ef1$export$14a30de2866685fa = "is-invalid_8407eb";
@@ -126,28 +463,26 @@ function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
     let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $fUaQ2$useFocusRing)({
         within: true
     });
-    let tagRef = (0, $fUaQ2$useRef)();
-    let tagRowRef = (0, $fUaQ2$useRef)();
+    let ref = (0, $fUaQ2$useRef)();
     let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps  } = (0, $fUaQ2$useTag)({
         ...props,
         isFocused: isFocused,
         allowsRemoving: allowsRemoving,
         item: item,
-        onRemove: onRemove,
-        tagRef: tagRef,
-        tagRowRef: tagRowRef
-    }, state);
+        onRemove: onRemove
+    }, state, ref);
     return /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
-        ...tagRowProps,
-        ref: tagRowRef
-    }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
-        ...(0, $fUaQ2$mergeProps)(tagProps, hoverProps, focusProps),
+        ...(0, $fUaQ2$mergeProps)(tagRowProps, hoverProps, focusProps),
         className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags-item", {
             "focus-ring": isFocusVisible,
             "is-focused": isFocused,
-            "is-hovered": isHovered
+            "is-hovered": isHovered,
+            "is-removable": allowsRemoving
         }, styleProps.className),
-        ref: tagRef
+        ref: ref
+    }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
+        className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-cell"),
+        ...tagProps
     }, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$SlotProvider), {
         slots: {
             icon: {
@@ -155,26 +490,23 @@ function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
                 size: "XS"
             },
             text: {
-                UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-content", {
-                    "tags-removable": allowsRemoving
-                }),
+                UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-content"),
                 ...labelProps
+            },
+            avatar: {
+                UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-avatar"),
+                size: "avatar-size-50"
             }
         }
-    }, typeof children === "string" ? /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$Text), null, children) : children, allowsRemoving && /*#__PURE__*/ (0, $fUaQ2$react).createElement($b5f5ee35d3b6b95c$var$TagRemoveButton, {
+    }, typeof children === "string" ? /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$Text), null, children) : children, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$ClearSlots), null, allowsRemoving && /*#__PURE__*/ (0, $fUaQ2$react).createElement($b5f5ee35d3b6b95c$var$TagRemoveButton, {
         item: item,
         ...clearButtonProps,
-        UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-action")
-    }))));
+        UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-removeButton")
+    })))));
 }
 function $b5f5ee35d3b6b95c$var$TagRemoveButton(props) {
-    props = (0, $fUaQ2$useSlotProps)(props, "tagRemoveButton");
     let { styleProps: styleProps  } = (0, $fUaQ2$useStyleProps)(props);
-    let clearBtnRef = (0, $fUaQ2$useRef)();
-    return /*#__PURE__*/ (0, $fUaQ2$react).createElement("span", {
-        ...styleProps,
-        ref: clearBtnRef
-    }, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$ClearButton), {
+    return /*#__PURE__*/ (0, $fUaQ2$react).createElement("span", styleProps, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$ClearButton), {
         preventFocus: true,
         ...props
     }));
@@ -185,70 +517,171 @@ function $b5f5ee35d3b6b95c$var$TagRemoveButton(props) {
 
 
 
-
 function $880d112c7a588209$var$TagGroup(props, ref) {
     props = (0, $fUaQ2$useProviderProps)(props);
-    let { allowsRemoving: allowsRemoving , onRemove: onRemove , ...otherProps } = props;
+    props = (0, $fUaQ2$useFormProps)(props);
+    let { allowsRemoving: allowsRemoving , onRemove: onRemove , maxRows: maxRows , children: children , actionLabel: actionLabel , onAction: onAction , labelPosition: labelPosition  } = props;
     let domRef = (0, $fUaQ2$useDOMRef)(ref);
-    let { styleProps: styleProps  } = (0, $fUaQ2$useStyleProps)(otherProps);
+    let containerRef = (0, $fUaQ2$useRef)(null);
+    let tagsRef = (0, $fUaQ2$useRef)(null);
     let { direction: direction  } = (0, $fUaQ2$useLocale)();
-    let listState = (0, $fUaQ2$useListState)(props);
-    let gridCollection = (0, $fUaQ2$useMemo)(()=>new (0, $fUaQ2$GridCollection)({
-            columnCount: 1,
-            items: [
-                ...listState.collection
-            ].map((item)=>{
-                let childNodes = [
-                    {
-                        ...item,
-                        index: 0,
-                        type: "cell"
-                    }
+    let stringFormatter = (0, $fUaQ2$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($70cc9ce0ced2eb4a$exports))));
+    let [isCollapsed, setIsCollapsed] = (0, $fUaQ2$useState)(maxRows != null);
+    let state = (0, $fUaQ2$useTagGroupState)(props);
+    let [tagState, setTagState] = (0, $fUaQ2$useValueEffect)({
+        visibleTagCount: state.collection.size,
+        showCollapseButton: false
+    });
+    let keyboardDelegate = (0, $fUaQ2$useMemo)(()=>isCollapsed ? new (0, $fUaQ2$TagKeyboardDelegate)(new (0, $fUaQ2$ListCollection)([
+            ...state.collection
+        ].slice(0, tagState.visibleTagCount)), direction) : new (0, $fUaQ2$TagKeyboardDelegate)(new (0, $fUaQ2$ListCollection)([
+            ...state.collection
+        ]), direction), [
+        direction,
+        isCollapsed,
+        state.collection,
+        tagState.visibleTagCount
+    ]);
+    // Remove onAction from props so it doesn't make it into useGridList.
+    delete props.onAction;
+    let { tagGroupProps: tagGroupProps , labelProps: labelProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $fUaQ2$useTagGroup)({
+        ...props,
+        keyboardDelegate: keyboardDelegate
+    }, state, tagsRef);
+    let actionsId = (0, $fUaQ2$useId)();
+    let updateVisibleTagCount = (0, $fUaQ2$useCallback)(()=>{
+        if (maxRows > 0) {
+            let computeVisibleTagCount = ()=>{
+                var _tags_;
+                // Refs can be null at runtime.
+                let currDomRef = domRef.current;
+                let currContainerRef = containerRef.current;
+                let currTagsRef = tagsRef.current;
+                if (!currDomRef || !currContainerRef || !currTagsRef) return;
+                let tags = [
+                    ...currTagsRef.children
                 ];
+                let buttons = [
+                    ...currContainerRef.parentElement.querySelectorAll("button")
+                ];
+                let currY = -Infinity;
+                let rowCount = 0;
+                let index = 0;
+                let tagWidths = [];
+                // Count rows and show tags until we hit the maxRows.
+                for (let tag of tags){
+                    let { width: width , y: y  } = tag.getBoundingClientRect();
+                    if (y !== currY) {
+                        currY = y;
+                        rowCount++;
+                    }
+                    if (rowCount > maxRows) break;
+                    tagWidths.push(width);
+                    index++;
+                }
+                // Remove tags until there is space for the collapse button and action button (if present) on the last row.
+                let buttonsWidth = buttons.reduce((acc, curr)=>acc += curr.getBoundingClientRect().width, 0);
+                let end = direction === "ltr" ? "right" : "left";
+                let containerEnd = currContainerRef.getBoundingClientRect()[end];
+                let lastTagEnd = (_tags_ = tags[index - 1]) === null || _tags_ === void 0 ? void 0 : _tags_.getBoundingClientRect()[end];
+                let availableWidth = containerEnd - lastTagEnd;
+                for (let tagWidth of tagWidths.reverse()){
+                    if (availableWidth >= buttonsWidth || index <= 1 || index >= state.collection.size) break;
+                    availableWidth += tagWidth;
+                    index--;
+                }
                 return {
-                    type: "item",
-                    childNodes: childNodes
+                    visibleTagCount: index,
+                    showCollapseButton: index < state.collection.size
+                };
+            };
+            setTagState(function*() {
+                // Update to show all items.
+                yield {
+                    visibleTagCount: state.collection.size,
+                    showCollapseButton: true
                 };
-            })
-        }), [
-        listState.collection,
-        allowsRemoving
+                // Measure, and update to show the items until maxRows is reached.
+                yield computeVisibleTagCount();
+            });
+        }
+    }, [
+        maxRows,
+        setTagState,
+        domRef,
+        direction,
+        state.collection.size
     ]);
-    let state = (0, $fUaQ2$useGridState)({
-        ...props,
-        collection: gridCollection,
-        focusMode: "cell"
-    });
-    let keyboardDelegate = new (0, $fUaQ2$TagKeyboardDelegate)({
-        collection: state.collection,
-        disabledKeys: new Set(),
+    (0, $fUaQ2$useResizeObserver)({
         ref: domRef,
-        direction: direction,
-        focusMode: "cell"
+        onResize: updateVisibleTagCount
     });
-    let { gridProps: gridProps  } = (0, $fUaQ2$useGrid)({
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, $fUaQ2$useLayoutEffect)(updateVisibleTagCount, [
+        children
+    ]);
+    (0, $fUaQ2$useEffect)(()=>{
+        var // Recalculate visible tags when fonts are loaded.
+        _document_fonts;
+        (_document_fonts = document.fonts) === null || _document_fonts === void 0 ? void 0 : _document_fonts.ready.then(()=>updateVisibleTagCount());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    let visibleTags = [
+        ...state.collection
+    ];
+    if (maxRows != null && isCollapsed) visibleTags = visibleTags.slice(0, tagState.visibleTagCount);
+    let handlePressCollapse = ()=>{
+        // Prevents button from losing focus if focusedKey got collapsed.
+        state.selectionManager.setFocusedKey(null);
+        setIsCollapsed((prevCollapsed)=>!prevCollapsed);
+    };
+    let showActions = tagState.showCollapseButton || actionLabel && onAction;
+    return /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$FocusScope), null, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$Field), {
         ...props,
-        keyboardDelegate: keyboardDelegate
-    }, state, domRef);
-    const { tagGroupProps: tagGroupProps  } = (0, $fUaQ2$useTagGroup)(props);
-    // Don't want the grid to be focusable or accessible via keyboard
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    let { tabIndex: tabIndex , role: role , ...otherGridProps } = gridProps;
-    return /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
-        ...(0, $fUaQ2$mergeProps)(styleProps, tagGroupProps, otherGridProps),
-        className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags", styleProps.className),
-        role: state.collection.size ? "grid" : null,
-        ref: domRef
-    }, [
-        ...gridCollection
-    ].map((item)=>/*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $b5f5ee35d3b6b95c$export$3288d34c523a1192), {
-            ...item.childNodes[0].props,
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        showErrorIcon: true,
+        ref: domRef,
+        elementType: "span",
+        UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags-fieldWrapper", {
+            "spectrum-Tags-fieldWrapper--positionSide": labelPosition === "side"
+        })
+    }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
+        ref: containerRef,
+        className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags-container")
+    }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
+        ref: tagsRef,
+        ...tagGroupProps,
+        className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags")
+    }, visibleTags.map((item)=>/*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $b5f5ee35d3b6b95c$export$3288d34c523a1192), {
+            ...item.props,
             key: item.key,
             item: item,
             state: state,
             allowsRemoving: allowsRemoving,
             onRemove: onRemove
-        }, item.childNodes[0].rendered)));
+        }, item.rendered))), showActions && /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$Provider), {
+        isDisabled: false
+    }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
+        role: "group",
+        id: actionsId,
+        "aria-label": stringFormatter.format("actions"),
+        "aria-labelledby": `${tagGroupProps.id} ${actionsId}`,
+        className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags-actions")
+    }, tagState.showCollapseButton && /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$ActionButton), {
+        isQuiet: true,
+        onPress: handlePressCollapse,
+        UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags-actionButton")
+    }, isCollapsed ? stringFormatter.format("showAllButtonLabel", {
+        tagCount: state.collection.size
+    }) : stringFormatter.format("hideButtonLabel")), actionLabel && onAction && /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$ActionButton), {
+        isQuiet: true,
+        onPress: ()=>{
+            return onAction === null || onAction === void 0 ? void 0 : onAction();
+        },
+        UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags-actionButton")
+    }, actionLabel))))));
 }
 /** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */ const $880d112c7a588209$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $fUaQ2$react).forwardRef($880d112c7a588209$var$TagGroup);