@react-spectrum/s2 3.0.0-nightly-db60babaf-241014 → 3.0.0-nightly-e1b72a79f-241016

package/dist/ActionButton.css

@@ -8,7 +8,7 @@
   }
 
   .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
   .dc {
@@ -183,11 +183,11 @@
   }
 
   .b_____E {
-    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #345bf8);
+    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
   .b_____F {
-    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #2549e5);
+    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
   }
 
   .bg {

package/dist/AlertDialog.css

@@ -8,11 +8,11 @@
   }
 
   .-rwx0fg_e-e {
-    --iconPrimary: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #cd2e1d);
+    --iconPrimary: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #fc432e);
   }
 
   .-rwx0fg_e-g {
-    --iconPrimary: var(--lightningcss-light, #e86a00) var(--lightningcss-dark, #e06400);
+    --iconPrimary: var(--lightningcss-light, #d45b00) var(--lightningcss-dark, #e06400);
   }
 }
 

package/dist/Badge.cjs

@@ -101,69 +101,69 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
     rules += ' -oelgqu_A--177861o';
     rules += ' jbH';
     rules += ' jG';
-    if (props.fillStyle === "outline") rules += ' bd';
+    if (props.fillStyle === "outline") rules += ' b______k';
     else if (props.fillStyle === "subtle") {
-        if (props.variant === "silver") rules += ' b____z';
-        else if (props.variant === "cinnamon") rules += ' b____P';
-        else if (props.variant === "brown") rules += ' b____j';
-        else if (props.variant === "turquoise") rules += ' b___3';
-        else if (props.variant === "pink") rules += ' b___N';
-        else if (props.variant === "magenta") rules += ' b___x';
-        else if (props.variant === "fuchsia") rules += ' b___h';
-        else if (props.variant === "purple") rules += ' b__1';
-        else if (props.variant === "indigo") rules += ' b__L';
-        else if (props.variant === "blue") rules += ' br';
-        else if (props.variant === "cyan") rules += ' b__v';
-        else if (props.variant === "seafoam") rules += ' b__f';
-        else if (props.variant === "green") rules += ' b_Z';
-        else if (props.variant === "celery") rules += ' b_J';
-        else if (props.variant === "charteuse") rules += ' b_t';
-        else if (props.variant === "yellow") rules += ' b_d';
-        else if (props.variant === "orange") rules += ' bX';
-        else if (props.variant === "red") rules += ' bH';
-        else if (props.variant === "gray") rules += ' bg';
-        else if (props.variant === "negative") rules += ' bH';
-        else if (props.variant === "notice") rules += ' bX';
-        else if (props.variant === "positive") rules += ' b_Z';
-        else if (props.variant === "neutral") rules += ' bg';
-        else if (props.variant === "informative") rules += ' br';
-        else if (props.variant === "accent") rules += ' br';
+        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';
     } else if (props.fillStyle === "bold") {
-        if (props.variant === "silver") rules += ' b_____0';
-        else if (props.variant === "cinnamon") rules += ' b_____Y';
-        else if (props.variant === "brown") rules += ' b_____Z';
-        else if (props.variant === "turquoise") rules += ' b_____X';
-        else if (props.variant === "pink") rules += ' b_____W';
-        else if (props.variant === "magenta") rules += ' b_____V';
-        else if (props.variant === "fuchsia") rules += ' b_____U';
-        else if (props.variant === "purple") rules += ' b_____T';
-        else if (props.variant === "indigo") rules += ' b_____S';
+        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_____R';
-        else if (props.variant === "seafoam") rules += ' b_____Q';
-        else if (props.variant === "green") rules += ' b_____K';
-        else if (props.variant === "celery") rules += ' b_____P';
-        else if (props.variant === "charteuse") rules += ' b_____O';
-        else if (props.variant === "yellow") rules += ' b_____N';
-        else if (props.variant === "orange") rules += ' b_____M';
-        else if (props.variant === "red") rules += ' b_____I';
-        else if (props.variant === "gray") rules += ' b_____G';
+        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';
         else if (props.variant === "negative") {
-            if (props.isPressed) rules += ' b_____J';
-            else if (props.isFocusVisible) rules += ' b_____J';
-            else if (props.isHovered) rules += ' b_____J';
-            else rules += ' b_____I';
-        } else if (props.variant === "notice") rules += ' b_____M';
-        else if (props.variant === "positive") {
             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';
+        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';
         } else if (props.variant === "neutral") {
-            if (props.isPressed) rules += ' b_____H';
-            else if (props.isFocusVisible) rules += ' b_____H';
-            else if (props.isHovered) rules += ' b_____H';
-            else rules += ' b_____G';
+            if (props.isPressed) rules += ' b_____I';
+            else if (props.isFocusVisible) rules += ' b_____I';
+            else if (props.isHovered) rules += ' b_____I';
+            else rules += ' b_____H';
         } else if (props.variant === "informative") {
             if (props.isPressed) rules += ' b_____F';
             else if (props.isFocusVisible) rules += ' b_____F';
@@ -183,12 +183,12 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
     rules += ' sc';
     rules += ' tc';
     if (props.fillStyle === "outline") {
-        if (props.variant === "negative") rules += ' cN';
-        else if (props.variant === "notice") rules += ' c2';
-        else if (props.variant === "positive") rules += ' c_4';
-        else if (props.variant === "neutral") rules += ' cm';
-        else if (props.variant === "informative") rules += ' cx';
-        else if (props.variant === "accent") rules += ' cx';
+        if (props.variant === "negative") rules += ' c-awl6xt';
+        else if (props.variant === "notice") rules += ' c-1c1g5qb';
+        else if (props.variant === "positive") rules += ' c-32o7sp';
+        else if (props.variant === "neutral") rules += ' c-lj7qwa';
+        else if (props.variant === "informative") rules += ' c-1n5lxsq';
+        else if (props.variant === "accent") rules += ' c-1n5lxsq';
     } else rules += ' ca';
     rules += ' -rwx0fg_e-b';
     if (props.size === "XL") {

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, 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-200',\n          informative: 'informative-subtle',\n          neutral: 'neutral-subtle',\n          positive: 'positive-subtle',\n          notice: 'notice-subtle',\n          negative: 'negative-subtle',\n          gray: 'gray-100',\n          red: 'red-200',\n          orange: 'orange-200',\n          yellow: 'yellow-200',\n          charteuse: 'chartreuse-200',\n          celery: 'celery-200',\n          green: 'green-200',\n          seafoam: 'seafoam-200',\n          cyan: 'cyan-200',\n          blue: 'blue-200',\n          indigo: 'indigo-200',\n          purple: 'purple-200',\n          fuchsia: 'fuchsia-200',\n          magenta: 'magenta-200',\n          pink: 'pink-200',\n          turquoise: 'turquoise-200',\n          brown: 'brown-200',\n          cinnamon: 'cinnamon-200',\n          silver: 'silver-200'\n        }\n      },\n      outline: 'gray-25'\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: 'accent-800',\n          informative: 'informative-800',\n          neutral: 'gray-700',\n          positive: 'positive-700',\n          notice: 'notice-700',\n          negative: 'negative-800'\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/Badge.css

@@ -98,175 +98,175 @@
   }
 
   .b_____F {
-    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #2549e5);
+    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
   }
 
-  .b_____H {
+  .b_____I {
     background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #444);
   }
 
-  .b_____L {
-    background-color: var(--lightningcss-light, #036e45) var(--lightningcss-dark, #036a43);
+  .b_____O {
+    background-color: var(--lightningcss-light, #036e45) var(--lightningcss-dark, #047c4b);
   }
 
-  .b_____J {
-    background-color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #b12617);
+  .b_____L {
+    background-color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #cd2e1d);
   }
 
-  .b_____G {
+  .b_____H {
     background-color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #6d6d6d);
   }
 
-  .b_____I {
-    background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #cd2e1d);
+  .b_____K {
+    background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
   }
 
-  .b_____M {
+  .b_____Q {
     background-color: var(--lightningcss-light, #fc7d00) var(--lightningcss-dark, #e06400);
   }
 
-  .b_____N {
+  .b_____S {
     background-color: var(--lightningcss-light, #f5c700) var(--lightningcss-dark, #da9f00);
   }
 
-  .b_____O {
+  .b_____U {
     background-color: var(--lightningcss-light, #a3c400) var(--lightningcss-dark, #88a400);
   }
 
-  .b_____P {
+  .b_____W {
     background-color: var(--lightningcss-light, #5db41f) var(--lightningcss-dark, #4e9a17);
   }
 
-  .b_____K {
-    background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #047c4b);
+  .b_____N {
+    background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #068850);
   }
 
-  .b_____Q {
-    background-color: var(--lightningcss-light, #07816d) var(--lightningcss-dark, #067a67);
+  .b_____Y {
+    background-color: var(--lightningcss-light, #07816d) var(--lightningcss-dark, #088670);
   }
 
-  .b_____R {
-    background-color: var(--lightningcss-light, #0b78b3) var(--lightningcss-dark, #0873a8);
+  .b_____0 {
+    background-color: var(--lightningcss-light, #0b78b3) var(--lightningcss-dark, #0d7dba);
   }
 
   .b_____E {
-    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #345bf8);
+    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .b_____S {
-    background-color: var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #6d4bf8);
+  .b_____2 {
+    background-color: var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #745bfc);
   }
 
-  .b_____T {
-    background-color: var(--lightningcss-light, #9a47e2) var(--lightningcss-dark, #943ee0);
+  .b_____4 {
+    background-color: var(--lightningcss-light, #9a47e2) var(--lightningcss-dark, #9d4ee4);
   }
 
-  .b_____U {
-    background-color: var(--lightningcss-light, #b539c8) var(--lightningcss-dark, #ad33c0);
+  .b_____6 {
+    background-color: var(--lightningcss-light, #b539c8) var(--lightningcss-dark, #ba3cce);
   }
 
-  .b_____V {
-    background-color: var(--lightningcss-light, #d92361) var(--lightningcss-dark, #cf1f5c);
+  .b_____8 {
+    background-color: var(--lightningcss-light, #d92361) var(--lightningcss-dark, #e02665);
   }
 
-  .b_____W {
-    background-color: var(--lightningcss-light, #ce2a92) var(--lightningcss-dark, #c4278a);
+  .b______a {
+    background-color: var(--lightningcss-light, #ce2a92) var(--lightningcss-dark, #d52d97);
   }
 
-  .b_____X {
-    background-color: var(--lightningcss-light, #087e89) var(--lightningcss-dark, #077883);
+  .b______c {
+    background-color: var(--lightningcss-light, #087e89) var(--lightningcss-dark, #09838e);
   }
 
-  .b_____Z {
-    background-color: var(--lightningcss-light, #8b6d42) var(--lightningcss-dark, #84683d);
+  .b______g {
+    background-color: var(--lightningcss-light, #8b6d42) var(--lightningcss-dark, #8f7245);
   }
 
-  .b_____Y {
-    background-color: var(--lightningcss-light, #aa5e38) var(--lightningcss-dark, #a35834);
+  .b______e {
+    background-color: var(--lightningcss-light, #aa5e38) var(--lightningcss-dark, #b0623b);
   }
 
-  .b_____0 {
-    background-color: var(--lightningcss-light, #727272) var(--lightningcss-dark, #6c6c6c);
+  .b______i {
+    background-color: var(--lightningcss-light, #727272) var(--lightningcss-dark, #767676);
   }
 
-  .bg {
-    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  .b_____J {
+    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #393939);
   }
 
-  .bH {
-    background-color: var(--lightningcss-light, #ffebe8) var(--lightningcss-dark, #440d05);
+  .b_____M {
+    background-color: var(--lightningcss-light, #ffebe8) var(--lightningcss-dark, #571107);
   }
 
-  .bX {
-    background-color: var(--lightningcss-light, #ffeccf) var(--lightningcss-dark, #3d1500);
+  .b_____R {
+    background-color: var(--lightningcss-light, #ffeccf) var(--lightningcss-dark, #501b00);
   }
 
-  .b_d {
-    background-color: var(--lightningcss-light, #fff197) var(--lightningcss-dark, #2f1d00);
+  .b_____T {
+    background-color: var(--lightningcss-light, #fff197) var(--lightningcss-dark, #3d2700);
   }
 
-  .b_t {
-    background-color: var(--lightningcss-light, #eaf6ad) var(--lightningcss-dark, #1e2400);
+  .b_____V {
+    background-color: var(--lightningcss-light, #eaf6ad) var(--lightningcss-dark, #272f00);
   }
 
-  .b_J {
-    background-color: var(--lightningcss-light, #c5ff9c) var(--lightningcss-dark, #0f2600);
+  .b_____X {
+    background-color: var(--lightningcss-light, #c5ff9c) var(--lightningcss-dark, #153301);
   }
 
-  .b_Z {
-    background-color: var(--lightningcss-light, #d7f7e1) var(--lightningcss-dark, #00261d);
+  .b_____P {
+    background-color: var(--lightningcss-light, #d7f7e1) var(--lightningcss-dark, #003326);
   }
 
-  .b__f {
-    background-color: var(--lightningcss-light, #d3f6ea) var(--lightningcss-dark, #002723);
+  .b_____Z {
+    background-color: var(--lightningcss-light, #d3f6ea) var(--lightningcss-dark, #00322c);
   }
 
-  .b__v {
-    background-color: var(--lightningcss-light, #d9f4fd) var(--lightningcss-dark, #002431);
+  .b_____1 {
+    background-color: var(--lightningcss-light, #d9f4fd) var(--lightningcss-dark, #003041);
   }
 
-  .br {
-    background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0f1c52);
+  .b_____G {
+    background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0c2175);
   }
 
-  .b__L {
-    background-color: var(--lightningcss-light, #ebeeff) var(--lightningcss-dark, #23006e);
+  .b_____3 {
+    background-color: var(--lightningcss-light, #ebeeff) var(--lightningcss-dark, #2f008c);
   }
 
-  .b__1 {
-    background-color: var(--lightningcss-light, #f4ebfc) var(--lightningcss-dark, #320060);
+  .b_____5 {
+    background-color: var(--lightningcss-light, #f4ebfc) var(--lightningcss-dark, #40007a);
   }
 
-  .b___h {
-    background-color: var(--lightningcss-light, #fde9ff) var(--lightningcss-dark, #3d004a);
+  .b_____7 {
+    background-color: var(--lightningcss-light, #fde9ff) var(--lightningcss-dark, #4f005f);
   }
 
-  .b___x {
-    background-color: var(--lightningcss-light, #ffe8f0) var(--lightningcss-dark, #4a001b);
+  .b_____9 {
+    background-color: var(--lightningcss-light, #ffe8f0) var(--lightningcss-dark, #5d0022);
   }
 
-  .b___N {
-    background-color: var(--lightningcss-light, #ffe8f7) var(--lightningcss-dark, #47002c);
+  .b______b {
+    background-color: var(--lightningcss-light, #ffe8f7) var(--lightningcss-dark, #5a0039);
   }
 
-  .b___3 {
-    background-color: var(--lightningcss-light, #d1f5f5) var(--lightningcss-dark, #002529);
+  .b______d {
+    background-color: var(--lightningcss-light, #d1f5f5) var(--lightningcss-dark, #003136);
   }
 
-  .b____j {
-    background-color: var(--lightningcss-light, #f7eee1) var(--lightningcss-dark, #2c1f0b);
+  .b______h {
+    background-color: var(--lightningcss-light, #f7eee1) var(--lightningcss-dark, #3a280e);
   }
 
-  .b____P {
-    background-color: var(--lightningcss-light, #f9ece5) var(--lightningcss-dark, #3b1505);
+  .b______f {
+    background-color: var(--lightningcss-light, #f9ece5) var(--lightningcss-dark, #4f1c07);
   }
 
-  .b____z {
-    background-color: var(--lightningcss-light, #efefef) var(--lightningcss-dark, #212121);
+  .b______j {
+    background-color: var(--lightningcss-light, #efefef) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .bd {
-    background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
+  .b______k {
+    background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
   .wa {
@@ -297,24 +297,24 @@
     border-color: #0000;
   }
 
-  .cx {
-    border-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+  .c-1n5lxsq {
+    border-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #5681ff);
   }
 
-  .cm {
-    border-color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
+  .c-lj7qwa {
+    border-color: var(--lightningcss-light, #8f8f8f) var(--lightningcss-dark, #8a8a8a);
   }
 
-  .c_4 {
-    border-color: var(--lightningcss-light, #0ba45d) var(--lightningcss-dark, #047c4b);
+  .c-32o7sp {
+    border-color: var(--lightningcss-light, #079355) var(--lightningcss-dark, #099d59);
   }
 
-  .c2 {
-    border-color: var(--lightningcss-light, #e86a00) var(--lightningcss-dark, #b94900);
+  .c-1c1g5qb {
+    border-color: var(--lightningcss-light, #d45b00) var(--lightningcss-dark, #e06400);
   }
 
-  .cN {
-    border-color: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #e63623);
+  .c-awl6xt {
+    border-color: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #fc432e);
   }
 
   .-rwx0fg_e-b {

package/dist/Badge.css.map

@@ -1 +1 @@
-{"mappings":"ACsDc;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;;;;EAgJiB;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnJJ;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAgJiB","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, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, 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-200',\n          informative: 'informative-subtle',\n          neutral: 'neutral-subtle',\n          positive: 'positive-subtle',\n          notice: 'notice-subtle',\n          negative: 'negative-subtle',\n          gray: 'gray-100',\n          red: 'red-200',\n          orange: 'orange-200',\n          yellow: 'yellow-200',\n          charteuse: 'chartreuse-200',\n          celery: 'celery-200',\n          green: 'green-200',\n          seafoam: 'seafoam-200',\n          cyan: 'cyan-200',\n          blue: 'blue-200',\n          indigo: 'indigo-200',\n          purple: 'purple-200',\n          fuchsia: 'fuchsia-200',\n          magenta: 'magenta-200',\n          pink: 'pink-200',\n          turquoise: 'turquoise-200',\n          brown: 'brown-200',\n          cinnamon: 'cinnamon-200',\n          silver: 'silver-200'\n        }\n      },\n      outline: 'gray-25'\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: 'accent-800',\n          informative: 'informative-800',\n          neutral: 'gray-700',\n          positive: 'positive-700',\n          notice: 'notice-700',\n          negative: 'negative-800'\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.css.map"}
+{"mappings":"ACsDc;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;;;;EAgJiB;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnJJ;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAgJiB","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, 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.css.map"}