@react-spectrum/s2
Version:
Spectrum 2 UI components in React
706 lines (681 loc) • 32.2 kB
JavaScript
import "./TagGroup.css";
import {ActionButton as $da878a05ab4a403e$export$cfc7921d29ef7b80} from "./ActionButton.mjs";
import $e17a4836f4b6cc28$export$2e2bcd8739ae039 from "../icons/AlertTriangle.mjs";
import {AvatarContext as $3ffa2cd930156220$export$a20dad690e1279e2} from "./Avatar.mjs";
import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa, CenterBaseline as $1f4b04be3f24aae3$export$768dac55bb57081d} from "./CenterBaseline.mjs";
import {ClearButton as $f6a62e6e68437458$export$13ec83e50bf04290} from "./ClearButton.mjs";
import {FieldLabel as $9afd80978c252040$export$1acdcf5a973a8414, helpTextStyles as $9afd80978c252040$export$13b1fd5431595bf6} from "./Field.mjs";
import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps as $9b916426527cebe7$export$a6b5be5c6b451665} from "./Form.mjs";
import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs";
import {ImageContext as $dbd6f0b2503b938c$export$8151eb379fcf2442} from "./Image.mjs";
import $kY5I6$intlStringsmjs from "./intlStrings.mjs";
import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $kY5I6$jsx, jsxs as $kY5I6$jsxs, Fragment as $kY5I6$Fragment} from "react/jsx-runtime";
import {useLocale as $kY5I6$useLocale, TagGroup as $kY5I6$TagGroup, Provider as $kY5I6$Provider, TextContext as $kY5I6$TextContext, ButtonContext as $kY5I6$ButtonContext, TagList as $kY5I6$TagList, useSlottedContext as $kY5I6$useSlottedContext, Tag as $kY5I6$Tag, composeRenderProps as $kY5I6$composeRenderProps} from "react-aria-components";
import {CollectionBuilder as $kY5I6$CollectionBuilder, Collection as $kY5I6$Collection} from "@react-aria/collections";
import {createContext as $kY5I6$createContext, forwardRef as $kY5I6$forwardRef, useRef as $kY5I6$useRef, useState as $kY5I6$useState, useContext as $kY5I6$useContext, useMemo as $kY5I6$useMemo, useEffect as $kY5I6$useEffect} from "react";
import {flushSync as $kY5I6$flushSync} from "react-dom";
import {useEffectEvent as $kY5I6$useEffectEvent, useResizeObserver as $kY5I6$useResizeObserver, useLayoutEffect as $kY5I6$useLayoutEffect, inertValue as $kY5I6$inertValue, useId as $kY5I6$useId} from "@react-aria/utils";
import {useDOMRef as $kY5I6$useDOMRef} from "@react-spectrum/utils";
import {useLocalizedStringFormatter as $kY5I6$useLocalizedStringFormatter} from "@react-aria/i18n";
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $1d63bfab43d9ffe1$export$5b07b5dd2cbd96e3 = /*#__PURE__*/ (0, $kY5I6$createContext)(null);
const $1d63bfab43d9ffe1$var$InternalTagGroupContext = /*#__PURE__*/ (0, $kY5I6$createContext)({});
const $1d63bfab43d9ffe1$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $kY5I6$forwardRef)(function TagGroup(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $1d63bfab43d9ffe1$export$5b07b5dd2cbd96e3);
props = (0, $9b916426527cebe7$export$a6b5be5c6b451665)(props);
let { onRemove: onRemove } = props;
return /*#__PURE__*/ (0, $kY5I6$jsx)($1d63bfab43d9ffe1$var$InternalTagGroupContext.Provider, {
value: {
onRemove: onRemove
},
children: /*#__PURE__*/ (0, $kY5I6$jsx)((0, $kY5I6$CollectionBuilder), {
content: /*#__PURE__*/ (0, $kY5I6$jsx)((0, $kY5I6$Collection), {
...props
}),
children: (collection)=>/*#__PURE__*/ (0, $kY5I6$jsx)($1d63bfab43d9ffe1$var$TagGroupInner, {
props: props,
forwardedRef: ref,
collection: collection
})
})
});
});
function $1d63bfab43d9ffe1$var$TagGroupInner({ props: { label: label, description: description, labelPosition: labelPosition = 'top', labelAlign: labelAlign = 'start', isEmphasized: isEmphasized, isInvalid: isInvalid, errorMessage: errorMessage, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, size: size = 'M', ...props }, forwardedRef: ref, collection: collection }) {
let stringFormatter = (0, $kY5I6$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kY5I6$intlStringsmjs))), '@react-spectrum/s2');
let { maxRows: maxRows, groupActionLabel: groupActionLabel, onGroupAction: onGroupAction, renderEmptyState: renderEmptyState = ()=>stringFormatter.format('tag.noTags'), ...otherProps } = props;
let { direction: direction } = (0, $kY5I6$useLocale)();
let containerRef = (0, $kY5I6$useRef)(null);
let tagsRef = (0, $kY5I6$useRef)(null);
let actionsRef = (0, $kY5I6$useRef)(null);
let hiddenTagsRef = (0, $kY5I6$useRef)(null);
let [tagState, setTagState] = (0, $kY5I6$useState)({
visibleTagCount: collection.size,
showCollapseButton: false
});
let [isCollapsed, setIsCollapsed] = (0, $kY5I6$useState)(maxRows != null);
let { onRemove: onRemove } = (0, $kY5I6$useContext)($1d63bfab43d9ffe1$var$InternalTagGroupContext);
let isEmpty = collection.size === 0;
let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;
let formContext = (0, $kY5I6$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a));
let domRef = (0, $kY5I6$useDOMRef)(ref);
let allItems = (0, $kY5I6$useMemo)(()=>Array.from(collection), [
collection
]);
let items = (0, $kY5I6$useMemo)(()=>Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount), [
collection,
tagState.visibleTagCount,
isCollapsed
]);
let updateVisibleTagCount = ()=>{
if (maxRows == null) setTagState({
visibleTagCount: collection.size,
showCollapseButton: false
});
if (maxRows != null && maxRows > 0) {
let computeVisibleTagCount = ()=>{
let currContainerRef = hiddenTagsRef.current;
let currTagsRef = hiddenTagsRef.current;
let currActionsRef = actionsRef.current;
if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) return {
visibleTagCount: 0,
showCollapseButton: false
};
// Count rows and show tags until we hit the maxRows.
// I think this is still a safe assumption, and we don't need to queryAll for role=tag
let tags = [
...currTagsRef.children
];
let currY = -Infinity;
let rowCount = 0;
let index = 0;
let tagWidths = [];
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 buttons = currActionsRef ? [
...currActionsRef.children
] : [];
if (buttons.length > 0 && rowCount >= maxRows) {
let buttonsWidth = buttons.reduce((acc, curr)=>acc += curr.getBoundingClientRect().width, 0);
let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);
buttonsWidth += margins * 2;
let end = direction === 'ltr' ? 'right' : 'left';
let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;
let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];
lastTagEnd += margins;
let availableWidth = containerEnd - lastTagEnd;
while(availableWidth <= buttonsWidth && index > 0){
let tagWidth = tagWidths.pop();
if (tagWidth != null) availableWidth += tagWidth;
index--;
}
}
return {
visibleTagCount: Math.max(index, 1),
showCollapseButton: index < collection.size
};
};
let result = computeVisibleTagCount();
(0, $kY5I6$flushSync)(()=>{
setTagState(result);
});
}
};
let updateVisibleTagCountEffect = (0, $kY5I6$useEffectEvent)(updateVisibleTagCount);
(0, $kY5I6$useResizeObserver)({
ref: maxRows != null ? containerRef : undefined,
onResize: updateVisibleTagCount
});
(0, $kY5I6$useLayoutEffect)(()=>{
if (collection.size > 0 && maxRows != null && maxRows > 0) queueMicrotask(updateVisibleTagCountEffect);
}, [
collection.size,
maxRows
]);
(0, $kY5I6$useEffect)(()=>{
// Recalculate visible tags when fonts are loaded.
document.fonts?.ready.then(()=>updateVisibleTagCountEffect());
}, []);
let handlePressCollapse = ()=>{
setIsCollapsed((prevCollapsed)=>!prevCollapsed);
};
let helpText = null;
if (!isInvalid && description) helpText = /*#__PURE__*/ (0, $kY5I6$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
slot: "description",
styles: (0, $9afd80978c252040$export$13b1fd5431595bf6)({
size: size
}),
children: description
});
else if (isInvalid) helpText = /*#__PURE__*/ (0, $kY5I6$jsxs)("div", {
className: (0, $9afd80978c252040$export$13b1fd5431595bf6)({
size: size,
isInvalid: isInvalid
}),
children: [
/*#__PURE__*/ (0, $kY5I6$jsx)((0, $1f4b04be3f24aae3$export$768dac55bb57081d), {
children: /*#__PURE__*/ (0, $kY5I6$jsx)((0, $e17a4836f4b6cc28$export$2e2bcd8739ae039), {})
}),
/*#__PURE__*/ (0, $kY5I6$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
slot: "errorMessage",
children: errorMessage
})
]
});
return /*#__PURE__*/ (0, $kY5I6$jsxs)((0, $kY5I6$TagGroup), {
...otherProps,
ref: domRef,
style: UNSAFE_style,
className: UNSAFE_className + function anonymous(props, overrides) {
let rules = " ";
let gridColumnStart = false;
let gridColumnEnd = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "z") gridColumnStart = true;
if (p[1] === "y") gridColumnEnd = true;
rules += p[0];
}
rules += ' se1';
if (props.isInForm) {
if (!gridColumnStart) rules += ' z2mU1';
}
if (props.isInForm) {
if (props.labelPosition === "side") {
if (!gridColumnEnd) rules += ' yvoofG1';
}
}
if (props.isInForm) rules += ' DLwlgod1';
else {
if (props.labelPosition === "side") rules += ' DPlN5qb1';
else if (props.labelPosition === "top") rules += ' DM8Mfn1';
}
if (props.labelPosition === "side") rules += ' EPlN5qb1';
else if (props.labelPosition === "top") rules += ' E4w1sLc1';
if (props.labelPosition === "side") rules += ' CbRM95c1';
else if (props.labelPosition === "top") rules += ' Cxaocre1';
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
rules += ' ea1';
rules += ' _Fd1';
rules += ' _FnuYUweb1';
if (props.size === "XL") rules += ' -BhX7R-Fz1';
else if (props.size === "L") rules += ' -BhX7R-Fv1';
else if (props.size === "S") rules += ' -BhX7R-Fp1';
else if (props.size === "XS") rules += ' -BhX7R-Fn1';
else rules += ' -BhX7R-Fx1';
rules += ' -AJjOLd-UVkF0Db1';
rules += ' qg1';
rules += ' __ca1';
return rules;
}({
size: size,
labelPosition: labelPosition,
isInForm: !!formContext
}, props.styles),
children: [
/*#__PURE__*/ (0, $kY5I6$jsx)((0, $9afd80978c252040$export$1acdcf5a973a8414), {
size: size,
labelPosition: labelPosition,
labelAlign: labelAlign,
contextualHelp: props.contextualHelp,
children: label
}),
/*#__PURE__*/ (0, $kY5I6$jsx)("div", {
ref: containerRef,
className: function anonymous(props) {
let rules = " ";
rules += ' zXcEWr1';
rules += ' yXcEWr1';
rules += ' BXcEWr1';
rules += ' AXcEWr1';
rules += ' Nb1';
if (props.isEmpty) rules += ' Iy1';
else rules += ' Ib1';
if (props.isEmpty) rules += ' Hy1';
else rules += ' Hs1';
rules += ' _Pc1';
return rules;
}({
isEmpty: isEmpty
}),
children: /*#__PURE__*/ (0, $kY5I6$jsx)((0, $9b916426527cebe7$export$c24727297075ec6a).Provider, {
value: {
...formContext,
size: size
},
children: /*#__PURE__*/ (0, $kY5I6$jsxs)((0, $kY5I6$Provider), {
values: [
[
(0, $kY5I6$TextContext),
undefined
],
[
(0, $kY5I6$ButtonContext),
undefined
],
[
$1d63bfab43d9ffe1$export$5b07b5dd2cbd96e3,
{
size: size,
isEmphasized: isEmphasized
}
]
],
children: [
maxRows != null && /*#__PURE__*/ (0, $kY5I6$jsx)("div", {
// @ts-ignore
inert: (0, $kY5I6$inertValue)(true),
ref: hiddenTagsRef,
className: " sf1 _wb1 uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 _Pa1 Wr1 _lr1 _6b1 _Nc1 Pc1 _Ia1",
children: allItems.map((item)=>{
// pull off individual props as an allow list, don't want refs or other props getting through
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let { ref: ref, ...itemProps } = item.props;
return /*#__PURE__*/ (0, $kY5I6$jsx)("div", {
style: itemProps.UNSAFE_style,
className: itemProps.className({
size: size,
allowsRemoving: Boolean(onRemove)
}),
children: /*#__PURE__*/ (0, $kY5I6$jsx)($1d63bfab43d9ffe1$var$TagWrapper, {
id: item.key,
textValue: item.textValue,
isInRealDOM: true,
size: size,
allowsRemoving: !!onRemove,
...itemProps,
children: itemProps.children({
size: size,
allowsRemoving: Boolean(onRemove),
isInCtx: true
})
}, item.key)
}, item.key);
})
}),
/*#__PURE__*/ (0, $kY5I6$jsx)((0, $kY5I6$TagList), {
ref: tagsRef,
items: items,
renderEmptyState: renderEmptyState,
className: " sf1 Nb1 uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 -_6BNtrc-c1 vx1 xb1 _xa1 _Fd1 _FnuYUweb1 pt1",
children: (item)=>/*#__PURE__*/ (0, $kY5I6$jsx)($1d63bfab43d9ffe1$export$3288d34c523a1192, {
...item.props,
id: item.key,
textValue: item.textValue
})
}),
!isEmpty && (showCollapseToggleButton || groupActionLabel) && /*#__PURE__*/ (0, $kY5I6$jsx)($1d63bfab43d9ffe1$var$ActionGroup, {
collection: collection,
"aria-label": props['aria-label'],
"aria-labelledby": props['aria-labelledby'],
actionsRef: actionsRef,
tagState: tagState,
size: size,
isCollapsed: isCollapsed,
handlePressCollapse: handlePressCollapse,
onGroupAction: onGroupAction,
groupActionLabel: groupActionLabel
})
]
})
})
}),
helpText
]
});
}
function $1d63bfab43d9ffe1$var$ActionGroup(props) {
let stringFormatter = (0, $kY5I6$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kY5I6$intlStringsmjs))), '@react-spectrum/s2');
let { actionsRef: actionsRef, tagState: tagState, size: size, isCollapsed: isCollapsed, handlePressCollapse: handlePressCollapse, onGroupAction: onGroupAction, groupActionLabel: groupActionLabel, collection: collection, // directly use aria-labelling from the TagGroup because we can't use the id from the TagList
// and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back
// and forth with their prefix in an infinite loop
'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
let actionsId = (0, $kY5I6$useId)();
// might need to localize the aria-label which concatenates with this label
let actionGroupLabel = stringFormatter.format('tag.actions');
return /*#__PURE__*/ (0, $kY5I6$jsxs)("div", {
role: "group",
ref: actionsRef,
id: actionsId,
"aria-label": ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel,
"aria-labelledby": ariaLabelledBy ? ariaLabelledBy : undefined,
className: " sf1",
children: [
tagState.showCollapseButton && /*#__PURE__*/ (0, $kY5I6$jsx)((0, $da878a05ab4a403e$export$cfc7921d29ef7b80), {
isQuiet: true,
size: size,
styles: " Js1 Gs1 Is1 Hs1",
UNSAFE_style: {
display: 'inline-flex'
},
onPress: handlePressCollapse,
children: isCollapsed ? stringFormatter.format('tag.showAllButtonLabel', {
tagCount: collection.size
}) : stringFormatter.format('tag.hideButtonLabel')
}),
groupActionLabel && onGroupAction && /*#__PURE__*/ (0, $kY5I6$jsx)((0, $da878a05ab4a403e$export$cfc7921d29ef7b80), {
isQuiet: true,
size: size,
styles: " Js1 Gs1 Is1 Hs1",
UNSAFE_style: {
display: 'inline-flex'
},
onPress: ()=>onGroupAction?.(),
children: groupActionLabel
})
]
});
}
const $1d63bfab43d9ffe1$var$tagStyles = function anonymous(props) {
let rules = " ";
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kd1';
if (props.size === "XL") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "L") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "S") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else if (props.size === "XS") {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
} else {
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
}
if (props.size === "XL") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "XS") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
if (props.size === "XL") {
rules += ' xb1';
rules += ' _xa1';
} else if (props.size === "L") {
rules += ' xb1';
rules += ' _xa1';
} else if (props.size === "S") {
rules += ' xb1';
rules += ' _xa1';
} else if (props.size === "XS") {
rules += ' xb1';
rules += ' _xa1';
} else {
rules += ' xb1';
rules += ' _xa1';
}
if (props.size === "XL") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "L") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "S") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else if (props.size === "XS") {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
} else {
rules += ' _Fd1';
rules += ' _FnuYUweb1';
}
if (props.isDisabled) rules += ' pp1';
else if (props.isSelected) {
if (props.isEmphasized) rules += ' px1';
else rules += ' pr1';
} else {
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
}
if (props.isDisabled) rules += ' plc1';
else if (props.isSelected) rules += ' ple1';
else rules += ' plb1';
rules += ' sh1';
rules += ' eb1';
rules += ' _oa1';
rules += ' Sv1';
rules += ' SgLWx3bd1';
if (props.allowsRemoving) rules += ' Rd1';
else rules += ' Rv1';
if (props.size === "XL") rules += ' Nl1';
else if (props.size === "L") rules += ' Nj1';
else if (props.size === "S") rules += ' Nf1';
else if (props.size === "XS") rules += ' Ne1';
else rules += ' Nk1';
if (props.size === "XL") rules += ' -SFnbic-_JaP8ec1';
else if (props.size === "L") rules += ' -SFnbic-_J0K2hn1';
else if (props.size === "S") rules += ' -SFnbic-_JJOW22b1';
else if (props.size === "XS") rules += ' -SFnbic-_JICefdd1';
else rules += ' -SFnbic-_Jb1';
rules += ' -Bu7z1c-ob1';
rules += ' oj1';
rules += ' nj1';
rules += ' kj1';
rules += ' jj1';
rules += ' qc1';
rules += ' qsd1';
rules += ' -Qg41Lb-IAxCW0c1';
rules += ' -Qg41Lb-gLWx3bIy1';
rules += ' FRuFGYc1';
rules += ' La1';
rules += ' _5c1';
rules += ' _Ca1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
if (props.isDisabled) rules += ' gH1';
else if (props.isSelected) {
if (props.isEmphasized) {
if (props.isFocusVisible) rules += ' gUgARdd1';
else if (props.isPressed) rules += ' gUgARdd1';
else if (props.isHovered) rules += ' gUgARdd1';
else rules += ' g5qAiPc1';
} else {
if (props.isPressed) rules += ' gu1';
else if (props.isFocusVisible) rules += ' gu1';
else if (props.isHovered) rules += ' gu1';
else rules += ' g01';
}
} else if (props.isFocusVisible) rules += ' gF1';
else if (props.isHovered) rules += ' gF1';
else rules += ' gH1';
if (props.isSelected) rules += ' gle1';
else rules += ' glb1';
rules += ' _je1';
rules += ' Js1';
rules += ' Gs1';
rules += ' Is1';
rules += ' Hs1';
if (props.isLink) rules += ' ry1';
else rules += ' ri1';
rules += ' -_8sjo0b-t5ZbAob1';
if (props.size === "XL") rules += ' -F_-Fz1';
else if (props.size === "L") rules += ' -F_-Fv1';
else if (props.size === "S") rules += ' -F_-Fp1';
else if (props.size === "XS") rules += ' -F_-Fn1';
else rules += ' -F_-Fx1';
return rules;
};
const $1d63bfab43d9ffe1$var$avatarSize = {
S: 16,
M: 20,
L: 24
};
const $1d63bfab43d9ffe1$export$3288d34c523a1192 = /*#__PURE__*/ (0, $kY5I6$forwardRef)(function Tag({ children: children, textValue: textValue, ...props }, ref) {
textValue ||= typeof children === 'string' ? children : undefined;
let ctx = (0, $kY5I6$useSlottedContext)($1d63bfab43d9ffe1$export$5b07b5dd2cbd96e3);
let isInRealDOM = Boolean(ctx?.size);
let { size: size, isEmphasized: isEmphasized } = ctx ?? {};
let domRef = (0, $kY5I6$useDOMRef)(ref);
let backupRef = (0, $kY5I6$useRef)(null);
domRef = domRef || backupRef;
let isLink = props.href != null;
return /*#__PURE__*/ (0, $kY5I6$jsx)((0, $kY5I6$Tag), {
textValue: textValue,
...props,
ref: domRef,
style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef),
className: (renderProps)=>$1d63bfab43d9ffe1$var$tagStyles({
size: size,
isEmphasized: isEmphasized,
isLink: isLink,
...renderProps
}),
children: (0, $kY5I6$composeRenderProps)(children, (children, renderProps)=>/*#__PURE__*/ (0, $kY5I6$jsx)($1d63bfab43d9ffe1$var$TagWrapper, {
isInRealDOM: isInRealDOM,
isEmphasized: isEmphasized,
...renderProps,
children: typeof children === 'string' ? /*#__PURE__*/ (0, $kY5I6$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
children: children
}) : children
}))
});
});
function $1d63bfab43d9ffe1$var$TagWrapper({ children: children, isDisabled: isDisabled, allowsRemoving: allowsRemoving, isInRealDOM: isInRealDOM, isEmphasized: isEmphasized, isSelected: isSelected }) {
let { size: size = 'M' } = (0, $kY5I6$useSlottedContext)($1d63bfab43d9ffe1$export$5b07b5dd2cbd96e3) ?? {};
return /*#__PURE__*/ (0, $kY5I6$jsxs)((0, $kY5I6$Fragment), {
children: [
isInRealDOM && /*#__PURE__*/ (0, $kY5I6$jsx)("div", {
className: " sd1 Na1 eb1 Uc1 Usd1 qc1 qsd1 _yb1 g91",
children: /*#__PURE__*/ (0, $kY5I6$jsx)((0, $kY5I6$Provider), {
values: [
[
(0, $8e847109a6ab556d$export$9afb8bc826b033ea),
{
styles: " _Jb1 _Nc1 Pc1 _Yb1 _7c1"
}
],
[
(0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
{
render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
slot: 'icon',
styles: " _Ja1"
}),
styles: " ZuUmpre1 FuUmpre1 I67logd1 _va1"
}
],
[
(0, $3ffa2cd930156220$export$a20dad690e1279e2),
{
size: $1d63bfab43d9ffe1$var$avatarSize[size],
styles: " _Ja1"
}
],
[
(0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
{
styles: " ZuUmpre1 FuUmpre1 _va1 _Ja1 fa1 _Ha1 oa1 na1 ka1 ja1"
}
]
],
children: children
})
}),
!isInRealDOM && children,
allowsRemoving && isInRealDOM && /*#__PURE__*/ (0, $kY5I6$jsx)((0, $f6a62e6e68437458$export$13ec83e50bf04290), {
slot: "remove",
size: size,
isStaticColor: isEmphasized && isSelected,
isDisabled: isDisabled
})
]
});
}
export {$1d63bfab43d9ffe1$export$5b07b5dd2cbd96e3 as TagGroupContext, $1d63bfab43d9ffe1$export$67ea30858aaf75e3 as TagGroup, $1d63bfab43d9ffe1$export$3288d34c523a1192 as Tag};
//# sourceMappingURL=TagGroup.mjs.map