@react-spectrum/color 3.0.0-nightly.4564 → 3.0.0-nightly.4578

package/dist/ColorField.main.js

@@ -1,11 +1,13 @@
 require("./colorfield.faeff3c2.css");
 var $ddec4d6aa21146c4$exports = require("./colorfield_css.main.js");
 var $4ivT8$reactspectrumutils = require("@react-spectrum/utils");
+var $4ivT8$reactariacomponents = require("react-aria-components");
 var $4ivT8$react = require("react");
 var $4ivT8$reactspectrumtextfield = require("@react-spectrum/textfield");
 var $4ivT8$reactariacolor = require("@react-aria/color");
 var $4ivT8$reactstatelycolor = require("@react-stately/color");
 var $4ivT8$reactspectrumform = require("@react-spectrum/form");
+var $4ivT8$reactariai18n = require("@react-aria/i18n");
 var $4ivT8$reactspectrumprovider = require("@react-spectrum/provider");
 
 
@@ -36,26 +38,62 @@ $parcel$export(module.exports, "ColorField", () => $8bdb9bc27ff3debb$export$b865
 
 
 
+
+
 function $8bdb9bc27ff3debb$var$ColorField(props, ref) {
     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.channel) return /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).createElement($8bdb9bc27ff3debb$var$ColorChannelField, {
+        ...props,
+        channel: props.channel,
+        forwardedRef: ref
+    });
+    else return /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).createElement($8bdb9bc27ff3debb$var$HexColorField, {
+        ...props,
+        forwardedRef: ref
+    });
+}
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */ const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).forwardRef($8bdb9bc27ff3debb$var$ColorField);
+function $8bdb9bc27ff3debb$var$ColorChannelField(props) {
     let { value: // These disabled props are handled by the state hook
-    value, defaultValue: defaultValue, onChange: onChange, ...otherProps } = props;
+    value, defaultValue: defaultValue, onChange: onChange, validate: validate, forwardedRef: forwardedRef, ...otherProps } = props;
+    let { locale: locale } = (0, $4ivT8$reactariai18n.useLocale)();
+    let state = (0, $4ivT8$reactstatelycolor.useColorChannelFieldState)({
+        ...props,
+        locale: locale
+    });
+    let inputRef = (0, $4ivT8$react.useRef)(null);
+    let result = (0, $4ivT8$reactariacolor.useColorChannelField)(otherProps, state, inputRef);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).createElement((0, ($parcel$interopDefault($4ivT8$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).createElement((0, $4ivT8$reactspectrumtextfield.TextFieldBase), {
+        ...otherProps,
+        ref: forwardedRef,
+        inputRef: inputRef,
+        ...result,
+        inputClassName: (0, $4ivT8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ddec4d6aa21146c4$exports))), "react-spectrum-ColorField-input")
+    }), props.name && /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).createElement("input", {
+        type: "hidden",
+        name: props.name,
+        value: isNaN(state.numberValue) ? "" : state.numberValue
+    }));
+}
+function $8bdb9bc27ff3debb$var$HexColorField(props) {
+    let { value: // These disabled props are handled by the state hook
+    value, defaultValue: defaultValue, onChange: onChange, forwardedRef: forwardedRef, ...otherProps } = props;
     let state = (0, $4ivT8$reactstatelycolor.useColorFieldState)(props);
     let inputRef = (0, $4ivT8$react.useRef)(null);
     let result = (0, $4ivT8$reactariacolor.useColorField)(otherProps, state, inputRef);
-    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");
     return /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).createElement((0, $4ivT8$reactspectrumtextfield.TextFieldBase), {
         ...otherProps,
-        ref: ref,
+        ref: forwardedRef,
         inputRef: inputRef,
         ...result,
         inputClassName: (0, $4ivT8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ddec4d6aa21146c4$exports))), "react-spectrum-ColorField-input")
     });
 }
-/**
- * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
- */ const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).forwardRef($8bdb9bc27ff3debb$var$ColorField);
 
 
 //# sourceMappingURL=ColorField.main.js.map

package/dist/ColorField.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAaD,SAAS,iCAAW,KAA8B,EAAE,GAAsB;IACxE,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,EACR,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,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,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;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","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 React, {Ref, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\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    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\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  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={ref}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n"],"names":[],"version":3,"file":"ColorField.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,SAAS,iCAAW,KAA8B,EAAE,GAAsB;IACxE,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;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC;AAQrC,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\nfunction 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\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\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,11 +1,13 @@
 import "./colorfield.faeff3c2.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";
 import $b4uus$react, {useRef as $b4uus$useRef} from "react";
 import {TextFieldBase as $b4uus$TextFieldBase} from "@react-spectrum/textfield";
-import {useColorField as $b4uus$useColorField} from "@react-aria/color";
-import {useColorFieldState as $b4uus$useColorFieldState} from "@react-stately/color";
+import {useColorChannelField as $b4uus$useColorChannelField, useColorField as $b4uus$useColorField} from "@react-aria/color";
+import {useColorChannelFieldState as $b4uus$useColorChannelFieldState, useColorFieldState as $b4uus$useColorFieldState} from "@react-stately/color";
 import {useFormProps as $b4uus$useFormProps} from "@react-spectrum/form";
+import {useLocale as $b4uus$useLocale} from "@react-aria/i18n";
 import {useProviderProps as $b4uus$useProviderProps} from "@react-spectrum/provider";
 
 
@@ -30,26 +32,62 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 function $0077d47e004328f0$var$ColorField(props, ref) {
     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.channel) return /*#__PURE__*/ (0, $b4uus$react).createElement($0077d47e004328f0$var$ColorChannelField, {
+        ...props,
+        channel: props.channel,
+        forwardedRef: ref
+    });
+    else return /*#__PURE__*/ (0, $b4uus$react).createElement($0077d47e004328f0$var$HexColorField, {
+        ...props,
+        forwardedRef: ref
+    });
+}
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef($0077d47e004328f0$var$ColorField);
+function $0077d47e004328f0$var$ColorChannelField(props) {
     let { value: // These disabled props are handled by the state hook
-    value, defaultValue: defaultValue, onChange: onChange, ...otherProps } = props;
+    value, defaultValue: defaultValue, onChange: onChange, validate: validate, forwardedRef: forwardedRef, ...otherProps } = props;
+    let { locale: locale } = (0, $b4uus$useLocale)();
+    let state = (0, $b4uus$useColorChannelFieldState)({
+        ...props,
+        locale: locale
+    });
+    let inputRef = (0, $b4uus$useRef)(null);
+    let result = (0, $b4uus$useColorChannelField)(otherProps, state, inputRef);
+    return /*#__PURE__*/ (0, $b4uus$react).createElement((0, $b4uus$react).Fragment, null, /*#__PURE__*/ (0, $b4uus$react).createElement((0, $b4uus$TextFieldBase), {
+        ...otherProps,
+        ref: forwardedRef,
+        inputRef: inputRef,
+        ...result,
+        inputClassName: (0, $b4uus$classNames)((0, ($parcel$interopDefault($b4uus$colorfield_cssmodulejs))), "react-spectrum-ColorField-input")
+    }), props.name && /*#__PURE__*/ (0, $b4uus$react).createElement("input", {
+        type: "hidden",
+        name: props.name,
+        value: isNaN(state.numberValue) ? "" : state.numberValue
+    }));
+}
+function $0077d47e004328f0$var$HexColorField(props) {
+    let { value: // These disabled props are handled by the state hook
+    value, defaultValue: defaultValue, onChange: onChange, forwardedRef: forwardedRef, ...otherProps } = props;
     let state = (0, $b4uus$useColorFieldState)(props);
     let inputRef = (0, $b4uus$useRef)(null);
     let result = (0, $b4uus$useColorField)(otherProps, state, inputRef);
-    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");
     return /*#__PURE__*/ (0, $b4uus$react).createElement((0, $b4uus$TextFieldBase), {
         ...otherProps,
-        ref: ref,
+        ref: forwardedRef,
         inputRef: inputRef,
         ...result,
         inputClassName: (0, $b4uus$classNames)((0, ($parcel$interopDefault($b4uus$colorfield_cssmodulejs))), "react-spectrum-ColorField-input")
     });
 }
-/**
- * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
- */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef($0077d47e004328f0$var$ColorField);
 
 
 export {$0077d47e004328f0$export$b865d4358897bb17 as ColorField};

package/dist/ColorField.module.js

@@ -1,11 +1,13 @@
 import "./colorfield.faeff3c2.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";
 import $b4uus$react, {useRef as $b4uus$useRef} from "react";
 import {TextFieldBase as $b4uus$TextFieldBase} from "@react-spectrum/textfield";
-import {useColorField as $b4uus$useColorField} from "@react-aria/color";
-import {useColorFieldState as $b4uus$useColorFieldState} from "@react-stately/color";
+import {useColorChannelField as $b4uus$useColorChannelField, useColorField as $b4uus$useColorField} from "@react-aria/color";
+import {useColorChannelFieldState as $b4uus$useColorChannelFieldState, useColorFieldState as $b4uus$useColorFieldState} from "@react-stately/color";
 import {useFormProps as $b4uus$useFormProps} from "@react-spectrum/form";
+import {useLocale as $b4uus$useLocale} from "@react-aria/i18n";
 import {useProviderProps as $b4uus$useProviderProps} from "@react-spectrum/provider";
 
 
@@ -30,26 +32,62 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 function $0077d47e004328f0$var$ColorField(props, ref) {
     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.channel) return /*#__PURE__*/ (0, $b4uus$react).createElement($0077d47e004328f0$var$ColorChannelField, {
+        ...props,
+        channel: props.channel,
+        forwardedRef: ref
+    });
+    else return /*#__PURE__*/ (0, $b4uus$react).createElement($0077d47e004328f0$var$HexColorField, {
+        ...props,
+        forwardedRef: ref
+    });
+}
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef($0077d47e004328f0$var$ColorField);
+function $0077d47e004328f0$var$ColorChannelField(props) {
     let { value: // These disabled props are handled by the state hook
-    value, defaultValue: defaultValue, onChange: onChange, ...otherProps } = props;
+    value, defaultValue: defaultValue, onChange: onChange, validate: validate, forwardedRef: forwardedRef, ...otherProps } = props;
+    let { locale: locale } = (0, $b4uus$useLocale)();
+    let state = (0, $b4uus$useColorChannelFieldState)({
+        ...props,
+        locale: locale
+    });
+    let inputRef = (0, $b4uus$useRef)(null);
+    let result = (0, $b4uus$useColorChannelField)(otherProps, state, inputRef);
+    return /*#__PURE__*/ (0, $b4uus$react).createElement((0, $b4uus$react).Fragment, null, /*#__PURE__*/ (0, $b4uus$react).createElement((0, $b4uus$TextFieldBase), {
+        ...otherProps,
+        ref: forwardedRef,
+        inputRef: inputRef,
+        ...result,
+        inputClassName: (0, $b4uus$classNames)((0, ($parcel$interopDefault($b4uus$colorfield_cssmodulejs))), "react-spectrum-ColorField-input")
+    }), props.name && /*#__PURE__*/ (0, $b4uus$react).createElement("input", {
+        type: "hidden",
+        name: props.name,
+        value: isNaN(state.numberValue) ? "" : state.numberValue
+    }));
+}
+function $0077d47e004328f0$var$HexColorField(props) {
+    let { value: // These disabled props are handled by the state hook
+    value, defaultValue: defaultValue, onChange: onChange, forwardedRef: forwardedRef, ...otherProps } = props;
     let state = (0, $b4uus$useColorFieldState)(props);
     let inputRef = (0, $b4uus$useRef)(null);
     let result = (0, $b4uus$useColorField)(otherProps, state, inputRef);
-    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");
     return /*#__PURE__*/ (0, $b4uus$react).createElement((0, $b4uus$TextFieldBase), {
         ...otherProps,
-        ref: ref,
+        ref: forwardedRef,
         inputRef: inputRef,
         ...result,
         inputClassName: (0, $b4uus$classNames)((0, ($parcel$interopDefault($b4uus$colorfield_cssmodulejs))), "react-spectrum-ColorField-input")
     });
 }
-/**
- * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
- */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef($0077d47e004328f0$var$ColorField);
 
 
 export {$0077d47e004328f0$export$b865d4358897bb17 as ColorField};

package/dist/ColorField.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAaD,SAAS,iCAAW,KAA8B,EAAE,GAAsB;IACxE,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,EACR,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,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,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;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","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 React, {Ref, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\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    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\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  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={ref}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n"],"names":[],"version":3,"file":"ColorField.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,SAAS,iCAAW,KAA8B,EAAE,GAAsB;IACxE,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;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC;AAQrC,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\nfunction 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\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\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.ab9f47c0.css

@@ -0,0 +1,204 @@
+@layer a {
+  .ba {
+    background-color: #0000;
+  }
+
+  .Af {
+    border-style: none;
+  }
+
+  .Ia {
+    padding-top: 0;
+  }
+
+  .Ja {
+    padding-bottom: 0;
+  }
+
+  .Ga {
+    padding-inline-start: 0;
+  }
+
+  .Ha {
+    padding-inline-end: 0;
+  }
+
+  ._Sd {
+    display: flex;
+  }
+
+  ._Uc {
+    align-items: center;
+  }
+
+  .lM {
+    row-gap: .714286em;
+  }
+
+  .mM {
+    column-gap: .714286em;
+  }
+
+  ._5a {
+    font-family: adobe-clean, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  }
+
+  .a___K {
+    color: var(--spectrum-alias-text-color, var(--spectrum-global-color-gray-800));
+  }
+
+  ._6a {
+    font-size: var(--spectrum-global-dimension-font-size-50);
+  }
+
+  ._6b {
+    font-size: var(--spectrum-global-dimension-font-size-75);
+  }
+
+  ._6c {
+    font-size: var(--spectrum-global-dimension-font-size-100);
+  }
+
+  ._6d {
+    font-size: var(--spectrum-global-dimension-font-size-200);
+  }
+
+  ._Ea {
+    outline-style: none;
+  }
+
+  ._Eb {
+    outline-style: solid;
+  }
+
+  .d___I {
+    outline-color: var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
+  }
+
+  ._Gc {
+    outline-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));
+  }
+
+  ._Fc {
+    outline-offset: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));
+  }
+
+  ._pc:not(: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))) {
+    border-top-left-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._pc:not(: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))) {
+    border-top-left-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._pc:-webkit-any(: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)) {
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._pc: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)) {
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._qc:not(: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))) {
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._qc:not(: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))) {
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._qc:-webkit-any(: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)) {
+    border-top-left-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._qc: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)) {
+    border-top-left-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._rc:not(: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))) {
+    border-bottom-left-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._rc:not(: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))) {
+    border-bottom-left-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._rc:-webkit-any(: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)) {
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._rc: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)) {
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._sc:not(: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))) {
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._sc:not(: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))) {
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._sc:-webkit-any(: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)) {
+    border-bottom-left-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+
+  ._sc: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)) {
+    border-bottom-left-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+  }
+}
+
+@layer b {
+  ._5-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  }
+}
+
+@layer c {
+  ._5-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  }
+}
+
+@layer d {
+  ._5-enzykdd:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
+}
+
+@layer e {
+  ._5-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer f {
+  ._5-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer g {
+  ._5-1uotwbwg:lang(zh-hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer h {
+  ._5-bc1l9oh:-webkit-any(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+
+  ._5-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+}
+
+@layer b.a {
+  @media (forced-colors: active) {
+    .da___D {
+      outline-color: highlight;
+    }
+  }
+}
+/*# sourceMappingURL=ColorPicker.ab9f47c0.css.map */

package/dist/ColorPicker.ab9f47c0.css.map

@@ -0,0 +1 @@
+{"mappings":"ACAA;EAGE;;;;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;;;;;AA3DF;EA4EI;;;;;AA5EJ;EAoFI;;;;;AApFJ;EA4FI;;;;;AA5FJ;EAoGI;;;;;AApGJ;EA4GI;;;;;AA5GJ;EAoHI;;;;;AApHJ;EA4HI;;;;EAAA;;;;;AAxGJ;EACE;IACE","sources":["4265cbe66e3f0344","packages/@react-spectrum/color/src/ColorPicker.tsx"],"sourcesContent":["@import \"01eac0e6ccf8a0b9\";\n@import \"e3400cf9c7231dbc\";\n","@layer a, b, c, d, e, f, g, h;\n\n@layer a {\n  .ba {\n    background-color: transparent;\n  }\n}\n\n@layer a {\n  .Af {\n    border-style: none;\n  }\n}\n\n@layer a {\n  .Ia {\n    padding-top: 0px;\n  }\n}\n\n@layer a {\n  .Ja {\n    padding-bottom: 0px;\n  }\n}\n\n@layer a {\n  .Ga {\n    padding-inline-start: 0px;\n  }\n}\n\n@layer a {\n  .Ha {\n    padding-inline-end: 0px;\n  }\n}\n\n@layer a {\n  ._Sd {\n    display: flex;\n  }\n}\n\n@layer a {\n  ._Uc {\n    align-items: center;\n  }\n}\n\n@layer a {\n  .lM {\n    row-gap: 0.7142857142857143em;\n  }\n}\n\n@layer a {\n  .mM {\n    column-gap: 0.7142857142857143em;\n  }\n}\n\n@layer a {\n  ._Ea {\n    outline-style: none;\n  }\n}\n\n@layer a {\n  ._5a {\n    font-family: adobe-clean, ui-sans-serif, system-ui, sans-serif;\n  }\n}\n\n@layer b {\n  ._5-enzrfpb {\n    &:lang(ar) {\n      font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;\n    }\n  }\n}\n\n@layer c {\n  ._5-enzwzjc {\n    &:lang(he) {\n      font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;\n    }\n  }\n}\n\n@layer d {\n  ._5-enzykdd {\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 e {\n  ._5-enzzrge {\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 f {\n  ._5-eo0c6sf {\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 g {\n  ._5-1uotwbwg {\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 h {\n  ._5-bc1l9oh {\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  .a___K {\n    color: var(--spectrum-alias-text-color, var(--spectrum-global-color-gray-800));\n  }\n}\n\n@layer a {\n  ._6a {\n    font-size: var(--spectrum-global-dimension-font-size-50);\n  }\n}\n\n@layer a {\n  ._6b {\n    font-size: var(--spectrum-global-dimension-font-size-75);\n  }\n}\n\n@layer a {\n  ._6c {\n    font-size: var(--spectrum-global-dimension-font-size-100);\n  }\n}\n\n@layer a {\n  ._6d {\n    font-size: var(--spectrum-global-dimension-font-size-200);\n  }\n}\n\n"],"names":[],"version":3,"file":"ColorPicker.ab9f47c0.css.map"}

package/dist/ColorPicker.main.js

@@ -0,0 +1,125 @@
+require("./ColorPicker.ab9f47c0.css");
+var $f076f5c85640192a$exports = require("./ColorSwatch.main.js");
+var $64NP6$reactariacomponents = require("react-aria-components");
+var $64NP6$reactspectrumview = require("@react-spectrum/view");
+var $64NP6$reactspectrumdialog = require("@react-spectrum/dialog");
+var $64NP6$react = require("react");
+var $64NP6$reactspectrumutils = require("@react-spectrum/utils");
+var $64NP6$reactariautils = require("@react-aria/utils");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ColorPicker", () => $0c330b4a4fe337a6$export$9feb1bc2e5f1ccb3);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+function $0c330b4a4fe337a6$var$ColorPicker(props, ref) {
+    let swatchRef = (0, $64NP6$react.useRef)(null);
+    let domRef = (0, $64NP6$reactspectrumutils.useFocusableRef)(ref);
+    let labelId = (0, $64NP6$reactariautils.useId)();
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement((0, $64NP6$reactariacomponents.ColorPicker), props, /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement((0, $64NP6$reactspectrumdialog.DialogTrigger), {
+        type: "popover",
+        mobileType: "tray",
+        targetRef: (0, $64NP6$reactspectrumutils.unwrapDOMRef)(swatchRef)
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement((0, $64NP6$reactariacomponents.Button), {
+        ref: domRef,
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " ba";
+            rules += " Af";
+            rules += " Ia";
+            rules += " Ja";
+            rules += " Ga";
+            rules += " Ha";
+            rules += " _Sd";
+            rules += " _Uc";
+            rules += " lM";
+            rules += " mM";
+            rules += " _Ea";
+            rules += " _5-bc1l9oh";
+            rules += " _5-1uotwbwg";
+            rules += " _5-eo0c6sf";
+            rules += " _5-enzzrge";
+            rules += " _5-enzykdd";
+            rules += " _5-enzwzjc";
+            rules += " _5-enzrfpb";
+            rules += " _5a";
+            rules += " a___K";
+            if (props.size === "L") rules += " _6d";
+            else if (props.size === "M") rules += " _6c";
+            else if (props.size === "S") rules += " _6b";
+            else if (props.size === "XS") rules += " _6a";
+            return rules;
+        }({
+            size: props.size || "M"
+        })
+    }, ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement((0, ($parcel$interopDefault($64NP6$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement("div", {
+            className: function anonymous(props) {
+                let rules = "";
+                if (props.isFocusVisible) rules += " _Eb";
+                else rules += " _Ea";
+                rules += " da___D";
+                rules += " d___I";
+                rules += " _Gc";
+                rules += " _Fc";
+                rules += " _pc";
+                rules += " _qc";
+                rules += " _rc";
+                rules += " _sc";
+                return rules;
+            }({
+                isFocusVisible: isFocusVisible
+            })
+        }, /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement((0, $f076f5c85640192a$exports.ColorSwatch), {
+            ref: swatchRef,
+            size: props.size,
+            rounding: props.rounding,
+            "aria-label": props["aria-label"],
+            "aria-labelledby": props["aria-labelledby"],
+            "aria-describedby": props["aria-describedby"],
+            "aria-details": props["aria-details"]
+        })), props.label && /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement("span", {
+            id: labelId
+        }, props.label))), /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement((0, $64NP6$reactspectrumdialog.Dialog), {
+        "aria-labelledby": props.label ? labelId : props["aria-labelledby"],
+        "aria-label": props["aria-label"],
+        UNSAFE_style: {
+            width: "fit-content",
+            minWidth: 0,
+            margin: "0 auto" // Center within tray.
+        }
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).createElement((0, $64NP6$reactspectrumview.Content), {
+        UNSAFE_style: {
+            position: "relative",
+            margin: "calc(var(--spectrum-dialog-padding) * -1)",
+            padding: "var(--spectrum-global-dimension-size-200)"
+        }
+    }, props.children))));
+}
+/**
+ * A ColorPicker combines a swatch with a customizable popover for editing a color.
+ */ let $0c330b4a4fe337a6$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, ($parcel$interopDefault($64NP6$react))).forwardRef($0c330b4a4fe337a6$var$ColorPicker);
+
+
+//# sourceMappingURL=ColorPicker.main.js.map