@react-spectrum/s2 3.0.0-nightly-086ad3115-240911 → 3.0.0-nightly-8ab4f20de-240913

package/dist/Badge.mjs

@@ -1,6 +1,7 @@
 import "./Badge.css";
 import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./CenterBaseline.mjs";
 import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs";
+import {SkeletonWrapper as $5ad421ec19460c48$export$6069cbe61f690103} from "../icons/Skeleton.mjs";
 import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "./useSpectrumContextProps.mjs";
 import {jsx as $22gMo$jsx} from "react/jsx-runtime";
@@ -28,6 +29,7 @@ import {useDOMRef as $22gMo$useDOMRef} from "@react-spectrum/utils";
 
 
 
+
 const $6357025487dea614$export$1d4627584e49159a = /*#__PURE__*/ (0, $22gMo$createContext)(null);
 const $6357025487dea614$var$badge = function anonymous(props, overrides) {
     let rules = " .";
@@ -79,15 +81,15 @@ const $6357025487dea614$var$badge = function anonymous(props, overrides) {
     rules += ' _yh';
     rules += ' o-375tou';
     rules += ' C-1dz4pg9a';
-    rules += ' CH';
+    rules += ' CI';
     rules += ' D-1dz4pg9a';
-    rules += ' DH';
+    rules += ' DI';
     rules += ' -_1gogtue_E--1dbqcch';
     rules += ' _b-1dz4pg9b';
     rules += ' -oelgqu_A--1dz4pg9a';
     rules += ' -oelgqu_A--177861o';
-    rules += ' jbG';
-    rules += ' jF';
+    rules += ' jbH';
+    rules += ' jG';
     if (props.fillStyle === "outline") rules += ' bd';
     else if (props.fillStyle === "subtle") {
         if (props.variant === "silver") rules += ' b____z';
@@ -179,20 +181,20 @@ const $6357025487dea614$var$badge = function anonymous(props, overrides) {
     } else rules += ' ca';
     rules += ' -rwx0fg_e-b';
     if (props.size === "XL") {
-        rules += ' -_375tou_o-bw';
-        rules += ' -_375tou_o-v';
+        rules += ' -_375tou_o-by';
+        rules += ' -_375tou_o-x';
     } else if (props.size === "L") {
-        rules += ' -_375tou_o-bs';
-        rules += ' -_375tou_o-p';
+        rules += ' -_375tou_o-bu';
+        rules += ' -_375tou_o-r';
     } else if (props.size === "S") {
+        rules += ' -_375tou_o-bn';
+        rules += ' -_375tou_o-m';
+    } else if (props.size === "XS") {
         rules += ' -_375tou_o-bl';
         rules += ' -_375tou_o-k';
-    } else if (props.size === "XS") {
-        rules += ' -_375tou_o-bj';
-        rules += ' -_375tou_o-i';
     } else {
-        rules += ' -_375tou_o-bp';
-        rules += ' -_375tou_o-o';
+        rules += ' -_375tou_o-br';
+        rules += ' -_375tou_o-q';
     }
     rules += ' -_375tp0_u-c';
     rules += ' -_375tp1_v-c';
@@ -222,18 +224,21 @@ function $6357025487dea614$var$Badge(props, ref) {
                 }
             ]
         ],
-        children: /*#__PURE__*/ (0, $22gMo$jsx)("span", {
-            ...(0, $22gMo$filterDOMProps)(otherProps),
-            role: "presentation",
-            className: (props.UNSAFE_className || '') + $6357025487dea614$var$badge({
-                variant: variant,
-                size: size,
-                fillStyle: fillStyle
-            }, props.styles),
-            ref: domRef,
-            children: typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $22gMo$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
-                children: children
-            }) : children
+        children: /*#__PURE__*/ (0, $22gMo$jsx)((0, $5ad421ec19460c48$export$6069cbe61f690103), {
+            children: /*#__PURE__*/ (0, $22gMo$jsx)("span", {
+                ...(0, $22gMo$filterDOMProps)(otherProps),
+                role: "presentation",
+                className: (props.UNSAFE_className || '') + $6357025487dea614$var$badge({
+                    variant: variant,
+                    size: size,
+                    fillStyle: fillStyle
+                }, props.styles),
+                style: props.UNSAFE_style,
+                ref: domRef,
+                children: typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $22gMo$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
+                    children: children
+                }) : children
+            })
         })
     });
 }

package/dist/Badge.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAyCM,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;YACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;YAC9B,MAAK;YACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;yBAAC;sBAAS;2BAAM;YAAS,GAAG,MAAM,MAAM;YAC1F,KAAK;sBAEH,OAAO,aAAa,YAAY,2BAC5B,gBAAC,CAAA,GAAA,yCAAG;0BAAG;iBACP;;;AAKd;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/spectrum-theme' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\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      <span\n        {...filterDOMProps(otherProps)}\n        role=\"presentation\"\n        className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n        ref={domRef}>\n        {\n          typeof children === 'string' || isTextOnly\n            ? <Text>{children}</Text>\n            : children\n        }\n      </span>\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, style} from '../style/spectrum-theme' 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"}

package/dist/Breadcrumbs.cjs

@@ -235,20 +235,20 @@ const $4130f4e17f7081aa$var$breadcrumbStyles = function anonymous(props) {
     rules += ' _1c';
     rules += ' _2b';
     if (props.size === "XL") {
-        rules += ' kbw';
-        rules += ' kv';
+        rules += ' kby';
+        rules += ' kx';
     } else if (props.size === "L") {
-        rules += ' kbs';
-        rules += ' kp';
+        rules += ' kbu';
+        rules += ' kr';
     } else if (props.size === "S") {
+        rules += ' kbn';
+        rules += ' km';
+    } else if (props.size === "XS") {
         rules += ' kbl';
         rules += ' kk';
-    } else if (props.size === "XS") {
-        rules += ' kbj';
-        rules += ' ki';
     } else {
-        rules += ' kbp';
-        rules += ' ko';
+        rules += ' kbr';
+        rules += ' kq';
     }
     rules += ' _Oa';
     rules += ' _Q-375x7f';
@@ -276,8 +276,8 @@ const $4130f4e17f7081aa$var$chevronStyles = function anonymous(props) {
     if (props.direction === "rtl") rules += ' S-3hmpv';
     if (props.isMenu) rules += ' ya';
     else {
-        rules += ' ybG';
-        rules += ' yF';
+        rules += ' ybH';
+        rules += ' yG';
     }
     rules += ' aa_____D';
     if (props.isPressed) rules += ' ao';

package/dist/Breadcrumbs.css

@@ -111,23 +111,23 @@
     justify-content: start;
   }
 
-  .ko {
+  .kq {
     height: 2rem;
   }
 
-  .ki {
+  .kk {
     height: 1.25rem;
   }
 
-  .kk {
+  .km {
     height: 1.5rem;
   }
 
-  .kp {
+  .kr {
     height: 2.5rem;
   }
 
-  .kv {
+  .kx {
     height: 3rem;
   }
 
@@ -151,7 +151,7 @@
     scale: -1;
   }
 
-  .yF {
+  .yG {
     margin-inline-start: .428571em;
   }
 
@@ -350,23 +350,23 @@
       margin-inline-start: .703125rem;
     }
 
-    .kbp {
+    .kbr {
       height: 2.5rem;
     }
 
-    .kbj {
+    .kbl {
       height: 1.5625rem;
     }
 
-    .kbl {
+    .kbn {
       height: 1.875rem;
     }
 
-    .kbs {
+    .kbu {
       height: 3.125rem;
     }
 
-    .kbw {
+    .kby {
       height: 3.75rem;
     }
 
@@ -374,7 +374,7 @@
       margin-inline-start: -.46875rem;
     }
 
-    .ybG {
+    .ybH {
       margin-inline-start: .470588em;
     }
 

package/dist/Breadcrumbs.mjs

@@ -227,20 +227,20 @@ const $f329dd4f2aa58cd0$var$breadcrumbStyles = function anonymous(props) {
     rules += ' _1c';
     rules += ' _2b';
     if (props.size === "XL") {
-        rules += ' kbw';
-        rules += ' kv';
+        rules += ' kby';
+        rules += ' kx';
     } else if (props.size === "L") {
-        rules += ' kbs';
-        rules += ' kp';
+        rules += ' kbu';
+        rules += ' kr';
     } else if (props.size === "S") {
+        rules += ' kbn';
+        rules += ' km';
+    } else if (props.size === "XS") {
         rules += ' kbl';
         rules += ' kk';
-    } else if (props.size === "XS") {
-        rules += ' kbj';
-        rules += ' ki';
     } else {
-        rules += ' kbp';
-        rules += ' ko';
+        rules += ' kbr';
+        rules += ' kq';
     }
     rules += ' _Oa';
     rules += ' _Q-375x7f';
@@ -268,8 +268,8 @@ const $f329dd4f2aa58cd0$var$chevronStyles = function anonymous(props) {
     if (props.direction === "rtl") rules += ' S-3hmpv';
     if (props.isMenu) rules += ' ya';
     else {
-        rules += ' ybG';
-        rules += ' yF';
+        rules += ' ybH';
+        rules += ' yG';
     }
     rules += ' aa_____D';
     if (props.isPressed) rules += ' ao';

package/dist/Button.cjs

@@ -2,7 +2,9 @@ require("./Button.css");
 var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
 var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
 var $2061c83559b50a66$exports = require("./pressScale.cjs");
+var $5eb75e0c130e0669$exports = require("../icons/Skeleton.cjs");
 var $6367bc87eb7d24ad$exports = require("./Content.cjs");
+var $bfa4962d90c8af48$exports = require("./Form.cjs");
 var $ac757a4c2bd72aee$exports = require("./useSpectrumContextProps.cjs");
 var $8owBJ$reactjsxruntime = require("react/jsx-runtime");
 var $8owBJ$reactariacomponents = require("react-aria-components");
@@ -37,6 +39,8 @@ $parcel$export(module.exports, "LinkButton", () => $25d06cf8d4e72761$export$29d1
 
 
 
+
+
 const $25d06cf8d4e72761$export$24d547caef80ccd1 = /*#__PURE__*/ (0, $8owBJ$react.createContext)(null);
 const $25d06cf8d4e72761$export$1c1a176f3b9e48d3 = /*#__PURE__*/ (0, $8owBJ$react.createContext)(null);
 const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
@@ -62,8 +66,8 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
     rules += ' _1d';
     rules += ' _2d';
     rules += ' _ja';
-    rules += ' jbG';
-    rules += ' jF';
+    rules += ' jbH';
+    rules += ' jG';
     rules += ' _c-bc1l9oh';
     rules += ' _c-1uotwbwg';
     rules += ' _c-eo0c6sf';
@@ -151,20 +155,20 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
     rules += ' o-375tou';
     if (!$q) {
         if (props.size === "XL") {
-            rules += ' q-1dz4pg9bw';
-            rules += ' q-1dz4pg9v';
+            rules += ' q-1dz4pg9by';
+            rules += ' q-1dz4pg9x';
         } else if (props.size === "L") {
-            rules += ' q-1dz4pg9bs';
-            rules += ' q-1dz4pg9p';
+            rules += ' q-1dz4pg9bu';
+            rules += ' q-1dz4pg9r';
         } else if (props.size === "S") {
+            rules += ' q-1dz4pg9bn';
+            rules += ' q-1dz4pg9m';
+        } else if (props.size === "XS") {
             rules += ' q-1dz4pg9bl';
             rules += ' q-1dz4pg9k';
-        } else if (props.size === "XS") {
-            rules += ' q-1dz4pg9bj';
-            rules += ' q-1dz4pg9i';
         } else {
-            rules += ' q-1dz4pg9bp';
-            rules += ' q-1dz4pg9o';
+            rules += ' q-1dz4pg9br';
+            rules += ' q-1dz4pg9q';
         }
     }
     rules += ' _vg';
@@ -172,12 +176,12 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
     rules += ' _xg';
     rules += ' _yg';
     rules += ' __na';
-    if (!$l) rules += ' l6';
+    if (!$l) rules += ' l7';
     rules += ' _ld';
     rules += ' C-1dz4pg9a';
-    rules += ' CI';
+    rules += ' CJ';
     rules += ' D-1dz4pg9a';
-    rules += ' DI';
+    rules += ' DJ';
     rules += ' Ea';
     rules += ' Fa';
     rules += ' _b-1dz4pg9b';
@@ -314,20 +318,20 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
     rules += ' _zb';
     rules += ' __R-yksgrp';
     if (props.size === "XL") {
-        rules += ' -_375tou_o-bw';
-        rules += ' -_375tou_o-v';
+        rules += ' -_375tou_o-by';
+        rules += ' -_375tou_o-x';
     } else if (props.size === "L") {
-        rules += ' -_375tou_o-bs';
-        rules += ' -_375tou_o-p';
+        rules += ' -_375tou_o-bu';
+        rules += ' -_375tou_o-r';
     } else if (props.size === "S") {
+        rules += ' -_375tou_o-bn';
+        rules += ' -_375tou_o-m';
+    } else if (props.size === "XS") {
         rules += ' -_375tou_o-bl';
         rules += ' -_375tou_o-k';
-    } else if (props.size === "XS") {
-        rules += ' -_375tou_o-bj';
-        rules += ' -_375tou_o-i';
     } else {
-        rules += ' -_375tou_o-bp';
-        rules += ' -_375tou_o-o';
+        rules += ' -_375tou_o-br';
+        rules += ' -_375tou_o-q';
     }
     if (props.fillStyle === "outline") rules += ' -_375tp0_u-c';
     else if (props.fillStyle === "fill") rules += ' -_375tp0_u-a';
@@ -337,6 +341,7 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
 };
 function $25d06cf8d4e72761$var$Button(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $25d06cf8d4e72761$export$24d547caef80ccd1);
+    props = (0, $bfa4962d90c8af48$exports.useFormProps)(props);
     let domRef = (0, $8owBJ$reactspectrumutils.useFocusableRef)(ref);
     let overlayTriggerState = (0, $8owBJ$react.useContext)((0, $8owBJ$reactariacomponents.OverlayTriggerStateContext));
     return /*#__PURE__*/ (0, $8owBJ$reactjsxruntime.jsx)((0, $8owBJ$reactariacomponents.Button), {
@@ -354,6 +359,10 @@ function $25d06cf8d4e72761$var$Button(props, ref) {
             }, props.styles),
         children: /*#__PURE__*/ (0, $8owBJ$reactjsxruntime.jsx)((0, $8owBJ$reactariacomponents.Provider), {
             values: [
+                [
+                    (0, $5eb75e0c130e0669$exports.SkeletonContext),
+                    null
+                ],
                 [
                     (0, $6367bc87eb7d24ad$exports.TextContext),
                     {
@@ -384,6 +393,7 @@ function $25d06cf8d4e72761$var$Button(props, ref) {
  */ let $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react.forwardRef)($25d06cf8d4e72761$var$Button);
 function $25d06cf8d4e72761$var$LinkButton(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $25d06cf8d4e72761$export$1c1a176f3b9e48d3);
+    props = (0, $bfa4962d90c8af48$exports.useFormProps)(props);
     let domRef = (0, $8owBJ$reactspectrumutils.useFocusableRef)(ref);
     let overlayTriggerState = (0, $8owBJ$react.useContext)((0, $8owBJ$reactariacomponents.OverlayTriggerStateContext));
     return /*#__PURE__*/ (0, $8owBJ$reactjsxruntime.jsx)((0, $8owBJ$reactariacomponents.Link), {
@@ -401,6 +411,10 @@ function $25d06cf8d4e72761$var$LinkButton(props, ref) {
             }, props.styles),
         children: /*#__PURE__*/ (0, $8owBJ$reactjsxruntime.jsx)((0, $8owBJ$reactariacomponents.Provider), {
             values: [
+                [
+                    (0, $5eb75e0c130e0669$exports.SkeletonContext),
+                    null
+                ],
                 [
                     (0, $6367bc87eb7d24ad$exports.TextContext),
                     {

package/dist/Button.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative',\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline',\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst button = style<ButtonRenderProps & ButtonStyleProps>({\n  ...focusRing(),\n  display: 'flex',\n  alignItems: {\n    default: 'baseline',\n    ':has([slot=icon]:only-child)': 'center'\n  },\n  justifyContent: 'center',\n  textAlign: 'start',\n  columnGap: 'text-to-visual',\n  font: 'control',\n  fontWeight: 'bold',\n  userSelect: 'none',\n  minHeight: 'control',\n  minWidth: {\n    ':has([slot=icon]:only-child)': 'control'\n  },\n  borderRadius: 'pill',\n  boxSizing: 'border-box',\n  width: 'fit',\n  textDecoration: 'none', // for link buttons\n  paddingX: {\n    default: 'pill',\n    ':has([slot=icon]:only-child)': 0\n  },\n  paddingY: 0,\n  aspectRatio: {\n    ':has([slot=icon]:only-child)': 'square'\n  },\n  transition: 'default',\n  borderStyle: 'solid',\n  borderWidth: {\n    fillStyle: {\n      fill: 0,\n      outline: 2\n    }\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      ':has([slot=icon]:only-child)': 0\n    }\n  },\n  borderColor: {\n    variant: {\n      primary: baseColor('gray-800'),\n      secondary: baseColor('gray-300')\n    },\n    isDisabled: 'disabled',\n    staticColor: {\n      white: {\n        variant: {\n          primary: baseColor('transparent-white-800'),\n          secondary: baseColor('transparent-white-300')\n        },\n        isDisabled: 'transparent-white-300'\n      },\n      black: {\n        variant: {\n          primary: baseColor('transparent-black-800'),\n          secondary: baseColor('transparent-black-300')\n        },\n        isDisabled: 'transparent-black-300'\n      }\n    },\n    forcedColors: {\n      default: 'ButtonBorder',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'neutral',\n          secondary: baseColor('gray-100'),\n          accent: 'accent',\n          negative: 'negative'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100'\n      }\n    },\n    staticColor: {\n      white: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-white-800'),\n              secondary: baseColor('transparent-white-100')\n            },\n            isDisabled: 'transparent-white-100'\n          },\n          outline: {\n            default: 'transparent',\n            isHovered: 'transparent-white-100',\n            isPressed: 'transparent-white-100',\n            isFocusVisible: 'transparent-white-100'\n          }\n        }\n      },\n      black: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-black-800'),\n              secondary: baseColor('transparent-black-100')\n            },\n            isDisabled: 'transparent-black-100'\n          },\n          outline: {\n            default: 'transparent',\n            isHovered: 'transparent-black-100',\n            isPressed: 'transparent-black-100',\n            isFocusVisible: 'transparent-black-100'\n          }\n        }\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonText',\n          isHovered: 'Highlight',\n          isDisabled: 'GrayText'\n        },\n        outline: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'gray-25',\n          secondary: 'neutral',\n          accent: 'white',\n          negative: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        isDisabled: 'disabled'\n      }\n    },\n    staticColor: {\n      white: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'black',\n              secondary: baseColor('transparent-white-800')\n            }\n          },\n          outline: baseColor('transparent-white-800')\n        },\n        isDisabled: 'transparent-white-400'\n      },\n      black: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'white',\n              secondary: baseColor('transparent-black-800')\n            }\n          },\n          outline: baseColor('transparent-black-800')\n        },\n        isDisabled: 'transparent-black-400'\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonFace',\n          isDisabled: 'HighlightText'\n        },\n        outline: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  },\n  forcedColorAdjust: 'none',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nfunction Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        variant: props.variant || 'primary',\n        fillStyle: props.fillStyle || 'fill',\n        size: props.size || 'M',\n        staticColor: props.staticColor\n      }, props.styles)}>\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        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </RACButton>\n  );\n}\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nlet _Button = forwardRef(Button);\nexport {_Button as Button};\n\nfunction LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        variant: props.variant || 'primary',\n        fillStyle: props.fillStyle || 'fill',\n        size: props.size || 'M',\n        staticColor: props.staticColor\n      }, props.styles)}>\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        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </Link>\n  );\n}\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nlet _LinkButton = forwardRef(LinkButton);\nexport {_LinkButton as LinkButton};\n"],"names":[],"version":3,"file":"Button.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative',\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline',\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst button = style<ButtonRenderProps & ButtonStyleProps>({\n  ...focusRing(),\n  display: 'flex',\n  alignItems: {\n    default: 'baseline',\n    ':has([slot=icon]:only-child)': 'center'\n  },\n  justifyContent: 'center',\n  textAlign: 'start',\n  columnGap: 'text-to-visual',\n  font: 'control',\n  fontWeight: 'bold',\n  userSelect: 'none',\n  minHeight: 'control',\n  minWidth: {\n    ':has([slot=icon]:only-child)': 'control'\n  },\n  borderRadius: 'pill',\n  boxSizing: 'border-box',\n  width: 'fit',\n  textDecoration: 'none', // for link buttons\n  paddingX: {\n    default: 'pill',\n    ':has([slot=icon]:only-child)': 0\n  },\n  paddingY: 0,\n  aspectRatio: {\n    ':has([slot=icon]:only-child)': 'square'\n  },\n  transition: 'default',\n  borderStyle: 'solid',\n  borderWidth: {\n    fillStyle: {\n      fill: 0,\n      outline: 2\n    }\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      ':has([slot=icon]:only-child)': 0\n    }\n  },\n  borderColor: {\n    variant: {\n      primary: baseColor('gray-800'),\n      secondary: baseColor('gray-300')\n    },\n    isDisabled: 'disabled',\n    staticColor: {\n      white: {\n        variant: {\n          primary: baseColor('transparent-white-800'),\n          secondary: baseColor('transparent-white-300')\n        },\n        isDisabled: 'transparent-white-300'\n      },\n      black: {\n        variant: {\n          primary: baseColor('transparent-black-800'),\n          secondary: baseColor('transparent-black-300')\n        },\n        isDisabled: 'transparent-black-300'\n      }\n    },\n    forcedColors: {\n      default: 'ButtonBorder',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'neutral',\n          secondary: baseColor('gray-100'),\n          accent: 'accent',\n          negative: 'negative'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100'\n      }\n    },\n    staticColor: {\n      white: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-white-800'),\n              secondary: baseColor('transparent-white-100')\n            },\n            isDisabled: 'transparent-white-100'\n          },\n          outline: {\n            default: 'transparent',\n            isHovered: 'transparent-white-100',\n            isPressed: 'transparent-white-100',\n            isFocusVisible: 'transparent-white-100'\n          }\n        }\n      },\n      black: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-black-800'),\n              secondary: baseColor('transparent-black-100')\n            },\n            isDisabled: 'transparent-black-100'\n          },\n          outline: {\n            default: 'transparent',\n            isHovered: 'transparent-black-100',\n            isPressed: 'transparent-black-100',\n            isFocusVisible: 'transparent-black-100'\n          }\n        }\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonText',\n          isHovered: 'Highlight',\n          isDisabled: 'GrayText'\n        },\n        outline: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'gray-25',\n          secondary: 'neutral',\n          accent: 'white',\n          negative: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        isDisabled: 'disabled'\n      }\n    },\n    staticColor: {\n      white: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'black',\n              secondary: baseColor('transparent-white-800')\n            }\n          },\n          outline: baseColor('transparent-white-800')\n        },\n        isDisabled: 'transparent-white-400'\n      },\n      black: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'white',\n              secondary: baseColor('transparent-black-800')\n            }\n          },\n          outline: baseColor('transparent-black-800')\n        },\n        isDisabled: 'transparent-black-400'\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonFace',\n          isDisabled: 'HighlightText'\n        },\n        outline: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  },\n  forcedColorAdjust: 'none',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nfunction Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        variant: props.variant || 'primary',\n        fillStyle: props.fillStyle || 'fill',\n        size: props.size || 'M',\n        staticColor: props.staticColor\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\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        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </RACButton>\n  );\n}\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nlet _Button = forwardRef(Button);\nexport {_Button as Button};\n\nfunction LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        variant: props.variant || 'primary',\n        fillStyle: props.fillStyle || 'fill',\n        size: props.size || 'M',\n        staticColor: props.staticColor\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\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        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </Link>\n  );\n}\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nlet _LinkButton = forwardRef(LinkButton);\nexport {_LinkButton as LinkButton};\n"],"names":[],"version":3,"file":"Button.cjs.map"}