@react-spectrum/s2 3.0.0-nightly-326f48154-241216 → 3.0.0-nightly-fee532d6a-241217

package/dist/Checkbox.mjs

@@ -73,7 +73,7 @@ const $9b405e0f8095dce0$var$wrapper = function anonymous(props, overrides) {
     rules += ' _f-1x99dlob';
     rules += ' _fa';
     if (props.isDisabled) {
-        rules += ' aa_____B';
+        rules += ' aa_____O';
         rules += ' aj';
     } else {
         if (props.isPressed) rules += ' ao';
@@ -94,7 +94,7 @@ const $9b405e0f8095dce0$export$827f4ee28efc37 = function anonymous(props) {
     let rules = " .";
     if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
@@ -126,16 +126,16 @@ const $9b405e0f8095dce0$export$827f4ee28efc37 = function anonymous(props) {
     rules += ' _zb';
     if (props.isSelected) {
         if (props.isDisabled) {
-            rules += ' ba_____B';
+            rules += ' ba_____O';
             rules += ' bj';
         } else if (props.isInvalid) {
-            rules += ' ba_____C';
+            rules += ' ba_____P';
             if (props.isPressed) rules += ' bP';
             else if (props.isFocusVisible) rules += ' bP';
             else if (props.isHovered) rules += ' bP';
             else rules += ' bO';
         } else {
-            rules += ' ba_____z';
+            rules += ' ba_____M';
             if (props.isEmphasized) {
                 if (props.isPressed) rules += ' bz';
                 else if (props.isFocusVisible) rules += ' bz';
@@ -149,21 +149,21 @@ const $9b405e0f8095dce0$export$827f4ee28efc37 = function anonymous(props) {
             }
         }
     } else {
-        rules += ' ba_____u';
+        rules += ' ba_____H';
         rules += ' bd';
     }
     if (props.isSelected) rules += ' ca';
     else if (props.isDisabled) {
-        rules += ' ca_____B';
+        rules += ' ca_____O';
         rules += ' cj';
     } else if (props.isInvalid) {
-        rules += ' ca_____C';
+        rules += ' ca_____P';
         if (props.isPressed) rules += ' cQ';
         else if (props.isFocusVisible) rules += ' cP';
         else if (props.isHovered) rules += ' cP';
         else rules += ' cO';
     } else {
-        rules += ' ca_____v';
+        rules += ' ca_____I';
         if (props.isPressed) rules += ' co';
         else if (props.isFocusVisible) rules += ' co';
         else if (props.isHovered) rules += ' co';
@@ -171,7 +171,7 @@ const $9b405e0f8095dce0$export$827f4ee28efc37 = function anonymous(props) {
     }
     return rules;
 };
-const $9b405e0f8095dce0$export$2c99b98b77550cb4 = " . -rwx0fg_e-B -rwx0fg_e-a_____Y";
+const $9b405e0f8095dce0$export$2c99b98b77550cb4 = " . -rwx0fg_e-B -rwx0fg_e-a______b";
 const $9b405e0f8095dce0$var$iconSize = {
     S: 'XS',
     M: 'S',

package/dist/CloseButton.cjs

@@ -38,12 +38,10 @@ $parcel$export(module.exports, "CloseButton", () => $2f907cb84c6e9e75$export$de6
 
 
 
+// TODO(design): this is inconsistent with ActionButton
 const $2f907cb84c6e9e75$var$hoverBackground = {
     default: 'gray-100',
-    staticColor: {
-        white: 'transparent-white-100',
-        black: 'transparent-black-100'
-    }
+    isStaticColor: 'transparent-overlay-100'
 };
 const $2f907cb84c6e9e75$var$styles = function anonymous(props, overrides) {
     let rules = " .";
@@ -57,12 +55,13 @@ const $2f907cb84c6e9e75$var$styles = function anonymous(props, overrides) {
     }
     if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
-    if (props.staticColor === "black") rules += ' db';
-    else if (props.staticColor === "white") rules += ' dc';
+    rules += ' da_____M';
+    if (props.isStaticColor) rules += ' d_____G';
     else rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
+    if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
+    else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
     rules += ' _Zd';
     rules += ' _1c';
     rules += ' _2d';
@@ -92,33 +91,22 @@ const $2f907cb84c6e9e75$var$styles = function anonymous(props, overrides) {
     rules += ' _Q-375x7f';
     rules += ' _Ra';
     if (props.isPressed) {
-        if (props.staticColor === "black") rules += ' b_____k';
-        else if (props.staticColor === "white") rules += ' b____7';
+        if (props.isStaticColor) rules += ' b_____x';
         else rules += ' bg';
     } else if (props.isFocusVisible) {
-        if (props.staticColor === "black") rules += ' b_____k';
-        else if (props.staticColor === "white") rules += ' b____7';
+        if (props.isStaticColor) rules += ' b_____x';
         else rules += ' bg';
     } else if (props.isHovered) {
-        if (props.staticColor === "black") rules += ' b_____k';
-        else if (props.staticColor === "white") rules += ' b____7';
+        if (props.isStaticColor) rules += ' b_____x';
         else rules += ' bg';
     } else rules += ' ba';
-    if (props.staticColor === "black") {
-        if (props.isDisabled) rules += ' -rwx0fg_a-_____n';
-        else {
-            if (props.isPressed) rules += ' -rwx0fg_a-_____s';
-            else if (props.isFocusVisible) rules += ' -rwx0fg_a-_____s';
-            else if (props.isHovered) rules += ' -rwx0fg_a-_____s';
-            else rules += ' -rwx0fg_a-_____r';
-        }
-    } else if (props.staticColor === "white") {
-        if (props.isDisabled) rules += ' -rwx0fg_a-_____a';
+    if (props.isStaticColor) {
+        if (props.isDisabled) rules += ' -rwx0fg_a-_____A';
         else {
-            if (props.isPressed) rules += ' -rwx0fg_a-_____f';
-            else if (props.isFocusVisible) rules += ' -rwx0fg_a-_____f';
-            else if (props.isHovered) rules += ' -rwx0fg_a-_____f';
-            else rules += ' -rwx0fg_a-_____e';
+            if (props.isPressed) rules += ' -rwx0fg_a-_____F';
+            else if (props.isFocusVisible) rules += ' -rwx0fg_a-_____F';
+            else if (props.isHovered) rules += ' -rwx0fg_a-_____F';
+            else rules += ' -rwx0fg_a-_____E';
         }
     } else if (props.isDisabled) rules += ' -rwx0fg_a-j';
     else {
@@ -143,7 +131,8 @@ const $2f907cb84c6e9e75$export$de65de8213222d10 = /*#__PURE__*/ (0, $bMS5K$react
         style: (0, $2061c83559b50a66$exports.pressScale)(domRef, UNSAFE_style),
         className: (renderProps)=>UNSAFE_className + $2f907cb84c6e9e75$var$styles({
                 ...renderProps,
-                staticColor: props.staticColor
+                staticColor: props.staticColor,
+                isStaticColor: !!props.staticColor
             }, props.styles),
         children: /*#__PURE__*/ (0, $bMS5K$reactjsxruntime.jsx)((0, $89dd175101ffc43a$exports.default), {
             size: {

package/dist/CloseButton.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA0BD,MAAM,wCAAkB;IACtB,SAAS;IACT,aAAa;QACX,OAAO;QACP,OAAO;IACT;AACF;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CC,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAK/G,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,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,qBACE,gCAAC,CAAA,GAAA,iCAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,gBAAgB,MAAM,CAAC;QACnC,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBAClH,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, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, 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'\n}\n\nconst hoverBackground = {\n  default: 'gray-100',\n  staticColor: {\n    white: 'transparent-white-100',\n    black: 'transparent-black-100'\n  }\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\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: 'neutral',\n      isDisabled: 'disabled',\n      staticColor: {\n        white: {\n          default: baseColor('transparent-white-800'),\n          isDisabled: 'transparent-white-400'\n        },\n        black: {\n          default: baseColor('transparent-black-800'),\n          isDisabled: 'transparent-black-400'\n        }\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<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={stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: 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;;;;;;;;;AA0BD,uDAAuD;AACvD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCC,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAK/G,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,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,qBACE,gCAAC,CAAA,GAAA,iCAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,gBAAgB,MAAM,CAAC;QACnC,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, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, 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\n// TODO(design): this is inconsistent with ActionButton\nconst hoverBackground = {\n  default: 'gray-100',\n  isStaticColor: 'transparent-overlay-100'\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\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: 'neutral',\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<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={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"}

package/dist/CloseButton.css

@@ -15,12 +15,8 @@
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .dc {
-    outline-color: #fff;
-  }
-
-  .db {
-    outline-color: #000;
+  .d_____G {
+    outline-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
   ._Nc {
@@ -31,6 +27,14 @@
     outline-offset: 2px;
   }
 
+  .-_1de2x0q_b-c {
+    --s2-container-bg: white;
+  }
+
+  .-_1de2x0q_b-b {
+    --s2-container-bg: black;
+  }
+
   ._Zd {
     display: flex;
   }
@@ -143,12 +147,8 @@
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .b____7 {
-    background-color: #ffffff1c;
-  }
-
-  .b_____k {
-    background-color: #00000017;
+  .b_____x {
+    background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .11);
   }
 
   .-rwx0fg_a-n {
@@ -163,28 +163,16 @@
     --iconPrimary: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .-rwx0fg_a-_____e {
-    --iconPrimary: #ffffffd9;
-  }
-
-  .-rwx0fg_a-_____f {
-    --iconPrimary: #fffffff0;
-  }
-
-  .-rwx0fg_a-_____a {
-    --iconPrimary: #ffffff36;
-  }
-
-  .-rwx0fg_a-_____r {
-    --iconPrimary: #000000d6;
+  .-rwx0fg_a-_____E {
+    --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
   }
 
-  .-rwx0fg_a-_____s {
-    --iconPrimary: #000000ed;
+  .-rwx0fg_a-_____F {
+    --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .-rwx0fg_a-_____n {
-    --iconPrimary: #00000038;
+  .-rwx0fg_a-_____A {
+    --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
   }
 }
 
@@ -192,7 +180,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
   }

package/dist/CloseButton.css.map

@@ -1 +1 @@
-{"mappings":"AA4Ce;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;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, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, 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'\n}\n\nconst hoverBackground = {\n  default: 'gray-100',\n  staticColor: {\n    white: 'transparent-white-100',\n    black: 'transparent-black-100'\n  }\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\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: 'neutral',\n      isDisabled: 'disabled',\n      staticColor: {\n        white: {\n          default: baseColor('transparent-white-800'),\n          isDisabled: 'transparent-white-400'\n        },\n        black: {\n          default: baseColor('transparent-black-800'),\n          isDisabled: 'transparent-black-400'\n        }\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<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={stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: 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":"AA0Ce;;;;AAAA;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","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, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, 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\n// TODO(design): this is inconsistent with ActionButton\nconst hoverBackground = {\n  default: 'gray-100',\n  isStaticColor: 'transparent-overlay-100'\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\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: 'neutral',\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<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={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"}

package/dist/CloseButton.mjs

@@ -32,12 +32,10 @@ function $parcel$interopDefault(a) {
 
 
 
+// TODO(design): this is inconsistent with ActionButton
 const $a9cda54c4f47ce52$var$hoverBackground = {
     default: 'gray-100',
-    staticColor: {
-        white: 'transparent-white-100',
-        black: 'transparent-black-100'
-    }
+    isStaticColor: 'transparent-overlay-100'
 };
 const $a9cda54c4f47ce52$var$styles = function anonymous(props, overrides) {
     let rules = " .";
@@ -51,12 +49,13 @@ const $a9cda54c4f47ce52$var$styles = function anonymous(props, overrides) {
     }
     if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
-    if (props.staticColor === "black") rules += ' db';
-    else if (props.staticColor === "white") rules += ' dc';
+    rules += ' da_____M';
+    if (props.isStaticColor) rules += ' d_____G';
     else rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
+    if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
+    else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
     rules += ' _Zd';
     rules += ' _1c';
     rules += ' _2d';
@@ -86,33 +85,22 @@ const $a9cda54c4f47ce52$var$styles = function anonymous(props, overrides) {
     rules += ' _Q-375x7f';
     rules += ' _Ra';
     if (props.isPressed) {
-        if (props.staticColor === "black") rules += ' b_____k';
-        else if (props.staticColor === "white") rules += ' b____7';
+        if (props.isStaticColor) rules += ' b_____x';
         else rules += ' bg';
     } else if (props.isFocusVisible) {
-        if (props.staticColor === "black") rules += ' b_____k';
-        else if (props.staticColor === "white") rules += ' b____7';
+        if (props.isStaticColor) rules += ' b_____x';
         else rules += ' bg';
     } else if (props.isHovered) {
-        if (props.staticColor === "black") rules += ' b_____k';
-        else if (props.staticColor === "white") rules += ' b____7';
+        if (props.isStaticColor) rules += ' b_____x';
         else rules += ' bg';
     } else rules += ' ba';
-    if (props.staticColor === "black") {
-        if (props.isDisabled) rules += ' -rwx0fg_a-_____n';
-        else {
-            if (props.isPressed) rules += ' -rwx0fg_a-_____s';
-            else if (props.isFocusVisible) rules += ' -rwx0fg_a-_____s';
-            else if (props.isHovered) rules += ' -rwx0fg_a-_____s';
-            else rules += ' -rwx0fg_a-_____r';
-        }
-    } else if (props.staticColor === "white") {
-        if (props.isDisabled) rules += ' -rwx0fg_a-_____a';
+    if (props.isStaticColor) {
+        if (props.isDisabled) rules += ' -rwx0fg_a-_____A';
         else {
-            if (props.isPressed) rules += ' -rwx0fg_a-_____f';
-            else if (props.isFocusVisible) rules += ' -rwx0fg_a-_____f';
-            else if (props.isHovered) rules += ' -rwx0fg_a-_____f';
-            else rules += ' -rwx0fg_a-_____e';
+            if (props.isPressed) rules += ' -rwx0fg_a-_____F';
+            else if (props.isFocusVisible) rules += ' -rwx0fg_a-_____F';
+            else if (props.isHovered) rules += ' -rwx0fg_a-_____F';
+            else rules += ' -rwx0fg_a-_____E';
         }
     } else if (props.isDisabled) rules += ' -rwx0fg_a-j';
     else {
@@ -137,7 +125,8 @@ const $a9cda54c4f47ce52$export$de65de8213222d10 = /*#__PURE__*/ (0, $5wH0g$forwa
         style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef, UNSAFE_style),
         className: (renderProps)=>UNSAFE_className + $a9cda54c4f47ce52$var$styles({
                 ...renderProps,
-                staticColor: props.staticColor
+                staticColor: props.staticColor,
+                isStaticColor: !!props.staticColor
             }, props.styles),
         children: /*#__PURE__*/ (0, $5wH0g$jsx)((0, $bd983341bd35d639$export$2e2bcd8739ae039), {
             size: {

package/dist/CloseButton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA0BD,MAAM,wCAAkB;IACtB,SAAS;IACT,aAAa;QACX,OAAO;QACP,OAAO;IACT;AACF;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CC,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAK/G,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,sBAAc,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,gBAAgB,MAAM,CAAC;QACnC,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBAClH,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, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, 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'\n}\n\nconst hoverBackground = {\n  default: 'gray-100',\n  staticColor: {\n    white: 'transparent-white-100',\n    black: 'transparent-black-100'\n  }\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\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: 'neutral',\n      isDisabled: 'disabled',\n      staticColor: {\n        white: {\n          default: baseColor('transparent-white-800'),\n          isDisabled: 'transparent-white-400'\n        },\n        black: {\n          default: baseColor('transparent-black-800'),\n          isDisabled: 'transparent-black-400'\n        }\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<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={stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: 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;;;;;;;;;AA0BD,uDAAuD;AACvD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCC,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAK/G,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,sBAAc,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,gBAAgB,MAAM,CAAC;QACnC,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, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, 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\n// TODO(design): this is inconsistent with ActionButton\nconst hoverBackground = {\n  default: 'gray-100',\n  isStaticColor: 'transparent-overlay-100'\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\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: 'neutral',\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<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={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"}

package/dist/ColorArea.cjs

@@ -69,7 +69,7 @@ const $4c6639e34959fe36$export$b2103f68a961418e = /*#__PURE__*/ (0, $lfrPf$react
                 rules += ' _wc';
                 rules += ' _xc';
                 rules += ' _yc';
-                rules += ' da_____v';
+                rules += ' da_____I';
                 rules += ' dp10';
                 rules += ' _Nb';
                 rules += ' _M-3hmpv';

package/dist/ColorArea.css

@@ -68,7 +68,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____v {
+    .da_____I {
       outline-color: buttonborder;
     }
   }

package/dist/ColorArea.mjs

@@ -62,7 +62,7 @@ const $40a2b649525568ab$export$b2103f68a961418e = /*#__PURE__*/ (0, $dNfSU$forwa
                 rules += ' _wc';
                 rules += ' _xc';
                 rules += ' _yc';
-                rules += ' da_____v';
+                rules += ' da_____I';
                 rules += ' dp10';
                 rules += ' _Nb';
                 rules += ' _M-3hmpv';

package/dist/ColorHandle.cjs

@@ -57,7 +57,7 @@ function $5b07976eb9e358fe$export$92862704de639678({ containerRef: containerRef,
             else rules += ' cc';
             rules += ' _Lb';
             rules += ' _Nb';
-            rules += ' da_____v';
+            rules += ' da_____I';
             rules += ' db42';
             return rules;
         },
@@ -70,7 +70,7 @@ function $5b07976eb9e358fe$export$92862704de639678({ containerRef: containerRef,
         children: ({ isDragging: isDragging, color: color })=>/*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsxs)((0, $8hzuN$reactjsxruntime.Fragment), {
                 children: [
                     /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)("div", {
-                        className: " . lb kb _vf _wf _xf _yf __na wa ub vb sb tb cb42 ca_____v"
+                        className: " . lb kb _vf _wf _xf _yf __na wa ub vb sb tb cb42 ca_____I"
                     }),
                     /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)($5b07976eb9e358fe$var$ColorLoupePortal, {
                         isOpen: isDragging,
@@ -180,7 +180,7 @@ function $5b07976eb9e358fe$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)("path", {
-                className: " . xb f_____n fa_____x eA",
+                className: " . xb f_____n fa_____K eA",
                 d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
             })
         ]

package/dist/ColorHandle.css

@@ -160,15 +160,15 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____v {
+    .da_____I {
       outline-color: buttonborder;
     }
 
-    .ca_____v {
+    .ca_____I {
       border-color: buttonborder;
     }
 
-    .fa_____x {
+    .fa_____K {
       stroke: buttonborder;
     }
   }

package/dist/ColorHandle.mjs

@@ -51,7 +51,7 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
             else rules += ' cc';
             rules += ' _Lb';
             rules += ' _Nb';
-            rules += ' da_____v';
+            rules += ' da_____I';
             rules += ' db42';
             return rules;
         },
@@ -64,7 +64,7 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
         children: ({ isDragging: isDragging, color: color })=>/*#__PURE__*/ (0, $kShzN$jsxs)((0, $kShzN$Fragment), {
                 children: [
                     /*#__PURE__*/ (0, $kShzN$jsx)("div", {
-                        className: " . lb kb _vf _wf _xf _yf __na wa ub vb sb tb cb42 ca_____v"
+                        className: " . lb kb _vf _wf _xf _yf __na wa ub vb sb tb cb42 ca_____I"
                     }),
                     /*#__PURE__*/ (0, $kShzN$jsx)($b4f7db7c45cd3de9$var$ColorLoupePortal, {
                         isOpen: isDragging,
@@ -174,7 +174,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $kShzN$jsx)("path", {
-                className: " . xb f_____n fa_____x eA",
+                className: " . xb f_____n fa_____K eA",
                 d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
             })
         ]

package/dist/ColorSlider.cjs

@@ -136,7 +136,7 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                             rules += ' _wc';
                             rules += ' _xc';
                             rules += ' _yc';
-                            rules += ' da_____v';
+                            rules += ' da_____I';
                             rules += ' dp10';
                             rules += ' _Nb';
                             rules += ' _M-3hmpv';

package/dist/ColorSlider.css

@@ -245,7 +245,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____v {
+    .da_____I {
       outline-color: buttonborder;
     }
   }

package/dist/ColorSlider.mjs

@@ -129,7 +129,7 @@ const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwa
                             rules += ' _wc';
                             rules += ' _xc';
                             rules += ' _yc';
-                            rules += ' da_____v';
+                            rules += ' da_____I';
                             rules += ' dp10';
                             rules += ' _Nb';
                             rules += ' _M-3hmpv';

package/dist/ColorSwatchPicker.cjs

@@ -70,7 +70,7 @@ function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
                 let rules = " .";
                 if (props.isFocusVisible) rules += ' _Lb';
                 else rules += ' _La';
-                rules += ' da_____z';
+                rules += ' da_____M';
                 rules += ' dx';
                 rules += ' _Nc';
                 rules += ' _M-3t1z';

package/dist/ColorSwatchPicker.css

@@ -188,7 +188,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
   }

package/dist/ColorSwatchPicker.mjs

@@ -63,7 +63,7 @@ function $ba9c901b6c815fb9$var$useWrapper(swatch, color, rounding) {
                 let rules = " .";
                 if (props.isFocusVisible) rules += ' _Lb';
                 else rules += ' _La';
-                rules += ' da_____z';
+                rules += ' da_____M';
                 rules += ' dx';
                 rules += ' _Nc';
                 rules += ' _M-3t1z';

package/dist/ColorWheel.cjs

@@ -58,7 +58,7 @@ const $0c1e31ce388fe468$export$f80663f808113381 = /*#__PURE__*/ (0, $lMAHP$react
                             rules += ' _wf';
                             rules += ' _xf';
                             rules += ' _yf';
-                            rules += ' da_____v';
+                            rules += ' da_____I';
                             rules += ' dp10';
                             rules += ' _Nb';
                             rules += ' _M-3hmpv';
@@ -81,7 +81,7 @@ const $0c1e31ce388fe468$export$f80663f808113381 = /*#__PURE__*/ (0, $lMAHP$react
                             rules += ' _wf';
                             rules += ' _xf';
                             rules += ' _yf';
-                            rules += ' da_____v';
+                            rules += ' da_____I';
                             rules += ' dp10';
                             rules += ' _Nb';
                             if (props.isDisabled) rules += ' _La';

package/dist/ColorWheel.css

@@ -68,7 +68,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____v {
+    .da_____I {
       outline-color: buttonborder;
     }
   }

package/dist/ColorWheel.mjs

@@ -51,7 +51,7 @@ const $4a6afc95235907f0$export$f80663f808113381 = /*#__PURE__*/ (0, $j8ecy$forwa
                             rules += ' _wf';
                             rules += ' _xf';
                             rules += ' _yf';
-                            rules += ' da_____v';
+                            rules += ' da_____I';
                             rules += ' dp10';
                             rules += ' _Nb';
                             rules += ' _M-3hmpv';
@@ -74,7 +74,7 @@ const $4a6afc95235907f0$export$f80663f808113381 = /*#__PURE__*/ (0, $j8ecy$forwa
                             rules += ' _wf';
                             rules += ' _xf';
                             rules += ' _yf';
-                            rules += ' da_____v';
+                            rules += ' da_____I';
                             rules += ' dp10';
                             rules += ' _Nb';
                             if (props.isDisabled) rules += ' _La';