@react-spectrum/s2 0.5.0 → 0.6.0

package/dist/AvatarGroup.mjs

@@ -29,124 +29,124 @@ const $85e1de65a7290f4a$var$avatar = " . y-1oavdfs y-13alit4a";
 const $85e1de65a7290f4a$var$text = function anonymous(props) {
     let rules = " .";
     rules += ' yd';
-    rules += ' __vb';
     rules += ' __wb';
-    rules += ' _ma';
-    rules += ' _pb';
+    rules += ' __xb';
+    rules += ' _na';
+    rules += ' _qb';
     if (props.size === "40") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "36") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "32") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "28") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "24") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "20") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "16") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     }
     if (props.size === "40") {
-        rules += ' _dbm';
-        rules += ' _dj';
+        rules += ' _ebm';
+        rules += ' _ej';
     } else if (props.size === "36") {
-        rules += ' _dbl';
-        rules += ' _dk';
+        rules += ' _ebl';
+        rules += ' _ek';
     } else if (props.size === "32") {
-        rules += ' _dbj';
-        rules += ' _di';
+        rules += ' _ebj';
+        rules += ' _ei';
     } else if (props.size === "28") {
-        rules += ' _dbh';
-        rules += ' _dg';
+        rules += ' _ebh';
+        rules += ' _eg';
     } else if (props.size === "24") {
-        rules += ' _dbf';
-        rules += ' _de';
+        rules += ' _ebf';
+        rules += ' _ee';
     } else if (props.size === "20") {
-        rules += ' _dbd';
-        rules += ' _dc';
+        rules += ' _ebd';
+        rules += ' _ec';
     } else if (props.size === "16") {
-        rules += ' _dbb';
-        rules += ' _da';
+        rules += ' _ebb';
+        rules += ' _ea';
     }
-    if (props.size === "40") rules += ' _eb';
-    else if (props.size === "36") rules += ' _eb';
-    else if (props.size === "32") rules += ' _eb';
-    else if (props.size === "28") rules += ' _eb';
-    else if (props.size === "24") rules += ' _eb';
-    else if (props.size === "20") rules += ' _eb';
-    else if (props.size === "16") rules += ' _eb';
+    if (props.size === "40") rules += ' _fb';
+    else if (props.size === "36") rules += ' _fb';
+    else if (props.size === "32") rules += ' _fb';
+    else if (props.size === "28") rules += ' _fb';
+    else if (props.size === "24") rules += ' _fb';
+    else if (props.size === "20") rules += ' _fb';
+    else if (props.size === "16") rules += ' _fb';
     if (props.size === "40") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     } else if (props.size === "36") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     } else if (props.size === "32") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     } else if (props.size === "28") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     } else if (props.size === "24") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     } else if (props.size === "20") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     } else if (props.size === "16") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     }
     if (props.size === "40") rules += ' an';
     else if (props.size === "36") rules += ' an';
@@ -159,13 +159,13 @@ const $85e1de65a7290f4a$var$text = function anonymous(props) {
 };
 const $85e1de65a7290f4a$var$container = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X)[^\s]+/g) || [];
     rules += matches.join('');
-    rules += ' _Zd';
-    rules += ' _1c';
+    rules += ' _0d';
+    rules += ' _2c';
     return rules;
 };
-function $85e1de65a7290f4a$var$AvatarGroup(props, ref) {
+const $85e1de65a7290f4a$export$5b26ebaf2b105908 = /*#__PURE__*/ (0, $6MvCt$forwardRef)(function AvatarGroup(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $85e1de65a7290f4a$export$4f18251748129091);
     let domRef = (0, $6MvCt$useDOMRef)(ref);
     let { children: children, label: label, size: size = 24, styles: styles, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, ...otherProps } = props;
@@ -201,10 +201,7 @@ function $85e1de65a7290f4a$var$AvatarGroup(props, ref) {
             ]
         })
     });
-}
-/**
- * An avatar group is a grouping of avatars that are related to each other.
- */ let $85e1de65a7290f4a$export$5b26ebaf2b105908 = /*#__PURE__*/ (0, $6MvCt$forwardRef)($85e1de65a7290f4a$var$AvatarGroup);
+});
 
 
 export {$85e1de65a7290f4a$export$4f18251748129091 as AvatarGroupContext, $85e1de65a7290f4a$export$5b26ebaf2b105908 as AvatarGroup};

package/dist/AvatarGroup.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAKN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gBAAC,CAAA,GAAA,yCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iBAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gBAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AvatarGroup.tsx"],"sourcesContent":["/*\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 {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n  /** Avatar children of the avatar group. */\n  children: ReactNode,\n  /** The label for the avatar group. */\n  label?: string,\n  /**\n   * The size of the avatar group.\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n  marginStart: {\n    default: '[calc(var(--size) / -4)]',\n    ':first-child': 0\n  }\n});\n\nconst text = style({\n  marginStart: 8,\n  truncate: true,\n  font: {\n    size: {\n      16: 'ui-xs',\n      20: 'ui-sm',\n      24: 'ui',\n      28: 'ui-lg',\n      32: 'ui-xl',\n      36: 'ui-2xl',\n      40: 'ui-3xl'\n    }\n  }\n});\n\nconst container = style({\n  display: 'flex',\n  alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n  let domRef = useDOMRef(ref);\n  let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n  let {labelProps, fieldProps} = useLabel({\n    ...props,\n    labelElementType: 'span'\n  });\n\n  return (\n    <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n      <div\n        ref={domRef}\n        {...filterDOMProps(otherProps)}\n        {...fieldProps}\n        role=\"group\"\n        className={(UNSAFE_className ?? '') + container(null, styles)}\n        style={{\n          ...UNSAFE_style,\n          '--size': size / 16 + 'rem'\n        } as CSSProperties}>\n        {children}\n        {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n      </div>\n    </AvatarContext.Provider>\n  );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.mjs.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAQC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gBAAC,CAAA,GAAA,yCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iBAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gBAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF","sources":["packages/@react-spectrum/s2/src/AvatarGroup.tsx"],"sourcesContent":["/*\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 {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n  /** Avatar children of the avatar group. */\n  children: ReactNode,\n  /** The label for the avatar group. */\n  label?: string,\n  /**\n   * The size of the avatar group.\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n  marginStart: {\n    default: '[calc(var(--size) / -4)]',\n    ':first-child': 0\n  }\n});\n\nconst text = style({\n  marginStart: 8,\n  truncate: true,\n  font: {\n    size: {\n      16: 'ui-xs',\n      20: 'ui-sm',\n      24: 'ui',\n      28: 'ui-lg',\n      32: 'ui-xl',\n      36: 'ui-2xl',\n      40: 'ui-3xl'\n    }\n  }\n});\n\nconst container = style({\n  display: 'flex',\n  alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nexport const AvatarGroup = forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n  let domRef = useDOMRef(ref);\n  let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n  let {labelProps, fieldProps} = useLabel({\n    ...props,\n    labelElementType: 'span'\n  });\n\n  return (\n    <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n      <div\n        ref={domRef}\n        {...filterDOMProps(otherProps)}\n        {...fieldProps}\n        role=\"group\"\n        className={(UNSAFE_className ?? '') + container(null, styles)}\n        style={{\n          ...UNSAFE_style,\n          '--size': size / 16 + 'rem'\n        } as CSSProperties}>\n        {children}\n        {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n      </div>\n    </AvatarContext.Provider>\n  );\n});\n"],"names":[],"version":3,"file":"AvatarGroup.mjs.map"}

package/dist/Badge.cjs

@@ -44,36 +44,36 @@ $parcel$export(module.exports, "Badge", () => $660a621e3a266afc$export$37acb3580
 const $660a621e3a266afc$export$1d4627584e49159a = /*#__PURE__*/ (0, $26Nq1$react.createContext)(null);
 const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
     rules += matches.join('');
-    rules += ' _Zd';
-    rules += ' _c-bc1l9oh';
-    rules += ' _c-1uotwbwg';
-    rules += ' _c-eo0c6sf';
-    rules += ' _c-enzzrge';
-    rules += ' _c-enzykdd';
-    rules += ' _c-enzwzjc';
-    rules += ' _c-enzrfpb';
-    rules += ' _ca';
+    rules += ' _0d';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
     if (props.size === "XL") {
-        rules += ' _dbj';
-        rules += ' _di';
+        rules += ' _ebj';
+        rules += ' _ei';
     } else if (props.size === "L") {
-        rules += ' _dbh';
-        rules += ' _dg';
+        rules += ' _ebh';
+        rules += ' _eg';
     } else if (props.size === "S") {
-        rules += ' _dbd';
-        rules += ' _dc';
+        rules += ' _ebd';
+        rules += ' _ec';
     } else if (props.size === "XS") {
-        rules += ' _dbb';
-        rules += ' _da';
+        rules += ' _ebb';
+        rules += ' _ea';
     } else {
-        rules += ' _dbf';
-        rules += ' _de';
+        rules += ' _ebf';
+        rules += ' _ee';
     }
-    rules += ' _eb';
-    rules += ' _f-1x99dlob';
-    rules += ' _fa';
+    rules += ' _fb';
+    rules += ' _g-1x99dlob';
+    rules += ' _ga';
     if (props.fillStyle === "outline") rules += ' ap';
     else if (props.fillStyle === "subtle") rules += ' ap';
     else if (props.fillStyle === "bold") {
@@ -84,100 +84,100 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
         else if (props.variant === "notice") rules += ' ab';
         else rules += ' ac';
     }
-    rules += ' _2d';
-    rules += ' _1c';
-    rules += ' _vh';
+    rules += ' _3d';
+    rules += ' _2c';
     rules += ' _wh';
     rules += ' _xh';
     rules += ' _yh';
+    rules += ' _zh';
     rules += ' o-375tou';
     rules += ' C-1dz4pg9a';
     rules += ' CI';
     rules += ' D-1dz4pg9a';
     rules += ' DI';
     rules += ' -_1gogtue_E--1dbqcch';
-    rules += ' _b-1dz4pg9b';
+    rules += ' _c-1dz4pg9b';
     rules += ' -oelgqu_A--1dz4pg9a';
     rules += ' -oelgqu_A--177861o';
     rules += ' jbH';
     rules += ' jG';
-    if (props.fillStyle === "outline") rules += ' b______k';
+    if (props.fillStyle === "outline") rules += ' b______x';
     else if (props.fillStyle === "subtle") {
-        if (props.variant === "silver") rules += ' b______j';
-        else if (props.variant === "cinnamon") rules += ' b______f';
-        else if (props.variant === "brown") rules += ' b______h';
-        else if (props.variant === "turquoise") rules += ' b______d';
-        else if (props.variant === "pink") rules += ' b______b';
-        else if (props.variant === "magenta") rules += ' b_____9';
-        else if (props.variant === "fuchsia") rules += ' b_____7';
-        else if (props.variant === "purple") rules += ' b_____5';
-        else if (props.variant === "indigo") rules += ' b_____3';
-        else if (props.variant === "blue") rules += ' b_____G';
-        else if (props.variant === "cyan") rules += ' b_____1';
-        else if (props.variant === "seafoam") rules += ' b_____Z';
-        else if (props.variant === "green") rules += ' b_____P';
-        else if (props.variant === "celery") rules += ' b_____X';
-        else if (props.variant === "charteuse") rules += ' b_____V';
-        else if (props.variant === "yellow") rules += ' b_____T';
-        else if (props.variant === "orange") rules += ' b_____R';
-        else if (props.variant === "red") rules += ' b_____M';
-        else if (props.variant === "gray") rules += ' b_____J';
-        else if (props.variant === "negative") rules += ' b_____M';
-        else if (props.variant === "notice") rules += ' b_____R';
-        else if (props.variant === "positive") rules += ' b_____P';
-        else if (props.variant === "neutral") rules += ' b_____J';
-        else if (props.variant === "informative") rules += ' b_____G';
-        else if (props.variant === "accent") rules += ' b_____G';
+        if (props.variant === "silver") rules += ' b______w';
+        else if (props.variant === "cinnamon") rules += ' b______s';
+        else if (props.variant === "brown") rules += ' b______u';
+        else if (props.variant === "turquoise") rules += ' b______q';
+        else if (props.variant === "pink") rules += ' b______o';
+        else if (props.variant === "magenta") rules += ' b______m';
+        else if (props.variant === "fuchsia") rules += ' b______k';
+        else if (props.variant === "purple") rules += ' b______i';
+        else if (props.variant === "indigo") rules += ' b______g';
+        else if (props.variant === "blue") rules += ' b_____T';
+        else if (props.variant === "cyan") rules += ' b______e';
+        else if (props.variant === "seafoam") rules += ' b______c';
+        else if (props.variant === "green") rules += ' b_____2';
+        else if (props.variant === "celery") rules += ' b______a';
+        else if (props.variant === "charteuse") rules += ' b_____8';
+        else if (props.variant === "yellow") rules += ' b_____6';
+        else if (props.variant === "orange") rules += ' b_____4';
+        else if (props.variant === "red") rules += ' b_____Z';
+        else if (props.variant === "gray") rules += ' b_____W';
+        else if (props.variant === "negative") rules += ' b_____Z';
+        else if (props.variant === "notice") rules += ' b_____4';
+        else if (props.variant === "positive") rules += ' b_____2';
+        else if (props.variant === "neutral") rules += ' b_____W';
+        else if (props.variant === "informative") rules += ' b_____T';
+        else if (props.variant === "accent") rules += ' b_____T';
     } else if (props.fillStyle === "bold") {
-        if (props.variant === "silver") rules += ' b______i';
-        else if (props.variant === "cinnamon") rules += ' b______e';
-        else if (props.variant === "brown") rules += ' b______g';
-        else if (props.variant === "turquoise") rules += ' b______c';
-        else if (props.variant === "pink") rules += ' b______a';
-        else if (props.variant === "magenta") rules += ' b_____8';
-        else if (props.variant === "fuchsia") rules += ' b_____6';
-        else if (props.variant === "purple") rules += ' b_____4';
-        else if (props.variant === "indigo") rules += ' b_____2';
-        else if (props.variant === "blue") rules += ' b_____E';
-        else if (props.variant === "cyan") rules += ' b_____0';
-        else if (props.variant === "seafoam") rules += ' b_____Y';
-        else if (props.variant === "green") rules += ' b_____N';
-        else if (props.variant === "celery") rules += ' b_____W';
-        else if (props.variant === "charteuse") rules += ' b_____U';
-        else if (props.variant === "yellow") rules += ' b_____S';
-        else if (props.variant === "orange") rules += ' b_____Q';
-        else if (props.variant === "red") rules += ' b_____K';
-        else if (props.variant === "gray") rules += ' b_____H';
+        if (props.variant === "silver") rules += ' b______v';
+        else if (props.variant === "cinnamon") rules += ' b______r';
+        else if (props.variant === "brown") rules += ' b______t';
+        else if (props.variant === "turquoise") rules += ' b______p';
+        else if (props.variant === "pink") rules += ' b______n';
+        else if (props.variant === "magenta") rules += ' b______l';
+        else if (props.variant === "fuchsia") rules += ' b______j';
+        else if (props.variant === "purple") rules += ' b______h';
+        else if (props.variant === "indigo") rules += ' b______f';
+        else if (props.variant === "blue") rules += ' b_____R';
+        else if (props.variant === "cyan") rules += ' b______d';
+        else if (props.variant === "seafoam") rules += ' b______b';
+        else if (props.variant === "green") rules += ' b_____0';
+        else if (props.variant === "celery") rules += ' b_____9';
+        else if (props.variant === "charteuse") rules += ' b_____7';
+        else if (props.variant === "yellow") rules += ' b_____5';
+        else if (props.variant === "orange") rules += ' b_____3';
+        else if (props.variant === "red") rules += ' b_____X';
+        else if (props.variant === "gray") rules += ' b_____U';
         else if (props.variant === "negative") {
-            if (props.isPressed) rules += ' b_____L';
-            else if (props.isFocusVisible) rules += ' b_____L';
-            else if (props.isHovered) rules += ' b_____L';
-            else rules += ' b_____K';
-        } else if (props.variant === "notice") rules += ' b_____Q';
+            if (props.isPressed) rules += ' b_____Y';
+            else if (props.isFocusVisible) rules += ' b_____Y';
+            else if (props.isHovered) rules += ' b_____Y';
+            else rules += ' b_____X';
+        } else if (props.variant === "notice") rules += ' b_____3';
         else if (props.variant === "positive") {
-            if (props.isPressed) rules += ' b_____O';
-            else if (props.isFocusVisible) rules += ' b_____O';
-            else if (props.isHovered) rules += ' b_____O';
-            else rules += ' b_____N';
+            if (props.isPressed) rules += ' b_____1';
+            else if (props.isFocusVisible) rules += ' b_____1';
+            else if (props.isHovered) rules += ' b_____1';
+            else rules += ' b_____0';
         } else if (props.variant === "neutral") {
-            if (props.isPressed) rules += ' b_____I';
-            else if (props.isFocusVisible) rules += ' b_____I';
-            else if (props.isHovered) rules += ' b_____I';
-            else rules += ' b_____H';
+            if (props.isPressed) rules += ' b_____V';
+            else if (props.isFocusVisible) rules += ' b_____V';
+            else if (props.isHovered) rules += ' b_____V';
+            else rules += ' b_____U';
         } else if (props.variant === "informative") {
-            if (props.isPressed) rules += ' b_____F';
-            else if (props.isFocusVisible) rules += ' b_____F';
-            else if (props.isHovered) rules += ' b_____F';
-            else rules += ' b_____E';
+            if (props.isPressed) rules += ' b_____S';
+            else if (props.isFocusVisible) rules += ' b_____S';
+            else if (props.isHovered) rules += ' b_____S';
+            else rules += ' b_____R';
         } else if (props.variant === "accent") {
-            if (props.isPressed) rules += ' b_____F';
-            else if (props.isFocusVisible) rules += ' b_____F';
-            else if (props.isHovered) rules += ' b_____F';
-            else rules += ' b_____E';
+            if (props.isPressed) rules += ' b_____S';
+            else if (props.isFocusVisible) rules += ' b_____S';
+            else if (props.isHovered) rules += ' b_____S';
+            else rules += ' b_____R';
         }
     }
     rules += ' wa';
-    rules += ' __na';
+    rules += ' __oa';
     rules += ' u-375tp0';
     rules += ' v-375tp1';
     rules += ' sc';
@@ -200,7 +200,7 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
     rules += ' -_375tp1_v-c';
     return rules;
 };
-function $660a621e3a266afc$var$Badge(props, ref) {
+const $660a621e3a266afc$export$37acb3580601e69a = /*#__PURE__*/ (0, $26Nq1$react.forwardRef)(function Badge(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $660a621e3a266afc$export$1d4627584e49159a);
     let { children: children, variant: variant = 'neutral', size: size = 'S', fillStyle: fillStyle = 'bold', ...otherProps } = props; // useProviderProps(props) in v3
     let domRef = (0, $26Nq1$reactspectrumutils.useDOMRef)(ref);
@@ -210,7 +210,7 @@ function $660a621e3a266afc$var$Badge(props, ref) {
             [
                 (0, $6367bc87eb7d24ad$exports.TextContext),
                 {
-                    styles: " . E-1gogtue F-1gogtue __A-3t1y"
+                    styles: " . E-1gogtue F-1gogtue __B-3t1y"
                 }
             ],
             [
@@ -218,9 +218,9 @@ function $660a621e3a266afc$var$Badge(props, ref) {
                 {
                     render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
                         slot: 'icon',
-                        styles: " . __A-3t1x"
+                        styles: " . __B-3t1x"
                     }),
-                    styles: " . l-1sthc3k k-1sthc3k y-oelgqu _8-3t1x"
+                    styles: " . l-1sthc3k k-1sthc3k y-oelgqu _9-3t1x"
                 }
             ]
         ],
@@ -241,10 +241,7 @@ function $660a621e3a266afc$var$Badge(props, ref) {
             })
         })
     });
-}
-/**
- * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
- */ let $660a621e3a266afc$export$37acb3580601e69a = /*#__PURE__*/ (0, $26Nq1$react.forwardRef)($660a621e3a266afc$var$Badge);
+});
 
 
 //# sourceMappingURL=Badge.cjs.map

package/dist/Badge.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gCAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gCAAC;gBACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;gBAC9B,MAAK;gBACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;6BAAC;0BAAS;+BAAM;gBAAS,GAAG,MAAM,MAAM;gBAC1F,OAAO,MAAM,YAAY;gBACzB,KAAK;0BAEH,OAAO,aAAa,YAAY,2BAC5B,gCAAC,CAAA,GAAA,8BAAG;8BAAG;qBACP;;;;AAMhB;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Badge.tsx"],"sourcesContent":["/*\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, 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' | 'charteuse' | '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\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: 'center',\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          charteuse: '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          charteuse: '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          charteuse: '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\nfunction 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    ...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, {styles: style({paddingY: '--labelPadding', order: 1})}],\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\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nlet _Badge = forwardRef(Badge);\nexport {_Badge as Badge};\n"],"names":[],"version":3,"file":"Badge.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoIC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gCAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gCAAC;gBACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;gBAC9B,MAAK;gBACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;6BAAC;0BAAS;+BAAM;gBAAS,GAAG,MAAM,MAAM;gBAC1F,OAAO,MAAM,YAAY;gBACzB,KAAK;0BAEH,OAAO,aAAa,YAAY,2BAC5B,gCAAC,CAAA,GAAA,8BAAG;8BAAG;qBACP;;;;AAMhB","sources":["packages/@react-spectrum/s2/src/Badge.tsx"],"sourcesContent":["/*\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, 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' | 'charteuse' | '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\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: 'center',\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          charteuse: '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          charteuse: '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          charteuse: '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    ...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, {styles: style({paddingY: '--labelPadding', order: 1})}],\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.cjs.map"}