@react-spectrum/color 3.0.4 → 3.0.6

package/dist/ColorArea.main.js

@@ -1,5 +1,5 @@
 var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
-require("./vars.053845e3.css");
+require("./color.8e3b650f.css");
 var $d4b4e0a63f9ca8c1$exports = require("./colorarea_vars_css.main.js");
 var $6Gwd1$reactspectrumutils = require("@react-spectrum/utils");
 var $6Gwd1$reactariacomponents = require("react-aria-components");

package/dist/ColorArea.mjs

@@ -1,5 +1,5 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
-import "./vars.053845e3.css";
+import "./color.8e3b650f.css";
 import $4eSry$colorarea_vars_cssmodulejs from "./colorarea_vars_css.mjs";
 import {useFocusableRef as $4eSry$useFocusableRef, dimensionValue as $4eSry$dimensionValue, useStyleProps as $4eSry$useStyleProps, classNames as $4eSry$classNames} from "@react-spectrum/utils";
 import {useContextProps as $4eSry$useContextProps, ColorAreaContext as $4eSry$ColorAreaContext} from "react-aria-components";

package/dist/ColorArea.module.js

@@ -1,5 +1,5 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
-import "./vars.053845e3.css";
+import "./color.8e3b650f.css";
 import $4eSry$colorarea_vars_cssmodulejs from "./colorarea_vars_css.module.js";
 import {useFocusableRef as $4eSry$useFocusableRef, dimensionValue as $4eSry$dimensionValue, useStyleProps as $4eSry$useStyleProps, classNames as $4eSry$classNames} from "@react-spectrum/utils";
 import {useContextProps as $4eSry$useContextProps, ColorAreaContext as $4eSry$ColorAreaContext} from "react-aria-components";

package/dist/ColorEditor.main.js

@@ -1,4 +1,4 @@
-require("./ColorEditor.f85fa1f2.css");
+require("./color.818084cc.css");
 var $5f016e950c2dc3a6$exports = require("./ColorArea.main.js");
 var $8bdb9bc27ff3debb$exports = require("./ColorField.main.js");
 var $4537dec0de08c277$exports = require("./ColorSlider.main.js");

package/dist/ColorEditor.mjs

@@ -1,4 +1,4 @@
-import "./ColorEditor.f85fa1f2.css";
+import "./color.818084cc.css";
 import {ColorArea as $40046aa1a7ccb226$export$b2103f68a961418e} from "./ColorArea.mjs";
 import {ColorField as $0077d47e004328f0$export$b865d4358897bb17} from "./ColorField.mjs";
 import {ColorSlider as $3870e4ce67ed7ee1$export$44fd664bcca5b6fb} from "./ColorSlider.mjs";

package/dist/ColorEditor.module.js

@@ -1,4 +1,4 @@
-import "./ColorEditor.f85fa1f2.css";
+import "./color.818084cc.css";
 import {ColorArea as $40046aa1a7ccb226$export$b2103f68a961418e} from "./ColorArea.module.js";
 import {ColorField as $0077d47e004328f0$export$b865d4358897bb17} from "./ColorField.module.js";
 import {ColorSlider as $3870e4ce67ed7ee1$export$44fd664bcca5b6fb} from "./ColorSlider.module.js";

package/dist/ColorField.main.js

@@ -1,4 +1,4 @@
-require("./colorfield.43223e3d.css");
+require("./color.85d29c28.css");
 var $ddec4d6aa21146c4$exports = require("./colorfield_css.main.js");
 var $4ivT8$reactspectrumutils = require("@react-spectrum/utils");
 var $4ivT8$reactariacomponents = require("react-aria-components");
@@ -44,7 +44,7 @@ const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$int
     props = (0, $4ivT8$reactspectrumprovider.useProviderProps)(props);
     props = (0, $4ivT8$reactspectrumform.useFormProps)(props);
     [props] = (0, $4ivT8$reactariacomponents.useContextProps)(props, null, (0, $4ivT8$reactariacomponents.ColorFieldContext));
-    if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
+    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
     if (props.channel) return /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).createElement($8bdb9bc27ff3debb$var$ColorChannelField, {
         ...props,
         channel: props.channel,

package/dist/ColorField.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAsB;IACnH,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,MAAM,CAAA,GAAA,4CAAgB;IACvD,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,IAAI,MAAM,OAAO,EACf,qBAAO,0DAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,0DAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,kDAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,0CAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,oIACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACpC,MAAM,IAAI,kBAAI,0DAAC;QAAM,MAAK;QAAS,MAAM,MAAM,IAAI;QAAE,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAGpH;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,mCAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAEzC","sources":["packages/@react-spectrum/color/src/ColorField.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 '@react-spectrum/utils';\nimport {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';\nimport {ColorFieldContext, useContextProps} from 'react-aria-components';\nimport React, {Ref, useRef} from 'react';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorChannelField, useColorField} from '@react-aria/color';\nimport {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n  if (props.placeholder) {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n  }\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel,\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n      {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAsB;IACnH,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,MAAM,CAAA,GAAA,4CAAgB;IACvD,IAAI,MAAM,WAAW,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChD,QAAQ,IAAI,CAAC;IAGf,IAAI,MAAM,OAAO,EACf,qBAAO,0DAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,0DAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,kDAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,0CAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,oIACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACpC,MAAM,IAAI,kBAAI,0DAAC;QAAM,MAAK;QAAS,MAAM,MAAM,IAAI;QAAE,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAGpH;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,mCAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAEzC","sources":["packages/@react-spectrum/color/src/ColorField.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 '@react-spectrum/utils';\nimport {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';\nimport {ColorFieldContext, useContextProps} from 'react-aria-components';\nimport React, {Ref, useRef} from 'react';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorChannelField, useColorField} from '@react-aria/color';\nimport {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n  if (props.placeholder && process.env.NODE_ENV !== 'production') {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n  }\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel,\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n      {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.main.js.map"}

package/dist/ColorField.mjs

@@ -1,4 +1,4 @@
-import "./colorfield.43223e3d.css";
+import "./color.85d29c28.css";
 import $b4uus$colorfield_cssmodulejs from "./colorfield_css.mjs";
 import {classNames as $b4uus$classNames} from "@react-spectrum/utils";
 import {useContextProps as $b4uus$useContextProps, ColorFieldContext as $b4uus$ColorFieldContext} from "react-aria-components";
@@ -38,7 +38,7 @@ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react
     props = (0, $b4uus$useProviderProps)(props);
     props = (0, $b4uus$useFormProps)(props);
     [props] = (0, $b4uus$useContextProps)(props, null, (0, $b4uus$ColorFieldContext));
-    if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
+    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
     if (props.channel) return /*#__PURE__*/ (0, $b4uus$react).createElement($0077d47e004328f0$var$ColorChannelField, {
         ...props,
         channel: props.channel,

package/dist/ColorField.module.js

@@ -1,4 +1,4 @@
-import "./colorfield.43223e3d.css";
+import "./color.85d29c28.css";
 import $b4uus$colorfield_cssmodulejs from "./colorfield_css.module.js";
 import {classNames as $b4uus$classNames} from "@react-spectrum/utils";
 import {useContextProps as $b4uus$useContextProps, ColorFieldContext as $b4uus$ColorFieldContext} from "react-aria-components";
@@ -38,7 +38,7 @@ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react
     props = (0, $b4uus$useProviderProps)(props);
     props = (0, $b4uus$useFormProps)(props);
     [props] = (0, $b4uus$useContextProps)(props, null, (0, $b4uus$ColorFieldContext));
-    if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
+    if (props.placeholder && process.env.NODE_ENV !== 'production') console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
     if (props.channel) return /*#__PURE__*/ (0, $b4uus$react).createElement($0077d47e004328f0$var$ColorChannelField, {
         ...props,
         channel: props.channel,

package/dist/ColorField.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAsB;IACnH,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM,CAAA,GAAA,wBAAgB;IACvD,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,IAAI,MAAM,OAAO,EACf,qBAAO,gCAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,gCAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,gCAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2BAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,gFACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACpC,MAAM,IAAI,kBAAI,gCAAC;QAAM,MAAK;QAAS,MAAM,MAAM,IAAI;QAAE,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAGpH;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,oBAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;;AAEzC","sources":["packages/@react-spectrum/color/src/ColorField.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 '@react-spectrum/utils';\nimport {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';\nimport {ColorFieldContext, useContextProps} from 'react-aria-components';\nimport React, {Ref, useRef} from 'react';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorChannelField, useColorField} from '@react-aria/color';\nimport {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n  if (props.placeholder) {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n  }\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel,\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n      {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAsB;IACnH,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM,CAAA,GAAA,wBAAgB;IACvD,IAAI,MAAM,WAAW,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChD,QAAQ,IAAI,CAAC;IAGf,IAAI,MAAM,OAAO,EACf,qBAAO,gCAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,gCAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,gCAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2BAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,gFACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACpC,MAAM,IAAI,kBAAI,gCAAC;QAAM,MAAK;QAAS,MAAM,MAAM,IAAI;QAAE,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAGpH;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,oBAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;;AAEzC","sources":["packages/@react-spectrum/color/src/ColorField.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 '@react-spectrum/utils';\nimport {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';\nimport {ColorFieldContext, useContextProps} from 'react-aria-components';\nimport React, {Ref, useRef} from 'react';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorChannelField, useColorField} from '@react-aria/color';\nimport {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n  if (props.placeholder && process.env.NODE_ENV !== 'production') {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n  }\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel,\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n      {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.module.js.map"}

package/dist/ColorPicker.main.js

@@ -1,4 +1,4 @@
-require("./ColorPicker.96797a19.css");
+require("./color.9683ca5c.css");
 var $f076f5c85640192a$exports = require("./ColorSwatch.main.js");
 var $64NP6$reactariacomponents = require("react-aria-components");
 var $64NP6$reactspectrumview = require("@react-spectrum/view");

package/dist/ColorPicker.mjs

@@ -1,4 +1,4 @@
-import "./ColorPicker.96797a19.css";
+import "./color.9683ca5c.css";
 import {ColorSwatch as $d68786ae409fa722$export$cae13e90592f246a} from "./ColorSwatch.mjs";
 import {ColorPicker as $5bRyn$ColorPicker, Button as $5bRyn$Button} from "react-aria-components";
 import {Content as $5bRyn$Content} from "@react-spectrum/view";

package/dist/ColorPicker.module.js

@@ -1,4 +1,4 @@
-import "./ColorPicker.96797a19.css";
+import "./color.9683ca5c.css";
 import {ColorSwatch as $d68786ae409fa722$export$cae13e90592f246a} from "./ColorSwatch.module.js";
 import {ColorPicker as $5bRyn$ColorPicker, Button as $5bRyn$Button} from "react-aria-components";
 import {Content as $5bRyn$Content} from "@react-spectrum/view";

package/dist/ColorSlider.main.js

@@ -1,5 +1,5 @@
 var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
-require("./vars.a54898d8.css");
+require("./color.4034864f.css");
 var $28060baf29cc5ac7$exports = require("./colorslider_vars_css.main.js");
 var $5EHW1$reactspectrumutils = require("@react-spectrum/utils");
 var $5EHW1$reactariacomponents = require("react-aria-components");

package/dist/ColorSlider.mjs

@@ -1,5 +1,5 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
-import "./vars.a54898d8.css";
+import "./color.4034864f.css";
 import $fxUYb$colorslider_vars_cssmodulejs from "./colorslider_vars_css.mjs";
 import {useFocusableRef as $fxUYb$useFocusableRef, useStyleProps as $fxUYb$useStyleProps, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
 import {useContextProps as $fxUYb$useContextProps, ColorSliderContext as $fxUYb$ColorSliderContext} from "react-aria-components";

package/dist/ColorSlider.module.js

@@ -1,5 +1,5 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
-import "./vars.a54898d8.css";
+import "./color.4034864f.css";
 import $fxUYb$colorslider_vars_cssmodulejs from "./colorslider_vars_css.module.js";
 import {useFocusableRef as $fxUYb$useFocusableRef, useStyleProps as $fxUYb$useStyleProps, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
 import {useContextProps as $fxUYb$useContextProps, ColorSliderContext as $fxUYb$ColorSliderContext} from "react-aria-components";

package/dist/ColorSwatch.main.js

@@ -1,4 +1,4 @@
-require("./ColorSwatch.fabed858.css");
+require("./color.2b0e7a72.css");
 var $ikjCA$reactariacolor = require("@react-aria/color");
 var $ikjCA$reactariacomponents = require("react-aria-components");
 var $ikjCA$react = require("react");

package/dist/ColorSwatch.mjs

@@ -1,4 +1,4 @@
-import "./ColorSwatch.fabed858.css";
+import "./color.2b0e7a72.css";
 import {useColorSwatch as $5Pjc1$useColorSwatch} from "@react-aria/color";
 import {useContextProps as $5Pjc1$useContextProps, ColorSwatchContext as $5Pjc1$ColorSwatchContext} from "react-aria-components";
 import $5Pjc1$react, {createContext as $5Pjc1$createContext, forwardRef as $5Pjc1$forwardRef, useContext as $5Pjc1$useContext} from "react";

package/dist/ColorSwatch.module.js

@@ -1,4 +1,4 @@
-import "./ColorSwatch.fabed858.css";
+import "./color.2b0e7a72.css";
 import {useColorSwatch as $5Pjc1$useColorSwatch} from "@react-aria/color";
 import {useContextProps as $5Pjc1$useContextProps, ColorSwatchContext as $5Pjc1$ColorSwatchContext} from "react-aria-components";
 import $5Pjc1$react, {createContext as $5Pjc1$createContext, forwardRef as $5Pjc1$forwardRef, useContext as $5Pjc1$useContext} from "react";

package/dist/ColorSwatchPicker.main.js

@@ -1,4 +1,4 @@
-require("./ColorSwatchPicker.25f8fb63.css");
+require("./color.b3345cb8.css");
 var $f076f5c85640192a$exports = require("./ColorSwatch.main.js");
 var $iY2T3$reactariacomponents = require("react-aria-components");
 var $iY2T3$react = require("react");

package/dist/ColorSwatchPicker.mjs

@@ -1,4 +1,4 @@
-import "./ColorSwatchPicker.25f8fb63.css";
+import "./color.b3345cb8.css";
 import {SpectrumColorSwatchContext as $d68786ae409fa722$export$8529d7908a78c058} from "./ColorSwatch.mjs";
 import {ColorSwatchPicker as $1TpDU$ColorSwatchPicker, ColorSwatchPickerItem as $1TpDU$ColorSwatchPickerItem} from "react-aria-components";
 import $1TpDU$react, {forwardRef as $1TpDU$forwardRef} from "react";

package/dist/ColorSwatchPicker.module.js

@@ -1,4 +1,4 @@
-import "./ColorSwatchPicker.25f8fb63.css";
+import "./color.b3345cb8.css";
 import {SpectrumColorSwatchContext as $d68786ae409fa722$export$8529d7908a78c058} from "./ColorSwatch.module.js";
 import {ColorSwatchPicker as $1TpDU$ColorSwatchPicker, ColorSwatchPickerItem as $1TpDU$ColorSwatchPickerItem} from "react-aria-components";
 import $1TpDU$react, {forwardRef as $1TpDU$forwardRef} from "react";

package/dist/ColorThumb.main.js

@@ -1,6 +1,6 @@
-require("./vars.7be40844.css");
+require("./color.f801bfa3.css");
 var $f61d632765728b2e$exports = require("./colorhandle_vars_css.main.js");
-require("./vars.a2a1e25f.css");
+require("./color.ff589589.css");
 var $f65977ae56facfaa$exports = require("./colorloupe_vars_css.main.js");
 var $bRwD9$reactspectrumutils = require("@react-spectrum/utils");
 var $bRwD9$reactspectrumoverlays = require("@react-spectrum/overlays");

package/dist/ColorThumb.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/color/src/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 '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {CSSProperties, 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, useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/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) {\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  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\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.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/color/src/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 '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {CSSProperties, ReactElement, ReactNode, 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, useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/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): ReactNode {\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  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\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.main.js.map"}

package/dist/ColorThumb.mjs

@@ -1,6 +1,6 @@
-import "./vars.7be40844.css";
+import "./color.f801bfa3.css";
 import $1UQoL$colorhandle_vars_cssmodulejs from "./colorhandle_vars_css.mjs";
-import "./vars.a2a1e25f.css";
+import "./color.ff589589.css";
 import $1UQoL$colorloupe_vars_cssmodulejs from "./colorloupe_vars_css.mjs";
 import {classNames as $1UQoL$classNames} from "@react-spectrum/utils";
 import {Overlay as $1UQoL$Overlay} from "@react-spectrum/overlays";

package/dist/ColorThumb.module.js

@@ -1,6 +1,6 @@
-import "./vars.7be40844.css";
+import "./color.f801bfa3.css";
 import $1UQoL$colorhandle_vars_cssmodulejs from "./colorhandle_vars_css.module.js";
-import "./vars.a2a1e25f.css";
+import "./color.ff589589.css";
 import $1UQoL$colorloupe_vars_cssmodulejs from "./colorloupe_vars_css.module.js";
 import {classNames as $1UQoL$classNames} from "@react-spectrum/utils";
 import {Overlay as $1UQoL$Overlay} from "@react-spectrum/overlays";

package/dist/ColorThumb.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/color/src/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 '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {CSSProperties, 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, useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/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) {\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  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\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.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/color/src/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 '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {CSSProperties, ReactElement, ReactNode, 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, useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/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): ReactNode {\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  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\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.module.js.map"}

package/dist/ColorWheel.main.js

@@ -1,5 +1,5 @@
 var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
-require("./vars.27a9fa37.css");
+require("./color.0da417e8.css");
 var $8fc6b1a2f4e7f682$exports = require("./colorwheel_vars_css.main.js");
 var $gEgjt$reactspectrumutils = require("@react-spectrum/utils");
 var $gEgjt$reactariacomponents = require("react-aria-components");

package/dist/ColorWheel.mjs

@@ -1,5 +1,5 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
-import "./vars.27a9fa37.css";
+import "./color.0da417e8.css";
 import $bv4AR$colorwheel_vars_cssmodulejs from "./colorwheel_vars_css.mjs";
 import {useFocusableRef as $bv4AR$useFocusableRef, dimensionValue as $bv4AR$dimensionValue, useStyleProps as $bv4AR$useStyleProps, classNames as $bv4AR$classNames} from "@react-spectrum/utils";
 import {useContextProps as $bv4AR$useContextProps, ColorWheelContext as $bv4AR$ColorWheelContext} from "react-aria-components";

package/dist/ColorWheel.module.js

@@ -1,5 +1,5 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
-import "./vars.27a9fa37.css";
+import "./color.0da417e8.css";
 import $bv4AR$colorwheel_vars_cssmodulejs from "./colorwheel_vars_css.module.js";
 import {useFocusableRef as $bv4AR$useFocusableRef, dimensionValue as $bv4AR$dimensionValue, useStyleProps as $bv4AR$useStyleProps, classNames as $bv4AR$classNames} from "@react-spectrum/utils";
 import {useContextProps as $bv4AR$useContextProps, ColorWheelContext as $bv4AR$ColorWheelContext} from "react-aria-components";

package/dist/{vars.27a9fa37.css → color.0da417e8.css}

@@ -90,4 +90,4 @@
     --spectrum-colorarea-border-color: ButtonText;
   }
 }
-/*# sourceMappingURL=vars.27a9fa37.css.map */
+/*# sourceMappingURL=color.0da417e8.css.map */

package/dist/{vars.27a9fa37.css.map → color.0da417e8.css.map}

@@ -1 +1 @@
-{"mappings":"AAcA;;;;;;;;;;;;AAYA;;;;;;;;;;;;;AAcE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAMF;;;;;;;AAME;;;;;;;;AASA;;;;AAOA;;;;;;;AAcE;;;;AAGE;;;;AAOF;;;;AAOF;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.27a9fa37.css.map"}
+{"mappings":"AAcA;;;;;;;;;;;;AAYA;;;;;;;;;;;;;AAcE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAMF;;;;;;;AAME;;;;;;;;AASA;;;;AAOA;;;;;;;AAcE;;;;AAGE;;;;AAOF;;;;AAOF;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"color.0da417e8.css.map"}

package/dist/{ColorSwatch.fabed858.css → color.2b0e7a72.css}

@@ -257,4 +257,4 @@
     forced-color-adjust: none;
   }
 }
-/*# sourceMappingURL=ColorSwatch.fabed858.css.map */
+/*# sourceMappingURL=color.2b0e7a72.css.map */

package/dist/{ColorSwatch.fabed858.css.map → color.2b0e7a72.css.map}

@@ -1 +1 @@
-{"mappings":"AAAA;;AAEA;EACE;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA","sources":["packages/@react-spectrum/color/src/ColorSwatch.tsx"],"sourcesContent":["@layer s1-a, s1-b;\n\n@layer a {\n  .s1-os1-e {\n    width: calc(1rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-os1-g {\n    width: calc(1.5rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-os1-i {\n    width: calc(2rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-os1-k {\n    width: calc(2.5rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-ns1-e {\n    height: calc(1rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-ns1-g {\n    height: calc(1.5rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-ns1-i {\n    height: calc(2rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-ns1-k {\n    height: calc(2.5rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-_ps1-c {\n    border-start-start-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));\n  }\n}\n\n@layer a {\n  .s1-_ps1-a {\n    border-start-start-radius: 0px;\n  }\n}\n\n@layer a {\n  .s1-_ps1-f {\n    border-start-start-radius: 9999px;\n  }\n}\n\n@layer a {\n  .s1-_qs1-c {\n    border-start-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));\n  }\n}\n\n@layer a {\n  .s1-_qs1-a {\n    border-start-end-radius: 0px;\n  }\n}\n\n@layer a {\n  .s1-_qs1-f {\n    border-start-end-radius: 9999px;\n  }\n}\n\n@layer a {\n  .s1-_rs1-c {\n    border-end-start-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));\n  }\n}\n\n@layer a {\n  .s1-_rs1-a {\n    border-end-start-radius: 0px;\n  }\n}\n\n@layer a {\n  .s1-_rs1-f {\n    border-end-start-radius: 9999px;\n  }\n}\n\n@layer a {\n  .s1-_ss1-c {\n    border-end-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));\n  }\n}\n\n@layer a {\n  .s1-_ss1-a {\n    border-end-end-radius: 0px;\n  }\n}\n\n@layer a {\n  .s1-_ss1-f {\n    border-end-end-radius: 9999px;\n  }\n}\n\n@layer a {\n  .s1-c-1n5whoe {\n    border-color: color-mix(in srgb, var(--spectrum-gray-900), transparent 49%);\n  }\n}\n\n@layer a {\n  .s1-ws1-b {\n    border-top-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));\n  }\n}\n\n@layer a {\n  .s1-xs1-b {\n    border-bottom-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));\n  }\n}\n\n@layer a {\n  .s1-us1-b {\n    border-inline-start-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));\n  }\n}\n\n@layer a {\n  .s1-vs1-b {\n    border-inline-end-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));\n  }\n}\n\n@layer a {\n  .s1-As1-a {\n    border-style: solid;\n  }\n}\n\n@layer a {\n  .s1-__ks1-a {\n    box-sizing: border-box;\n  }\n}\n\n@layer a {\n  .s1-_ts1-b {\n    forced-color-adjust: none;\n  }\n}\n\n"],"names":[],"version":3,"file":"ColorSwatch.fabed858.css.map"}
+{"mappings":"AAAA;;AAEA;EACE;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA","sources":["packages/@react-spectrum/color/src/ColorSwatch.tsx"],"sourcesContent":["@layer s1-a, s1-b;\n\n@layer a {\n  .s1-os1-e {\n    width: calc(1rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-os1-g {\n    width: calc(1.5rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-os1-i {\n    width: calc(2rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-os1-k {\n    width: calc(2.5rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-ns1-e {\n    height: calc(1rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-ns1-g {\n    height: calc(1.5rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-ns1-i {\n    height: calc(2rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-ns1-k {\n    height: calc(2.5rem * var(--spectrum-global-dimension-scale-factor));\n  }\n}\n\n@layer a {\n  .s1-_ps1-c {\n    border-start-start-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));\n  }\n}\n\n@layer a {\n  .s1-_ps1-a {\n    border-start-start-radius: 0px;\n  }\n}\n\n@layer a {\n  .s1-_ps1-f {\n    border-start-start-radius: 9999px;\n  }\n}\n\n@layer a {\n  .s1-_qs1-c {\n    border-start-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));\n  }\n}\n\n@layer a {\n  .s1-_qs1-a {\n    border-start-end-radius: 0px;\n  }\n}\n\n@layer a {\n  .s1-_qs1-f {\n    border-start-end-radius: 9999px;\n  }\n}\n\n@layer a {\n  .s1-_rs1-c {\n    border-end-start-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));\n  }\n}\n\n@layer a {\n  .s1-_rs1-a {\n    border-end-start-radius: 0px;\n  }\n}\n\n@layer a {\n  .s1-_rs1-f {\n    border-end-start-radius: 9999px;\n  }\n}\n\n@layer a {\n  .s1-_ss1-c {\n    border-end-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));\n  }\n}\n\n@layer a {\n  .s1-_ss1-a {\n    border-end-end-radius: 0px;\n  }\n}\n\n@layer a {\n  .s1-_ss1-f {\n    border-end-end-radius: 9999px;\n  }\n}\n\n@layer a {\n  .s1-c-1n5whoe {\n    border-color: color-mix(in srgb, var(--spectrum-gray-900), transparent 49%);\n  }\n}\n\n@layer a {\n  .s1-ws1-b {\n    border-top-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));\n  }\n}\n\n@layer a {\n  .s1-xs1-b {\n    border-bottom-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));\n  }\n}\n\n@layer a {\n  .s1-us1-b {\n    border-inline-start-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));\n  }\n}\n\n@layer a {\n  .s1-vs1-b {\n    border-inline-end-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));\n  }\n}\n\n@layer a {\n  .s1-As1-a {\n    border-style: solid;\n  }\n}\n\n@layer a {\n  .s1-__ks1-a {\n    box-sizing: border-box;\n  }\n}\n\n@layer a {\n  .s1-_ts1-b {\n    forced-color-adjust: none;\n  }\n}\n\n"],"names":[],"version":3,"file":"color.2b0e7a72.css.map"}

package/dist/{vars.a54898d8.css → color.4034864f.css}

@@ -117,4 +117,4 @@
     --spectrum-colorarea-border-color: ButtonText;
   }
 }
-/*# sourceMappingURL=vars.a54898d8.css.map */
+/*# sourceMappingURL=color.4034864f.css.map */

package/dist/{vars.a54898d8.css.map → color.4034864f.css.map}

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;AAiBA;;;;AAIA;;;;AAKF;;;;;;AAME;;;;;AAMF;;;;;AAIE;;;;;;AAeF;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;;AAIE;;;;AAIA;;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.a54898d8.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;AAiBA;;;;AAIA;;;;AAKF;;;;;;AAME;;;;;AAMF;;;;;AAIE;;;;;;AAeF;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;;AAIE;;;;AAIA;;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"color.4034864f.css.map"}

package/dist/{ColorEditor.f85fa1f2.css → color.818084cc.css}

@@ -17,4 +17,4 @@
     column-gap: 1rem;
   }
 }
-/*# sourceMappingURL=ColorEditor.f85fa1f2.css.map */
+/*# sourceMappingURL=color.818084cc.css.map */

package/dist/{ColorEditor.f85fa1f2.css.map → color.818084cc.css.map}

@@ -1 +1 @@
-{"mappings":"ACAA;;AAEA;EAOE;;;;EANA;;;;EAMA;;;;EAMA","sources":["831a302ce8de66a2","packages/@react-spectrum/color/src/ColorEditor.tsx"],"sourcesContent":["@import \"61db59ad802e5cd4\";\n@import \"4bcaf5321f340d0a\";\n@import \"76e53872e9d29f42\";\n","@layer s1-a, s1-b;\n\n@layer a {\n  .s1-_Ss1-d {\n    display: flex;\n  }\n}\n\n@layer a {\n  .s1-_Zs1-b {\n    flex-direction: column;\n  }\n}\n\n@layer a {\n  .s1-ls1-e {\n    row-gap: 1rem;\n  }\n}\n\n@layer a {\n  .s1-ms1-e {\n    column-gap: 1rem;\n  }\n}\n\n"],"names":[],"version":3,"file":"ColorEditor.f85fa1f2.css.map"}
+{"mappings":"ACAA;;AAEA;EAOE;;;;EANA;;;;EAMA;;;;EAMA","sources":["831a302ce8de66a2","packages/@react-spectrum/color/src/ColorEditor.tsx"],"sourcesContent":["@import \"61db59ad802e5cd4\";\n@import \"4bcaf5321f340d0a\";\n@import \"76e53872e9d29f42\";\n","@layer s1-a, s1-b;\n\n@layer a {\n  .s1-_Ss1-d {\n    display: flex;\n  }\n}\n\n@layer a {\n  .s1-_Zs1-b {\n    flex-direction: column;\n  }\n}\n\n@layer a {\n  .s1-ls1-e {\n    row-gap: 1rem;\n  }\n}\n\n@layer a {\n  .s1-ms1-e {\n    column-gap: 1rem;\n  }\n}\n\n"],"names":[],"version":3,"file":"color.818084cc.css.map"}

package/dist/{colorfield.43223e3d.css → color.85d29c28.css}

@@ -9,4 +9,4 @@
 .Fm6LxG_react-spectrum-ColorField-input:not(:placeholder-shown):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
   text-align: end;
 }
-/*# sourceMappingURL=colorfield.43223e3d.css.map */
+/*# sourceMappingURL=color.85d29c28.css.map */

package/dist/{colorfield.43223e3d.css.map → color.85d29c28.css.map}

@@ -1 +1 @@
-{"mappings":"AAYA;;;;AAEE;;;;AAAA","sources":["packages/@react-spectrum/color/src/colorfield.css"],"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\n.react-spectrum-ColorField-input:not(:placeholder-shown) {\n  unicode-bidi: plaintext;\n  &:dir(rtl) {\n    text-align: end;\n  }\n}\n"],"names":[],"version":3,"file":"colorfield.43223e3d.css.map"}
+{"mappings":"AAYA;;;;AAEE;;;;AAAA","sources":["packages/@react-spectrum/color/src/colorfield.css"],"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\n.react-spectrum-ColorField-input:not(:placeholder-shown) {\n  unicode-bidi: plaintext;\n  &:dir(rtl) {\n    text-align: end;\n  }\n}\n"],"names":[],"version":3,"file":"color.85d29c28.css.map"}

package/dist/{vars.053845e3.css → color.8e3b650f.css}

@@ -90,4 +90,4 @@
     forced-color-adjust: none;
   }
 }
-/*# sourceMappingURL=vars.053845e3.css.map */
+/*# sourceMappingURL=color.8e3b650f.css.map */

package/dist/{vars.053845e3.css.map → color.8e3b650f.css.map}

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;;AAcE;;;;AAIE;;;;;AAJF;;;;AAIE;;;;;AAOF;;;;AAKA;;;;;;;;AAYF;;;;;;AAKE;;;;AAKF;;;;;;;;;;;;AAaI;;;;AAKJ;;;;AAKI;;;;AAGE;;;;AAMN;EACI;;;;;;EAME","sources":["packages/@adobe/spectrum-css-temp/components/colorarea/vars.css"],"sourcesContent":["/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.053845e3.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;;AAcE;;;;AAIE;;;;;AAJF;;;;AAIE;;;;;AAOF;;;;AAKA;;;;;;;;AAYF;;;;;;AAKE;;;;AAKF;;;;;;;;;;;;AAaI;;;;AAKJ;;;;AAKI;;;;AAGE;;;;AAMN;EACI;;;;;;EAME","sources":["packages/@adobe/spectrum-css-temp/components/colorarea/vars.css"],"sourcesContent":["/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"color.8e3b650f.css.map"}

package/dist/{ColorPicker.96797a19.css → color.9683ca5c.css}

@@ -203,4 +203,4 @@
     }
   }
 }
-/*# sourceMappingURL=ColorPicker.96797a19.css.map */
+/*# sourceMappingURL=color.9683ca5c.css.map */

package/dist/{ColorPicker.96797a19.css.map → color.9683ca5c.css.map}

@@ -1 +1 @@
-{"mappings":"ACAA;;AAAA;EA4EI;;;;;AA5EJ;EAoFI;;;;;AApFJ;EA4FI;;;;;AA5FJ;EAoGI;;;;;AApGJ;EA4GI;;;;;AA5GJ;EAoHI;;;;;AApHJ;EA4HI;;;;EAAA;;;;;AA1HJ;EACE;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAYA;;;;EA8DA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAxJA;;;;EAMA;;;;EAMA;;;;EAcA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvCF;EACE;IACE","sources":["4265cbe66e3f0344","packages/@react-spectrum/color/src/ColorPicker.tsx"],"sourcesContent":["@import \"01eac0e6ccf8a0b9\";\n@import \"e3400cf9c7231dbc\";\n","@layer s1-a, s1-b, s1-c, s1-d, s1-e, s1-f, s1-g, s1-h;\n\n@layer a {\n  .s1-bs1-a {\n    background-color: transparent;\n  }\n}\n\n@layer a {\n  .s1-As1-f {\n    border-style: none;\n  }\n}\n\n@layer a {\n  .s1-Is1-a {\n    padding-top: 0px;\n  }\n}\n\n@layer a {\n  .s1-Js1-a {\n    padding-bottom: 0px;\n  }\n}\n\n@layer a {\n  .s1-Gs1-a {\n    padding-inline-start: 0px;\n  }\n}\n\n@layer a {\n  .s1-Hs1-a {\n    padding-inline-end: 0px;\n  }\n}\n\n@layer a {\n  .s1-_Ss1-d {\n    display: flex;\n  }\n}\n\n@layer a {\n  .s1-_Us1-c {\n    align-items: center;\n  }\n}\n\n@layer a {\n  .s1-ls1-M {\n    row-gap: 0.7142857142857143em;\n  }\n}\n\n@layer a {\n  .s1-ms1-M {\n    column-gap: 0.7142857142857143em;\n  }\n}\n\n@layer a {\n  .s1-_Es1-a {\n    outline-style: none;\n  }\n}\n\n@layer a {\n  .s1-5s1-a {\n    font-family: adobe-clean, ui-sans-serif, system-ui, sans-serif;\n  }\n}\n\n@layer s1-b {\n  .s1-5-enzrfps1-b {\n    &:lang(ar) {\n      font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;\n    }\n  }\n}\n\n@layer s1-c {\n  .s1-5-enzwzjs1-c {\n    &:lang(he) {\n      font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;\n    }\n  }\n}\n\n@layer s1-d {\n  .s1-5-enzykds1-d {\n    &:lang(ja) {\n      font-family: adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;\n    }\n  }\n}\n\n@layer s1-e {\n  .s1-5-enzzrgs1-e {\n    &:lang(ko) {\n      font-family: adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif;\n    }\n  }\n}\n\n@layer s1-f {\n  .s1-5-eo0c6ss1-f {\n    &:lang(zh) {\n      font-family: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif;\n    }\n  }\n}\n\n@layer s1-g {\n  .s1-5-1uotwbws1-g {\n    &:lang(zh-hant) {\n      font-family: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif;\n    }\n  }\n}\n\n@layer s1-h {\n  .s1-5-bc1l9os1-h {\n    &:lang(zh-Hans, zh-CN, zh-SG) {\n      font-family: adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif;\n    }\n  }\n}\n\n@layer a {\n  .s1-as1-___K {\n    color: var(--spectrum-alias-text-color, var(--spectrum-global-color-gray-800));\n  }\n}\n\n@layer a {\n  .s1-6s1-a {\n    font-size: var(--spectrum-global-dimension-font-size-50);\n  }\n}\n\n@layer a {\n  .s1-6s1-b {\n    font-size: var(--spectrum-global-dimension-font-size-75);\n  }\n}\n\n@layer a {\n  .s1-6s1-c {\n    font-size: var(--spectrum-global-dimension-font-size-100);\n  }\n}\n\n@layer a {\n  .s1-6s1-d {\n    font-size: var(--spectrum-global-dimension-font-size-200);\n  }\n}\n\n"],"names":[],"version":3,"file":"ColorPicker.96797a19.css.map"}
+{"mappings":"ACAA;;AAAA;EA4EI;;;;;AA5EJ;EAoFI;;;;;AApFJ;EA4FI;;;;;AA5FJ;EAoGI;;;;;AApGJ;EA4GI;;;;;AA5GJ;EAoHI;;;;;AApHJ;EA4HI;;;;EAAA;;;;;AA1HJ;EACE;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAYA;;;;EA8DA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAxJA;;;;EAMA;;;;EAMA;;;;EAcA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvCF;EACE;IACE","sources":["4265cbe66e3f0344","packages/@react-spectrum/color/src/ColorPicker.tsx"],"sourcesContent":["@import \"01eac0e6ccf8a0b9\";\n@import \"e3400cf9c7231dbc\";\n","@layer s1-a, s1-b, s1-c, s1-d, s1-e, s1-f, s1-g, s1-h;\n\n@layer a {\n  .s1-bs1-a {\n    background-color: transparent;\n  }\n}\n\n@layer a {\n  .s1-As1-f {\n    border-style: none;\n  }\n}\n\n@layer a {\n  .s1-Is1-a {\n    padding-top: 0px;\n  }\n}\n\n@layer a {\n  .s1-Js1-a {\n    padding-bottom: 0px;\n  }\n}\n\n@layer a {\n  .s1-Gs1-a {\n    padding-inline-start: 0px;\n  }\n}\n\n@layer a {\n  .s1-Hs1-a {\n    padding-inline-end: 0px;\n  }\n}\n\n@layer a {\n  .s1-_Ss1-d {\n    display: flex;\n  }\n}\n\n@layer a {\n  .s1-_Us1-c {\n    align-items: center;\n  }\n}\n\n@layer a {\n  .s1-ls1-M {\n    row-gap: 0.7142857142857143em;\n  }\n}\n\n@layer a {\n  .s1-ms1-M {\n    column-gap: 0.7142857142857143em;\n  }\n}\n\n@layer a {\n  .s1-_Es1-a {\n    outline-style: none;\n  }\n}\n\n@layer a {\n  .s1-5s1-a {\n    font-family: adobe-clean, ui-sans-serif, system-ui, sans-serif;\n  }\n}\n\n@layer s1-b {\n  .s1-5-enzrfps1-b {\n    &:lang(ar) {\n      font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;\n    }\n  }\n}\n\n@layer s1-c {\n  .s1-5-enzwzjs1-c {\n    &:lang(he) {\n      font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;\n    }\n  }\n}\n\n@layer s1-d {\n  .s1-5-enzykds1-d {\n    &:lang(ja) {\n      font-family: adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;\n    }\n  }\n}\n\n@layer s1-e {\n  .s1-5-enzzrgs1-e {\n    &:lang(ko) {\n      font-family: adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif;\n    }\n  }\n}\n\n@layer s1-f {\n  .s1-5-eo0c6ss1-f {\n    &:lang(zh) {\n      font-family: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif;\n    }\n  }\n}\n\n@layer s1-g {\n  .s1-5-1uotwbws1-g {\n    &:lang(zh-hant) {\n      font-family: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif;\n    }\n  }\n}\n\n@layer s1-h {\n  .s1-5-bc1l9os1-h {\n    &:lang(zh-Hans, zh-CN, zh-SG) {\n      font-family: adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif;\n    }\n  }\n}\n\n@layer a {\n  .s1-as1-___K {\n    color: var(--spectrum-alias-text-color, var(--spectrum-global-color-gray-800));\n  }\n}\n\n@layer a {\n  .s1-6s1-a {\n    font-size: var(--spectrum-global-dimension-font-size-50);\n  }\n}\n\n@layer a {\n  .s1-6s1-b {\n    font-size: var(--spectrum-global-dimension-font-size-75);\n  }\n}\n\n@layer a {\n  .s1-6s1-c {\n    font-size: var(--spectrum-global-dimension-font-size-100);\n  }\n}\n\n@layer a {\n  .s1-6s1-d {\n    font-size: var(--spectrum-global-dimension-font-size-200);\n  }\n}\n\n"],"names":[],"version":3,"file":"color.9683ca5c.css.map"}

package/dist/{ColorSwatchPicker.25f8fb63.css → color.b3345cb8.css}

@@ -353,4 +353,4 @@
     }
   }
 }
-/*# sourceMappingURL=ColorSwatchPicker.25f8fb63.css.map */
+/*# sourceMappingURL=color.b3345cb8.css.map */

package/dist/{ColorSwatchPicker.25f8fb63.css.map → color.b3345cb8.css.map}

@@ -1 +1 @@
-{"mappings":"ACAA;;AAEA;EACE;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EA1CA;;;;EAMA;;;;EAMA;;;;EAcA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA9GA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjDF;EACE;IACE","sources":["cdd25b8fe55df2e4","packages/@react-spectrum/color/src/ColorSwatchPicker.tsx"],"sourcesContent":["@import \"8c09881f86da33b8\";\n@import \"f06bfa769f1817df\";\n@import \"716a9b4865afe672\";\n","@layer s1-a, s1-b;\n\n@layer a {\n  .s1-_Ss1-d {\n    display: flex;\n  }\n}\n\n@layer a {\n  .s1-_0s1-a {\n    flex-wrap: wrap;\n  }\n}\n\n@layer a {\n  .s1-ls1-F {\n    row-gap: 0.125rem;\n  }\n}\n\n@layer a {\n  .s1-ls1-b {\n    row-gap: 0.25rem;\n  }\n}\n\n@layer a {\n  .s1-ls1-c {\n    row-gap: 0.5rem;\n  }\n}\n\n@layer a {\n  .s1-ms1-F {\n    column-gap: 0.125rem;\n  }\n}\n\n@layer a {\n  .s1-ms1-b {\n    column-gap: 0.25rem;\n  }\n}\n\n@layer a {\n  .s1-ms1-c {\n    column-gap: 0.5rem;\n  }\n}\n\n"],"names":[],"version":3,"file":"ColorSwatchPicker.25f8fb63.css.map"}
+{"mappings":"ACAA;;AAEA;EACE;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EA1CA;;;;EAMA;;;;EAMA;;;;EAcA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA9GA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjDF;EACE;IACE","sources":["cdd25b8fe55df2e4","packages/@react-spectrum/color/src/ColorSwatchPicker.tsx"],"sourcesContent":["@import \"8c09881f86da33b8\";\n@import \"f06bfa769f1817df\";\n@import \"716a9b4865afe672\";\n","@layer s1-a, s1-b;\n\n@layer a {\n  .s1-_Ss1-d {\n    display: flex;\n  }\n}\n\n@layer a {\n  .s1-_0s1-a {\n    flex-wrap: wrap;\n  }\n}\n\n@layer a {\n  .s1-ls1-F {\n    row-gap: 0.125rem;\n  }\n}\n\n@layer a {\n  .s1-ls1-b {\n    row-gap: 0.25rem;\n  }\n}\n\n@layer a {\n  .s1-ls1-c {\n    row-gap: 0.5rem;\n  }\n}\n\n@layer a {\n  .s1-ms1-F {\n    column-gap: 0.125rem;\n  }\n}\n\n@layer a {\n  .s1-ms1-b {\n    column-gap: 0.25rem;\n  }\n}\n\n@layer a {\n  .s1-ms1-c {\n    column-gap: 0.5rem;\n  }\n}\n\n"],"names":[],"version":3,"file":"color.b3345cb8.css.map"}

package/dist/{vars.7be40844.css → color.f801bfa3.css}

@@ -72,4 +72,4 @@
     --spectrum-colorhandle-outer-border-color: ButtonFace;
   }
 }
-/*# sourceMappingURL=vars.7be40844.css.map */
+/*# sourceMappingURL=color.f801bfa3.css.map */

package/dist/{vars.7be40844.css.map → color.f801bfa3.css.map}

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;;;;;;AA8BE;;;;;;;;;;;AAeA;;;;AAKF;;;;;;;AAcA;;;;;;AAMA;;;;;;AAKE;;;;;;AAKE;;;;AAMJ;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.7be40844.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;;;;;;AA8BE;;;;;;;;;;;AAeA;;;;AAKF;;;;;;;AAcA;;;;;;AAMA;;;;;;AAKE;;;;;;AAKE;;;;AAMJ;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"color.f801bfa3.css.map"}

package/dist/{vars.a2a1e25f.css → color.ff589589.css}

@@ -38,4 +38,4 @@
     --spectrum-colorloupe-outer-border-color: ButtonFace;
   }
 }
-/*# sourceMappingURL=vars.a2a1e25f.css.map */
+/*# sourceMappingURL=color.ff589589.css.map */

package/dist/{vars.a2a1e25f.css.map → color.ff589589.css.map}

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;;AA0BE;;;;;;AAOF;;;;;;AASA;;;;AAIA;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.a2a1e25f.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;;AA0BE;;;;;;AAOF;;;;;;AASA;;;;AAIA;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"color.ff589589.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/color",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,29 +36,29 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/color": "^3.0.4",
-    "@react-aria/focus": "^3.20.0",
-    "@react-aria/i18n": "^3.12.6",
-    "@react-aria/interactions": "^3.24.0",
-    "@react-aria/utils": "^3.28.0",
-    "@react-spectrum/dialog": "^3.8.18",
-    "@react-spectrum/form": "^3.7.12",
-    "@react-spectrum/label": "^3.16.12",
-    "@react-spectrum/overlays": "^5.7.2",
-    "@react-spectrum/picker": "^3.15.6",
-    "@react-spectrum/textfield": "^3.13.0",
-    "@react-spectrum/utils": "^3.12.2",
-    "@react-spectrum/view": "^3.6.16",
-    "@react-stately/color": "^3.8.3",
-    "@react-types/color": "^3.0.3",
-    "@react-types/shared": "^3.28.0",
-    "@react-types/textfield": "^3.12.0",
+    "@react-aria/color": "^3.0.6",
+    "@react-aria/focus": "^3.20.2",
+    "@react-aria/i18n": "^3.12.8",
+    "@react-aria/interactions": "^3.25.0",
+    "@react-aria/utils": "^3.28.2",
+    "@react-spectrum/dialog": "^3.8.20",
+    "@react-spectrum/form": "^3.7.14",
+    "@react-spectrum/label": "^3.16.14",
+    "@react-spectrum/overlays": "^5.7.4",
+    "@react-spectrum/picker": "^3.15.8",
+    "@react-spectrum/textfield": "^3.13.2",
+    "@react-spectrum/utils": "^3.12.4",
+    "@react-spectrum/view": "^3.6.18",
+    "@react-stately/color": "^3.8.4",
+    "@react-types/color": "^3.0.4",
+    "@react-types/shared": "^3.29.0",
+    "@react-types/textfield": "^3.12.1",
     "@swc/helpers": "^0.5.0",
-    "react-aria-components": "^1.7.0"
+    "react-aria-components": "^1.8.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1",
-    "@react-spectrum/style-macro-s1": "3.0.0-alpha.3"
+    "@react-spectrum/style-macro-s1": "3.0.0-alpha.4"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -68,5 +68,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
+  "gitHead": "9b66d270572f482948afee95622a85cdf68ed408"
 }

package/src/ColorField.tsx

@@ -30,7 +30,7 @@ export const ColorField = React.forwardRef(function ColorField(props: SpectrumCo
   props = useProviderProps(props);
   props = useFormProps(props);
   [props] = useContextProps(props, null, ColorFieldContext);
-  if (props.placeholder) {
+  if (props.placeholder && process.env.NODE_ENV !== 'production') {
     console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
   }
 

package/src/ColorThumb.tsx

@@ -14,7 +14,7 @@ import {classNames} from '@react-spectrum/utils';
 import {Color} from '@react-types/color';
 import {DOMProps, RefObject} from '@react-types/shared';
 import {Overlay} from '@react-spectrum/overlays';
-import React, {CSSProperties, ReactElement, useRef, useState} from 'react';
+import React, {CSSProperties, ReactElement, ReactNode, useRef, useState} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
 import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
 import {useId, useLayoutEffect} from '@react-aria/utils';
@@ -31,7 +31,7 @@ interface ColorThumbProps extends DOMProps {
   containerRef?: RefObject<HTMLElement | null>
 }
 
-function ColorThumb(props: ColorThumbProps) {
+function ColorThumb(props: ColorThumbProps): ReactNode {
   let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;
 
   let valueCSS = value.toString('css');