@react-spectrum/s2 0.5.0 → 0.7.0

package/dist/ColorSwatch.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   .lE {
     width: calc(1rem * var(--s2-scale));
@@ -35,51 +31,51 @@
     height: calc(2.5rem * var(--s2-scale));
   }
 
-  ._vb {
+  ._wb {
     border-start-start-radius: .25rem;
   }
 
-  ._va {
+  ._wa {
     border-start-start-radius: 0;
   }
 
-  ._vf {
+  ._wf {
     border-start-start-radius: 9999px;
   }
 
-  ._wb {
+  ._xb {
     border-start-end-radius: .25rem;
   }
 
-  ._wa {
+  ._xa {
     border-start-end-radius: 0;
   }
 
-  ._wf {
+  ._xf {
     border-start-end-radius: 9999px;
   }
 
-  ._xb {
+  ._yb {
     border-end-start-radius: .25rem;
   }
 
-  ._xa {
+  ._ya {
     border-end-start-radius: 0;
   }
 
-  ._xf {
+  ._yf {
     border-end-start-radius: 9999px;
   }
 
-  ._yb {
+  ._zb {
     border-end-end-radius: .25rem;
   }
 
-  ._ya {
+  ._za {
     border-end-end-radius: 0;
   }
 
-  ._yf {
+  ._zf {
     border-end-end-radius: 9999px;
   }
 
@@ -107,11 +103,11 @@
     border-style: solid;
   }
 
-  .__na {
+  .__oa {
     box-sizing: border-box;
   }
 
-  ._zb {
+  ._Ab {
     forced-color-adjust: none;
   }
 
@@ -120,5 +116,5 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 /*# sourceMappingURL=ColorSwatch.css.map */

package/dist/ColorSwatch.css.map

@@ -1 +1 @@
-{"mappings":"AAwEiB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","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  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} 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'>, 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<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\nfunction 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\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nlet _ColorSwatch = forwardRef(ColorSwatch);\nexport {_ColorSwatch as ColorSwatch};\n"],"names":[],"version":3,"file":"ColorSwatch.css.map"}
+{"mappings":"AA2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","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} 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'>, 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.css.map"}

package/dist/ColorSwatch.mjs

@@ -2,7 +2,7 @@ import "./ColorSwatch.css";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $b2Wh1$jsx} from "react/jsx-runtime";
 import {parseColor as $b2Wh1$parseColor, ColorSwatch as $b2Wh1$ColorSwatch} from "react-aria-components";
-import {createContext as $b2Wh1$createContext, useContext as $b2Wh1$useContext, useMemo as $b2Wh1$useMemo, forwardRef as $b2Wh1$forwardRef} from "react";
+import {createContext as $b2Wh1$createContext, forwardRef as $b2Wh1$forwardRef, useContext as $b2Wh1$useContext, useMemo as $b2Wh1$useMemo} from "react";
 import {useDOMRef as $b2Wh1$useDOMRef} from "@react-spectrum/utils";
 
 /*
@@ -22,7 +22,7 @@ import {useDOMRef as $b2Wh1$useDOMRef} from "@react-spectrum/utils";
 
 const $cd9e1720baab3945$export$83cc445538396800 = /*#__PURE__*/ (0, $b2Wh1$createContext)(null);
 const $cd9e1720baab3945$export$2d9e1fe7b5c0ceb6 = /*#__PURE__*/ (0, $b2Wh1$createContext)(null);
-function $cd9e1720baab3945$var$ColorSwatch(props, ref) {
+const $cd9e1720baab3945$export$cae13e90592f246a = /*#__PURE__*/ (0, $b2Wh1$forwardRef)(function ColorSwatch(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $cd9e1720baab3945$export$83cc445538396800);
     let domRef = (0, $b2Wh1$useDOMRef)(ref);
     let ctx = (0, $b2Wh1$useContext)($cd9e1720baab3945$export$2d9e1fe7b5c0ceb6);
@@ -41,7 +41,7 @@ function $cd9e1720baab3945$var$ColorSwatch(props, ref) {
             }),
         className: function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
+            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|k|o|p)[^\s]+/g) || [];
             rules += matches.join('');
             let $l = false;
             let $k = false;
@@ -61,9 +61,6 @@ function $cd9e1720baab3945$var$ColorSwatch(props, ref) {
                 else if (props.size === "S") rules += ' kM';
                 else if (props.size === "XS") rules += ' kE';
             }
-            if (props.rounding === "full") rules += ' _vf';
-            else if (props.rounding === "none") rules += ' _va';
-            else if (props.rounding === "default") rules += ' _vb';
             if (props.rounding === "full") rules += ' _wf';
             else if (props.rounding === "none") rules += ' _wa';
             else if (props.rounding === "default") rules += ' _wb';
@@ -73,14 +70,17 @@ function $cd9e1720baab3945$var$ColorSwatch(props, ref) {
             if (props.rounding === "full") rules += ' _yf';
             else if (props.rounding === "none") rules += ' _ya';
             else if (props.rounding === "default") rules += ' _yb';
+            if (props.rounding === "full") rules += ' _zf';
+            else if (props.rounding === "none") rules += ' _za';
+            else if (props.rounding === "default") rules += ' _zb';
             rules += ' cp42';
             rules += ' ub';
             rules += ' vb';
             rules += ' sb';
             rules += ' tb';
             rules += ' wa';
-            rules += ' __na';
-            rules += ' _zb';
+            rules += ' __oa';
+            rules += ' _Ab';
             rules += ' -_14u0212_a-O';
             return rules;
         }({
@@ -91,10 +91,7 @@ function $cd9e1720baab3945$var$ColorSwatch(props, ref) {
     // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
     if (ctx) return ctx.useWrapper(swatch, color, rounding);
     return swatch;
-}
-/**
- * A ColorSwatch displays a preview of a selected color.
- */ let $cd9e1720baab3945$export$cae13e90592f246a = /*#__PURE__*/ (0, $b2Wh1$forwardRef)($cd9e1720baab3945$var$ColorSwatch);
+});
 
 
 export {$cd9e1720baab3945$export$83cc445538396800 as ColorSwatchContext, $cd9e1720baab3945$export$2d9e1fe7b5c0ceb6 as InternalColorSwatchContext, $cd9e1720baab3945$export$cae13e90592f246a as ColorSwatch};

package/dist/ColorSwatch.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AACtG,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAEhG,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,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;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","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  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} 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'>, 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<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\nfunction 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\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nlet _ColorSwatch = forwardRef(ColorSwatch);\nexport {_ColorSwatch as ColorSwatch};\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} 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'>, 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

@@ -30,7 +30,7 @@ $parcel$export(module.exports, "ColorSwatchPicker", () => $a267e3efa7024819$expo
 
 
 const $a267e3efa7024819$export$7214f50881fc1eaf = /*#__PURE__*/ (0, $7eldL$react.createContext)(null);
-function $a267e3efa7024819$var$ColorSwatchPicker(props, ref) {
+const $a267e3efa7024819$export$b46792416e3d8515 = /*#__PURE__*/ (0, $7eldL$react.forwardRef)(function ColorSwatchPicker(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $a267e3efa7024819$export$7214f50881fc1eaf);
     let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
     let domRef = (0, $7eldL$reactspectrumutils.useDOMRef)(ref);
@@ -39,10 +39,10 @@ function $a267e3efa7024819$var$ColorSwatchPicker(props, ref) {
         ref: domRef,
         className: props.UNSAFE_className + function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+            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 += ' _Zd';
-            rules += ' _7a';
+            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';
@@ -62,25 +62,19 @@ function $a267e3efa7024819$var$ColorSwatchPicker(props, ref) {
             children: props.children
         })
     });
-}
-/**
- * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- */ let $a267e3efa7024819$export$b46792416e3d8515 = /*#__PURE__*/ (0, $7eldL$react.forwardRef)($a267e3efa7024819$var$ColorSwatchPicker);
+});
 function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
     return /*#__PURE__*/ (0, $7eldL$reactjsxruntime.jsx)((0, $7eldL$reactariacomponents.ColorSwatchPickerItem), {
         color: color,
         className: (renderProps)=>(function anonymous(props) {
                 let rules = " .";
-                if (props.isFocusVisible) rules += ' _Lb';
-                else rules += ' _La';
-                rules += ' da_____z';
+                if (props.isFocusVisible) rules += ' _Mb';
+                else rules += ' _Ma';
+                rules += ' da_____M';
                 rules += ' dx';
-                rules += ' _Nc';
-                rules += ' _M-3t1z';
-                rules += ' Uc';
-                if (props.rounding === "full") rules += ' _vf';
-                else if (props.rounding === "default") rules += ' _vb';
-                else if (props.rounding === "none") rules += ' _va';
+                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';
@@ -90,6 +84,9 @@ function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
                 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';
                 return rules;
             })({
                 ...renderProps,
@@ -100,7 +97,7 @@ function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
                     swatch,
                     isSelected && /*#__PURE__*/ (0, $7eldL$reactjsxruntime.jsx)("div", {
                         "aria-hidden": true,
-                        className: " . Ua __Ba Xa Za Va Wa __na co wa uc vc sc tc dd _Lb _Nc _M-3hmpy _zb _v-17zqamw _w-17zqamw _x-17zqamw _y-17zqamw"
+                        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"
                     })
                 ]
             })

package/dist/ColorSwatchPicker.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAgCM,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAA8E;AAElI,SAAS,wCAAkB,KAA6B,EAAE,GAA2B;IACnF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,4CAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;UAUV;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gCAAC,CAAA,GAAA,oDAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA;;CAEC,GACD,IAAI,0DAAqB,CAAA,GAAA,uBAAS,EAAE;AAGpC,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gCAAC,CAAA,GAAA,gDAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gCAAC;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, ContextValue, SlotProps} from 'react-aria-components';\nimport {Color} from '@react-types/color';\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\nfunction 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    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.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\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nlet _ColorSwatchPicker = forwardRef(ColorSwatchPicker);\nexport {_ColorSwatchPicker as ColorSwatchPicker};\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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,4CAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;UAUV;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gCAAC,CAAA,GAAA,oDAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gCAAC,CAAA,GAAA,gDAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gCAAC;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    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.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.cjs.map"}

package/dist/ColorSwatchPicker.css

@@ -1,9 +1,9 @@
 @layer _.a {
-  ._Zd {
+  ._0d {
     display: flex;
   }
 
-  ._7a {
+  ._8a {
     flex-wrap: wrap;
   }
 
@@ -31,7 +31,7 @@
     column-gap: .375rem;
   }
 
-  ._La {
+  ._Ma {
     outline-style: none;
   }
 
@@ -39,87 +39,87 @@
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  ._M-3t1z {
+  ._N-3t1z {
     outline-offset: 2px;
   }
 
-  .Uc {
+  .Vc {
     position: relative;
   }
 
-  ._va {
+  ._wa {
     border-start-start-radius: 0;
   }
 
-  ._vb {
+  ._wb {
     border-start-start-radius: .25rem;
   }
 
-  ._vf {
+  ._wf {
     border-start-start-radius: 9999px;
   }
 
-  ._wa {
+  ._xa {
     border-start-end-radius: 0;
   }
 
-  ._wb {
+  ._xb {
     border-start-end-radius: .25rem;
   }
 
-  ._wf {
+  ._xf {
     border-start-end-radius: 9999px;
   }
 
-  ._xa {
+  ._ya {
     border-end-start-radius: 0;
   }
 
-  ._xb {
+  ._yb {
     border-end-start-radius: .25rem;
   }
 
-  ._xf {
+  ._yf {
     border-end-start-radius: 9999px;
   }
 
-  ._ya {
+  ._za {
     border-end-end-radius: 0;
   }
 
-  ._yb {
+  ._zb {
     border-end-end-radius: .25rem;
   }
 
-  ._yf {
+  ._zf {
     border-end-end-radius: 9999px;
   }
 
-  .Ua {
+  .Va {
     position: absolute;
   }
 
-  .__Ba {
+  .__Ca {
     pointer-events: none;
   }
 
-  .Xa {
+  .Ya {
     top: 0;
   }
 
-  .Za {
+  ._aa {
     bottom: 0;
   }
 
-  .Va {
+  .Wa {
     inset-inline-start: 0;
   }
 
-  .Wa {
+  .Xa {
     inset-inline-end: 0;
   }
 
-  .__na {
+  .__oa {
     box-sizing: border-box;
   }
 
@@ -151,50 +151,46 @@
     outline-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
-  ._Nc {
+  ._Oc {
     outline-width: 2px;
   }
 
-  ._M-3hmpy {
+  ._N-3hmpy {
     outline-offset: -4px;
   }
 
-  ._zb {
+  ._Ab {
     forced-color-adjust: none;
   }
 
-  ._v-17zqamw {
+  ._w-17zqamw {
     border-start-start-radius: inherit;
   }
 
-  ._w-17zqamw {
+  ._x-17zqamw {
     border-start-end-radius: inherit;
   }
 
-  ._x-17zqamw {
+  ._y-17zqamw {
     border-end-start-radius: inherit;
   }
 
-  ._y-17zqamw {
+  ._z-17zqamw {
     border-end-end-radius: inherit;
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=ColorSwatchPicker.css.map */

package/dist/ColorSwatchPicker.css.map

@@ -1 +1 @@
-{"mappings":"AC0D0C;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BV;;;;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;;;;;AA5CmB;;AA4BV;EAAA;IAAA;;;;;;AAgBT","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, ContextValue, SlotProps} from 'react-aria-components';\nimport {Color} from '@react-types/color';\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\nfunction 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    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.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\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nlet _ColorSwatchPicker = forwardRef(ColorSwatchPicker);\nexport {_ColorSwatchPicker as ColorSwatchPicker};\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":"AC4D0C;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBV;;;;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;;;;;AAtCmB;;AAsBV;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    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.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

@@ -23,7 +23,7 @@ import {useDOMRef as $bOBHx$useDOMRef} from "@react-spectrum/utils";
 
 
 const $ba9c901b6c815fb9$export$7214f50881fc1eaf = /*#__PURE__*/ (0, $bOBHx$createContext)(null);
-function $ba9c901b6c815fb9$var$ColorSwatchPicker(props, ref) {
+const $ba9c901b6c815fb9$export$b46792416e3d8515 = /*#__PURE__*/ (0, $bOBHx$forwardRef)(function ColorSwatchPicker(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $ba9c901b6c815fb9$export$7214f50881fc1eaf);
     let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
     let domRef = (0, $bOBHx$useDOMRef)(ref);
@@ -32,10 +32,10 @@ function $ba9c901b6c815fb9$var$ColorSwatchPicker(props, ref) {
         ref: domRef,
         className: props.UNSAFE_className + function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+            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 += ' _Zd';
-            rules += ' _7a';
+            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';
@@ -55,25 +55,19 @@ function $ba9c901b6c815fb9$var$ColorSwatchPicker(props, ref) {
             children: props.children
         })
     });
-}
-/**
- * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- */ let $ba9c901b6c815fb9$export$b46792416e3d8515 = /*#__PURE__*/ (0, $bOBHx$forwardRef)($ba9c901b6c815fb9$var$ColorSwatchPicker);
+});
 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 += ' _Lb';
-                else rules += ' _La';
-                rules += ' da_____z';
+                if (props.isFocusVisible) rules += ' _Mb';
+                else rules += ' _Ma';
+                rules += ' da_____M';
                 rules += ' dx';
-                rules += ' _Nc';
-                rules += ' _M-3t1z';
-                rules += ' Uc';
-                if (props.rounding === "full") rules += ' _vf';
-                else if (props.rounding === "default") rules += ' _vb';
-                else if (props.rounding === "none") rules += ' _va';
+                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';
@@ -83,6 +77,9 @@ function $ba9c901b6c815fb9$var$useWrapper(swatch, color, rounding) {
                 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';
                 return rules;
             })({
                 ...renderProps,
@@ -93,7 +90,7 @@ function $ba9c901b6c815fb9$var$useWrapper(swatch, color, rounding) {
                     swatch,
                     isSelected && /*#__PURE__*/ (0, $bOBHx$jsx)("div", {
                         "aria-hidden": true,
-                        className: " . Ua __Ba Xa Za Va Wa __na co wa uc vc sc tc dd _Lb _Nc _M-3hmpy _zb _v-17zqamw _w-17zqamw _x-17zqamw _y-17zqamw"
+                        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"
                     })
                 ]
             })

package/dist/ColorSwatchPicker.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAgCM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAA8E;AAElI,SAAS,wCAAkB,KAA6B,EAAE,GAA2B;IACnF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;UAUV;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gBAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA;;CAEC,GACD,IAAI,0DAAqB,CAAA,GAAA,iBAAS,EAAE;AAGpC,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, ContextValue, SlotProps} from 'react-aria-components';\nimport {Color} from '@react-types/color';\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\nfunction 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    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.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\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nlet _ColorSwatchPicker = forwardRef(ColorSwatchPicker);\nexport {_ColorSwatchPicker as ColorSwatchPicker};\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,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;UAUV;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    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.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"}