@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/ClearButton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAwBD,MAAM;;;;;;;;;;;;AAEN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,IAAI,QAAC,OAAO,oBAAK,gBAAgB,OAAO,GAAG,MAAK,GAAG;IACnD,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,IAAI;QACR,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE;QAClB,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;sBAAE;+BAAM;YAAa;kBACjF,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,MAAM,IAAI;;;AAGjC","sources":["packages/@react-spectrum/s2/src/ClearButton.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 {Button, ButtonProps, ButtonRenderProps} from 'react-aria-components/Button';\nimport {controlSize} from './style-utils' with {type: 'macro'};\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {forwardRef} from 'react';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\ninterface ClearButtonStyleProps {\n  /**\n   * The size of the ClearButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** Whether the ClearButton should be displayed with a static color. */\n  isStaticColor?: boolean\n}\n\ninterface ClearButtonRenderProps extends ButtonRenderProps, ClearButtonStyleProps {}\ninterface ClearButtonProps extends ButtonProps, ClearButtonStyleProps {}\n\nconst focusRingStyles = focusRing();\n\nconst visibleClearButton = style<ClearButtonRenderProps>({\n  ...focusRingStyles,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: 'full',\n  width: controlSize(),\n  flexShrink: 0,\n  borderRadius: 'full',\n  borderStyle: 'none',\n  backgroundColor: 'transparent',\n  boxSizing: 'border-box',\n  padding: 0,\n  outlineOffset: -4,\n  outlineColor: {\n    default: focusRingStyles.outlineColor,\n    isStaticColor: 'white'\n  },\n  color: 'inherit',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport const ClearButton = forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  let {size = 'M', isStaticColor = false, ...rest} = props;\n  let domRef = useFocusableRef(ref);\n  return (\n    <Button\n      {...rest}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => visibleClearButton({...renderProps, size, isStaticColor})}>\n      <CrossIcon size={props.size} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"ClearButton.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAwBD,MAAM;;;;;;;;;;;;AAEN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAAoC;IAEpC,IAAI,QAAC,OAAO,oBAAK,gBAAgB,OAAO,GAAG,MAAK,GAAG;IACnD,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,IAAI;QACR,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE;QAClB,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;sBAAE;+BAAM;YAAa;kBACjF,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,MAAM,IAAI;;;AAGjC","sources":["packages/@react-spectrum/s2/src/ClearButton.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 {Button, ButtonProps, ButtonRenderProps} from 'react-aria-components/Button';\nimport {controlSize} from './style-utils' with {type: 'macro'};\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {forwardRef} from 'react';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\ninterface ClearButtonStyleProps {\n  /**\n   * The size of the ClearButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /** Whether the ClearButton should be displayed with a static color. */\n  isStaticColor?: boolean;\n}\n\ninterface ClearButtonRenderProps extends ButtonRenderProps, ClearButtonStyleProps {}\ninterface ClearButtonProps extends ButtonProps, ClearButtonStyleProps {}\n\nconst focusRingStyles = focusRing();\n\nconst visibleClearButton = style<ClearButtonRenderProps>({\n  ...focusRingStyles,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: 'full',\n  width: controlSize(),\n  flexShrink: 0,\n  borderRadius: 'full',\n  borderStyle: 'none',\n  backgroundColor: 'transparent',\n  boxSizing: 'border-box',\n  padding: 0,\n  outlineOffset: -4,\n  outlineColor: {\n    default: focusRingStyles.outlineColor,\n    isStaticColor: 'white'\n  },\n  color: 'inherit',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport const ClearButton = forwardRef(function ClearButton(\n  props: ClearButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let {size = 'M', isStaticColor = false, ...rest} = props;\n  let domRef = useFocusableRef(ref);\n  return (\n    <Button\n      {...rest}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => visibleClearButton({...renderProps, size, isStaticColor})}>\n      <CrossIcon size={props.size} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"ClearButton.mjs.map"}

package/dist/private/CloseButton.cjs

@@ -52,73 +52,68 @@ const $2f907cb84c6e9e75$var$styles = function anonymous(props, overrides) {
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    if (props.isStaticColor) rules += ' Oe13';
-    else rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Kd13';
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr13';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s13';
-    rules += ' sd13';
-    rules += ' eb13';
-    rules += ' _Ca13';
+    if (props.isFocusVisible) rules += ' _Lf131';
+    else rules += ' _Le131';
+    if (props.isStaticColor) rules += ' Oe131';
+    else rules += ' Oh131';
+    rules += ' Olc131';
+    rules += ' _Mc131';
+    rules += ' _Kd131';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr131';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s131';
+    rules += ' sd131';
+    rules += ' eb131';
+    rules += ' _Ca131';
     if (props.size === "XL") {
-        if (!width) rules += ' ZF13';
+        if (!width) rules += ' ZF131';
     } else if (props.size === "L") {
-        if (!width) rules += ' Zw13';
+        if (!width) rules += ' Zw131';
     } else if (props.size === "S") {
-        if (!width) rules += ' Zo13';
+        if (!width) rules += ' Zo131';
     } else if (props.size === "XS") {
-        if (!width) rules += ' Zm13';
-    } else if (!width) rules += ' ZC13';
-    if (props.size === "XL") rules += ' Fz13';
-    else if (props.size === "L") rules += ' Fv13';
-    else if (props.size === "S") rules += ' Fp13';
-    else if (props.size === "XS") rules += ' Fn13';
-    else rules += ' Fx13';
-    if (!flexShrink) rules += ' _va13';
-    rules += ' og13';
-    rules += ' ng13';
-    rules += ' kg13';
-    rules += ' jg13';
-    rules += ' Td13';
-    rules += ' Qd13';
-    rules += ' Sd13';
-    rules += ' Rd13';
-    rules += ' _je13';
-    rules += ' Yd13';
-    rules += ' Xb13';
-    rules += ' _2b13';
+        if (!width) rules += ' Zm131';
+    } else if (!width) rules += ' ZC131';
+    if (props.size === "XL") rules += ' Fz131';
+    else if (props.size === "L") rules += ' Fv131';
+    else if (props.size === "S") rules += ' Fp131';
+    else if (props.size === "XS") rules += ' Fn131';
+    else rules += ' Fx131';
+    if (!flexShrink) rules += ' _va131';
+    rules += ' og131';
+    rules += ' ng131';
+    rules += ' kg131';
+    rules += ' jg131';
+    rules += ' Td131';
+    rules += ' Qd131';
+    rules += ' Sd131';
+    rules += ' Rd131';
+    rules += ' _je131';
+    rules += ' Yd131';
+    rules += ' Xb131';
+    rules += ' _2b131';
     if (props.isPressed) {
-        if (props.isStaticColor) rules += ' gg13';
-        else rules += ' gF13';
+        if (props.isStaticColor) rules += ' gg131';
+        else rules += ' gF131';
     } else if (props.isFocusVisible) {
-        if (props.isStaticColor) rules += ' gg13';
-        else rules += ' gF13';
+        if (props.isStaticColor) rules += ' gg131';
+        else rules += ' gF131';
     } else if (props.isHovered) {
-        if (props.isStaticColor) rules += ' gg13';
-        else rules += ' gF13';
-    } else rules += ' g913';
+        if (props.isStaticColor) rules += ' gg131';
+        else rules += ' gF131';
+    } else rules += ' g9131';
     if (props.isStaticColor) {
-        if (props.isDisabled) rules += ' -_8sjo0b-pi13';
-        else {
-            if (props.isPressed) rules += ' -_8sjo0b-pk13';
-            else if (props.isFocusVisible) rules += ' -_8sjo0b-pk13';
-            else if (props.isHovered) rules += ' -_8sjo0b-pk13';
-            else rules += ' -_8sjo0b-pj13';
-        }
-    } else if (props.isDisabled) rules += ' -_8sjo0b-pp13';
+        if (props.isDisabled) rules += ' -_8sjo0b-pi131';
+        else rules += ' -_8sjo0b-px131';
+    } else if (props.isDisabled) rules += ' -_8sjo0b-pp131';
     else {
-        if (props.isPressed) rules += ' -_8sjo0b-po13';
-        else if (props.isFocusVisible) rules += ' -_8sjo0b-po13';
-        else if (props.isHovered) rules += ' -_8sjo0b-po13';
-        else rules += ' -_8sjo0b-pt13';
+        if (props.isPressed) rules += ' -_8sjo0b-po131';
+        else if (props.isFocusVisible) rules += ' -_8sjo0b-po131';
+        else if (props.isHovered) rules += ' -_8sjo0b-po131';
+        else rules += ' -_8sjo0b-pt131';
     }
-    if (props.isDisabled) rules += ' -_8sjo0b-lpc13';
-    else rules += ' -_8sjo0b-lpb13';
-    rules += ' __ca13';
+    if (props.isDisabled) rules += ' -_8sjo0b-lpc131';
+    else rules += ' -_8sjo0b-lpb131';
+    rules += ' __ca131';
     return rules;
 };
 const $2f907cb84c6e9e75$export$c796eec99a15b55d = /*#__PURE__*/ (0, $bMS5K$react.createContext)(null);

package/dist/private/CloseButton.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA2BD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCC,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAiF;AAKxH,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,qBACE,gCAAC,CAAA,GAAA,uCAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBACtJ,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps} from 'react-aria-components/Button';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {controlSize, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\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' | 'auto'\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: controlSize(),\n  flexShrink: 0,\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: baseColor('neutral'),\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isDisabled: 'GrayText'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAgCD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDC,MAAM,0DACX,CAAA,GAAA,0BAAY,EACV;AAMG,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAAoC;IAEpC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,qBACE,gCAAC,CAAA,GAAA,uCAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cACT,mBACA,6BACE;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GACnF,MAAM,MAAM;kBAGhB,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps} from 'react-aria-components/Button';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  controlSize,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\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' | 'auto';\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<\n  CloseButtonProps & {\n    isHovered: boolean;\n    isFocusVisible: boolean;\n    isPressed: boolean;\n    isStaticColor: boolean;\n  }\n>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    size: controlSize(),\n    flexShrink: 0,\n    borderRadius: 'full',\n    padding: 0,\n    borderStyle: 'none',\n    transition: 'default',\n    backgroundColor: {\n      default: 'transparent',\n      isHovered: hoverBackground,\n      isFocusVisible: hoverBackground,\n      isPressed: hoverBackground\n    },\n    '--iconPrimary': {\n      type: 'color',\n      value: {\n        default: baseColor('neutral'),\n        isDisabled: 'disabled',\n        isStaticColor: {\n          default: 'white',\n          isDisabled: 'transparent-overlay-400'\n        },\n        forcedColors: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    },\n    outlineColor: {\n      default: 'focus-ring',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'Highlight'\n    },\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\nexport const CloseButtonContext =\n  createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  props: CloseButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps =>\n        UNSAFE_className +\n        styles(\n          {...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor},\n          props.styles\n        )\n      }>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.cjs.map"}

package/dist/private/CloseButton.css

@@ -1,177 +1,173 @@
 @layer _.a {
-  ._Le13 {
+  ._Le131 {
     outline-style: none;
   }
 
-  ._Lf13 {
+  ._Lf131 {
     outline-style: solid;
   }
 
-  .Oh13 {
+  .Oh131 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  .Oe13 {
+  .Oe131 {
     outline-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  ._Mc13 {
+  ._Mc131 {
     outline-width: 2px;
   }
 
-  ._Kd13 {
+  ._Kd131 {
     outline-offset: 2px;
   }
 
-  .-Ovbhqd-g4hn3s13 {
+  .-Ovbhqd-g4hn3s131 {
     --s2-container-bg: white;
   }
 
-  .-Ovbhqd-gcwrnr13 {
+  .-Ovbhqd-gcwrnr131 {
     --s2-container-bg: black;
   }
 
-  .sd13 {
+  .sd131 {
     display: flex;
   }
 
-  .eb13 {
+  .eb131 {
     align-items: center;
   }
 
-  ._Ca13 {
+  ._Ca131 {
     justify-content: center;
   }
 
-  .ZC13 {
+  .ZC131 {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .Zm13 {
+  .Zm131 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Zo13 {
+  .Zo131 {
     width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Zw13 {
+  .Zw131 {
     width: calc(2.5rem * var(--s2-scale));
   }
 
-  .ZF13 {
+  .ZF131 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  .Fx13 {
+  .Fx131 {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .Fn13 {
+  .Fn131 {
     height: calc(1.25rem * var(--s2-scale));
   }
 
-  .Fp13 {
+  .Fp131 {
     height: calc(1.5rem * var(--s2-scale));
   }
 
-  .Fv13 {
+  .Fv131 {
     height: calc(2.5rem * var(--s2-scale));
   }
 
-  .Fz13 {
+  .Fz131 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  ._va13 {
+  ._va131 {
     flex-shrink: 0;
   }
 
-  .og13 {
+  .og131 {
     border-start-start-radius: 9999px;
   }
 
-  .ng13 {
+  .ng131 {
     border-start-end-radius: 9999px;
   }
 
-  .kg13 {
+  .kg131 {
     border-end-start-radius: 9999px;
   }
 
-  .jg13 {
+  .jg131 {
     border-end-end-radius: 9999px;
   }
 
-  .Td13 {
+  .Td131 {
     padding-top: 0;
   }
 
-  .Qd13 {
+  .Qd131 {
     padding-bottom: 0;
   }
 
-  .Sd13 {
+  .Sd131 {
     padding-inline-start: 0;
   }
 
-  .Rd13 {
+  .Rd131 {
     padding-inline-end: 0;
   }
 
-  ._je13 {
+  ._je131 {
     border-style: none;
   }
 
-  .Yd13 {
+  .Yd131 {
     transition-property: color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  .Xb13 {
+  .Xb131 {
     transition-duration: .15s;
   }
 
-  ._2b13 {
+  ._2b131 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .g913 {
+  .g9131 {
     background-color: #0000;
   }
 
-  .gF13 {
+  .gF131 {
     background-color: light-dark(#e1e1e1, #323232);
   }
 
-  .gg13 {
+  .gg131 {
     background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .14);
   }
 
-  .-_8sjo0b-pt13 {
+  .-_8sjo0b-pt131 {
     --iconPrimary: light-dark(#292929, #dbdbdb);
   }
 
-  .-_8sjo0b-po13 {
+  .-_8sjo0b-po131 {
     --iconPrimary: light-dark(#131313, #f2f2f2);
   }
 
-  .-_8sjo0b-pp13 {
+  .-_8sjo0b-pp131 {
     --iconPrimary: light-dark(#c6c6c6, #444);
   }
 
-  .-_8sjo0b-pj13 {
-    --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
+  .-_8sjo0b-px131 {
+    --iconPrimary: white;
   }
 
-  .-_8sjo0b-pk13 {
-    --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
-  }
-
-  .-_8sjo0b-pi13 {
+  .-_8sjo0b-pi131 {
     --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
   }
 
-  .__ca13 {
+  .__ca131 {
     -webkit-tap-highlight-color: #0000;
   }
 }
@@ -180,15 +176,15 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Olc13 {
+    .Olc131 {
       outline-color: highlight;
     }
 
-    .-_8sjo0b-lpb13 {
+    .-_8sjo0b-lpb131 {
       --iconPrimary: ButtonText;
     }
 
-    .-_8sjo0b-lpc13 {
+    .-_8sjo0b-lpc131 {
       --iconPrimary: GrayText;
     }
   }

package/dist/private/CloseButton.css.map

@@ -1 +1 @@
-{"mappings":"AA0Ce;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CloseButton.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, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps} from 'react-aria-components/Button';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {controlSize, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\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' | 'auto'\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: controlSize(),\n  flexShrink: 0,\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: baseColor('neutral'),\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isDisabled: 'GrayText'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.css.map"}
+{"mappings":"AA+Ce;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CloseButton.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, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps} from 'react-aria-components/Button';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  controlSize,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\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' | 'auto';\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<\n  CloseButtonProps & {\n    isHovered: boolean;\n    isFocusVisible: boolean;\n    isPressed: boolean;\n    isStaticColor: boolean;\n  }\n>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    size: controlSize(),\n    flexShrink: 0,\n    borderRadius: 'full',\n    padding: 0,\n    borderStyle: 'none',\n    transition: 'default',\n    backgroundColor: {\n      default: 'transparent',\n      isHovered: hoverBackground,\n      isFocusVisible: hoverBackground,\n      isPressed: hoverBackground\n    },\n    '--iconPrimary': {\n      type: 'color',\n      value: {\n        default: baseColor('neutral'),\n        isDisabled: 'disabled',\n        isStaticColor: {\n          default: 'white',\n          isDisabled: 'transparent-overlay-400'\n        },\n        forcedColors: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    },\n    outlineColor: {\n      default: 'focus-ring',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'Highlight'\n    },\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\nexport const CloseButtonContext =\n  createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  props: CloseButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps =>\n        UNSAFE_className +\n        styles(\n          {...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor},\n          props.styles\n        )\n      }>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.css.map"}

package/dist/private/CloseButton.mjs

@@ -46,73 +46,68 @@ const $a9cda54c4f47ce52$var$styles = function anonymous(props, overrides) {
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    if (props.isStaticColor) rules += ' Oe13';
-    else rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Kd13';
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr13';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s13';
-    rules += ' sd13';
-    rules += ' eb13';
-    rules += ' _Ca13';
+    if (props.isFocusVisible) rules += ' _Lf131';
+    else rules += ' _Le131';
+    if (props.isStaticColor) rules += ' Oe131';
+    else rules += ' Oh131';
+    rules += ' Olc131';
+    rules += ' _Mc131';
+    rules += ' _Kd131';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr131';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s131';
+    rules += ' sd131';
+    rules += ' eb131';
+    rules += ' _Ca131';
     if (props.size === "XL") {
-        if (!width) rules += ' ZF13';
+        if (!width) rules += ' ZF131';
     } else if (props.size === "L") {
-        if (!width) rules += ' Zw13';
+        if (!width) rules += ' Zw131';
     } else if (props.size === "S") {
-        if (!width) rules += ' Zo13';
+        if (!width) rules += ' Zo131';
     } else if (props.size === "XS") {
-        if (!width) rules += ' Zm13';
-    } else if (!width) rules += ' ZC13';
-    if (props.size === "XL") rules += ' Fz13';
-    else if (props.size === "L") rules += ' Fv13';
-    else if (props.size === "S") rules += ' Fp13';
-    else if (props.size === "XS") rules += ' Fn13';
-    else rules += ' Fx13';
-    if (!flexShrink) rules += ' _va13';
-    rules += ' og13';
-    rules += ' ng13';
-    rules += ' kg13';
-    rules += ' jg13';
-    rules += ' Td13';
-    rules += ' Qd13';
-    rules += ' Sd13';
-    rules += ' Rd13';
-    rules += ' _je13';
-    rules += ' Yd13';
-    rules += ' Xb13';
-    rules += ' _2b13';
+        if (!width) rules += ' Zm131';
+    } else if (!width) rules += ' ZC131';
+    if (props.size === "XL") rules += ' Fz131';
+    else if (props.size === "L") rules += ' Fv131';
+    else if (props.size === "S") rules += ' Fp131';
+    else if (props.size === "XS") rules += ' Fn131';
+    else rules += ' Fx131';
+    if (!flexShrink) rules += ' _va131';
+    rules += ' og131';
+    rules += ' ng131';
+    rules += ' kg131';
+    rules += ' jg131';
+    rules += ' Td131';
+    rules += ' Qd131';
+    rules += ' Sd131';
+    rules += ' Rd131';
+    rules += ' _je131';
+    rules += ' Yd131';
+    rules += ' Xb131';
+    rules += ' _2b131';
     if (props.isPressed) {
-        if (props.isStaticColor) rules += ' gg13';
-        else rules += ' gF13';
+        if (props.isStaticColor) rules += ' gg131';
+        else rules += ' gF131';
     } else if (props.isFocusVisible) {
-        if (props.isStaticColor) rules += ' gg13';
-        else rules += ' gF13';
+        if (props.isStaticColor) rules += ' gg131';
+        else rules += ' gF131';
     } else if (props.isHovered) {
-        if (props.isStaticColor) rules += ' gg13';
-        else rules += ' gF13';
-    } else rules += ' g913';
+        if (props.isStaticColor) rules += ' gg131';
+        else rules += ' gF131';
+    } else rules += ' g9131';
     if (props.isStaticColor) {
-        if (props.isDisabled) rules += ' -_8sjo0b-pi13';
-        else {
-            if (props.isPressed) rules += ' -_8sjo0b-pk13';
-            else if (props.isFocusVisible) rules += ' -_8sjo0b-pk13';
-            else if (props.isHovered) rules += ' -_8sjo0b-pk13';
-            else rules += ' -_8sjo0b-pj13';
-        }
-    } else if (props.isDisabled) rules += ' -_8sjo0b-pp13';
+        if (props.isDisabled) rules += ' -_8sjo0b-pi131';
+        else rules += ' -_8sjo0b-px131';
+    } else if (props.isDisabled) rules += ' -_8sjo0b-pp131';
     else {
-        if (props.isPressed) rules += ' -_8sjo0b-po13';
-        else if (props.isFocusVisible) rules += ' -_8sjo0b-po13';
-        else if (props.isHovered) rules += ' -_8sjo0b-po13';
-        else rules += ' -_8sjo0b-pt13';
+        if (props.isPressed) rules += ' -_8sjo0b-po131';
+        else if (props.isFocusVisible) rules += ' -_8sjo0b-po131';
+        else if (props.isHovered) rules += ' -_8sjo0b-po131';
+        else rules += ' -_8sjo0b-pt131';
     }
-    if (props.isDisabled) rules += ' -_8sjo0b-lpc13';
-    else rules += ' -_8sjo0b-lpb13';
-    rules += ' __ca13';
+    if (props.isDisabled) rules += ' -_8sjo0b-lpc131';
+    else rules += ' -_8sjo0b-lpb131';
+    rules += ' __ca131';
     return rules;
 };
 const $a9cda54c4f47ce52$export$c796eec99a15b55d = /*#__PURE__*/ (0, $5wH0g$createContext)(null);

package/dist/private/CloseButton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA2BD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCC,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAiF;AAKxH,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBACtJ,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps} from 'react-aria-components/Button';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {controlSize, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\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' | 'auto'\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: controlSize(),\n  flexShrink: 0,\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: baseColor('neutral'),\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isDisabled: 'GrayText'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAgCD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDC,MAAM,0DACX,CAAA,GAAA,oBAAY,EACV;AAMG,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAAoC;IAEpC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cACT,mBACA,6BACE;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GACnF,MAAM,MAAM;kBAGhB,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps} from 'react-aria-components/Button';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  controlSize,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\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' | 'auto';\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<\n  CloseButtonProps & {\n    isHovered: boolean;\n    isFocusVisible: boolean;\n    isPressed: boolean;\n    isStaticColor: boolean;\n  }\n>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    size: controlSize(),\n    flexShrink: 0,\n    borderRadius: 'full',\n    padding: 0,\n    borderStyle: 'none',\n    transition: 'default',\n    backgroundColor: {\n      default: 'transparent',\n      isHovered: hoverBackground,\n      isFocusVisible: hoverBackground,\n      isPressed: hoverBackground\n    },\n    '--iconPrimary': {\n      type: 'color',\n      value: {\n        default: baseColor('neutral'),\n        isDisabled: 'disabled',\n        isStaticColor: {\n          default: 'white',\n          isDisabled: 'transparent-overlay-400'\n        },\n        forcedColors: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    },\n    outlineColor: {\n      default: 'focus-ring',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'Highlight'\n    },\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\nexport const CloseButtonContext =\n  createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  props: CloseButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps =>\n        UNSAFE_className +\n        styles(\n          {...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor},\n          props.styles\n        )\n      }>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.mjs.map"}