@adobe/react-spectrum 3.47.0 → 3.47.2

package/dist/private/color/ColorSlider.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorSliderProps, useColorSlider} from 'react-aria/useColorSlider';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorSliderContext} from 'react-aria-components/ColorSlider';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {Label} from '../label/Label';\nimport React, {ReactNode, useRef, useState} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSliderState} from 'react-stately/useColorSliderState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusVisible} from 'react-aria/useFocusVisible';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps {\n  /** Whether the value label is displayed. True by default if there is a label, false by default if not. */\n  showValueLabel?: boolean,\n  /** A ContextualHelp element to place next to the label. */\n  contextualHelp?: ReactNode\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        },\n        styleProps.className\n      )}>\n      {label &&\n        <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n          <Label {...labelProps}>{label}</Label>\n          {props.contextualHelp &&\n            <SlotProvider\n              slots={{\n                actionButton: {\n                  UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n                }\n              }}>\n              {props.contextualHelp}\n            </SlotProvider>\n          }\n          {showValueLabel && (\n            <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n              <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n            </Label>\n          )}\n        </div>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          containerRef={trackRef}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorSliderProps, useColorSlider} from 'react-aria/useColorSlider';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorSliderContext} from 'react-aria-components/ColorSlider';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {Label} from '../label/Label';\nimport React, {ReactNode, useRef, useState} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSliderState} from 'react-stately/useColorSliderState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusVisible} from 'react-aria/useFocusVisible';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps {\n  /**\n   * Whether the value label is displayed. True by default if there is a label, false by default if\n   * not.\n   */\n  showValueLabel?: boolean;\n  /** A ContextualHelp element to place next to the label. */\n  contextualHelp?: ReactNode;\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = React.forwardRef(function ColorSlider(\n  props: SpectrumColorSliderProps,\n  ref: FocusableRef<HTMLDivElement>\n) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\n\n  let {isDisabled, channel, orientation, label, showValueLabel, 'aria-label': ariaLabel} = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider(\n    {\n      ...props,\n      label,\n      'aria-label': ariaLabel,\n      trackRef,\n      inputRef\n    },\n    state\n  );\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        },\n        styleProps.className\n      )}>\n      {label && (\n        <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n          <Label {...labelProps}>{label}</Label>\n          {props.contextualHelp && (\n            <SlotProvider\n              slots={{\n                actionButton: {\n                  UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n                }\n              }}>\n              {props.contextualHelp}\n            </SlotProvider>\n          )}\n          {showValueLabel && (\n            <Label\n              elementType=\"span\"\n              UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n              <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n            </Label>\n          )}\n        </div>\n      )}\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(styles, 'spectrum-ColorSlider', {\n          'is-disabled': isDisabled,\n          'spectrum-ColorSlider--vertical': vertical\n        })}>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          containerRef={trackRef}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input\n            {...inputProps}\n            {...focusProps}\n            ref={inputRef}\n            className={classNames(styles, 'spectrum-ColorSlider-slider')}\n          />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.js.map"}

package/dist/private/color/ColorSlider.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorSliderProps, useColorSlider} from 'react-aria/useColorSlider';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorSliderContext} from 'react-aria-components/ColorSlider';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {Label} from '../label/Label';\nimport React, {ReactNode, useRef, useState} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSliderState} from 'react-stately/useColorSliderState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusVisible} from 'react-aria/useFocusVisible';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps {\n  /** Whether the value label is displayed. True by default if there is a label, false by default if not. */\n  showValueLabel?: boolean,\n  /** A ContextualHelp element to place next to the label. */\n  contextualHelp?: ReactNode\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        },\n        styleProps.className\n      )}>\n      {label &&\n        <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n          <Label {...labelProps}>{label}</Label>\n          {props.contextualHelp &&\n            <SlotProvider\n              slots={{\n                actionButton: {\n                  UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n                }\n              }}>\n              {props.contextualHelp}\n            </SlotProvider>\n          }\n          {showValueLabel && (\n            <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n              <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n            </Label>\n          )}\n        </div>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          containerRef={trackRef}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.mjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorSliderProps, useColorSlider} from 'react-aria/useColorSlider';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorSliderContext} from 'react-aria-components/ColorSlider';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {Label} from '../label/Label';\nimport React, {ReactNode, useRef, useState} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSliderState} from 'react-stately/useColorSliderState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusVisible} from 'react-aria/useFocusVisible';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps {\n  /**\n   * Whether the value label is displayed. True by default if there is a label, false by default if\n   * not.\n   */\n  showValueLabel?: boolean;\n  /** A ContextualHelp element to place next to the label. */\n  contextualHelp?: ReactNode;\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = React.forwardRef(function ColorSlider(\n  props: SpectrumColorSliderProps,\n  ref: FocusableRef<HTMLDivElement>\n) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\n\n  let {isDisabled, channel, orientation, label, showValueLabel, 'aria-label': ariaLabel} = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider(\n    {\n      ...props,\n      label,\n      'aria-label': ariaLabel,\n      trackRef,\n      inputRef\n    },\n    state\n  );\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        },\n        styleProps.className\n      )}>\n      {label && (\n        <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n          <Label {...labelProps}>{label}</Label>\n          {props.contextualHelp && (\n            <SlotProvider\n              slots={{\n                actionButton: {\n                  UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n                }\n              }}>\n              {props.contextualHelp}\n            </SlotProvider>\n          )}\n          {showValueLabel && (\n            <Label\n              elementType=\"span\"\n              UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n              <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n            </Label>\n          )}\n        </div>\n      )}\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(styles, 'spectrum-ColorSlider', {\n          'is-disabled': isDisabled,\n          'spectrum-ColorSlider--vertical': vertical\n        })}>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          containerRef={trackRef}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input\n            {...inputProps}\n            {...focusProps}\n            ref={inputRef}\n            className={classNames(styles, 'spectrum-ColorSlider-slider')}\n          />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.mjs.map"}

package/dist/private/color/ColorSwatch.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BM,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAA2B;IACrH,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,wDAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,6CAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,WAC7B,GAAG;IAEJ,IAAI,uBACF,0DAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACN;QACA,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuB/B;kBAAC;sBAAM;QAAQ;;IAGtB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@adobe/react-spectrum/src/color/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 {AriaColorSwatchProps, useColorSwatch} from 'react-aria/useColorSwatch';\n\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatchContext} from 'react-aria-components/ColorSwatch';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\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}\n\ninterface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  let domRef = useDOMRef(ref);\n  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let {styleProps} = useStyleProps(props);\n  let ctx = useContext(SpectrumColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default'\n  } = props;\n\n  let swatch = (\n    <div\n      {...colorSwatchProps}\n      {...styleProps}\n      ref={domRef}\n      style={{\n        ...styleProps.style,\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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      }}\n      className={styleProps.className + style({\n        size: {\n          size: {\n            XS: 4,\n            S: 6,\n            M: 8,\n            L: 10\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'default',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        // Trick to create a partially transparent color from a variable.\n        // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n        borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none'\n      })({size, rounding})} />\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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAuCM,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EACpD;AAMK,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAC7C,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,wDAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,6CAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QAAC,OAAO,KAAK,QAAQ,eAAK,WAAW,KAAK,YAAY,WAAU,GAAG;IAEvE,IAAI,uBACF,0DAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YACE,MAAM,eAAe,CAAC,WAAW,IAC7B,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACR;QACA,WACE,WAAW,SAAS,GACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuBG;kBAAC;sBAAM;QAAQ;;IAKxB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@adobe/react-spectrum/src/color/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 {AriaColorSwatchProps, useColorSwatch} from 'react-aria/useColorSwatch';\n\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatchContext} from 'react-aria-components/ColorSwatch';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\n  /**\n   * The size of the ColorSwatch.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the ColorSwatch.\n   *\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full';\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<\n  SpectrumColorSwatchProps,\n  'size' | 'rounding'\n> {\n  useWrapper: (\n    swatch: ReactElement,\n    color: Color,\n    rounding: SpectrumColorSwatchProps['rounding']\n  ) => JSX.Element;\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(\n  null\n);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(\n  props: SpectrumColorSwatchProps,\n  ref: DOMRef<HTMLDivElement>\n): JSX.Element {\n  let domRef = useDOMRef(ref);\n  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let {styleProps} = useStyleProps(props);\n  let ctx = useContext(SpectrumColorSwatchContext);\n  let {size = ctx?.size || 'M', rounding = ctx?.rounding || 'default'} = props;\n\n  let swatch = (\n    <div\n      {...colorSwatchProps}\n      {...styleProps}\n      ref={domRef}\n      style={{\n        ...styleProps.style,\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background:\n          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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      }}\n      className={\n        styleProps.className +\n        style({\n          size: {\n            size: {\n              XS: 4,\n              S: 6,\n              M: 8,\n              L: 10\n            }\n          },\n          borderRadius: {\n            rounding: {\n              default: 'default',\n              none: 'none',\n              full: 'full'\n            }\n          },\n          // Trick to create a partially transparent color from a variable.\n          // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n          borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n          borderWidth: 1,\n          borderStyle: 'solid',\n          boxSizing: 'border-box',\n          forcedColorAdjust: 'none'\n        })({size, rounding})\n      }\n    />\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.cjs.map"}

package/dist/private/color/ColorSwatch.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BM,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAA2B;IACrH,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,yBAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,CAAA,gBAAA,0BAAA,IAAK,IAAI,KAAI,eACpB,WAAW,CAAA,gBAAA,0BAAA,IAAK,QAAQ,KAAI,WAC7B,GAAG;IAEJ,IAAI,uBACF,gCAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACN;QACA,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuB/B;kBAAC;sBAAM;QAAQ;;IAGtB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@adobe/react-spectrum/src/color/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 {AriaColorSwatchProps, useColorSwatch} from 'react-aria/useColorSwatch';\n\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatchContext} from 'react-aria-components/ColorSwatch';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\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}\n\ninterface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  let domRef = useDOMRef(ref);\n  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let {styleProps} = useStyleProps(props);\n  let ctx = useContext(SpectrumColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default'\n  } = props;\n\n  let swatch = (\n    <div\n      {...colorSwatchProps}\n      {...styleProps}\n      ref={domRef}\n      style={{\n        ...styleProps.style,\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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      }}\n      className={styleProps.className + style({\n        size: {\n          size: {\n            XS: 4,\n            S: 6,\n            M: 8,\n            L: 10\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'default',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        // Trick to create a partially transparent color from a variable.\n        // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n        borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none'\n      })({size, rounding})} />\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.js.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAuCM,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EACpD;AAMK,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC7C,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,yBAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QAAC,OAAO,CAAA,gBAAA,0BAAA,IAAK,IAAI,KAAI,eAAK,WAAW,CAAA,gBAAA,0BAAA,IAAK,QAAQ,KAAI,WAAU,GAAG;IAEvE,IAAI,uBACF,gCAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YACE,MAAM,eAAe,CAAC,WAAW,IAC7B,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACR;QACA,WACE,WAAW,SAAS,GACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuBG;kBAAC;sBAAM;QAAQ;;IAKxB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@adobe/react-spectrum/src/color/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 {AriaColorSwatchProps, useColorSwatch} from 'react-aria/useColorSwatch';\n\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatchContext} from 'react-aria-components/ColorSwatch';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\n  /**\n   * The size of the ColorSwatch.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the ColorSwatch.\n   *\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full';\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<\n  SpectrumColorSwatchProps,\n  'size' | 'rounding'\n> {\n  useWrapper: (\n    swatch: ReactElement,\n    color: Color,\n    rounding: SpectrumColorSwatchProps['rounding']\n  ) => JSX.Element;\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(\n  null\n);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(\n  props: SpectrumColorSwatchProps,\n  ref: DOMRef<HTMLDivElement>\n): JSX.Element {\n  let domRef = useDOMRef(ref);\n  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let {styleProps} = useStyleProps(props);\n  let ctx = useContext(SpectrumColorSwatchContext);\n  let {size = ctx?.size || 'M', rounding = ctx?.rounding || 'default'} = props;\n\n  let swatch = (\n    <div\n      {...colorSwatchProps}\n      {...styleProps}\n      ref={domRef}\n      style={{\n        ...styleProps.style,\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background:\n          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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      }}\n      className={\n        styleProps.className +\n        style({\n          size: {\n            size: {\n              XS: 4,\n              S: 6,\n              M: 8,\n              L: 10\n            }\n          },\n          borderRadius: {\n            rounding: {\n              default: 'default',\n              none: 'none',\n              full: 'full'\n            }\n          },\n          // Trick to create a partially transparent color from a variable.\n          // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n          borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n          borderWidth: 1,\n          borderStyle: 'solid',\n          boxSizing: 'border-box',\n          forcedColorAdjust: 'none'\n        })({size, rounding})\n      }\n    />\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.js.map"}

package/dist/private/color/ColorSwatch.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA8BM,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAA2B;IACrH,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,yBAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,WAC7B,GAAG;IAEJ,IAAI,uBACF,gCAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACN;QACA,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuB/B;kBAAC;sBAAM;QAAQ;;IAGtB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@adobe/react-spectrum/src/color/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 {AriaColorSwatchProps, useColorSwatch} from 'react-aria/useColorSwatch';\n\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatchContext} from 'react-aria-components/ColorSwatch';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\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}\n\ninterface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  let domRef = useDOMRef(ref);\n  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let {styleProps} = useStyleProps(props);\n  let ctx = useContext(SpectrumColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default'\n  } = props;\n\n  let swatch = (\n    <div\n      {...colorSwatchProps}\n      {...styleProps}\n      ref={domRef}\n      style={{\n        ...styleProps.style,\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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      }}\n      className={styleProps.className + style({\n        size: {\n          size: {\n            XS: 4,\n            S: 6,\n            M: 8,\n            L: 10\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'default',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        // Trick to create a partially transparent color from a variable.\n        // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n        borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none'\n      })({size, rounding})} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAuCM,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EACpD;AAMK,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC7C,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,yBAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QAAC,OAAO,KAAK,QAAQ,eAAK,WAAW,KAAK,YAAY,WAAU,GAAG;IAEvE,IAAI,uBACF,gCAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YACE,MAAM,eAAe,CAAC,WAAW,IAC7B,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACR;QACA,WACE,WAAW,SAAS,GACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuBG;kBAAC;sBAAM;QAAQ;;IAKxB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@adobe/react-spectrum/src/color/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 {AriaColorSwatchProps, useColorSwatch} from 'react-aria/useColorSwatch';\n\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatchContext} from 'react-aria-components/ColorSwatch';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\n  /**\n   * The size of the ColorSwatch.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the ColorSwatch.\n   *\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full';\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<\n  SpectrumColorSwatchProps,\n  'size' | 'rounding'\n> {\n  useWrapper: (\n    swatch: ReactElement,\n    color: Color,\n    rounding: SpectrumColorSwatchProps['rounding']\n  ) => JSX.Element;\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(\n  null\n);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(\n  props: SpectrumColorSwatchProps,\n  ref: DOMRef<HTMLDivElement>\n): JSX.Element {\n  let domRef = useDOMRef(ref);\n  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let {styleProps} = useStyleProps(props);\n  let ctx = useContext(SpectrumColorSwatchContext);\n  let {size = ctx?.size || 'M', rounding = ctx?.rounding || 'default'} = props;\n\n  let swatch = (\n    <div\n      {...colorSwatchProps}\n      {...styleProps}\n      ref={domRef}\n      style={{\n        ...styleProps.style,\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background:\n          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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      }}\n      className={\n        styleProps.className +\n        style({\n          size: {\n            size: {\n              XS: 4,\n              S: 6,\n              M: 8,\n              L: 10\n            }\n          },\n          borderRadius: {\n            rounding: {\n              default: 'default',\n              none: 'none',\n              full: 'full'\n            }\n          },\n          // Trick to create a partially transparent color from a variable.\n          // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n          borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n          borderWidth: 1,\n          borderStyle: 'solid',\n          boxSizing: 'border-box',\n          forcedColorAdjust: 'none'\n        })({size, rounding})\n      }\n    />\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/private/color/ColorSwatchPicker.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAsCM,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAAqC,EAAE,GAA2B;IACvI,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,0DAAC,CAAA,GAAA,6DAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;UAU/B;qBAAC;QAAO;qBACX,0DAAC,CAAA,GAAA,oDAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAA8C;IACpG,qBACE,0DAAC,CAAA,GAAA,iEAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAgBvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM,sHACjB,QACA,4BACC,0DAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAYvB","sources":["packages/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps {\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\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: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={styleProps.className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: 0.5,\n            regular: 1,\n            spacious: 2\n          }\n        }\n      })({density})}>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        outlineStyle: {\n          default: 'none',\n          isFocusVisible: 'solid'\n        },\n        outlineColor: 'focus-ring',\n        outlineWidth: 2,\n        outlineOffset: 2,\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'default',\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              boxShadow: '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })()} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0CM,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBACnD,KAAqC,EACrC,GAA2B;IAE3B,IAAI,WAAC,UAAU,iBAAW,OAAO,eAAK,WAAW,QAAQ,GAAG,YAAW,GAAG;IAC1E,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,0DAAC,CAAA,GAAA,6DAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WACE,WAAW,SAAS,GACpB;;;;;;;;;;;UAUG;qBAAC;QAAO;qBAEb,0DAAC,CAAA,GAAA,oDAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCACP,MAAoB,EACpB,KAAY,EACZ,QAA8C;IAE9C,qBACE,0DAAC,CAAA,GAAA,iEAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cACT;;;;;;;;;;;;;;;;;;;;;;eAgBG;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAE7B,CAAC,cAAC,UAAU,EAAC,iBACZ,sHACG,QACA,4BACC,0DAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAezB","sources":["packages/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchPickerProps\n  extends ValueBase<string | Color, Color>, StyleProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode;\n  /**\n   * The amount of padding between the swatches.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The size of the color swatches.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the color swatches.\n   *\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full';\n}\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(\n  props: SpectrumColorSwatchPickerProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {density = 'regular', size = 'M', rounding = 'none', ...otherProps} = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={\n        styleProps.className +\n        style({\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: {\n            density: {\n              compact: 0.5,\n              regular: 1,\n              spacious: 2\n            }\n          }\n        })({density})\n      }>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(\n  swatch: ReactElement,\n  color: Color,\n  rounding: SpectrumColorSwatchProps['rounding']\n) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps =>\n        style({\n          outlineStyle: {\n            default: 'none',\n            isFocusVisible: 'solid'\n          },\n          outlineColor: 'focus-ring',\n          outlineWidth: 2,\n          outlineOffset: 2,\n          position: 'relative',\n          borderRadius: {\n            rounding: {\n              none: 'none',\n              default: 'default',\n              full: 'full'\n            }\n          }\n        })({...renderProps, rounding})\n      }>\n      {({isSelected}) => (\n        <>\n          {swatch}\n          {isSelected && (\n            <div\n              aria-hidden\n              className={style({\n                position: 'absolute',\n                pointerEvents: 'none',\n                inset: 0,\n                boxShadow:\n                  '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n                forcedColorAdjust: 'none',\n                borderRadius: '[inherit]'\n              })()}\n            />\n          )}\n        </>\n      )}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.cjs.map"}

package/dist/private/color/ColorSwatchPicker.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAsCM,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAAqC,EAAE,GAA2B;IACvI,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;UAU/B;qBAAC;QAAO;qBACX,gCAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAA8C;IACpG,qBACE,gCAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAgBvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM,kEACjB,QACA,4BACC,gCAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAYvB","sources":["packages/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps {\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\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: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={styleProps.className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: 0.5,\n            regular: 1,\n            spacious: 2\n          }\n        }\n      })({density})}>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        outlineStyle: {\n          default: 'none',\n          isFocusVisible: 'solid'\n        },\n        outlineColor: 'focus-ring',\n        outlineWidth: 2,\n        outlineOffset: 2,\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'default',\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              boxShadow: '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })()} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.js.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0CM,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBACnD,KAAqC,EACrC,GAA2B;IAE3B,IAAI,WAAC,UAAU,iBAAW,OAAO,eAAK,WAAW,QAAQ,GAAG,YAAW,GAAG;IAC1E,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WACE,WAAW,SAAS,GACpB;;;;;;;;;;;UAUG;qBAAC;QAAO;qBAEb,gCAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCACP,MAAoB,EACpB,KAAY,EACZ,QAA8C;IAE9C,qBACE,gCAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cACT;;;;;;;;;;;;;;;;;;;;;;eAgBG;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAE7B,CAAC,cAAC,UAAU,EAAC,iBACZ,kEACG,QACA,4BACC,gCAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAezB","sources":["packages/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchPickerProps\n  extends ValueBase<string | Color, Color>, StyleProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode;\n  /**\n   * The amount of padding between the swatches.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The size of the color swatches.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the color swatches.\n   *\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full';\n}\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(\n  props: SpectrumColorSwatchPickerProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {density = 'regular', size = 'M', rounding = 'none', ...otherProps} = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={\n        styleProps.className +\n        style({\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: {\n            density: {\n              compact: 0.5,\n              regular: 1,\n              spacious: 2\n            }\n          }\n        })({density})\n      }>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(\n  swatch: ReactElement,\n  color: Color,\n  rounding: SpectrumColorSwatchProps['rounding']\n) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps =>\n        style({\n          outlineStyle: {\n            default: 'none',\n            isFocusVisible: 'solid'\n          },\n          outlineColor: 'focus-ring',\n          outlineWidth: 2,\n          outlineOffset: 2,\n          position: 'relative',\n          borderRadius: {\n            rounding: {\n              none: 'none',\n              default: 'default',\n              full: 'full'\n            }\n          }\n        })({...renderProps, rounding})\n      }>\n      {({isSelected}) => (\n        <>\n          {swatch}\n          {isSelected && (\n            <div\n              aria-hidden\n              className={style({\n                position: 'absolute',\n                pointerEvents: 'none',\n                inset: 0,\n                boxShadow:\n                  '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n                forcedColorAdjust: 'none',\n                borderRadius: '[inherit]'\n              })()}\n            />\n          )}\n        </>\n      )}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.js.map"}

package/dist/private/color/ColorSwatchPicker.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAsCM,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAAqC,EAAE,GAA2B;IACvI,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;UAU/B;qBAAC;QAAO;qBACX,gCAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAA8C;IACpG,qBACE,gCAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAgBvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM,kEACjB,QACA,4BACC,gCAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAYvB","sources":["packages/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps {\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\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: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={styleProps.className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: 0.5,\n            regular: 1,\n            spacious: 2\n          }\n        }\n      })({density})}>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        outlineStyle: {\n          default: 'none',\n          isFocusVisible: 'solid'\n        },\n        outlineColor: 'focus-ring',\n        outlineWidth: 2,\n        outlineOffset: 2,\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'default',\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              boxShadow: '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })()} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0CM,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBACnD,KAAqC,EACrC,GAA2B;IAE3B,IAAI,WAAC,UAAU,iBAAW,OAAO,eAAK,WAAW,QAAQ,GAAG,YAAW,GAAG;IAC1E,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WACE,WAAW,SAAS,GACpB;;;;;;;;;;;UAUG;qBAAC;QAAO;qBAEb,gCAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCACP,MAAoB,EACpB,KAAY,EACZ,QAA8C;IAE9C,qBACE,gCAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cACT;;;;;;;;;;;;;;;;;;;;;;eAgBG;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAE7B,CAAC,cAAC,UAAU,EAAC,iBACZ,kEACG,QACA,4BACC,gCAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAezB","sources":["packages/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem\n} from 'react-aria-components/ColorSwatchPicker';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumColorSwatchPickerProps\n  extends ValueBase<string | Color, Color>, StyleProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode;\n  /**\n   * The amount of padding between the swatches.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The size of the color swatches.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the color swatches.\n   *\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full';\n}\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(\n  props: SpectrumColorSwatchPickerProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {density = 'regular', size = 'M', rounding = 'none', ...otherProps} = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={\n        styleProps.className +\n        style({\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: {\n            density: {\n              compact: 0.5,\n              regular: 1,\n              spacious: 2\n            }\n          }\n        })({density})\n      }>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(\n  swatch: ReactElement,\n  color: Color,\n  rounding: SpectrumColorSwatchProps['rounding']\n) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps =>\n        style({\n          outlineStyle: {\n            default: 'none',\n            isFocusVisible: 'solid'\n          },\n          outlineColor: 'focus-ring',\n          outlineWidth: 2,\n          outlineOffset: 2,\n          position: 'relative',\n          borderRadius: {\n            rounding: {\n              none: 'none',\n              default: 'default',\n              full: 'full'\n            }\n          }\n        })({...renderProps, rounding})\n      }>\n      {({isSelected}) => (\n        <>\n          {swatch}\n          {isSelected && (\n            <div\n              aria-hidden\n              className={style({\n                position: 'absolute',\n                pointerEvents: 'none',\n                inset: 0,\n                boxShadow:\n                  '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n                forcedColorAdjust: 'none',\n                borderRadius: '[inherit]'\n              })()}\n            />\n          )}\n        </>\n      )}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.mjs.map"}

package/dist/private/color/ColorThumb.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorThumb.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames} from '../utils/classNames';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '../overlays/Overlay';\nimport React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProvider} from '../provider/Provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement,\n  style?: CSSProperties,\n  containerRef?: RefObject<HTMLElement | null>\n}\n\nfunction ColorThumb(props: ColorThumbProps): JSX.Element {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;\n  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {\n    thumbTop = parseFloat(thumbTop);\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\n  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {\n    thumbLeft = parseFloat(thumbLeft);\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.cjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorThumb.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames} from '../utils/classNames';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '../overlays/Overlay';\nimport React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProvider} from '../provider/Provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color;\n  isDisabled?: boolean;\n  isDragging?: boolean; // shows the color loupe\n  isFocused?: boolean; // makes the circle larger\n  className?: string;\n  children?: ReactElement;\n  style?: CSSProperties;\n  containerRef?: RefObject<HTMLElement | null>;\n}\n\nfunction ColorThumb(props: ColorThumbProps): JSX.Element {\n  let {\n    value,\n    isDisabled,\n    isDragging,\n    isFocused,\n    children,\n    className = '',\n    style,\n    containerRef,\n    ...otherProps\n  } = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div\n      className={\n        classNames(stylesHandle, 'spectrum-ColorHandle', {\n          'is-focused': isFocused,\n          'is-disabled': isDisabled\n        }) +\n        ' ' +\n        className\n      }\n      style={style}\n      {...otherProps}>\n      <div\n        className={classNames(stylesHandle, 'spectrum-ColorHandle-color')}\n        style={{backgroundColor: valueCSS}}\n      />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe\n          valueCSS={valueCSS}\n          containerRef={containerRef}\n          loupeRef={loupeRef}\n          style={style}\n        />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = (parseFloat(style.top || '50%') / 100) * containerRect.height;\n  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {\n    thumbTop = parseFloat(thumbTop);\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = (parseFloat(thumbLeft || '50%') / 100) * containerRect.width;\n  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {\n    thumbLeft = parseFloat(thumbLeft);\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')}\n          x=\"0\"\n          y=\"0\"\n          width=\"16\"\n          height=\"16\"\n        />\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')}\n          x=\"0\"\n          y=\"0\"\n          width=\"8\"\n          height=\"8\"\n        />\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')}\n          x=\"8\"\n          y=\"8\"\n          width=\"8\"\n          height=\"8\"\n        />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`}\n      />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS}\n      />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n      />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.cjs.map"}

package/dist/private/color/ColorThumb.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorThumb.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames} from '../utils/classNames';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '../overlays/Overlay';\nimport React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProvider} from '../provider/Provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement,\n  style?: CSSProperties,\n  containerRef?: RefObject<HTMLElement | null>\n}\n\nfunction ColorThumb(props: ColorThumbProps): JSX.Element {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;\n  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {\n    thumbTop = parseFloat(thumbTop);\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\n  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {\n    thumbLeft = parseFloat(thumbLeft);\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorThumb.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames} from '../utils/classNames';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '../overlays/Overlay';\nimport React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProvider} from '../provider/Provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color;\n  isDisabled?: boolean;\n  isDragging?: boolean; // shows the color loupe\n  isFocused?: boolean; // makes the circle larger\n  className?: string;\n  children?: ReactElement;\n  style?: CSSProperties;\n  containerRef?: RefObject<HTMLElement | null>;\n}\n\nfunction ColorThumb(props: ColorThumbProps): JSX.Element {\n  let {\n    value,\n    isDisabled,\n    isDragging,\n    isFocused,\n    children,\n    className = '',\n    style,\n    containerRef,\n    ...otherProps\n  } = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div\n      className={\n        classNames(stylesHandle, 'spectrum-ColorHandle', {\n          'is-focused': isFocused,\n          'is-disabled': isDisabled\n        }) +\n        ' ' +\n        className\n      }\n      style={style}\n      {...otherProps}>\n      <div\n        className={classNames(stylesHandle, 'spectrum-ColorHandle-color')}\n        style={{backgroundColor: valueCSS}}\n      />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe\n          valueCSS={valueCSS}\n          containerRef={containerRef}\n          loupeRef={loupeRef}\n          style={style}\n        />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = (parseFloat(style.top || '50%') / 100) * containerRect.height;\n  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {\n    thumbTop = parseFloat(thumbTop);\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = (parseFloat(thumbLeft || '50%') / 100) * containerRect.width;\n  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {\n    thumbLeft = parseFloat(thumbLeft);\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')}\n          x=\"0\"\n          y=\"0\"\n          width=\"16\"\n          height=\"16\"\n        />\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')}\n          x=\"0\"\n          y=\"0\"\n          width=\"8\"\n          height=\"8\"\n        />\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')}\n          x=\"8\"\n          y=\"8\"\n          width=\"8\"\n          height=\"8\"\n        />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`}\n      />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS}\n      />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n      />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.js.map"}

package/dist/private/color/ColorThumb.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/color/ColorThumb.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames} from '../utils/classNames';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '../overlays/Overlay';\nimport React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProvider} from '../provider/Provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement,\n  style?: CSSProperties,\n  containerRef?: RefObject<HTMLElement | null>\n}\n\nfunction ColorThumb(props: ColorThumbProps): JSX.Element {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;\n  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {\n    thumbTop = parseFloat(thumbTop);\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\n  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {\n    thumbLeft = parseFloat(thumbLeft);\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBD,SAAS,yCAAW,KAAsB;IACxC,IAAI,SACF,KAAK,cACL,UAAU,cACV,UAAU,aACV,SAAS,YACT,QAAQ,aACR,YAAY,WACZ,KAAK,gBACL,YAAY,EACZ,GAAG,YACJ,GAAG;IAEJ,IAAI,WAAW,MAAM,QAAQ,CAAC;IAC9B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAsB;IAC1C,IAAI,WAAW,CAAA,GAAA,yCAAU;IAEzB,qBACE,gCAAC;QACC,WACE,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,wDAAW,GAAG,wBAAwB;YAC/C,cAAc;YACd,eAAe;QACjB,KACA,MACA;QAEF,OAAO;QACN,GAAG,UAAU;qBACd,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,wDAAW,GAAG;QACpC,OAAO;YAAC,iBAAiB;QAAQ;sBAEnC,gCAAC,CAAA,GAAA,yCAAM;QAAE,QAAQ,cAAc,YAAY;QAAM,SAAS;qBACxD,gCAAC;QACC,UAAU;QACV,cAAc;QACd,UAAU;QACV,OAAO;SAGV;AAGP;AAEA,4GAA4G;AAC5G,SAAS,iCAAW,UAAC,MAAM,YAAE,QAAQ,gBAAE,YAAY,YAAE,QAAQ,SAAE,KAAK,EAAM;IACxE,IAAI,YAAY,CAAA,GAAA,YAAI;IAEpB,4EAA4E;IAC5E,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,eAAO,EAAE;QAAC,KAAK;QAAG,MAAM;QAAG,OAAO;QAAG,QAAQ;IAAC;IACtF,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,aAAa,OAAO,EAAE;QACjC,iBAAiB;YACf,KAAK,MAAM,OAAO;YAClB,MAAM,MAAM,QAAQ;YACpB,OAAO,MAAM,SAAS;YACtB,QAAQ,MAAM,UAAU;QAC1B;IACF,GAAG;QAAC;KAAa;IAEjB,2CAA2C;IAC3C,IAAI,WAAW,MAAM,GAAG,IAAI;IAC5B,IAAI,OAAO,aAAa,YAAY,SAAS,QAAQ,CAAC,MACpD,WAAW,AAAC,WAAW,MAAM,GAAG,IAAI,SAAS,MAAO,cAAc,MAAM;SACnE,IAAI,OAAO,aAAa,YAAY,SAAS,QAAQ,CAAC,OAC3D,WAAW,WAAW;IAGxB,IAAI,YAAY,MAAM,IAAI,IAAI;IAC9B,IAAI,OAAO,cAAc,YAAY,UAAU,QAAQ,CAAC,MACtD,YAAY,AAAC,WAAW,aAAa,SAAS,MAAO,cAAc,KAAK;SACnE,IAAI,OAAO,cAAc,YAAY,UAAU,QAAQ,CAAC,OAC7D,YAAY,WAAW;IAGzB,qBACE,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAU,GAAG,uBAAuB;YAAC,WAAW;QAAM;QAC5E,OAAO;YACL,qCAAqC;YACrC,UAAU;YACV,KAAK,cAAc,GAAG,GAAG;YACzB,MAAM,cAAc,IAAI,GAAG;QAC7B;QACA,KAAK;QACL,eAAY;qBACZ,gCAAC;QAAQ,IAAI;QAAW,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;QAAK,cAAa;qBACtE,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAU,GAAG;QACnC,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;sBAET,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAU,GAAG;QACnC,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;sBAET,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAU,GAAG;QACnC,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;uBAGX,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAU,GAAG;QACnC,GAAE;QACF,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;sBAE5B,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAU,GAAG;QACnC,GAAE;QACF,MAAM;sBAER,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAU,GAAG;QACnC,GAAE;;AAIV","sources":["packages/@adobe/react-spectrum/src/color/ColorThumb.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames} from '../utils/classNames';\n\nimport {Color} from 'react-stately/Color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '../overlays/Overlay';\nimport React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProvider} from '../provider/Provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color;\n  isDisabled?: boolean;\n  isDragging?: boolean; // shows the color loupe\n  isFocused?: boolean; // makes the circle larger\n  className?: string;\n  children?: ReactElement;\n  style?: CSSProperties;\n  containerRef?: RefObject<HTMLElement | null>;\n}\n\nfunction ColorThumb(props: ColorThumbProps): JSX.Element {\n  let {\n    value,\n    isDisabled,\n    isDragging,\n    isFocused,\n    children,\n    className = '',\n    style,\n    containerRef,\n    ...otherProps\n  } = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div\n      className={\n        classNames(stylesHandle, 'spectrum-ColorHandle', {\n          'is-focused': isFocused,\n          'is-disabled': isDisabled\n        }) +\n        ' ' +\n        className\n      }\n      style={style}\n      {...otherProps}>\n      <div\n        className={classNames(stylesHandle, 'spectrum-ColorHandle-color')}\n        style={{backgroundColor: valueCSS}}\n      />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe\n          valueCSS={valueCSS}\n          containerRef={containerRef}\n          loupeRef={loupeRef}\n          style={style}\n        />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = (parseFloat(style.top || '50%') / 100) * containerRect.height;\n  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {\n    thumbTop = parseFloat(thumbTop);\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = (parseFloat(thumbLeft || '50%') / 100) * containerRect.width;\n  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {\n    thumbLeft = parseFloat(thumbLeft);\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')}\n          x=\"0\"\n          y=\"0\"\n          width=\"16\"\n          height=\"16\"\n        />\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')}\n          x=\"0\"\n          y=\"0\"\n          width=\"8\"\n          height=\"8\"\n        />\n        <rect\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')}\n          x=\"8\"\n          y=\"8\"\n          width=\"8\"\n          height=\"8\"\n        />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`}\n      />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS}\n      />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n      />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.mjs.map"}

package/dist/private/color/ColorWheel.cjs

@@ -96,8 +96,8 @@ const $488ea514274761b9$export$f80663f808113381 = /*#__PURE__*/ (0, ($parcel$int
         style: {
             ...styleProps.style,
             // Workaround around https://github.com/adobe/spectrum-css/issues/1032
-            'width': size,
-            'height': size
+            width: size,
+            height: size
         }
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($eKF6D$react))).createElement("div", {
         ...trackProps,

package/dist/private/color/ColorWheel.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAwBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAiC;IAC9H,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,sDAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAGjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OAAO,gBAAgB,CAAC,aAAa,OAAO,EACzD,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,2DAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,+DAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,wDAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,2CAAY,EAAE;QACvD,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GAAG,OAAO;IAEV,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAW;IAE9C,qBACE,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,SAAS;YACT,UAAU;QACZ;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAO,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAgC,GAAG,UAAU;QAAE,KAAK;;AAIjH","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n  /** The outer diameter of the ColorWheel. */\n  size?: DimensionValue\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n\n  let [wheelRadius, setWheelRadius] = useState<number>(0);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window.getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useLayoutEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius === 0) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel({\n    ...props,\n    innerRadius: wheelRadius - wheelThickness,\n    outerRadius: wheelRadius\n  }, state, inputRef);\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorWheel',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        'width': size,\n        'height': size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        containerRef={containerRef}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n      </ColorThumb>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,sDAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,2DAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,+DAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,wDAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,2CAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAW;IAE9C,qBACE,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n  extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n  /** The outer diameter of the ColorWheel. */\n  size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n  props: SpectrumColorWheelProps,\n  ref: FocusableRef<HTMLDivElement>\n) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let [wheelRadius, setWheelRadius] = useState<number>(0);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window\n        .getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useLayoutEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius === 0) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel(\n    {\n      ...props,\n      innerRadius: wheelRadius - wheelThickness,\n      outerRadius: wheelRadius\n    },\n    state,\n    inputRef\n  );\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={classNames(\n        styles,\n        'spectrum-ColorWheel',\n        {\n          'is-disabled': isDisabled\n        },\n        styleProps.className\n      )}\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        containerRef={containerRef}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input\n          {...focusProps}\n          className={classNames(styles, 'spectrum-ColorWheel-slider')}\n          {...inputProps}\n          ref={inputRef}\n        />\n      </ColorThumb>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}

package/dist/private/color/ColorWheel.js

@@ -90,8 +90,8 @@ const $4f4444fad9e6c791$export$f80663f808113381 = /*#__PURE__*/ (0, $3WWXI$react
         style: {
             ...styleProps.style,
             // Workaround around https://github.com/adobe/spectrum-css/issues/1032
-            'width': size,
-            'height': size
+            width: size,
+            height: size
         }
     }, /*#__PURE__*/ (0, $3WWXI$react).createElement("div", {
         ...trackProps,

package/dist/private/color/ColorWheel.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAwBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAiC;IAC9H,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,wBAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,yCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAGjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OAAO,gBAAgB,CAAC,aAAa,OAAO,EACzD,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;QACvD,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GAAG,OAAO;IAEV,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACC,WACE,CAAA,GAAA,yCAAS,EACP,CAAA,GAAA,uDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,SAAS;YACT,UAAU;QACZ;qBACA,gCAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;sBACnD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QAAO,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAAgC,GAAG,UAAU;QAAE,KAAK;;AAIjH","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n  /** The outer diameter of the ColorWheel. */\n  size?: DimensionValue\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n\n  let [wheelRadius, setWheelRadius] = useState<number>(0);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window.getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useLayoutEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius === 0) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel({\n    ...props,\n    innerRadius: wheelRadius - wheelThickness,\n    outerRadius: wheelRadius\n  }, state, inputRef);\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorWheel',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        'width': size,\n        'height': size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        containerRef={containerRef}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n      </ColorThumb>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,wBAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,yCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,uDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;sBACnD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n  extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n  /** The outer diameter of the ColorWheel. */\n  size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n  props: SpectrumColorWheelProps,\n  ref: FocusableRef<HTMLDivElement>\n) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let [wheelRadius, setWheelRadius] = useState<number>(0);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window\n        .getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useLayoutEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius === 0) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel(\n    {\n      ...props,\n      innerRadius: wheelRadius - wheelThickness,\n      outerRadius: wheelRadius\n    },\n    state,\n    inputRef\n  );\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={classNames(\n        styles,\n        'spectrum-ColorWheel',\n        {\n          'is-disabled': isDisabled\n        },\n        styleProps.className\n      )}\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        containerRef={containerRef}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input\n          {...focusProps}\n          className={classNames(styles, 'spectrum-ColorWheel-slider')}\n          {...inputProps}\n          ref={inputRef}\n        />\n      </ColorThumb>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.js.map"}

package/dist/private/color/ColorWheel.mjs

@@ -90,8 +90,8 @@ const $37ba4dcb2e5337d9$export$f80663f808113381 = /*#__PURE__*/ (0, $jYwsr$react
         style: {
             ...styleProps.style,
             // Workaround around https://github.com/adobe/spectrum-css/issues/1032
-            'width': size,
-            'height': size
+            width: size,
+            height: size
         }
     }, /*#__PURE__*/ (0, $jYwsr$react).createElement("div", {
         ...trackProps,