@react-spectrum/s2 3.0.0-nightly-63d4359d6-250427 → 3.0.0-nightly-1dd65ffc5-250429

package/dist/ColorSwatchPicker.css

@@ -1,194 +1,194 @@
 @layer _.a {
-  ._0d {
+  .ma {
     display: flex;
   }
 
-  ._8a {
+  ._3a {
     flex-wrap: wrap;
   }
 
-  .i-59f7mn {
+  .pg {
     row-gap: .125rem;
   }
 
-  .ic {
+  .pb {
     row-gap: .25rem;
   }
 
-  .i-6njx2e {
+  .pWJpoB {
     row-gap: .375rem;
   }
 
-  .j-59f7mn {
+  .ki {
     column-gap: .125rem;
   }
 
-  .jc {
+  .ke {
     column-gap: .25rem;
   }
 
-  .j-6njx2e {
+  .kWJpoB {
     column-gap: .375rem;
   }
 
-  ._Ma {
+  .ta {
     outline-style: none;
   }
 
-  .dx {
+  .Bb {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  ._N-3t1z {
+  ._ya {
     outline-offset: 2px;
   }
 
-  .Vc {
+  .Ka {
     position: relative;
   }
 
-  ._wa {
+  .zf {
     border-start-start-radius: 0;
   }
 
-  ._wb {
+  .zb {
     border-start-start-radius: .25rem;
   }
 
-  ._wf {
+  .za {
     border-start-start-radius: 9999px;
   }
 
-  ._xa {
+  .xf {
     border-start-end-radius: 0;
   }
 
-  ._xb {
+  .xb {
     border-start-end-radius: .25rem;
   }
 
-  ._xf {
+  .xa {
     border-start-end-radius: 9999px;
   }
 
-  ._ya {
+  .wf {
     border-end-start-radius: 0;
   }
 
-  ._yb {
+  .wb {
     border-end-start-radius: .25rem;
   }
 
-  ._yf {
+  .wa {
     border-end-start-radius: 9999px;
   }
 
-  ._za {
+  .yf {
     border-end-end-radius: 0;
   }
 
-  ._zb {
+  .yb {
     border-end-end-radius: .25rem;
   }
 
-  ._zf {
+  .ya {
     border-end-end-radius: 9999px;
   }
 
-  .Va {
+  .Kb {
     position: absolute;
   }
 
-  .__Ca {
+  ._1a {
     pointer-events: none;
   }
 
-  .Ya {
+  .Ha {
     top: 0;
   }
 
-  ._aa {
+  .Ga {
     bottom: 0;
   }
 
-  .Wa {
+  .Ja {
     inset-inline-start: 0;
   }
 
-  .Xa {
+  .Ia {
     inset-inline-end: 0;
   }
 
-  .__oa {
+  ._qa {
     box-sizing: border-box;
   }
 
-  .co {
+  .qa {
     border-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .wa {
+  .Ra {
     border-style: solid;
   }
 
-  .uc {
+  ._nb {
     border-top-width: 2px;
   }
 
-  .vc {
+  ._ma {
     border-bottom-width: 2px;
   }
 
-  .sc {
+  ._ta {
     border-inline-start-width: 2px;
   }
 
-  .tc {
+  ._sa {
     border-inline-end-width: 2px;
   }
 
-  .dd {
+  .Bi {
     outline-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
   }
 
-  ._Mb {
+  .tb {
     outline-style: solid;
   }
 
-  ._Oc {
+  ._ga {
     outline-width: 2px;
   }
 
-  ._N-3hmpy {
+  ._yd {
     outline-offset: -4px;
   }
 
-  ._Ab {
+  ._0a {
     forced-color-adjust: none;
   }
 
-  ._w-17zqamw {
+  .z40ub4c {
     border-start-start-radius: inherit;
   }
 
-  ._x-17zqamw {
+  .x40ub4c {
     border-start-end-radius: inherit;
   }
 
-  ._y-17zqamw {
+  .w40ub4c {
     border-end-start-radius: inherit;
   }
 
-  ._z-17zqamw {
+  .y40ub4c {
     border-end-end-radius: inherit;
   }
 }
 
 @layer _.b;
 
-@layer _.b.a {
+@layer _.b.b {
   @media (forced-colors: active) {
-    .da_____M {
+    .Bba {
       outline-color: highlight;
     }
   }

package/dist/ColorSwatchPicker.css.map

@@ -1 +1 @@
-{"mappings":"AC6DoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtCa;;AAsBJ;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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\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 '@react-spectrum/utils';\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      })({...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":"AC6DoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhBS;;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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\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 '@react-spectrum/utils';\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      })({...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"}

package/dist/ColorSwatchPicker.mjs

@@ -31,17 +31,16 @@ const $ba9c901b6c815fb9$export$b46792416e3d8515 = /*#__PURE__*/ (0, $bOBHx$forwa
         ...otherProps,
         ref: domRef,
         className: UNSAFE_className + function anonymous(props, overrides) {
-            let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
-            rules += matches.join('');
-            rules += ' _0d';
-            rules += ' _8a';
-            if (props.density === "spacious") rules += ' i-6njx2e';
-            else if (props.density === "regular") rules += ' ic';
-            else if (props.density === "compact") rules += ' i-59f7mn';
-            if (props.density === "spacious") rules += ' j-6njx2e';
-            else if (props.density === "regular") rules += ' jc';
-            else if (props.density === "compact") rules += ' j-59f7mn';
+            let rules = " ";
+            rules += ((overrides || '').match(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g) || []).join('');
+            rules += ' ma';
+            rules += ' _3a';
+            if (props.density === "spacious") rules += ' pWJpoB';
+            else if (props.density === "regular") rules += ' pb';
+            else if (props.density === "compact") rules += ' pg';
+            if (props.density === "spacious") rules += ' kWJpoB';
+            else if (props.density === "regular") rules += ' ke';
+            else if (props.density === "compact") rules += ' ki';
             return rules;
         }({
             density: density
@@ -60,26 +59,26 @@ function $ba9c901b6c815fb9$var$useWrapper(swatch, color, rounding) {
     return /*#__PURE__*/ (0, $bOBHx$jsx)((0, $bOBHx$ColorSwatchPickerItem), {
         color: color,
         className: (renderProps)=>(function anonymous(props) {
-                let rules = " .";
-                if (props.isFocusVisible) rules += ' _Mb';
-                else rules += ' _Ma';
-                rules += ' da_____M';
-                rules += ' dx';
-                rules += ' _Oc';
-                rules += ' _N-3t1z';
-                rules += ' Vc';
-                if (props.rounding === "full") rules += ' _wf';
-                else if (props.rounding === "default") rules += ' _wb';
-                else if (props.rounding === "none") rules += ' _wa';
-                if (props.rounding === "full") rules += ' _xf';
-                else if (props.rounding === "default") rules += ' _xb';
-                else if (props.rounding === "none") rules += ' _xa';
-                if (props.rounding === "full") rules += ' _yf';
-                else if (props.rounding === "default") rules += ' _yb';
-                else if (props.rounding === "none") rules += ' _ya';
-                if (props.rounding === "full") rules += ' _zf';
-                else if (props.rounding === "default") rules += ' _zb';
-                else if (props.rounding === "none") rules += ' _za';
+                let rules = " ";
+                if (props.isFocusVisible) rules += ' tb';
+                else rules += ' ta';
+                rules += ' Bb';
+                rules += ' Bba';
+                rules += ' _ga';
+                rules += ' _ya';
+                rules += ' Ka';
+                if (props.rounding === "full") rules += ' za';
+                else if (props.rounding === "default") rules += ' zb';
+                else if (props.rounding === "none") rules += ' zf';
+                if (props.rounding === "full") rules += ' xa';
+                else if (props.rounding === "default") rules += ' xb';
+                else if (props.rounding === "none") rules += ' xf';
+                if (props.rounding === "full") rules += ' wa';
+                else if (props.rounding === "default") rules += ' wb';
+                else if (props.rounding === "none") rules += ' wf';
+                if (props.rounding === "full") rules += ' ya';
+                else if (props.rounding === "default") rules += ' yb';
+                else if (props.rounding === "none") rules += ' yf';
                 return rules;
             })({
                 ...renderProps,
@@ -90,7 +89,7 @@ function $ba9c901b6c815fb9$var$useWrapper(swatch, color, rounding) {
                     swatch,
                     isSelected && /*#__PURE__*/ (0, $bOBHx$jsx)("div", {
                         "aria-hidden": true,
-                        className: " Va __Ca Ya _aa Wa Xa __oa co wa uc vc sc tc dd _Mb _Oc _N-3hmpy _Ab _w-17zqamw _x-17zqamw _y-17zqamw _z-17zqamw"
+                        className: " Kb _1a Ha Ga Ja Ia _qa qa Ra _nb _ma _ta _sa Bi tb _ga _yd _0a z40ub4c x40ub4c w40ub4c y40ub4c"
                     })
                 ]
             })

package/dist/ColorSwatchPicker.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,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,gBAAQ,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;;;;;;;;;;;;;;;;;;;;;;eAUvB;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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\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 '@react-spectrum/utils';\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      })({...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;;;;;;AA+BM,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,gBAAQ,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;;;;;;;;;;;;;;;;;;;;;;eAUvB;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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\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 '@react-spectrum/utils';\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      })({...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"}

package/dist/ColorWheel.cjs

@@ -53,39 +53,39 @@ const $0c1e31ce388fe468$export$f80663f808113381 = /*#__PURE__*/ (0, $lMAHP$react
                                 background: isDisabled ? undefined : defaultStyle.background
                             }),
                         className: function anonymous(props) {
-                            let rules = " .";
-                            rules += ' _wf';
-                            rules += ' _xf';
-                            rules += ' _yf';
-                            rules += ' _zf';
-                            rules += ' da_____I';
-                            rules += ' dp10';
-                            rules += ' _Ob';
-                            rules += ' _N-3hmpv';
-                            if (props.isDisabled) rules += ' _Ma';
-                            else rules += ' _Mb';
-                            if (props.isDisabled) rules += ' bg';
+                            let rules = " ";
+                            rules += ' za';
+                            rules += ' xa';
+                            rules += ' wa';
+                            rules += ' ya';
+                            rules += ' Be';
+                            rules += ' Bbc';
+                            rules += ' _gb';
+                            rules += ' _yc';
+                            if (props.isDisabled) rules += ' ta';
+                            else rules += ' tb';
+                            if (props.isDisabled) rules += ' ca';
                             return rules;
                         }
                     }),
                     /*#__PURE__*/ (0, $lMAHP$reactjsxruntime.jsx)("div", {
                         className: function anonymous(props) {
-                            let rules = " .";
-                            rules += ' Va';
-                            rules += ' Yh';
-                            rules += ' _ah';
-                            rules += ' Wh';
-                            rules += ' Xh';
-                            rules += ' __Ca';
-                            rules += ' _wf';
-                            rules += ' _xf';
-                            rules += ' _yf';
-                            rules += ' _zf';
-                            rules += ' da_____I';
-                            rules += ' dp10';
-                            rules += ' _Ob';
-                            if (props.isDisabled) rules += ' _Ma';
-                            else rules += ' _Mb';
+                            let rules = " ";
+                            rules += ' Kb';
+                            rules += ' Hb';
+                            rules += ' Gb';
+                            rules += ' Jc';
+                            rules += ' Ic';
+                            rules += ' _1a';
+                            rules += ' za';
+                            rules += ' xa';
+                            rules += ' wa';
+                            rules += ' ya';
+                            rules += ' Be';
+                            rules += ' Bbc';
+                            rules += ' _gb';
+                            if (props.isDisabled) rules += ' ta';
+                            else rules += ' tb';
                             return rules;
                         }({
                             isDisabled: isDisabled

package/dist/ColorWheel.css

@@ -1,74 +1,74 @@
 @layer _.a {
-  ._N-3hmpv {
+  ._yc {
     outline-offset: -1px;
   }
 
-  .bg {
+  .ca {
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .Va {
+  .Kb {
     position: absolute;
   }
 
-  .Yh {
+  .Hb {
     top: 1.5rem;
   }
 
-  ._ah {
+  .Gb {
     bottom: 1.5rem;
   }
 
-  .Wh {
+  .Jc {
     inset-inline-start: 1.5rem;
   }
 
-  .Xh {
+  .Ic {
     inset-inline-end: 1.5rem;
   }
 
-  .__Ca {
+  ._1a {
     pointer-events: none;
   }
 
-  ._wf {
+  .za {
     border-start-start-radius: 9999px;
   }
 
-  ._xf {
+  .xa {
     border-start-end-radius: 9999px;
   }
 
-  ._yf {
+  .wa {
     border-end-start-radius: 9999px;
   }
 
-  ._zf {
+  .ya {
     border-end-end-radius: 9999px;
   }
 
-  .dp10 {
+  .Be {
     outline-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff1a);
   }
 
-  ._Ob {
+  ._gb {
     outline-width: 1px;
   }
 
-  ._Mb {
+  .tb {
     outline-style: solid;
   }
 
-  ._Ma {
+  .ta {
     outline-style: none;
   }
 }
 
 @layer _.b;
 
-@layer _.b.a {
+@layer _.b.b {
   @media (forced-colors: active) {
-    .da_____I {
+    .Bbc {
       outline-color: buttonborder;
     }
   }

package/dist/ColorWheel.mjs

@@ -46,39 +46,39 @@ const $4a6afc95235907f0$export$f80663f808113381 = /*#__PURE__*/ (0, $j8ecy$forwa
                                 background: isDisabled ? undefined : defaultStyle.background
                             }),
                         className: function anonymous(props) {
-                            let rules = " .";
-                            rules += ' _wf';
-                            rules += ' _xf';
-                            rules += ' _yf';
-                            rules += ' _zf';
-                            rules += ' da_____I';
-                            rules += ' dp10';
-                            rules += ' _Ob';
-                            rules += ' _N-3hmpv';
-                            if (props.isDisabled) rules += ' _Ma';
-                            else rules += ' _Mb';
-                            if (props.isDisabled) rules += ' bg';
+                            let rules = " ";
+                            rules += ' za';
+                            rules += ' xa';
+                            rules += ' wa';
+                            rules += ' ya';
+                            rules += ' Be';
+                            rules += ' Bbc';
+                            rules += ' _gb';
+                            rules += ' _yc';
+                            if (props.isDisabled) rules += ' ta';
+                            else rules += ' tb';
+                            if (props.isDisabled) rules += ' ca';
                             return rules;
                         }
                     }),
                     /*#__PURE__*/ (0, $j8ecy$jsx)("div", {
                         className: function anonymous(props) {
-                            let rules = " .";
-                            rules += ' Va';
-                            rules += ' Yh';
-                            rules += ' _ah';
-                            rules += ' Wh';
-                            rules += ' Xh';
-                            rules += ' __Ca';
-                            rules += ' _wf';
-                            rules += ' _xf';
-                            rules += ' _yf';
-                            rules += ' _zf';
-                            rules += ' da_____I';
-                            rules += ' dp10';
-                            rules += ' _Ob';
-                            if (props.isDisabled) rules += ' _Ma';
-                            else rules += ' _Mb';
+                            let rules = " ";
+                            rules += ' Kb';
+                            rules += ' Hb';
+                            rules += ' Gb';
+                            rules += ' Jc';
+                            rules += ' Ic';
+                            rules += ' _1a';
+                            rules += ' za';
+                            rules += ' xa';
+                            rules += ' wa';
+                            rules += ' ya';
+                            rules += ' Be';
+                            rules += ' Bbc';
+                            rules += ' _gb';
+                            if (props.isDisabled) rules += ' ta';
+                            else rules += ' tb';
                             return rules;
                         }({
                             isDisabled: isDisabled