@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/ColorSwatchPicker.css

@@ -1,189 +1,189 @@
 @layer _.a {
-  .sd13 {
+  .sd131 {
     display: flex;
   }
 
-  ._wb13 {
+  ._wb131 {
     flex-wrap: wrap;
   }
 
-  .Ua13 {
+  .Ua131 {
     row-gap: .125rem;
   }
 
-  .Ub13 {
+  .Ub131 {
     row-gap: .25rem;
   }
 
-  .UWJpoB13 {
+  .UWJpoB131 {
     row-gap: .375rem;
   }
 
-  .qa13 {
+  .qa131 {
     column-gap: .125rem;
   }
 
-  .qb13 {
+  .qb131 {
     column-gap: .25rem;
   }
 
-  .qWJpoB13 {
+  .qWJpoB131 {
     column-gap: .375rem;
   }
 
-  ._Le13 {
+  ._Le131 {
     outline-style: none;
   }
 
-  .Oh13 {
+  .Oh131 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  ._Kd13 {
+  ._Kd131 {
     outline-offset: 2px;
   }
 
-  ._Pc13 {
+  ._Pc131 {
     position: relative;
   }
 
-  .od13 {
+  .od131 {
     border-start-start-radius: 0;
   }
 
-  .oa13 {
+  .oa131 {
     border-start-start-radius: .25rem;
   }
 
-  .og13 {
+  .og131 {
     border-start-start-radius: 9999px;
   }
 
-  .nd13 {
+  .nd131 {
     border-start-end-radius: 0;
   }
 
-  .na13 {
+  .na131 {
     border-start-end-radius: .25rem;
   }
 
-  .ng13 {
+  .ng131 {
     border-start-end-radius: 9999px;
   }
 
-  .kd13 {
+  .kd131 {
     border-end-start-radius: 0;
   }
 
-  .ka13 {
+  .ka131 {
     border-end-start-radius: .25rem;
   }
 
-  .kg13 {
+  .kg131 {
     border-end-start-radius: 9999px;
   }
 
-  .jd13 {
+  .jd131 {
     border-end-end-radius: 0;
   }
 
-  .ja13 {
+  .ja131 {
     border-end-end-radius: .25rem;
   }
 
-  .jg13 {
+  .jg131 {
     border-end-end-radius: 9999px;
   }
 
-  .__ca13 {
+  .__ca131 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  ._Pa13 {
+  ._Pa131 {
     position: absolute;
   }
 
-  ._Ob13 {
+  ._Ob131 {
     pointer-events: none;
   }
 
-  .Wr13 {
+  .Wr131 {
     top: 0;
   }
 
-  ._lr13 {
+  ._lr131 {
     bottom: 0;
   }
 
-  ._Ar13 {
+  ._Ar131 {
     inset-inline-start: 0;
   }
 
-  ._zr13 {
+  ._zr131 {
     inset-inline-end: 0;
   }
 
-  ._oa13 {
+  ._oa131 {
     box-sizing: border-box;
   }
 
-  .in13 {
+  .in131 {
     border-color: light-dark(#131313, #f2f2f2);
   }
 
-  ._jf13 {
+  ._jf131 {
     border-style: solid;
   }
 
-  ._kc13 {
+  ._kc131 {
     border-top-width: 2px;
   }
 
-  .hc13 {
+  .hc131 {
     border-bottom-width: 2px;
   }
 
-  .mc13 {
+  .mc131 {
     border-inline-start-width: 2px;
   }
 
-  .lc13 {
+  .lc131 {
     border-inline-end-width: 2px;
   }
 
-  .Og13 {
+  .Og131 {
     outline-color: light-dark(#fff, #111);
   }
 
-  ._Lf13 {
+  ._Lf131 {
     outline-style: solid;
   }
 
-  ._Mc13 {
+  ._Mc131 {
     outline-width: 2px;
   }
 
-  ._Kc13 {
+  ._Kc131 {
     outline-offset: -4px;
   }
 
-  ._yb13 {
+  ._yb131 {
     forced-color-adjust: none;
   }
 
-  .oi13 {
+  .oi131 {
     border-start-start-radius: inherit;
   }
 
-  .ni13 {
+  .ni131 {
     border-start-end-radius: inherit;
   }
 
-  .ki13 {
+  .ki131 {
     border-end-start-radius: inherit;
   }
 
-  .ji13 {
+  .ji131 {
     border-end-end-radius: inherit;
   }
 }
@@ -192,7 +192,7 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Olc13 {
+    .Olc131 {
       outline-color: highlight;
     }
   }

package/dist/private/ColorSwatchPicker.css.map

@@ -1 +1 @@
-{"mappings":"ACmEoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjBS;;AAAA;EAAA;IAAA","sources":["26baf334ec196f8c","packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["@import \"e16c0c8e50c537a4\";\n@import \"6325f62168102e9d\";\n@import \"aa108d3a66fddade\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  Color\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        },\n        disableTapHighlight: true\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: 'inherit'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.css.map"}
+{"mappings":"AC6EQ;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2BA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnBjB;;AAAA;EAAA;IAAA","sources":["26baf334ec196f8c","packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["@import \"e16c0c8e50c537a4\";\n@import \"6325f62168102e9d\";\n@import \"aa108d3a66fddade\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  Color\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps\n  extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode;\n  /**\n   * The amount of padding between the swatches.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The size of the color swatches.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the color swatches.\n   *\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full';\n}\n\nexport const ColorSwatchPickerContext =\n  createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(\n  props: ColorSwatchPickerProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={\n        UNSAFE_className +\n        style(\n          {\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: {\n              density: {\n                compact: space(2),\n                regular: 4,\n                spacious: space(6)\n              }\n            }\n          },\n          getAllowedOverrides()\n        )({density}, props.styles)\n      }>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps =>\n        style({\n          ...focusRing(),\n          position: 'relative',\n          borderRadius: {\n            rounding: {\n              none: 'none',\n              default: 'sm',\n              full: 'full'\n            }\n          },\n          disableTapHighlight: true\n        })({...renderProps, rounding})\n      }>\n      {({isSelected}) => (\n        <>\n          {swatch}\n          {isSelected && (\n            <div\n              aria-hidden\n              className={style({\n                position: 'absolute',\n                pointerEvents: 'none',\n                inset: 0,\n                boxSizing: 'border-box',\n                borderColor: 'gray-900',\n                borderStyle: 'solid',\n                borderWidth: 2,\n                outlineColor: 'gray-25',\n                outlineStyle: 'solid',\n                outlineWidth: 2,\n                outlineOffset: -4,\n                forcedColorAdjust: 'none',\n                borderRadius: 'inherit'\n              })}\n            />\n          )}\n        </>\n      )}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.css.map"}

package/dist/private/ColorSwatchPicker.mjs

@@ -33,14 +33,14 @@ const $ba9c901b6c815fb9$export$b46792416e3d8515 = /*#__PURE__*/ (0, $bOBHx$forwa
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " ";
             rules += (String(overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g) || []).join('');
-            rules += ' sd13';
-            rules += ' _wb13';
-            if (props.density === "spacious") rules += ' UWJpoB13';
-            else if (props.density === "regular") rules += ' Ub13';
-            else if (props.density === "compact") rules += ' Ua13';
-            if (props.density === "spacious") rules += ' qWJpoB13';
-            else if (props.density === "regular") rules += ' qb13';
-            else if (props.density === "compact") rules += ' qa13';
+            rules += ' sd131';
+            rules += ' _wb131';
+            if (props.density === "spacious") rules += ' UWJpoB131';
+            else if (props.density === "regular") rules += ' Ub131';
+            else if (props.density === "compact") rules += ' Ua131';
+            if (props.density === "spacious") rules += ' qWJpoB131';
+            else if (props.density === "regular") rules += ' qb131';
+            else if (props.density === "compact") rules += ' qa131';
             return rules;
         }({
             density: density
@@ -60,26 +60,26 @@ function $ba9c901b6c815fb9$var$useWrapper(swatch, color, rounding) {
         color: color,
         className: (renderProps)=>(function anonymous(props) {
                 let rules = " ";
-                if (props.isFocusVisible) rules += ' _Lf13';
-                else rules += ' _Le13';
-                rules += ' Oh13';
-                rules += ' Olc13';
-                rules += ' _Mc13';
-                rules += ' _Kd13';
-                rules += ' _Pc13';
-                if (props.rounding === "full") rules += ' og13';
-                else if (props.rounding === "default") rules += ' oa13';
-                else if (props.rounding === "none") rules += ' od13';
-                if (props.rounding === "full") rules += ' ng13';
-                else if (props.rounding === "default") rules += ' na13';
-                else if (props.rounding === "none") rules += ' nd13';
-                if (props.rounding === "full") rules += ' kg13';
-                else if (props.rounding === "default") rules += ' ka13';
-                else if (props.rounding === "none") rules += ' kd13';
-                if (props.rounding === "full") rules += ' jg13';
-                else if (props.rounding === "default") rules += ' ja13';
-                else if (props.rounding === "none") rules += ' jd13';
-                rules += ' __ca13';
+                if (props.isFocusVisible) rules += ' _Lf131';
+                else rules += ' _Le131';
+                rules += ' Oh131';
+                rules += ' Olc131';
+                rules += ' _Mc131';
+                rules += ' _Kd131';
+                rules += ' _Pc131';
+                if (props.rounding === "full") rules += ' og131';
+                else if (props.rounding === "default") rules += ' oa131';
+                else if (props.rounding === "none") rules += ' od131';
+                if (props.rounding === "full") rules += ' ng131';
+                else if (props.rounding === "default") rules += ' na131';
+                else if (props.rounding === "none") rules += ' nd131';
+                if (props.rounding === "full") rules += ' kg131';
+                else if (props.rounding === "default") rules += ' ka131';
+                else if (props.rounding === "none") rules += ' kd131';
+                if (props.rounding === "full") rules += ' jg131';
+                else if (props.rounding === "default") rules += ' ja131';
+                else if (props.rounding === "none") rules += ' jd131';
+                rules += ' __ca131';
                 return rules;
             })({
                 ...renderProps,
@@ -90,7 +90,7 @@ function $ba9c901b6c815fb9$var$useWrapper(swatch, color, rounding) {
                     swatch,
                     isSelected && /*#__PURE__*/ (0, $bOBHx$jsx)("div", {
                         "aria-hidden": true,
-                        className: " _Pa13 _Ob13 Wr13 _lr13 _Ar13 _zr13 _oa13 in13 _jf13 _kc13 hc13 mc13 lc13 Og13 _Lf13 _Mc13 _Kc13 _yb13 oi13 ni13 ki13 ji13"
+                        className: " _Pa131 _Ob131 Wr131 _lr131 _Ar131 _zr131 _oa131 in131 _jf131 _kc131 hc131 mc131 lc131 Og131 _Lf131 _Mc131 _Kc131 _yb131 oi131 ni131 ki131 ji131"
                     })
                 ]
             })

package/dist/private/ColorSwatchPicker.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqCM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,0BACX,mBAAmB,IACnB,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,mBAAmB;;;;;;;;;;;;UAUJ;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gBAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gBAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;eAWvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gBAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAmBrB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.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 {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  Color\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        },\n        disableTapHighlight: true\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: 'inherit'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAyCM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAA8E;AAKrF,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBACnD,KAA6B,EAC7B,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,0BACX,mBAAmB,IACnB,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WACE,mBACA;;;;;;;;;;;;UAaE;qBAAC;QAAO,GAAG,MAAM,MAAM;kBAE3B,cAAA,gBAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gBAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cACT;;;;;;;;;;;;;;;;;;;;;;;eAWG;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAE7B,CAAC,cAAC,UAAU,EAAC,iBACZ;;oBACG;oBACA,4BACC,gBAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAqBvB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.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 {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  Color\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps\n  extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode;\n  /**\n   * The amount of padding between the swatches.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The size of the color swatches.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the color swatches.\n   *\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full';\n}\n\nexport const ColorSwatchPickerContext =\n  createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(\n  props: ColorSwatchPickerProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={\n        UNSAFE_className +\n        style(\n          {\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: {\n              density: {\n                compact: space(2),\n                regular: 4,\n                spacious: space(6)\n              }\n            }\n          },\n          getAllowedOverrides()\n        )({density}, props.styles)\n      }>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps =>\n        style({\n          ...focusRing(),\n          position: 'relative',\n          borderRadius: {\n            rounding: {\n              none: 'none',\n              default: 'sm',\n              full: 'full'\n            }\n          },\n          disableTapHighlight: true\n        })({...renderProps, rounding})\n      }>\n      {({isSelected}) => (\n        <>\n          {swatch}\n          {isSelected && (\n            <div\n              aria-hidden\n              className={style({\n                position: 'absolute',\n                pointerEvents: 'none',\n                inset: 0,\n                boxSizing: 'border-box',\n                borderColor: 'gray-900',\n                borderStyle: 'solid',\n                borderWidth: 2,\n                outlineColor: 'gray-25',\n                outlineStyle: 'solid',\n                outlineWidth: 2,\n                outlineOffset: -4,\n                forcedColorAdjust: 'none',\n                borderRadius: 'inherit'\n              })}\n            />\n          )}\n        </>\n      )}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.mjs.map"}

package/dist/private/ColorWheel.cjs

@@ -58,38 +58,38 @@ const $0c1e31ce388fe468$export$f80663f808113381 = /*#__PURE__*/ (0, $lMAHP$react
                             }),
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' og13';
-                            rules += ' ng13';
-                            rules += ' kg13';
-                            rules += ' jg13';
-                            rules += ' Oi13';
-                            rules += ' Ola13';
-                            rules += ' _Mb13';
-                            rules += ' _Ka13';
-                            if (props.isDisabled) rules += ' _Le13';
-                            else rules += ' _Lf13';
-                            if (props.isDisabled) rules += ' gH13';
+                            rules += ' og131';
+                            rules += ' ng131';
+                            rules += ' kg131';
+                            rules += ' jg131';
+                            rules += ' Oi131';
+                            rules += ' Ola131';
+                            rules += ' _Mb131';
+                            rules += ' _Ka131';
+                            if (props.isDisabled) rules += ' _Le131';
+                            else rules += ' _Lf131';
+                            if (props.isDisabled) rules += ' gH131';
                             return rules;
                         }
                     }),
                     /*#__PURE__*/ (0, $lMAHP$reactjsxruntime.jsx)("div", {
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' _Pa13';
-                            rules += ' Ww13';
-                            rules += ' _lw13';
-                            rules += ' _Aw13';
-                            rules += ' _zw13';
-                            rules += ' _Ob13';
-                            rules += ' og13';
-                            rules += ' ng13';
-                            rules += ' kg13';
-                            rules += ' jg13';
-                            rules += ' Oi13';
-                            rules += ' Ola13';
-                            rules += ' _Mb13';
-                            if (props.isDisabled) rules += ' _Le13';
-                            else rules += ' _Lf13';
+                            rules += ' _Pa131';
+                            rules += ' Ww131';
+                            rules += ' _lw131';
+                            rules += ' _Aw131';
+                            rules += ' _zw131';
+                            rules += ' _Ob131';
+                            rules += ' og131';
+                            rules += ' ng131';
+                            rules += ' kg131';
+                            rules += ' jg131';
+                            rules += ' Oi131';
+                            rules += ' Ola131';
+                            rules += ' _Mb131';
+                            if (props.isDisabled) rules += ' _Le131';
+                            else rules += ' _Lf131';
                             return rules;
                         }({
                             isDisabled: isDisabled

package/dist/private/ColorWheel.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAwBM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAAuE;AAK7G,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IAC1G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,SAAS,IAAG,GAAG;IACzD,IAAI,eAAe,CAAA,GAAA,mCAAQ,EAAE;IAC7B,kCAAkC;IAClC,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,IAAI,cAAc,KAAK,GAAG,CAAC,MAAM,OAAO;IACxC,IAAI,YAAY;IAChB,IAAI,cAAc,cAAc;IAChC,qBACE,gCAAC,CAAA,GAAA,+CAAa;QACX,GAAG,KAAK;QACT,aAAa;QACb,aAAa;QACb,KAAK;QACL,OAAO;YAAC,GAAG,YAAY;YAAE,OAAO,cAAc;YAAG,QAAQ,cAAc;QAAC;QACxE,WAAW,mBAAmB;kBAC7B,CAAC,cAAC,UAAU,SAAE,KAAK,EAAC,iBAAM;;kCACzB,gCAAC,CAAA,GAAA,oDAAc;wBACb,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,aAAa,UAAU;4BAC9D,CAAA;wBACA;;;;;;;;;;;;;;;;kCAiBF,gCAAC;wBACC,WAAW;;;;;;;;;;;;;;;;;;0BAeR;wCAAC;wBAAU;;kCAChB,gCAAC,CAAA,GAAA,qCAAU;wBACT,cAAc;wBACd,aAAa;4BACX,IAAI,KAAC,CAAC,KAAE,CAAC,EAAC,GAAG,MAAM,gBAAgB,CAAC,cAAc,YAAY;4BAC9D,OAAO;gCACL,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;gCACtC,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;4BACxC;wBACF;;;;;AAIV","sources":["packages/@react-spectrum/s2/src/ColorWheel.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 {\n  ColorWheel as AriaColorWheel,\n  ColorWheelProps as AriaColorWheelProps,\n  ColorWheelTrack\n} from 'react-aria-components/ColorWheel';\n\nimport {ColorHandle} from './ColorHandle';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'render' | 'outerRadius' | 'innerRadius' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * @default 192\n   */\n  size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n  let containerRef = useDOMRef(ref);\n  // TODO: how to do mobile scaling?\n  let {size = 192} = props;\n  let outerRadius = Math.max(size, 175) / 2;\n  let thickness = 24;\n  let innerRadius = outerRadius - 24;\n  return (\n    <AriaColorWheel \n      {...props}\n      outerRadius={outerRadius}\n      innerRadius={innerRadius}\n      ref={containerRef}\n      style={{...UNSAFE_style, width: outerRadius * 2, height: outerRadius * 2}}\n      className={UNSAFE_className + styles}>\n      {({isDisabled, state}) => (<>\n        <ColorWheelTrack\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : defaultStyle.background\n          })}\n          className={style({\n            // Outer border\n            borderRadius: 'full',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })} />\n        <div\n          className={style({\n            // Inner border\n            position: 'absolute',\n            inset: 24,\n            pointerEvents: 'none',\n            borderRadius: 'full',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            }\n          })({isDisabled})} />\n        <ColorHandle\n          containerRef={containerRef}\n          getPosition={() => {\n            let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n            return {\n              x: (outerRadius + x) / (outerRadius * 2),\n              y: (outerRadius + y) / (outerRadius * 2)\n            };\n          }} />\n      </>)}\n    </AriaColorWheel>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAoCM,MAAM,0DACX,CAAA,GAAA,0BAAY,EAAuE;AAK9E,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAC5C,KAAsB,EACtB,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,SAAS,IAAG,GAAG;IACzD,IAAI,eAAe,CAAA,GAAA,mCAAQ,EAAE;IAC7B,kCAAkC;IAClC,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,IAAI,cAAc,KAAK,GAAG,CAAC,MAAM,OAAO;IACxC,IAAI,YAAY;IAChB,IAAI,cAAc,cAAc;IAChC,qBACE,gCAAC,CAAA,GAAA,+CAAa;QACX,GAAG,KAAK;QACT,aAAa;QACb,aAAa;QACb,KAAK;QACL,OAAO;YAAC,GAAG,YAAY;YAAE,OAAO,cAAc;YAAG,QAAQ,cAAc;QAAC;QACxE,WAAW,mBAAmB;kBAC7B,CAAC,cAAC,UAAU,SAAE,KAAK,EAAC,iBACnB;;kCACE,gCAAC,CAAA,GAAA,oDAAc;wBACb,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,aAAa,UAAU;4BAC9D,CAAA;wBACA;;;;;;;;;;;;;;;;kCAkBF,gCAAC;wBACC,WAAW;;;;;;;;;;;;;;;;;;0BAeR;wCAAC;wBAAU;;kCAEhB,gCAAC,CAAA,GAAA,qCAAU;wBACT,cAAc;wBACd,aAAa;4BACX,IAAI,KAAC,CAAC,KAAE,CAAC,EAAC,GAAG,MAAM,gBAAgB,CAAC,cAAc,YAAY;4BAC9D,OAAO;gCACL,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;gCACtC,GAAG,AAAC,CAAA,cAAc,CAAA,IAAM,CAAA,cAAc,CAAA;4BACxC;wBACF;;;;;AAMZ","sources":["packages/@react-spectrum/s2/src/ColorWheel.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 {\n  ColorWheel as AriaColorWheel,\n  ColorWheelProps as AriaColorWheelProps,\n  ColorWheelTrack\n} from 'react-aria-components/ColorWheel';\n\nimport {ColorHandle} from './ColorHandle';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps\n  extends\n    Omit<\n      AriaColorWheelProps,\n      | 'children'\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'outerRadius'\n      | 'innerRadius'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps {\n  /**\n   * @default 192\n   */\n  size?: number;\n}\n\nexport const ColorWheelContext =\n  createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(\n  props: ColorWheelProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n  let containerRef = useDOMRef(ref);\n  // TODO: how to do mobile scaling?\n  let {size = 192} = props;\n  let outerRadius = Math.max(size, 175) / 2;\n  let thickness = 24;\n  let innerRadius = outerRadius - 24;\n  return (\n    <AriaColorWheel\n      {...props}\n      outerRadius={outerRadius}\n      innerRadius={innerRadius}\n      ref={containerRef}\n      style={{...UNSAFE_style, width: outerRadius * 2, height: outerRadius * 2}}\n      className={UNSAFE_className + styles}>\n      {({isDisabled, state}) => (\n        <>\n          <ColorWheelTrack\n            style={({defaultStyle, isDisabled}) => ({\n              background: isDisabled ? undefined : defaultStyle.background\n            })}\n            className={style({\n              // Outer border\n              borderRadius: 'full',\n              outlineColor: {\n                default: 'gray-1000/10',\n                forcedColors: 'ButtonBorder'\n              },\n              outlineWidth: 1,\n              outlineOffset: -1,\n              outlineStyle: {\n                default: 'solid',\n                isDisabled: 'none'\n              },\n              backgroundColor: {\n                isDisabled: 'disabled'\n              }\n            })}\n          />\n          <div\n            className={style({\n              // Inner border\n              position: 'absolute',\n              inset: 24,\n              pointerEvents: 'none',\n              borderRadius: 'full',\n              outlineColor: {\n                default: 'gray-1000/10',\n                forcedColors: 'ButtonBorder'\n              },\n              outlineWidth: 1,\n              outlineStyle: {\n                default: 'solid',\n                isDisabled: 'none'\n              }\n            })({isDisabled})}\n          />\n          <ColorHandle\n            containerRef={containerRef}\n            getPosition={() => {\n              let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n              return {\n                x: (outerRadius + x) / (outerRadius * 2),\n                y: (outerRadius + y) / (outerRadius * 2)\n              };\n            }}\n          />\n        </>\n      )}\n    </AriaColorWheel>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}

package/dist/private/ColorWheel.css

@@ -1,65 +1,65 @@
 @layer _.a {
-  ._Ka13 {
+  ._Ka131 {
     outline-offset: -1px;
   }
 
-  .gH13 {
+  .gH131 {
     background-color: light-dark(#e9e9e9, #2c2c2c);
   }
 
-  ._Pa13 {
+  ._Pa131 {
     position: absolute;
   }
 
-  .Ww13 {
+  .Ww131 {
     top: 24px;
   }
 
-  ._lw13 {
+  ._lw131 {
     bottom: 24px;
   }
 
-  ._Aw13 {
+  ._Aw131 {
     inset-inline-start: 24px;
   }
 
-  ._zw13 {
+  ._zw131 {
     inset-inline-end: 24px;
   }
 
-  ._Ob13 {
+  ._Ob131 {
     pointer-events: none;
   }
 
-  .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;
   }
 
-  .Oi13 {
+  .Oi131 {
     outline-color: light-dark(#0000001a, #ffffff1a);
   }
 
-  ._Mb13 {
+  ._Mb131 {
     outline-width: 1px;
   }
 
-  ._Lf13 {
+  ._Lf131 {
     outline-style: solid;
   }
 
-  ._Le13 {
+  ._Le131 {
     outline-style: none;
   }
 }
@@ -68,7 +68,7 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Ola13 {
+    .Ola131 {
       outline-color: buttonborder;
     }
   }

package/dist/private/ColorWheel.css.map

@@ -1 +1 @@
-{"mappings":"AC6DqB;EAAA;;;;EAAA;;;;EAkBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlBA;;AAAA;EAAA;IAAA","sources":["08c4afb7d0604130","packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["@import \"54eced5f2b164503\";\n@import \"1e65bf1fcba37015\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorWheel as AriaColorWheel,\n  ColorWheelProps as AriaColorWheelProps,\n  ColorWheelTrack\n} from 'react-aria-components/ColorWheel';\n\nimport {ColorHandle} from './ColorHandle';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'render' | 'outerRadius' | 'innerRadius' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * @default 192\n   */\n  size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n  let containerRef = useDOMRef(ref);\n  // TODO: how to do mobile scaling?\n  let {size = 192} = props;\n  let outerRadius = Math.max(size, 175) / 2;\n  let thickness = 24;\n  let innerRadius = outerRadius - 24;\n  return (\n    <AriaColorWheel \n      {...props}\n      outerRadius={outerRadius}\n      innerRadius={innerRadius}\n      ref={containerRef}\n      style={{...UNSAFE_style, width: outerRadius * 2, height: outerRadius * 2}}\n      className={UNSAFE_className + styles}>\n      {({isDisabled, state}) => (<>\n        <ColorWheelTrack\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : defaultStyle.background\n          })}\n          className={style({\n            // Outer border\n            borderRadius: 'full',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })} />\n        <div\n          className={style({\n            // Inner border\n            position: 'absolute',\n            inset: 24,\n            pointerEvents: 'none',\n            borderRadius: 'full',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            }\n          })({isDisabled})} />\n        <ColorHandle\n          containerRef={containerRef}\n          getPosition={() => {\n            let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n            return {\n              x: (outerRadius + x) / (outerRadius * 2),\n              y: (outerRadius + y) / (outerRadius * 2)\n            };\n          }} />\n      </>)}\n    </AriaColorWheel>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.css.map"}
+{"mappings":"AC8EuB;EAAA;;;;EAAA;;;;EAmBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnBA;;AAAA;EAAA;IAAA","sources":["08c4afb7d0604130","packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["@import \"54eced5f2b164503\";\n@import \"1e65bf1fcba37015\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorWheel as AriaColorWheel,\n  ColorWheelProps as AriaColorWheelProps,\n  ColorWheelTrack\n} from 'react-aria-components/ColorWheel';\n\nimport {ColorHandle} from './ColorHandle';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps\n  extends\n    Omit<\n      AriaColorWheelProps,\n      | 'children'\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'outerRadius'\n      | 'innerRadius'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps {\n  /**\n   * @default 192\n   */\n  size?: number;\n}\n\nexport const ColorWheelContext =\n  createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(\n  props: ColorWheelProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n  let containerRef = useDOMRef(ref);\n  // TODO: how to do mobile scaling?\n  let {size = 192} = props;\n  let outerRadius = Math.max(size, 175) / 2;\n  let thickness = 24;\n  let innerRadius = outerRadius - 24;\n  return (\n    <AriaColorWheel\n      {...props}\n      outerRadius={outerRadius}\n      innerRadius={innerRadius}\n      ref={containerRef}\n      style={{...UNSAFE_style, width: outerRadius * 2, height: outerRadius * 2}}\n      className={UNSAFE_className + styles}>\n      {({isDisabled, state}) => (\n        <>\n          <ColorWheelTrack\n            style={({defaultStyle, isDisabled}) => ({\n              background: isDisabled ? undefined : defaultStyle.background\n            })}\n            className={style({\n              // Outer border\n              borderRadius: 'full',\n              outlineColor: {\n                default: 'gray-1000/10',\n                forcedColors: 'ButtonBorder'\n              },\n              outlineWidth: 1,\n              outlineOffset: -1,\n              outlineStyle: {\n                default: 'solid',\n                isDisabled: 'none'\n              },\n              backgroundColor: {\n                isDisabled: 'disabled'\n              }\n            })}\n          />\n          <div\n            className={style({\n              // Inner border\n              position: 'absolute',\n              inset: 24,\n              pointerEvents: 'none',\n              borderRadius: 'full',\n              outlineColor: {\n                default: 'gray-1000/10',\n                forcedColors: 'ButtonBorder'\n              },\n              outlineWidth: 1,\n              outlineStyle: {\n                default: 'solid',\n                isDisabled: 'none'\n              }\n            })({isDisabled})}\n          />\n          <ColorHandle\n            containerRef={containerRef}\n            getPosition={() => {\n              let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n              return {\n                x: (outerRadius + x) / (outerRadius * 2),\n                y: (outerRadius + y) / (outerRadius * 2)\n              };\n            }}\n          />\n        </>\n      )}\n    </AriaColorWheel>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.css.map"}