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

package/dist/Badge.mjs

@@ -90,69 +90,69 @@ const $6357025487dea614$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';
@@ -172,12 +172,12 @@ const $6357025487dea614$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.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gBAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gBAAC;gBACE,GAAG,CAAA,GAAA,qBAAa,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,gBAAC,CAAA,GAAA,yCAAG;8BAAG;qBACP;;;;AAMhB;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,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.mjs.map"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gBAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gBAAC;gBACE,GAAG,CAAA,GAAA,qBAAa,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,gBAAC,CAAA,GAAA,yCAAG;8BAAG;qBACP;;;;AAMhB;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,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.mjs.map"}

package/dist/Breadcrumbs.css

@@ -168,7 +168,7 @@
   }
 
   .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
   ._Nc {

package/dist/Button.cjs

@@ -310,10 +310,10 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
     } else if (props.fillStyle === "fill") {
         if (props.isDisabled) rules += ' bg';
         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';
+            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 === "accent") {
             if (props.isPressed) rules += ' b_____F';
             else if (props.isFocusVisible) rules += ' b_____F';

package/dist/Button.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 {
@@ -295,19 +295,19 @@
   }
 
   .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);
   }
 
-  .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_____J {
-    background-color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #b12617);
+  .b_____L {
+    background-color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #cd2e1d);
   }
 
   .bg {

package/dist/Button.mjs

@@ -301,10 +301,10 @@ const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
     } else if (props.fillStyle === "fill") {
         if (props.isDisabled) rules += ' bg';
         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';
+            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 === "accent") {
             if (props.isPressed) rules += ' b_____F';
             else if (props.isFocusVisible) rules += ' b_____F';

package/dist/Card.cjs

@@ -93,7 +93,7 @@ let $230078a1c4ce81d8$var$card = function anonymous(props, overrides) {
     else rules += ' _yd';
     rules += ' -_1de2x0q_b-a_____w';
     if (props.variant === "secondary") rules += ' -_1de2x0q_b-e';
-    else if (props.variant === "primary") rules += ' -_1de2x0q_b-_____1';
+    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______k';
     if (props.variant === "quiet") rules += ' ba';
     else if (props.variant === "tertiary") rules += ' ba';
     else rules += ' b-1de2x0q';

package/dist/Card.css

@@ -3,7 +3,7 @@
     flex-direction: column;
   }
 
-  .-_1de2x0q_b-_____1 {
+  .-_1de2x0q_b-______k {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
@@ -252,7 +252,7 @@
   }
 
   .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
   ._M-3t1z {

package/dist/Card.mjs

@@ -80,7 +80,7 @@ let $68e4e6fe083e22fd$var$card = function anonymous(props, overrides) {
     else rules += ' _yd';
     rules += ' -_1de2x0q_b-a_____w';
     if (props.variant === "secondary") rules += ' -_1de2x0q_b-e';
-    else if (props.variant === "primary") rules += ' -_1de2x0q_b-_____1';
+    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______k';
     if (props.variant === "quiet") rules += ' ba';
     else if (props.variant === "tertiary") rules += ' ba';
     else rules += ' b-1de2x0q';

package/dist/CardView.css

@@ -36,7 +36,7 @@
   }
 
   .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
   ._Nc {

package/dist/Checkbox.cjs

@@ -198,7 +198,7 @@ const $af04e099a53d3e85$export$827f4ee28efc37 = function anonymous(props) {
     }
     return rules;
 };
-const $af04e099a53d3e85$export$2c99b98b77550cb4 = " . -rwx0fg_e-y -rwx0fg_e-a_____V";
+const $af04e099a53d3e85$export$2c99b98b77550cb4 = " . -rwx0fg_e-B -rwx0fg_e-a_____Y";
 const $af04e099a53d3e85$var$iconSize = {
     S: 'XS',
     M: 'S',

package/dist/Checkbox.css

@@ -78,7 +78,7 @@
   }
 
   .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
   ._Nc {
@@ -253,7 +253,7 @@
     border-color: #0000;
   }
 
-  .-rwx0fg_e-y {
+  .-rwx0fg_e-B {
     --iconPrimary: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
   }
 }
@@ -400,7 +400,7 @@
       border-color: graytext;
     }
 
-    .-rwx0fg_e-a_____V {
+    .-rwx0fg_e-a_____Y {
       --iconPrimary: HighlightText;
     }
   }

package/dist/Checkbox.mjs

@@ -189,7 +189,7 @@ const $9b405e0f8095dce0$export$827f4ee28efc37 = function anonymous(props) {
     }
     return rules;
 };
-const $9b405e0f8095dce0$export$2c99b98b77550cb4 = " . -rwx0fg_e-y -rwx0fg_e-a_____V";
+const $9b405e0f8095dce0$export$2c99b98b77550cb4 = " . -rwx0fg_e-B -rwx0fg_e-a_____Y";
 const $9b405e0f8095dce0$var$iconSize = {
     S: 'XS',
     M: 'S',

package/dist/CloseButton.css

@@ -12,7 +12,7 @@
   }
 
   .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
   .dc {

package/dist/ColorHandle.cjs

@@ -190,7 +190,7 @@ function $5b07976eb9e358fe$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)("path", {
-                className: " . xb f_____n fa_____x ex",
+                className: " . xb f_____n fa_____x eA",
                 d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
             })
         ]

package/dist/ColorHandle.css

@@ -151,7 +151,7 @@
     stroke: #0000001f;
   }
 
-  .ex {
+  .eA {
     fill: #fff;
   }
 }

package/dist/ColorHandle.mjs

@@ -184,7 +184,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $kShzN$jsx)("path", {
-                className: " . xb f_____n fa_____x ex",
+                className: " . xb f_____n fa_____x eA",
                 d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
             })
         ]

package/dist/ColorSwatchPicker.css

@@ -36,7 +36,7 @@
   }
 
   .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
   ._M-3t1z {

package/dist/ContextualHelp.cjs

@@ -96,7 +96,7 @@ function $bab829476f85a155$var$ContextualHelp(props, ref) {
                             [
                                 (0, $6367bc87eb7d24ad$exports.HeadingContext),
                                 {
-                                    styles: " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dg _dbh _ed _e-1x99dloe _fa _f-1x99dlob ao Aa B-y6pz8c Bb-8hx8xw ya za"
+                                    styles: " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _ee _e-1x99dloe _fa _f-1x99dlob ao Aa B-y6pz8c Bb-8hx8xw ya za"
                                 }
                             ],
                             [

package/dist/ContextualHelp.css

@@ -39,14 +39,14 @@
     border-end-end-radius: 0;
   }
 
-  ._dg {
-    font-size: 1rem;
+  ._di {
+    font-size: 1.125rem;
   }
 
-  ._ed {
-    font-variation-settings: "wght" 700;
+  ._ee {
+    font-variation-settings: "wght" 800;
     font-synthesis-weight: none;
-    font-weight: 700;
+    font-weight: 800;
   }
 
   ._fa {
@@ -160,8 +160,8 @@
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._dbh {
-      font-size: 1.1875rem;
+    ._dbj {
+      font-size: 1.375rem;
     }
 
     .Bb-8hx8xw {

package/dist/ContextualHelp.mjs

@@ -89,7 +89,7 @@ function $8e176595bc49ca3f$var$ContextualHelp(props, ref) {
                             [
                                 (0, $8e847109a6ab556d$export$d688439359537581),
                                 {
-                                    styles: " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dg _dbh _ed _e-1x99dloe _fa _f-1x99dlob ao Aa B-y6pz8c Bb-8hx8xw ya za"
+                                    styles: " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _ee _e-1x99dloe _fa _f-1x99dlob ao Aa B-y6pz8c Bb-8hx8xw ya za"
                                 }
                             ],
                             [

package/dist/Dialog.cjs

@@ -47,7 +47,7 @@ $parcel$export(module.exports, "dialogInner", () => $0f4636c7093b9233$export$6af
 
 
 const $0f4636c7093b9233$var$image = " . l4 k-37m3s2 __Nb";
-const $0f4636c7093b9233$var$heading = " . _9-3t1y Aa Ba _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dj _dbm _ed _e-1x99dloe _fa _f-1x99dlob ao";
+const $0f4636c7093b9233$var$heading = " . _9-3t1y Aa Ba _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dj _dbm _ee _e-1x99dloe _fa _f-1x99dlob ao";
 const $0f4636c7093b9233$var$header = " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _eb _fb _f-1x99dloc an";
 const $0f4636c7093b9233$var$content = function anonymous(props) {
     let rules = " .";

package/dist/Dialog.css

@@ -23,10 +23,10 @@
     font-size: 1.375rem;
   }
 
-  ._ed {
-    font-variation-settings: "wght" 700;
+  ._ee {
+    font-variation-settings: "wght" 800;
     font-synthesis-weight: none;
-    font-weight: 700;
+    font-weight: 800;
   }
 
   ._fa {

package/dist/Dialog.mjs

@@ -39,7 +39,7 @@ function $parcel$interopDefault(a) {
 
 
 const $9bbc115952dac5a6$var$image = " . l4 k-37m3s2 __Nb";
-const $9bbc115952dac5a6$var$heading = " . _9-3t1y Aa Ba _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dj _dbm _ed _e-1x99dloe _fa _f-1x99dlob ao";
+const $9bbc115952dac5a6$var$heading = " . _9-3t1y Aa Ba _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dj _dbm _ee _e-1x99dloe _fa _f-1x99dlob ao";
 const $9bbc115952dac5a6$var$header = " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _eb _fb _f-1x99dloc an";
 const $9bbc115952dac5a6$var$content = function anonymous(props) {
     let rules = " .";

package/dist/Disclosure.cjs

@@ -111,11 +111,11 @@ const $4e301a98f0cc4e4f$var$buttonStyles = function anonymous(props) {
         rules += ' _dbm';
         rules += ' _dj';
     } else if (props.size === "M") {
+        rules += ' _dbl';
+        rules += ' _dk';
+    } else if (props.size === "S") {
         rules += ' _dbj';
         rules += ' _di';
-    } else if (props.size === "S") {
-        rules += ' _dbh';
-        rules += ' _dg';
     }
     rules += ' _ed';
     rules += ' _f-1x99dlob';

package/dist/Disclosure.css

@@ -48,7 +48,7 @@
   }
 
   .dx {
-    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
   ._Nc {
@@ -63,6 +63,10 @@
     font-size: 1.125rem;
   }
 
+  ._dk {
+    font-size: 1.25rem;
+  }
+
   ._dj {
     font-size: 1.375rem;
   }
@@ -350,6 +354,10 @@
       font-size: 1.375rem;
     }
 
+    ._dbl {
+      font-size: 1.5rem;
+    }
+
     ._dbm {
       font-size: 1.6875rem;
     }

package/dist/Disclosure.css.map

@@ -1 +1 @@
-{"mappings":"AC0CmB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+DE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2EC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqDF;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnMD;EAAA;;;;EAAA;;;;EAmEE;;;;EAgID;;;;EAAA;;;;;AAnMD;;AAAA;EAAA;IAAA;;;;IAmEE;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAgID;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAhIC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;;;AA2EC","sources":["af82a6f8008c749b","packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["@import \"02b9b02b69a441b2\";\n@import \"80d1cf6aba9342e9\";\n@import \"d47c144c912b2c65\";\n@import \"54c3947845455457\";\n@import \"47e48706d70658de\";\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 {Button, ContextValue, DisclosureStateContext, Heading, Provider, UNSTABLE_Disclosure as RACDisclosure, UNSTABLE_DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, lightDark, size as sizeValue, style} from '../style' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {\n  /**\n   * The size of the disclosure.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the disclosures.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the disclosure, consisting of an DisclosureHeader and DisclosurePanel. */\n  children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n  color: 'heading',\n  borderTopWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderBottomWidth: {\n    default: 0,\n    ':last-child': {\n      default: 1,\n      isQuiet: 0\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: 'gray-200',\n  minWidth: sizeValue(200)\n}, getAllowedOverrides());\n\nfunction Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {\n    size = 'M',\n    density = 'regular',\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Provider\n      values={[\n        [DisclosureContext, {size, isQuiet, density}]\n      ]}>\n      <RACDisclosure\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n}\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nlet _Disclosure = forwardRef(Disclosure);\nexport {_Disclosure as Disclosure};\n\nexport interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the disclosure header.\n   * \n   * @default 3\n   */\n  level?: number,\n  /** The contents of the disclosure header. */\n  children: React.ReactNode\n}\n\nconst headingStyle = style({\n  margin: 0\n});\n\nconst buttonStyles = style({\n  ...focusRing(),\n  outlineOffset: -2,\n  font: 'heading',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  fontWeight: 'bold',\n  fontSize: {\n    size: {\n      S: 'heading-xs',\n      M: 'heading-sm',\n      L: 'heading',\n      XL: 'heading-lg'\n    }\n  },\n  lineHeight: 'ui',\n  display: 'flex',\n  alignItems: 'baseline',\n  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n  paddingY: centerPadding(),\n  gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n  minHeight: {\n    // compact is equivalent to 'control', but other densities have more padding.\n    size: {\n      S: {\n        density: {\n          compact: 24,\n          regular: 32,\n          spacious: 40\n        }\n      },\n      M: {\n        density: {\n          compact: 32,\n          regular: 40,\n          spacious: 48\n        }\n      },\n      L: {\n        density: {\n          compact: 40,\n          regular: 48,\n          spacious: 56\n        }\n      },\n      XL: {\n        density: {\n          compact: 48,\n          regular: 56,\n          spacious: 64\n        }\n      }\n    }\n  },\n  width: 'full',\n  backgroundColor: {\n    default: 'transparent',\n    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n    isPressed: lightDark('transparent-black-100', 'transparent-white-100')\n  },\n  transition: 'default',\n  borderWidth: 0,\n  borderRadius: {\n    // Only rounded for keyboard focus and quiet.\n    default: 'none',\n    isFocusVisible: 'control',\n    isQuiet: 'control'\n  },\n  textAlign: 'start',\n  disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transition: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nfunction DisclosureHeader(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    level = 3,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n  return (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n}\n\n/**\n * A header for a disclosure. Contains a heading and a trigger button to expand/collapse the panel.\n */\nlet _DisclosureHeader = forwardRef(DisclosureHeader);\nexport {_DisclosureHeader as DisclosureHeader};\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  paddingTop: {\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: 16\n  },\n  paddingX: {\n    isExpanded: {\n      size: {\n        S: 8,\n        M: sizeValue(9),\n        L: 12,\n        XL: sizeValue(15)\n      }\n    }\n  }\n});\n\nfunction DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n      {props.children}\n    </RACDisclosurePanel>\n  );\n}\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nlet _DisclosurePanel = forwardRef(DisclosurePanel);\nexport {_DisclosurePanel as DisclosurePanel};\n\n"],"names":[],"version":3,"file":"Disclosure.css.map"}
+{"mappings":"AC0CmB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+DE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2EC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqDF;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnMD;EAAA;;;;EAAA;;;;EAmEE;;;;EAgID;;;;EAAA;;;;;AAnMD;;AAAA;EAAA;IAAA;;;;IAmEE;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAgID;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAhIC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;;;AA2EC","sources":["af82a6f8008c749b","packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["@import \"02b9b02b69a441b2\";\n@import \"80d1cf6aba9342e9\";\n@import \"d47c144c912b2c65\";\n@import \"54c3947845455457\";\n@import \"47e48706d70658de\";\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 {Button, ContextValue, DisclosureStateContext, Heading, Provider, UNSTABLE_Disclosure as RACDisclosure, UNSTABLE_DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, lightDark, size as sizeValue, style} from '../style' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {\n  /**\n   * The size of the disclosure.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the disclosures.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the disclosure, consisting of an DisclosureHeader and DisclosurePanel. */\n  children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n  color: 'heading',\n  borderTopWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderBottomWidth: {\n    default: 0,\n    ':last-child': {\n      default: 1,\n      isQuiet: 0\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: 'gray-200',\n  minWidth: sizeValue(200)\n}, getAllowedOverrides());\n\nfunction Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {\n    size = 'M',\n    density = 'regular',\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Provider\n      values={[\n        [DisclosureContext, {size, isQuiet, density}]\n      ]}>\n      <RACDisclosure\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n}\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nlet _Disclosure = forwardRef(Disclosure);\nexport {_Disclosure as Disclosure};\n\nexport interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the disclosure header.\n   * \n   * @default 3\n   */\n  level?: number,\n  /** The contents of the disclosure header. */\n  children: React.ReactNode\n}\n\nconst headingStyle = style({\n  margin: 0\n});\n\nconst buttonStyles = style({\n  ...focusRing(),\n  outlineOffset: -2,\n  font: 'heading',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  fontWeight: 'bold',\n  fontSize: {\n    size: {\n      S: 'heading-xs',\n      M: 'heading-sm',\n      L: 'heading',\n      XL: 'heading-lg'\n    }\n  },\n  lineHeight: 'ui',\n  display: 'flex',\n  alignItems: 'baseline',\n  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n  paddingY: centerPadding(),\n  gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n  minHeight: {\n    // compact is equivalent to 'control', but other densities have more padding.\n    size: {\n      S: {\n        density: {\n          compact: 24,\n          regular: 32,\n          spacious: 40\n        }\n      },\n      M: {\n        density: {\n          compact: 32,\n          regular: 40,\n          spacious: 48\n        }\n      },\n      L: {\n        density: {\n          compact: 40,\n          regular: 48,\n          spacious: 56\n        }\n      },\n      XL: {\n        density: {\n          compact: 48,\n          regular: 56,\n          spacious: 64\n        }\n      }\n    }\n  },\n  width: 'full',\n  backgroundColor: {\n    default: 'transparent',\n    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n    isPressed: lightDark('transparent-black-100', 'transparent-white-100')\n  },\n  transition: 'default',\n  borderWidth: 0,\n  borderRadius: {\n    // Only rounded for keyboard focus and quiet.\n    default: 'none',\n    isFocusVisible: 'control',\n    isQuiet: 'control'\n  },\n  textAlign: 'start',\n  disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transition: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nfunction DisclosureHeader(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    level = 3,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n  return (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n}\n\n/**\n * A header for a disclosure. Contains a heading and a trigger button to expand/collapse the panel.\n */\nlet _DisclosureHeader = forwardRef(DisclosureHeader);\nexport {_DisclosureHeader as DisclosureHeader};\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  paddingTop: {\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: 16\n  },\n  paddingX: {\n    isExpanded: {\n      size: {\n        S: 8,\n        M: sizeValue(9),\n        L: 12,\n        XL: sizeValue(15)\n      }\n    }\n  }\n});\n\nfunction DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n      {props.children}\n    </RACDisclosurePanel>\n  );\n}\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nlet _DisclosurePanel = forwardRef(DisclosurePanel);\nexport {_DisclosurePanel as DisclosurePanel};\n\n"],"names":[],"version":3,"file":"Disclosure.css.map"}