@react-spectrum/s2 0.2.1-nightly.4979

package/dist/TagGroup.css

@@ -0,0 +1,623 @@
+@layer _.a {
+  .__a-1oa8qr7 {
+    grid-column-start: helptext;
+  }
+
+  .__b-1oa8qr7 {
+    grid-column-end: helptext;
+  }
+
+  .__c-1oa8qr7 {
+    grid-row-start: helptext;
+  }
+
+  .__d-1oa8qr7 {
+    grid-row-end: helptext;
+  }
+
+  .am {
+    color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
+  }
+
+  .aO {
+    color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #fc432e);
+  }
+
+  .aP {
+    color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #ff6756);
+  }
+
+  .__me {
+    contain: inline-size;
+  }
+
+  .E-1inj1bc {
+    padding-top: var(--field-gap);
+  }
+
+  .__He {
+    cursor: text;
+  }
+
+  ._Zf {
+    display: grid;
+  }
+
+  .__a-3t1y {
+    grid-column-start: 1;
+  }
+
+  .__b-7u9dhl {
+    grid-column-end: span 2;
+  }
+
+  .__h-375yi6 {
+    grid-template-columns: 1fr;
+  }
+
+  .__h-jyg4vb {
+    grid-template-columns: auto 1fr;
+  }
+
+  .__h-1cwd7ud {
+    grid-template-columns: subgrid;
+  }
+
+  .__i-fdenls {
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .__i-jyg4vb {
+    grid-template-rows: auto 1fr;
+  }
+
+  .__j-xlaqir {
+    grid-template-areas: "label"
+                         "input"
+                         "helptext";
+  }
+
+  .__j-5eez8j {
+    grid-template-areas: "label input"
+                         "label helptext";
+  }
+
+  ._1d {
+    align-items: baseline;
+  }
+
+  .-aqrvqh_k-o {
+    --field-height: 2rem;
+  }
+
+  .-aqrvqh_k-i {
+    --field-height: 1.25rem;
+  }
+
+  .-aqrvqh_k-k {
+    --field-height: 1.5rem;
+  }
+
+  .-aqrvqh_k-p {
+    --field-height: 2.5rem;
+  }
+
+  .-aqrvqh_k-v {
+    --field-height: 3rem;
+  }
+
+  .-_1inj1bc_i--prjw07 {
+    --field-gap: calc((var(--field-height)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  }
+
+  .jd {
+    column-gap: .75rem;
+  }
+
+  .__R-yksgrp {
+    -webkit-tap-highlight-color: #0000;
+  }
+
+  .__a-4cfph1 {
+    grid-column-start: input;
+  }
+
+  .__b-4cfph1 {
+    grid-column-end: input;
+  }
+
+  .__c-4cfph1 {
+    grid-row-start: input;
+  }
+
+  .__d-4cfph1 {
+    grid-row-end: input;
+  }
+
+  .ie {
+    row-gap: 1rem;
+  }
+
+  .je {
+    column-gap: 1rem;
+  }
+
+  .yJ {
+    margin-inline-start: -.25rem;
+  }
+
+  .ya {
+    margin-inline-start: 0;
+  }
+
+  .zJ {
+    margin-inline-end: -.25rem;
+  }
+
+  .za {
+    margin-inline-end: 0;
+  }
+
+  .q2 {
+    min-width: 100%;
+  }
+
+  ._7a {
+    flex-wrap: wrap;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  .dx {
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+  }
+
+  ._Nc {
+    outline-width: 2px;
+  }
+
+  ._M-3t1z {
+    outline-offset: 2px;
+  }
+
+  ._Ze {
+    display: inline-flex;
+  }
+
+  ._2d {
+    justify-content: center;
+  }
+
+  ._ca {
+    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._de {
+    font-size: .875rem;
+  }
+
+  ._da {
+    font-size: .6875rem;
+  }
+
+  ._dc {
+    font-size: .75rem;
+  }
+
+  ._dg {
+    font-size: 1rem;
+  }
+
+  ._di {
+    font-size: 1.125rem;
+  }
+
+  ._eb {
+    font-variation-settings: "wght" 400;
+    font-synthesis-weight: none;
+    font-weight: 400;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .ao {
+    color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .ad {
+    color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
+  }
+
+  .ac {
+    color: #fff;
+  }
+
+  .aj {
+    color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  .k-375toq {
+    height: var(--k);
+  }
+
+  ._Oa {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  }
+
+  ._Q-375x7f {
+    transition-duration: .15s;
+  }
+
+  ._Ra {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  .bh {
+    background-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
+  }
+
+  .bn {
+    background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .bo {
+    background-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .b_____E {
+    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #345bf8);
+  }
+
+  .b_____F {
+    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #2549e5);
+  }
+
+  .bg {
+    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  }
+
+  .wf {
+    border-style: none;
+  }
+
+  .CH {
+    padding-inline-start: calc(var(--k, var(--o)) * 3 / 8);
+  }
+
+  .DH {
+    padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
+  }
+
+  .Da {
+    padding-inline-end: 0;
+  }
+
+  .Ea {
+    padding-top: 0;
+  }
+
+  .Fa {
+    padding-bottom: 0;
+  }
+
+  .Ab {
+    margin-top: .25rem;
+  }
+
+  .Bb {
+    margin-bottom: .25rem;
+  }
+
+  .yb {
+    margin-inline-start: .25rem;
+  }
+
+  .zb {
+    margin-inline-end: .25rem;
+  }
+
+  ._vh {
+    border-start-start-radius: .571429em;
+  }
+
+  ._wh {
+    border-start-end-radius: .571429em;
+  }
+
+  ._xh {
+    border-end-start-radius: .571429em;
+  }
+
+  ._yh {
+    border-end-end-radius: .571429em;
+  }
+
+  .__Hb {
+    cursor: default;
+  }
+
+  .__Hc {
+    cursor: pointer;
+  }
+
+  .-oelgqu_A--177861o {
+    --iconMargin: -.142857em;
+  }
+
+  .-rwx0fg_e-b {
+    --iconPrimary: currentColor;
+  }
+
+  .-_375toq_k-o {
+    --k: 2rem;
+  }
+
+  .-_375toq_k-i {
+    --k: 1.25rem;
+  }
+
+  .-_375toq_k-k {
+    --k: 1.5rem;
+  }
+
+  .-_375toq_k-p {
+    --k: 2.5rem;
+  }
+
+  .-_375toq_k-v {
+    --k: 3rem;
+  }
+
+  ._Zd {
+    display: flex;
+  }
+
+  .qa {
+    min-width: 0;
+  }
+
+  ._1c {
+    align-items: center;
+  }
+
+  .iF {
+    row-gap: .428571em;
+  }
+
+  .jF {
+    column-gap: .428571em;
+  }
+
+  ._zb {
+    forced-color-adjust: none;
+  }
+
+  .ba {
+    background-color: #0000;
+  }
+
+  .E-1gogtue {
+    padding-top: var(--labelPadding);
+  }
+
+  .F-1gogtue {
+    padding-bottom: var(--labelPadding);
+  }
+
+  .__A-3t1y {
+    order: 1;
+  }
+
+  .__vb {
+    overflow-x: hidden;
+  }
+
+  .__wb {
+    overflow-y: hidden;
+  }
+
+  ._ma {
+    text-overflow: ellipsis;
+  }
+
+  ._pb {
+    white-space: nowrap;
+  }
+
+  .y-oelgqu {
+    margin-inline-start: var(--iconMargin);
+  }
+
+  .l-1sthc3k {
+    width: 1.42857em;
+  }
+
+  .k-1sthc3k {
+    height: 1.42857em;
+  }
+
+  ._8-3t1x {
+    flex-shrink: 0;
+  }
+
+  .__A-3t1x {
+    order: 0;
+  }
+
+  ._bb {
+    aspect-ratio: 1;
+  }
+
+  .__Na {
+    object-fit: contain;
+  }
+}
+
+@layer _.b {
+  ._c-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+}
+
+@layer _.c {
+  ._c-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  ._c-enzykdd:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
+}
+
+@layer _.e {
+  ._c-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  ._c-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  ._c-1uotwbwg:lang(zh-hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.h {
+  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+}
+
+@layer UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .-aqrvqh_k-bp {
+      --field-height: 2.5rem;
+    }
+
+    .-aqrvqh_k-bj {
+      --field-height: 1.5625rem;
+    }
+
+    .-aqrvqh_k-bl {
+      --field-height: 1.875rem;
+    }
+
+    .-aqrvqh_k-bs {
+      --field-height: 3.125rem;
+    }
+
+    .-aqrvqh_k-bw {
+      --field-height: 3.75rem;
+    }
+
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+
+    ._dbb {
+      font-size: .8125rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+
+    .-_375toq_k-bp {
+      --k: 2.5rem;
+    }
+
+    .-_375toq_k-bj {
+      --k: 1.5625rem;
+    }
+
+    .-_375toq_k-bl {
+      --k: 1.875rem;
+    }
+
+    .-_375toq_k-bs {
+      --k: 3.125rem;
+    }
+
+    .-_375toq_k-bw {
+      --k: 3.75rem;
+    }
+
+    .qba {
+      min-width: 0;
+    }
+
+    .ibG {
+      row-gap: .470588em;
+    }
+
+    .jbG {
+      column-gap: .470588em;
+    }
+  }
+}
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .da_____z {
+      outline-color: highlight;
+    }
+
+    .aa_____x {
+      color: buttontext;
+    }
+
+    .aa_____A {
+      color: highlighttext;
+    }
+
+    .aa_____B {
+      color: graytext;
+    }
+
+    .ba_____w {
+      background-color: buttonface;
+    }
+
+    .ba_____z {
+      background-color: highlight;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=TagGroup.css.map */

package/dist/TagGroup.css.map

@@ -0,0 +1 @@
+{"mappings":"ACkEuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEa;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAajB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBqB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBtB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsFK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUmB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGhB;;;;EAMG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvON;EA8HL;;;;EAAA;;;;;AA9HK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAwEa;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA8BI;;;;IAwBtB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsFK;;;;IAAA;;;;IAAA;;;;;;AAtFL;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAsFK","sources":["b7ca70995960d034","packages/@react-spectrum/s2/src/TagGroup.tsx"],"sourcesContent":["@import \"53ec8c3f8184f13f\";\n@import \"39511c3f261b5ed5\";\n@import \"0adf7c6cbf3a1f42\";\n@import \"05f90dba9e9f901e\";\n@import \"76f74241f914b430\";\n@import \"0ef2aba34cf241d8\";\n@import \"f86d9fb495210c39\";\n@import \"24a7cd4eab7f1ba0\";\n@import \"ce1f7d95b3ccf3fd\";\n@import \"70bbf6109092559b\";\n@import \"07833edfdb3bfcff\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  composeRenderProps,\n  Provider,\n  TextContext as RACTextContext,\n  TagList,\n  TagListProps\n} from 'react-aria-components';\nimport {AvatarContext} from './Avatar';\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {DOMRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext, Text, TextContext} from './Content';\nimport {pressScale} from './pressScale';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// Get types from RSP and extend those?\nexport interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {\n  /** The children of the tag. */\n  children?: ReactNode\n}\n\nexport interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode,\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean,\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode,\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean,\n  /** An error message for the field. */\n  errorMessage?: ReactNode\n}\n\nconst TagGroupContext = createContext<TagGroupProps<any>>({});\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: 'text'\n});\n\nfunction TagGroup<T extends object>(\n  {\n    label,\n    description,\n    items,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    children,\n    renderEmptyState,\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...props\n  }: TagGroupProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {size = 'M'} = props;\n  let domRef = useDOMRef(ref);\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText =  (\n      <Text\n        slot=\"description\"\n        className={helpTextStyles({size: props.size || 'M'})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div\n        className={helpTextStyles({size: props.size || 'M', isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">\n          {errorMessage}\n        </Text>\n      </div>\n    );\n  }\n\n  // TODO collapse behavior, need a custom collection render so we can limit the number of children\n  // but this isn't possible yet\n  return (\n    <AriaTagGroup\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition: labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        className={style({\n          gridArea: 'input',\n          display: 'flex',\n          flexWrap: 'wrap',\n          minWidth: 'full',\n          // TODO: what should this gap be?\n          gap: 16\n        })}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            <TagList\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={({isEmpty}) => style({\n                marginX: {\n                  default: -4, // use negative number when theme TS is ready\n                  isEmpty: 0\n                },\n                display: 'flex',\n                minWidth: 'full',\n                flexWrap: 'wrap',\n                font: 'ui'\n              })({isEmpty})}>\n              {children}\n            </TagList>\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nlet _TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(TagGroup);\nexport {_TagGroup as TagGroup};\n\nconst tagStyles = style({\n  ...focusRing(),\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  font: 'control',\n  height: 'control',\n  transition: 'default',\n  minWidth: 0,\n  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: {\n        default: 'accent'\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingStart: {\n    default: 'edge-to-text'\n  },\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  paddingY: 0,\n  margin: 4,\n  borderRadius: 'control',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2)\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function Tag({children, ...props}: TagProps) {\n  let textValue = typeof children === 'string' ? children : undefined;\n  let {size = 'M', isEmphasized} = useContext(TagGroupContext);\n\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={ref}\n      style={pressScale(ref)}\n      className={renderProps => tagStyles({...renderProps, size, isEmphasized, isLink})} >\n      {composeRenderProps(children, (children, {allowsRemoving, isDisabled}) => (\n        <>\n          <div\n            className={style({\n              display: 'flex',\n              minWidth: 0,\n              alignItems: 'center',\n              gap: 'text-to-visual',\n              forcedColorAdjust: 'none',\n              backgroundColor: 'transparent'\n            })}>\n            <Provider\n              values={[\n                [TextContext, {className: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', className: style({order: 0})}),\n                  styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n                }],\n                [AvatarContext, {\n                  styles: style({size: fontRelative(20), flexShrink: 0, order: 0})\n                }],\n                [ImageContext, {\n                  className: style({size: fontRelative(20), flexShrink: 0, order: 0, aspectRatio: 'square', objectFit: 'contain'})\n                }]\n              ]}>\n              {typeof children === 'string' ? <Text>{children}</Text> : children}\n            </Provider>\n          </div>\n          {allowsRemoving && (\n            <ClearButton\n              slot=\"remove\"\n              size={size}\n              isDisabled={isDisabled} />\n          )}\n        </>\n      ))}\n    </AriaTag>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.css.map"}