@react-spectrum/s2 1.0.0 → 1.2.0

package/dist/ColorSwatch.mjs

@@ -43,51 +43,51 @@ const $cd9e1720baab3945$export$cae13e90592f246a = /*#__PURE__*/ (0, $b2Wh1$forwa
             let rules = " ";
             let width = false;
             let height = false;
-            let matches = (overrides || '').matchAll(/(?:^|\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|F|M|K)[^\s]+/g);
+            let matches = String(overrides || '').matchAll(/(?:^|\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|F|M|K)[^\s]+/g);
             for (let p of matches){
                 if (p[1] === "Z") width = true;
                 if (p[1] === "F") height = true;
                 rules += p[0];
             }
             if (props.size === "L") {
-                if (!width) rules += ' Zw1';
+                if (!width) rules += ' Zw12';
             } else if (props.size === "M") {
-                if (!width) rules += ' ZC1';
+                if (!width) rules += ' ZC12';
             } else if (props.size === "S") {
-                if (!width) rules += ' Zo1';
+                if (!width) rules += ' Zo12';
             } else if (props.size === "XS") {
-                if (!width) rules += ' Zu1';
+                if (!width) rules += ' Zu12';
             }
             if (props.size === "L") {
-                if (!height) rules += ' Fv1';
+                if (!height) rules += ' Fv12';
             } else if (props.size === "M") {
-                if (!height) rules += ' Fx1';
+                if (!height) rules += ' Fx12';
             } else if (props.size === "S") {
-                if (!height) rules += ' Fp1';
+                if (!height) rules += ' Fp12';
             } else if (props.size === "XS") {
-                if (!height) rules += ' Ft1';
+                if (!height) rules += ' Ft12';
             }
-            if (props.rounding === "full") rules += ' og1';
-            else if (props.rounding === "none") rules += ' od1';
-            else if (props.rounding === "default") rules += ' oa1';
-            if (props.rounding === "full") rules += ' ng1';
-            else if (props.rounding === "none") rules += ' nd1';
-            else if (props.rounding === "default") rules += ' na1';
-            if (props.rounding === "full") rules += ' kg1';
-            else if (props.rounding === "none") rules += ' kd1';
-            else if (props.rounding === "default") rules += ' ka1';
-            if (props.rounding === "full") rules += ' jg1';
-            else if (props.rounding === "none") rules += ' jd1';
-            else if (props.rounding === "default") rules += ' ja1';
-            rules += ' iz1';
-            rules += ' _kb1';
-            rules += ' hb1';
-            rules += ' mb1';
-            rules += ' lb1';
-            rules += ' _jf1';
-            rules += ' _oa1';
-            rules += ' _yb1';
-            rules += ' -_8LZfRc-pq1';
+            if (props.rounding === "full") rules += ' og12';
+            else if (props.rounding === "none") rules += ' od12';
+            else if (props.rounding === "default") rules += ' oa12';
+            if (props.rounding === "full") rules += ' ng12';
+            else if (props.rounding === "none") rules += ' nd12';
+            else if (props.rounding === "default") rules += ' na12';
+            if (props.rounding === "full") rules += ' kg12';
+            else if (props.rounding === "none") rules += ' kd12';
+            else if (props.rounding === "default") rules += ' ka12';
+            if (props.rounding === "full") rules += ' jg12';
+            else if (props.rounding === "none") rules += ' jd12';
+            else if (props.rounding === "default") rules += ' ja12';
+            rules += ' iz12';
+            rules += ' _kb12';
+            rules += ' hb12';
+            rules += ' mb12';
+            rules += ' lb12';
+            rules += ' _jf12';
+            rules += ' _oa12';
+            rules += ' _yb12';
+            rules += ' -_8LZfRc-pq12';
             return rules;
         }({
             size: size,

package/dist/ColorSwatch.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  Color,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  Color,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.mjs.map"}

package/dist/ColorSwatchPicker.cjs

@@ -39,15 +39,15 @@ const $a267e3efa7024819$export$b46792416e3d8515 = /*#__PURE__*/ (0, $7eldL$react
         ref: domRef,
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " ";
-            rules += ((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 += ' sd1';
-            rules += ' _wb1';
-            if (props.density === "spacious") rules += ' UWJpoB1';
-            else if (props.density === "regular") rules += ' Ub1';
-            else if (props.density === "compact") rules += ' Ua1';
-            if (props.density === "spacious") rules += ' qWJpoB1';
-            else if (props.density === "regular") rules += ' qb1';
-            else if (props.density === "compact") rules += ' qa1';
+            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 += ' sd12';
+            rules += ' _wb12';
+            if (props.density === "spacious") rules += ' UWJpoB12';
+            else if (props.density === "regular") rules += ' Ub12';
+            else if (props.density === "compact") rules += ' Ua12';
+            if (props.density === "spacious") rules += ' qWJpoB12';
+            else if (props.density === "regular") rules += ' qb12';
+            else if (props.density === "compact") rules += ' qa12';
             return rules;
         }({
             density: density
@@ -67,26 +67,26 @@ function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
         color: color,
         className: (renderProps)=>(function anonymous(props) {
                 let rules = " ";
-                if (props.isFocusVisible) rules += ' _Lf1';
-                else rules += ' _Le1';
-                rules += ' Oh1';
-                rules += ' Olc1';
-                rules += ' _Mc1';
-                rules += ' _Kd1';
-                rules += ' _Pc1';
-                if (props.rounding === "full") rules += ' og1';
-                else if (props.rounding === "default") rules += ' oa1';
-                else if (props.rounding === "none") rules += ' od1';
-                if (props.rounding === "full") rules += ' ng1';
-                else if (props.rounding === "default") rules += ' na1';
-                else if (props.rounding === "none") rules += ' nd1';
-                if (props.rounding === "full") rules += ' kg1';
-                else if (props.rounding === "default") rules += ' ka1';
-                else if (props.rounding === "none") rules += ' kd1';
-                if (props.rounding === "full") rules += ' jg1';
-                else if (props.rounding === "default") rules += ' ja1';
-                else if (props.rounding === "none") rules += ' jd1';
-                rules += ' __ca1';
+                if (props.isFocusVisible) rules += ' _Lf12';
+                else rules += ' _Le12';
+                rules += ' Oh12';
+                rules += ' Olc12';
+                rules += ' _Mc12';
+                rules += ' _Kd12';
+                rules += ' _Pc12';
+                if (props.rounding === "full") rules += ' og12';
+                else if (props.rounding === "default") rules += ' oa12';
+                else if (props.rounding === "none") rules += ' od12';
+                if (props.rounding === "full") rules += ' ng12';
+                else if (props.rounding === "default") rules += ' na12';
+                else if (props.rounding === "none") rules += ' nd12';
+                if (props.rounding === "full") rules += ' kg12';
+                else if (props.rounding === "default") rules += ' ka12';
+                else if (props.rounding === "none") rules += ' kd12';
+                if (props.rounding === "full") rules += ' jg12';
+                else if (props.rounding === "default") rules += ' ja12';
+                else if (props.rounding === "none") rules += ' jd12';
+                rules += ' __ca12';
                 return rules;
             })({
                 ...renderProps,
@@ -97,7 +97,7 @@ function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
                     swatch,
                     isSelected && /*#__PURE__*/ (0, $7eldL$reactjsxruntime.jsx)("div", {
                         "aria-hidden": true,
-                        className: " _Pa1 _Ob1 Wr1 _lr1 _Ar1 _zr1 _oa1 in1 _jf1 _kc1 hc1 mc1 lc1 Og1 _Lf1 _Mc1 _Kc1 _yb1 oi1 ni1 ki1 ji1"
+                        className: " _Pa12 _Ob12 Wr12 _lr12 _Ar12 _zr12 _oa12 in12 _jf12 _kc12 hc12 mc12 lc12 Og12 _Lf12 _Mc12 _Kc12 _yb12 oi12 ni12 ki12 ji12"
                     })
                 ]
             })

package/dist/ColorSwatchPicker.css

@@ -1,189 +1,189 @@
 @layer _.a {
-  .sd1 {
+  .sd12 {
     display: flex;
   }
 
-  ._wb1 {
+  ._wb12 {
     flex-wrap: wrap;
   }
 
-  .Ua1 {
+  .Ua12 {
     row-gap: .125rem;
   }
 
-  .Ub1 {
+  .Ub12 {
     row-gap: .25rem;
   }
 
-  .UWJpoB1 {
+  .UWJpoB12 {
     row-gap: .375rem;
   }
 
-  .qa1 {
+  .qa12 {
     column-gap: .125rem;
   }
 
-  .qb1 {
+  .qb12 {
     column-gap: .25rem;
   }
 
-  .qWJpoB1 {
+  .qWJpoB12 {
     column-gap: .375rem;
   }
 
-  ._Le1 {
+  ._Le12 {
     outline-style: none;
   }
 
-  .Oh1 {
+  .Oh12 {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  ._Kd1 {
+  ._Kd12 {
     outline-offset: 2px;
   }
 
-  ._Pc1 {
+  ._Pc12 {
     position: relative;
   }
 
-  .od1 {
+  .od12 {
     border-start-start-radius: 0;
   }
 
-  .oa1 {
+  .oa12 {
     border-start-start-radius: .25rem;
   }
 
-  .og1 {
+  .og12 {
     border-start-start-radius: 9999px;
   }
 
-  .nd1 {
+  .nd12 {
     border-start-end-radius: 0;
   }
 
-  .na1 {
+  .na12 {
     border-start-end-radius: .25rem;
   }
 
-  .ng1 {
+  .ng12 {
     border-start-end-radius: 9999px;
   }
 
-  .kd1 {
+  .kd12 {
     border-end-start-radius: 0;
   }
 
-  .ka1 {
+  .ka12 {
     border-end-start-radius: .25rem;
   }
 
-  .kg1 {
+  .kg12 {
     border-end-start-radius: 9999px;
   }
 
-  .jd1 {
+  .jd12 {
     border-end-end-radius: 0;
   }
 
-  .ja1 {
+  .ja12 {
     border-end-end-radius: .25rem;
   }
 
-  .jg1 {
+  .jg12 {
     border-end-end-radius: 9999px;
   }
 
-  .__ca1 {
+  .__ca12 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  ._Pa1 {
+  ._Pa12 {
     position: absolute;
   }
 
-  ._Ob1 {
+  ._Ob12 {
     pointer-events: none;
   }
 
-  .Wr1 {
+  .Wr12 {
     top: 0;
   }
 
-  ._lr1 {
+  ._lr12 {
     bottom: 0;
   }
 
-  ._Ar1 {
+  ._Ar12 {
     inset-inline-start: 0;
   }
 
-  ._zr1 {
+  ._zr12 {
     inset-inline-end: 0;
   }
 
-  ._oa1 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  .in1 {
+  .in12 {
     border-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  ._jf1 {
+  ._jf12 {
     border-style: solid;
   }
 
-  ._kc1 {
+  ._kc12 {
     border-top-width: 2px;
   }
 
-  .hc1 {
+  .hc12 {
     border-bottom-width: 2px;
   }
 
-  .mc1 {
+  .mc12 {
     border-inline-start-width: 2px;
   }
 
-  .lc1 {
+  .lc12 {
     border-inline-end-width: 2px;
   }
 
-  .Og1 {
+  .Og12 {
     outline-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
   }
 
-  ._Lf1 {
+  ._Lf12 {
     outline-style: solid;
   }
 
-  ._Mc1 {
+  ._Mc12 {
     outline-width: 2px;
   }
 
-  ._Kc1 {
+  ._Kc12 {
     outline-offset: -4px;
   }
 
-  ._yb1 {
+  ._yb12 {
     forced-color-adjust: none;
   }
 
-  .oi1 {
+  .oi12 {
     border-start-start-radius: inherit;
   }
 
-  .ni1 {
+  .ni12 {
     border-start-end-radius: inherit;
   }
 
-  .ki1 {
+  .ki12 {
     border-end-start-radius: inherit;
   }
 
-  .ji1 {
+  .ji12 {
     border-end-end-radius: inherit;
   }
 }
@@ -192,7 +192,7 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Olc1 {
+    .Olc12 {
       outline-color: highlight;
     }
   }

package/dist/ColorSwatchPicker.mjs

@@ -32,15 +32,15 @@ const $ba9c901b6c815fb9$export$b46792416e3d8515 = /*#__PURE__*/ (0, $bOBHx$forwa
         ref: domRef,
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " ";
-            rules += ((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 += ' sd1';
-            rules += ' _wb1';
-            if (props.density === "spacious") rules += ' UWJpoB1';
-            else if (props.density === "regular") rules += ' Ub1';
-            else if (props.density === "compact") rules += ' Ua1';
-            if (props.density === "spacious") rules += ' qWJpoB1';
-            else if (props.density === "regular") rules += ' qb1';
-            else if (props.density === "compact") rules += ' qa1';
+            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 += ' sd12';
+            rules += ' _wb12';
+            if (props.density === "spacious") rules += ' UWJpoB12';
+            else if (props.density === "regular") rules += ' Ub12';
+            else if (props.density === "compact") rules += ' Ua12';
+            if (props.density === "spacious") rules += ' qWJpoB12';
+            else if (props.density === "regular") rules += ' qb12';
+            else if (props.density === "compact") rules += ' qa12';
             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 += ' _Lf1';
-                else rules += ' _Le1';
-                rules += ' Oh1';
-                rules += ' Olc1';
-                rules += ' _Mc1';
-                rules += ' _Kd1';
-                rules += ' _Pc1';
-                if (props.rounding === "full") rules += ' og1';
-                else if (props.rounding === "default") rules += ' oa1';
-                else if (props.rounding === "none") rules += ' od1';
-                if (props.rounding === "full") rules += ' ng1';
-                else if (props.rounding === "default") rules += ' na1';
-                else if (props.rounding === "none") rules += ' nd1';
-                if (props.rounding === "full") rules += ' kg1';
-                else if (props.rounding === "default") rules += ' ka1';
-                else if (props.rounding === "none") rules += ' kd1';
-                if (props.rounding === "full") rules += ' jg1';
-                else if (props.rounding === "default") rules += ' ja1';
-                else if (props.rounding === "none") rules += ' jd1';
-                rules += ' __ca1';
+                if (props.isFocusVisible) rules += ' _Lf12';
+                else rules += ' _Le12';
+                rules += ' Oh12';
+                rules += ' Olc12';
+                rules += ' _Mc12';
+                rules += ' _Kd12';
+                rules += ' _Pc12';
+                if (props.rounding === "full") rules += ' og12';
+                else if (props.rounding === "default") rules += ' oa12';
+                else if (props.rounding === "none") rules += ' od12';
+                if (props.rounding === "full") rules += ' ng12';
+                else if (props.rounding === "default") rules += ' na12';
+                else if (props.rounding === "none") rules += ' nd12';
+                if (props.rounding === "full") rules += ' kg12';
+                else if (props.rounding === "default") rules += ' ka12';
+                else if (props.rounding === "none") rules += ' kd12';
+                if (props.rounding === "full") rules += ' jg12';
+                else if (props.rounding === "default") rules += ' ja12';
+                else if (props.rounding === "none") rules += ' jd12';
+                rules += ' __ca12';
                 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: " _Pa1 _Ob1 Wr1 _lr1 _Ar1 _zr1 _oa1 in1 _jf1 _kc1 hc1 mc1 lc1 Og1 _Lf1 _Mc1 _Kc1 _yb1 oi1 ni1 ki1 ji1"
+                        className: " _Pa12 _Ob12 Wr12 _lr12 _Ar12 _zr12 _oa12 in12 _jf12 _kc12 hc12 mc12 lc12 Og12 _Lf12 _Mc12 _Kc12 _yb12 oi12 ni12 ki12 ji12"
                     })
                 ]
             })

package/dist/ColorWheel.cjs

@@ -44,7 +44,11 @@ const $0c1e31ce388fe468$export$f80663f808113381 = /*#__PURE__*/ (0, $lMAHP$react
         outerRadius: outerRadius,
         innerRadius: innerRadius,
         ref: containerRef,
-        style: UNSAFE_style,
+        style: {
+            ...UNSAFE_style,
+            width: outerRadius * 2,
+            height: outerRadius * 2
+        },
         className: UNSAFE_className + styles,
         children: ({ isDisabled: isDisabled, state: state })=>/*#__PURE__*/ (0, $lMAHP$reactjsxruntime.jsxs)((0, $lMAHP$reactjsxruntime.Fragment), {
                 children: [
@@ -54,38 +58,38 @@ const $0c1e31ce388fe468$export$f80663f808113381 = /*#__PURE__*/ (0, $lMAHP$react
                             }),
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' og1';
-                            rules += ' ng1';
-                            rules += ' kg1';
-                            rules += ' jg1';
-                            rules += ' Oi1';
-                            rules += ' Ola1';
-                            rules += ' _Mb1';
-                            rules += ' _Ka1';
-                            if (props.isDisabled) rules += ' _Le1';
-                            else rules += ' _Lf1';
-                            if (props.isDisabled) rules += ' gH1';
+                            rules += ' og12';
+                            rules += ' ng12';
+                            rules += ' kg12';
+                            rules += ' jg12';
+                            rules += ' Oi12';
+                            rules += ' Ola12';
+                            rules += ' _Mb12';
+                            rules += ' _Ka12';
+                            if (props.isDisabled) rules += ' _Le12';
+                            else rules += ' _Lf12';
+                            if (props.isDisabled) rules += ' gH12';
                             return rules;
                         }
                     }),
                     /*#__PURE__*/ (0, $lMAHP$reactjsxruntime.jsx)("div", {
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' _Pa1';
-                            rules += ' Ww1';
-                            rules += ' _lw1';
-                            rules += ' _Aw1';
-                            rules += ' _zw1';
-                            rules += ' _Ob1';
-                            rules += ' og1';
-                            rules += ' ng1';
-                            rules += ' kg1';
-                            rules += ' jg1';
-                            rules += ' Oi1';
-                            rules += ' Ola1';
-                            rules += ' _Mb1';
-                            if (props.isDisabled) rules += ' _Le1';
-                            else rules += ' _Lf1';
+                            rules += ' _Pa12';
+                            rules += ' Ww12';
+                            rules += ' _lw12';
+                            rules += ' _Aw12';
+                            rules += ' _zw12';
+                            rules += ' _Ob12';
+                            rules += ' og12';
+                            rules += ' ng12';
+                            rules += ' kg12';
+                            rules += ' jg12';
+                            rules += ' Oi12';
+                            rules += ' Ola12';
+                            rules += ' _Mb12';
+                            if (props.isDisabled) rules += ' _Le12';
+                            else rules += ' _Lf12';
                             return rules;
                         }({
                             isDisabled: isDisabled

package/dist/ColorWheel.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAuBM,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,qCAAa;QACX,GAAG,KAAK;QACT,aAAa;QACb,aAAa;QACb,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;kBAC7B,CAAC,cAAC,UAAU,SAAE,KAAK,EAAC,iBAAM;;kCACzB,gCAAC,CAAA,GAAA,0CAAc;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  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\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 '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | '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}\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;;;;;;AAuBM,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,qCAAa;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,0CAAc;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  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\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 '@react-spectrum/utils';\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"}