@react-spectrum/s2 3.0.0-nightly-63d4359d6-250427 → 3.0.0-nightly-1dd65ffc5-250429

package/dist/Badge.css

@@ -1,496 +1,502 @@
 @layer _.a {
-  ._0d {
+  .ma {
     display: flex;
   }
 
-  ._da {
+  .bh {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._ee {
+  .aa {
     font-size: .875rem;
   }
 
-  ._ea {
+  .ai {
     font-size: .6875rem;
   }
 
-  ._ec {
+  .af {
     font-size: .75rem;
   }
 
-  ._eg {
+  .ae {
     font-size: 1rem;
   }
 
-  ._ei {
+  .ah {
     font-size: 1.125rem;
   }
 
-  ._fb {
+  .Da {
     font-variation-settings: "wght" 400;
-    font-synthesis-weight: none;
+  }
+
+  .Ea {
     font-weight: 400;
   }
 
-  ._ga {
+  .Ca {
+    font-synthesis-weight: none;
+  }
+
+  .gb {
     line-height: 1.3;
   }
 
-  .ac {
+  .dd {
     color: #fff;
   }
 
-  .ab {
+  .dj {
     color: #000;
   }
 
-  .ap {
+  .dv {
     color: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
   }
 
-  ._3d {
+  ._pa {
     justify-content: center;
   }
 
-  ._2d {
+  .Fb {
     align-items: baseline;
   }
 
-  ._wh {
+  .ze {
     border-start-start-radius: .571429em;
   }
 
-  ._xh {
+  .xd {
     border-start-end-radius: .571429em;
   }
 
-  ._yh {
+  .wd {
     border-end-start-radius: .571429em;
   }
 
-  ._zh {
+  .ye {
     border-end-end-radius: .571429em;
   }
 
-  .o-375tou {
-    min-height: var(--o);
+  .sOSFGYc {
+    min-height: var(--s);
   }
 
-  .CI {
-    padding-inline-start: calc(var(--k, var(--o)) * 3 / 8);
+  .ob {
+    padding-inline-start: calc(var(--e, var(--s)) * 3 / 8);
   }
 
-  .DI {
-    padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
+  .nb {
+    padding-inline-end: calc(var(--e, var(--s)) * 3 / 8);
   }
 
-  .-_1gogtue_E--1dbqcch {
-    --labelPadding: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  .-aRvJDd-r11HdCe {
+    --labelPadding: calc((var(--s)  - var(--_n, 0px)  - var(--_m, 0px)  - 1lh) / 2);
   }
 
-  .-oelgqu_A--177861o {
+  .-Qg41Lb-jAxCW0c {
     --iconMargin: -.142857em;
   }
 
-  .jG {
+  .kb {
     column-gap: .428571em;
   }
 
-  .b_____S {
+  .cb {
     background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
   }
 
-  .b_____V {
+  .cq {
     background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #444);
   }
 
-  .b_____1 {
+  .cp {
     background-color: var(--lightningcss-light, #036e45) var(--lightningcss-dark, #047c4b);
   }
 
-  .b_____Y {
+  .ci {
     background-color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #cd2e1d);
   }
 
-  .b_____U {
+  .cC {
     background-color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #6d6d6d);
   }
 
-  .b_____X {
+  .cu {
     background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
   }
 
-  .b_____3 {
+  .cH {
     background-color: var(--lightningcss-light, #fc7d00) var(--lightningcss-dark, #e06400);
   }
 
-  .b_____5 {
+  .c_c {
     background-color: var(--lightningcss-light, #f5c700) var(--lightningcss-dark, #da9f00);
   }
 
-  .b_____7 {
+  .cX {
     background-color: var(--lightningcss-light, #a3c400) var(--lightningcss-dark, #88a400);
   }
 
-  .b_____9 {
+  .c_n {
     background-color: var(--lightningcss-light, #5db41f) var(--lightningcss-dark, #4e9a17);
   }
 
-  .b_____0 {
+  .cB {
     background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #068850);
   }
 
-  .b______b {
+  .c_j {
     background-color: var(--lightningcss-light, #07816d) var(--lightningcss-dark, #088670);
   }
 
-  .b______d {
+  .cS {
     background-color: var(--lightningcss-light, #0b78b3) var(--lightningcss-dark, #0d7dba);
   }
 
-  .b_____R {
+  .cl {
     background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .b______f {
+  .cT {
     background-color: var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #745bfc);
   }
 
-  .b______h {
+  .cW {
     background-color: var(--lightningcss-light, #9a47e2) var(--lightningcss-dark, #9d4ee4);
   }
 
-  .b______j {
+  .cZ {
     background-color: var(--lightningcss-light, #b539c8) var(--lightningcss-dark, #ba3cce);
   }
 
-  .b______l {
+  .c6 {
     background-color: var(--lightningcss-light, #d92361) var(--lightningcss-dark, #e02665);
   }
 
-  .b______n {
+  .c1 {
     background-color: var(--lightningcss-light, #ce2a92) var(--lightningcss-dark, #d52d97);
   }
 
-  .b______p {
+  .c_l {
     background-color: var(--lightningcss-light, #087e89) var(--lightningcss-dark, #09838e);
   }
 
-  .b______t {
+  .cV {
     background-color: var(--lightningcss-light, #8b6d42) var(--lightningcss-dark, #8f7245);
   }
 
-  .b______r {
+  .cY {
     background-color: var(--lightningcss-light, #aa5e38) var(--lightningcss-dark, #b0623b);
   }
 
-  .b______v {
+  .cU {
     background-color: var(--lightningcss-light, #727272) var(--lightningcss-dark, #767676);
   }
 
-  .b_____W {
+  .cG {
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #393939);
   }
 
-  .b_____Z {
+  .cI {
     background-color: var(--lightningcss-light, #ffebe8) var(--lightningcss-dark, #571107);
   }
 
-  .b_____4 {
+  .cJ {
     background-color: var(--lightningcss-light, #ffeccf) var(--lightningcss-dark, #501b00);
   }
 
-  .b_____6 {
+  .c_i {
     background-color: var(--lightningcss-light, #fff197) var(--lightningcss-dark, #3d2700);
   }
 
-  .b_____8 {
+  .c8 {
     background-color: var(--lightningcss-light, #eaf6ad) var(--lightningcss-dark, #272f00);
   }
 
-  .b______a {
+  .c0 {
     background-color: var(--lightningcss-light, #c5ff9c) var(--lightningcss-dark, #153301);
   }
 
-  .b_____2 {
+  .cF {
     background-color: var(--lightningcss-light, #d7f7e1) var(--lightningcss-dark, #003326);
   }
 
-  .b______c {
+  .c3 {
     background-color: var(--lightningcss-light, #d3f6ea) var(--lightningcss-dark, #00322c);
   }
 
-  .b______e {
+  .c5 {
     background-color: var(--lightningcss-light, #d9f4fd) var(--lightningcss-dark, #003041);
   }
 
-  .b_____T {
+  .cA {
     background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0c2175);
   }
 
-  .b______g {
+  .c9 {
     background-color: var(--lightningcss-light, #ebeeff) var(--lightningcss-dark, #2f008c);
   }
 
-  .b______i {
+  .c_b {
     background-color: var(--lightningcss-light, #f4ebfc) var(--lightningcss-dark, #40007a);
   }
 
-  .b______k {
+  .c_f {
     background-color: var(--lightningcss-light, #fde9ff) var(--lightningcss-dark, #4f005f);
   }
 
-  .b______m {
+  .c_g {
     background-color: var(--lightningcss-light, #ffe8f0) var(--lightningcss-dark, #5d0022);
   }
 
-  .b______o {
+  .c_h {
     background-color: var(--lightningcss-light, #ffe8f7) var(--lightningcss-dark, #5a0039);
   }
 
-  .b______q {
+  .c2 {
     background-color: var(--lightningcss-light, #d1f5f5) var(--lightningcss-dark, #003136);
   }
 
-  .b______u {
+  .c_d {
     background-color: var(--lightningcss-light, #f7eee1) var(--lightningcss-dark, #3a280e);
   }
 
-  .b______s {
+  .c_e {
     background-color: var(--lightningcss-light, #f9ece5) var(--lightningcss-dark, #4f1c07);
   }
 
-  .b______w {
+  .c_a {
     background-color: var(--lightningcss-light, #efefef) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .b______x {
+  .cv {
     background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
-  .wa {
+  .Ra {
     border-style: solid;
   }
 
-  .__oa {
+  ._qa {
     box-sizing: border-box;
   }
 
-  .u-375tp0 {
-    border-top-width: var(--u);
+  ._nkajPYd {
+    border-top-width: var(--_n);
   }
 
-  .v-375tp1 {
-    border-bottom-width: var(--v);
+  ._mN9iPYd {
+    border-bottom-width: var(--_m);
   }
 
-  .sc {
+  ._ta {
     border-inline-start-width: 2px;
   }
 
-  .tc {
+  ._sa {
     border-inline-end-width: 2px;
   }
 
-  .ca {
+  .qe {
     border-color: #0000;
   }
 
-  .c-1n5lxsq {
+  .qG1ze4d {
     border-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #5681ff);
   }
 
-  .c-lj7qwa {
+  .q0ruhAb {
     border-color: var(--lightningcss-light, #8f8f8f) var(--lightningcss-dark, #8a8a8a);
   }
 
-  .c-32o7sp {
+  .qp17Jm {
     border-color: var(--lightningcss-light, #079355) var(--lightningcss-dark, #099d59);
   }
 
-  .c-1c1g5qb {
+  .q9VrKkd {
     border-color: var(--lightningcss-light, #d45b00) var(--lightningcss-dark, #e06400);
   }
 
-  .c-awl6xt {
+  .qFLVMS {
     border-color: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #fc432e);
   }
 
-  .-rwx0fg_e-b {
+  .-_8sjo0b-Oa {
     --iconPrimary: currentColor;
   }
 
-  .-_375tou_o-f {
-    --o: calc(2rem * var(--s2-scale));
+  .-s_-sb {
+    --s: calc(2rem * var(--s2-scale));
   }
 
-  .-_375tou_o-g {
-    --o: calc(1.25rem * var(--s2-scale));
+  .-s_-se {
+    --s: calc(1.25rem * var(--s2-scale));
   }
 
-  .-_375tou_o-h {
-    --o: calc(1.5rem * var(--s2-scale));
+  .-s_-sc {
+    --s: calc(1.5rem * var(--s2-scale));
   }
 
-  .-_375tou_o-i {
-    --o: calc(2.5rem * var(--s2-scale));
+  .-s_-sa {
+    --s: calc(2.5rem * var(--s2-scale));
   }
 
-  .-_375tou_o-j {
-    --o: calc(3rem * var(--s2-scale));
+  .-s_-sd {
+    --s: calc(3rem * var(--s2-scale));
   }
 
-  .-_375tp0_u-c {
-    --u: 2px;
+  .-_n_-_nb {
+    --_n: 2px;
   }
 
-  .-_375tp1_v-c {
-    --v: 2px;
+  .-_m_-_ma {
+    --_m: 2px;
   }
 
-  .E-1gogtue {
+  .rAzEcG {
     padding-top: var(--labelPadding);
   }
 
-  .F-1gogtue {
+  .vAzEcG {
     padding-bottom: var(--labelPadding);
   }
 
-  .__B-3t1y {
+  ._Mb {
     order: 1;
   }
 
-  .__wb {
+  ._oa {
     overflow-x: hidden;
   }
 
-  .__xb {
+  ._ha {
     overflow-y: hidden;
   }
 
-  ._na {
+  ._Ta {
     text-overflow: ellipsis;
   }
 
-  ._qb {
+  ._za {
     white-space: nowrap;
   }
 
-  ._qa {
+  ._zb {
     white-space: normal;
   }
 
-  .__B-3t1x {
+  ._Ma {
     order: 0;
   }
 
-  .l-1sthc3k {
+  .fuUmpre {
     width: 1.42857em;
   }
 
-  .k-1sthc3k {
+  .euUmpre {
     height: 1.42857em;
   }
 
-  .y-oelgqu {
+  .h67logd {
     margin-inline-start: var(--iconMargin);
   }
 
-  ._9-3t1x {
+  ._ra {
     flex-shrink: 0;
   }
 }
 
 @layer _.b {
-  ._d-enzrfpb:lang(ar) {
+  .bdf:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .gca:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 
-  ._2-1dz4pg9c:has([slot="icon"]:only-child) {
+  .FP4wFsda:has([slot="icon"]:only-child) {
     align-items: center;
   }
 
-  .C-1dz4pg9a:has([slot="icon"]:only-child) {
+  .oP4wFsda:has([slot="icon"]:only-child) {
     padding-inline-start: 0;
   }
 
-  .D-1dz4pg9a:has([slot="icon"]:only-child) {
+  .nP4wFsda:has([slot="icon"]:only-child) {
     padding-inline-end: 0;
   }
 
-  ._c-1dz4pg9b:has([slot="icon"]:only-child) {
+  ._OP4wFsda:has([slot="icon"]:only-child) {
     aspect-ratio: 1;
   }
 
-  .-oelgqu_A--1dz4pg9a:has([slot="icon"]:only-child) {
+  .-Qg41Lb-P4wFsdja:has([slot="icon"]:only-child) {
     --iconMargin: 0rem;
   }
 }
 
 @layer _.c {
-  ._d-enzwzjc:lang(he) {
+  .beg:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._d-enzykdd:lang(ja) {
+  .bfa: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 {
-  ._d-enzzrge:lang(ko) {
+  .bgb:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._d-eo0c6sf:lang(zh) {
+  .bhd:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._d-1uotwbwg:lang(zh-hant) {
+  .bje: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 {
-  ._d-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .bic: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 _.b.b {
+@layer _.b.a {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._ebf {
+    .aab {
       font-size: 1.0625rem;
     }
 
-    ._ebb {
+    .aaj {
       font-size: .8125rem;
     }
 
-    ._ebd {
+    .aag {
       font-size: .9375rem;
     }
 
-    ._ebh {
+    .aad {
       font-size: 1.1875rem;
     }
 
-    ._ebj {
+    .aac {
       font-size: 1.375rem;
     }
 
-    .jbH {
+    .kac {
       column-gap: .470588em;
     }
   }

package/dist/Badge.css.map

@@ -1 +1 @@
-{"mappings":"AC2Dc;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;;;;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;;;;EAwJI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApKJ;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["31052c90be0d94da","packages/@react-spectrum/s2/src/Badge.tsx"],"sourcesContent":["@import \"08c4d7ffd2baa021\";\n@import \"1aad76937c73131b\";\n@import \"7989dc282effbbd8\";\n@import \"a50d3ac159f93c2b\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, TextContext as RACTextContext, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n  /**\n   * The size of the badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n   *\n   * @default 'neutral'\n   */\n  variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n  /**\n   * The fill of the badge.\n   * @default 'bold'\n   */\n  fillStyle?: 'bold' | 'subtle' | 'outline',\n  /**\n   * Sets the text behavior for the contents.\n   * @default 'wrap'\n   */\n  overflowMode?: 'wrap' | 'truncate'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n  /**\n   * The content to display in the badge.\n   */\n  children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n  display: 'flex',\n  font: 'control',\n  justifyContent: 'center',\n  alignItems: {\n    default: 'baseline',\n    ':has([slot=icon]:only-child)': 'center'\n  },\n  borderRadius: 'control',\n  minHeight: 'control',\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': 0\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  aspectRatio: {\n    ':has([slot=icon]:only-child)': 'square'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      ':has([slot=icon]:only-child)': 0\n    }\n  },\n  columnGap: 'text-to-visual',\n  color: {\n    fillStyle: {\n      bold: {\n        default: 'white',\n        variant: {\n          notice: 'black',\n          orange: 'black',\n          yellow: 'black',\n          chartreuse: 'black',\n          celery: 'black'\n        }\n      },\n      subtle: 'gray-1000',\n      outline: 'gray-1000'\n    }\n  },\n  backgroundColor: {\n    fillStyle: {\n      bold: {\n        variant: {\n          accent: 'accent',\n          informative: 'informative',\n          neutral: 'neutral-subdued',\n          positive: 'positive',\n          notice: 'notice',\n          negative: 'negative',\n          gray: 'gray',\n          red: 'red',\n          orange: 'orange',\n          yellow: 'yellow',\n          chartreuse: 'chartreuse',\n          celery: 'celery',\n          green: 'green',\n          seafoam: 'seafoam',\n          cyan: 'cyan',\n          blue: 'blue',\n          indigo: 'indigo',\n          purple: 'purple',\n          fuchsia: 'fuchsia',\n          magenta: 'magenta',\n          pink: 'pink',\n          turquoise: 'turquoise',\n          brown: 'brown',\n          cinnamon: 'cinnamon',\n          silver: 'silver'\n        }\n      },\n      subtle: {\n        variant: {\n          accent: 'accent-subtle',\n          informative: 'informative-subtle',\n          neutral: 'neutral-subtle',\n          positive: 'positive-subtle',\n          notice: 'notice-subtle',\n          negative: 'negative-subtle',\n          gray: 'gray-subtle',\n          red: 'red-subtle',\n          orange: 'orange-subtle',\n          yellow: 'yellow-subtle',\n          chartreuse: 'chartreuse-subtle',\n          celery: 'celery-subtle',\n          green: 'green-subtle',\n          seafoam: 'seafoam-subtle',\n          cyan: 'cyan-subtle',\n          blue: 'blue-subtle',\n          indigo: 'indigo-subtle',\n          purple: 'purple-subtle',\n          fuchsia: 'fuchsia-subtle',\n          magenta: 'magenta-subtle',\n          pink: 'pink-subtle',\n          turquoise: 'turquoise-subtle',\n          brown: 'brown-subtle',\n          cinnamon: 'cinnamon-subtle',\n          silver: 'silver-subtle'\n        }\n      },\n      outline: 'layer-2'\n    }\n  },\n  borderStyle: 'solid',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderColor: {\n    default: 'transparent',\n    fillStyle: {\n      outline: {\n        variant: {\n          accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n          informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n          neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n          positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n          notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n          negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nexport const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n  let {\n    children,\n    variant = 'neutral',\n    size = 'S',\n    fillStyle = 'bold',\n    overflowMode = 'wrap',\n    ...otherProps\n  } = props; // useProviderProps(props) in v3\n  let domRef = useDOMRef(ref);\n  let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n  return (\n    <Provider\n      values={[\n        [TextContext, {\n          styles: style({\n            paddingY: '--labelPadding',\n            order: 1,\n            overflowX: 'hidden',\n            overflowY: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: {overflowMode: {truncate: 'nowrap', wrap: 'normal'}}\n          })({overflowMode})\n        }],\n        [RACTextContext, {}],\n        [IconContext, {\n          render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n          styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n        }]\n      ]}>\n      <SkeletonWrapper>\n        <span\n          {...filterDOMProps(otherProps)}\n          role=\"presentation\"\n          className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n          style={props.UNSAFE_style}\n          ref={domRef}>\n          {\n            typeof children === 'string' || isTextOnly\n              ? <Text>{children}</Text>\n              : children\n          }\n        </span>\n      </SkeletonWrapper>\n    </Provider>\n  );\n});\n"],"names":[],"version":3,"file":"Badge.css.map"}
+{"mappings":"AC2Dc;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;;;;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;;;;EAwJI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApKJ;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["31052c90be0d94da","packages/@react-spectrum/s2/src/Badge.tsx"],"sourcesContent":["@import \"08c4d7ffd2baa021\";\n@import \"1aad76937c73131b\";\n@import \"7989dc282effbbd8\";\n@import \"a50d3ac159f93c2b\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, TextContext as RACTextContext, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n  /**\n   * The size of the badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n   *\n   * @default 'neutral'\n   */\n  variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n  /**\n   * The fill of the badge.\n   * @default 'bold'\n   */\n  fillStyle?: 'bold' | 'subtle' | 'outline',\n  /**\n   * Sets the text behavior for the contents.\n   * @default 'wrap'\n   */\n  overflowMode?: 'wrap' | 'truncate'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n  /**\n   * The content to display in the badge.\n   */\n  children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n  display: 'flex',\n  font: 'control',\n  justifyContent: 'center',\n  alignItems: {\n    default: 'baseline',\n    ':has([slot=icon]:only-child)': 'center'\n  },\n  borderRadius: 'control',\n  minHeight: 'control',\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': 0\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  aspectRatio: {\n    ':has([slot=icon]:only-child)': 'square'\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      ':has([slot=icon]:only-child)': 0\n    }\n  },\n  columnGap: 'text-to-visual',\n  color: {\n    fillStyle: {\n      bold: {\n        default: 'white',\n        variant: {\n          notice: 'black',\n          orange: 'black',\n          yellow: 'black',\n          chartreuse: 'black',\n          celery: 'black'\n        }\n      },\n      subtle: 'gray-1000',\n      outline: 'gray-1000'\n    }\n  },\n  backgroundColor: {\n    fillStyle: {\n      bold: {\n        variant: {\n          accent: 'accent',\n          informative: 'informative',\n          neutral: 'neutral-subdued',\n          positive: 'positive',\n          notice: 'notice',\n          negative: 'negative',\n          gray: 'gray',\n          red: 'red',\n          orange: 'orange',\n          yellow: 'yellow',\n          chartreuse: 'chartreuse',\n          celery: 'celery',\n          green: 'green',\n          seafoam: 'seafoam',\n          cyan: 'cyan',\n          blue: 'blue',\n          indigo: 'indigo',\n          purple: 'purple',\n          fuchsia: 'fuchsia',\n          magenta: 'magenta',\n          pink: 'pink',\n          turquoise: 'turquoise',\n          brown: 'brown',\n          cinnamon: 'cinnamon',\n          silver: 'silver'\n        }\n      },\n      subtle: {\n        variant: {\n          accent: 'accent-subtle',\n          informative: 'informative-subtle',\n          neutral: 'neutral-subtle',\n          positive: 'positive-subtle',\n          notice: 'notice-subtle',\n          negative: 'negative-subtle',\n          gray: 'gray-subtle',\n          red: 'red-subtle',\n          orange: 'orange-subtle',\n          yellow: 'yellow-subtle',\n          chartreuse: 'chartreuse-subtle',\n          celery: 'celery-subtle',\n          green: 'green-subtle',\n          seafoam: 'seafoam-subtle',\n          cyan: 'cyan-subtle',\n          blue: 'blue-subtle',\n          indigo: 'indigo-subtle',\n          purple: 'purple-subtle',\n          fuchsia: 'fuchsia-subtle',\n          magenta: 'magenta-subtle',\n          pink: 'pink-subtle',\n          turquoise: 'turquoise-subtle',\n          brown: 'brown-subtle',\n          cinnamon: 'cinnamon-subtle',\n          silver: 'silver-subtle'\n        }\n      },\n      outline: 'layer-2'\n    }\n  },\n  borderStyle: 'solid',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderColor: {\n    default: 'transparent',\n    fillStyle: {\n      outline: {\n        variant: {\n          accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n          informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n          neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n          positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n          notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n          negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nexport const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n  let {\n    children,\n    variant = 'neutral',\n    size = 'S',\n    fillStyle = 'bold',\n    overflowMode = 'wrap',\n    ...otherProps\n  } = props; // useProviderProps(props) in v3\n  let domRef = useDOMRef(ref);\n  let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n  return (\n    <Provider\n      values={[\n        [TextContext, {\n          styles: style({\n            paddingY: '--labelPadding',\n            order: 1,\n            overflowX: 'hidden',\n            overflowY: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: {overflowMode: {truncate: 'nowrap', wrap: 'normal'}}\n          })({overflowMode})\n        }],\n        [RACTextContext, {}],\n        [IconContext, {\n          render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n          styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n        }]\n      ]}>\n      <SkeletonWrapper>\n        <span\n          {...filterDOMProps(otherProps)}\n          role=\"presentation\"\n          className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n          style={props.UNSAFE_style}\n          ref={domRef}>\n          {\n            typeof children === 'string' || isTextOnly\n              ? <Text>{children}</Text>\n              : children\n          }\n        </span>\n      </SkeletonWrapper>\n    </Provider>\n  );\n});\n"],"names":[],"version":3,"file":"Badge.css.map"}