@react-spectrum/color 3.0.0-beta.32 → 3.0.0-beta.33

package/dist/ColorEditor.module.js

@@ -0,0 +1,111 @@
+import "./ColorEditor.32e497e8.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";
+import $3Vio4$intlStringsmodulejs from "./intlStrings.module.js";
+import {getColorChannels as $3Vio4$getColorChannels} from "@react-stately/color";
+import {Picker as $3Vio4$Picker, Item as $3Vio4$Item} from "@react-spectrum/picker";
+import $3Vio4$react, {useState as $3Vio4$useState} from "react";
+import {useDOMRef as $3Vio4$useDOMRef} from "@react-spectrum/utils";
+import {useLocalizedStringFormatter as $3Vio4$useLocalizedStringFormatter} from "@react-aria/i18n";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+
+function $49352c629f2d8349$var$ColorEditor(props, ref) {
+    let [format, setFormat] = (0, $3Vio4$useState)("hex");
+    let domRef = (0, $3Vio4$useDOMRef)(ref);
+    let formatter = (0, $3Vio4$useLocalizedStringFormatter)((0, ($parcel$interopDefault($3Vio4$intlStringsmodulejs))), "@react-spectrum/color");
+    return /*#__PURE__*/ (0, $3Vio4$react).createElement("div", {
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " _Sd";
+            rules += " _Zb";
+            rules += " le";
+            rules += " me";
+            return rules;
+        }(),
+        ref: domRef
+    }, /*#__PURE__*/ (0, $3Vio4$react).createElement("div", {
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " _Sd";
+            rules += " le";
+            rules += " me";
+            return rules;
+        }()
+    }, /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $40046aa1a7ccb226$export$b2103f68a961418e), {
+        colorSpace: "hsb",
+        xChannel: "saturation",
+        yChannel: "brightness"
+    }), /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3870e4ce67ed7ee1$export$44fd664bcca5b6fb), {
+        colorSpace: "hsb",
+        channel: "hue",
+        orientation: "vertical"
+    }), !props.hideAlphaChannel && /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3870e4ce67ed7ee1$export$44fd664bcca5b6fb), {
+        channel: "alpha",
+        orientation: "vertical"
+    })), /*#__PURE__*/ (0, $3Vio4$react).createElement("div", {
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " _Sd";
+            rules += " le";
+            rules += " me";
+            return rules;
+        }()
+    }, /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3Vio4$Picker), {
+        "aria-label": formatter.format("colorFormat"),
+        isQuiet: true,
+        width: "size-700",
+        menuWidth: "size-1000",
+        selectedKey: format,
+        onSelectionChange: (f)=>setFormat(f)
+    }, /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3Vio4$Item), {
+        key: "hex"
+    }, formatter.format("hex")), /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3Vio4$Item), {
+        key: "rgb"
+    }, formatter.format("rgb")), /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3Vio4$Item), {
+        key: "hsl"
+    }, formatter.format("hsl")), /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3Vio4$Item), {
+        key: "hsb"
+    }, formatter.format("hsb"))), format === "hex" ? /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $0077d47e004328f0$export$b865d4358897bb17), {
+        isQuiet: true,
+        width: "size-1000",
+        "aria-label": formatter.format("hex")
+    }) : (0, $3Vio4$getColorChannels)(format).map((channel)=>/*#__PURE__*/ (0, $3Vio4$react).createElement((0, $0077d47e004328f0$export$b865d4358897bb17), {
+            key: channel,
+            colorSpace: format === "hex" ? "rgb" : format,
+            channel: channel,
+            isQuiet: true,
+            width: "size-400",
+            flex: true,
+            UNSAFE_style: {
+                "--spectrum-textfield-min-width": 0
+            }
+        })), !props.hideAlphaChannel && /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $0077d47e004328f0$export$b865d4358897bb17), {
+        channel: "alpha",
+        isQuiet: true,
+        width: "size-400",
+        flex: true,
+        UNSAFE_style: {
+            "--spectrum-textfield-min-width": 0
+        }
+    })));
+}
+/**
+ * ColorEditor provides a default UI for editing colors within a ColorPicker.
+ */ let $49352c629f2d8349$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, $3Vio4$react).forwardRef($49352c629f2d8349$var$ColorEditor);
+
+
+export {$49352c629f2d8349$export$5aa54fd21eb08d23 as ColorEditor};
+//# sourceMappingURL=ColorEditor.module.js.map

package/dist/ColorEditor.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmBA,SAAS,kCAAY,KAA+B,EAAE,GAA2B;IAC/E,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,eAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAE1D,qBACE,gCAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,gCAAC,CAAA,GAAA,yCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAG7C,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,aAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACR,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SACnE,CAAA,GAAA,uBAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC7B,gCAAC,CAAA,GAAA,yCAAS;YAAE,KAAK;YAAS,YAAY,WAAW,QAAQ,QAAQ;YAAQ,SAAS;YAAS,SAAA;YAAQ,OAAM;YAAW,MAAA;YAAK,cAAc;gBAAC,kCAAkC;YAAC;aAE9K,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAQ;QAAQ,SAAA;QAAQ,OAAM;QAAW,MAAA;QAAK,cAAc;YAAC,kCAAkC;QAAC;;AAItH;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace} from '@react-types/color';\nimport {DOMRef} from '@react-types/shared';\nimport {getColorChannels} from '@react-stately/color';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface SpectrumColorEditorProps {\n  /** Whether to hide the alpha channel color slider and color field. */\n  hideAlphaChannel?: boolean\n}\n\nfunction ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {\n  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n  let domRef = useDOMRef(ref);\n  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n  return (\n    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n        <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n        {!props.hideAlphaChannel &&\n          <ColorSlider channel=\"alpha\" orientation=\"vertical\" />\n        }\n      </div>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <Picker \n          aria-label={formatter.format('colorFormat')}\n          isQuiet\n          width=\"size-700\"\n          menuWidth=\"size-1000\"\n          selectedKey={format}\n          onSelectionChange={f => setFormat(f as typeof format)}>\n          <Item key=\"hex\">{formatter.format('hex')}</Item>\n          <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n          <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n          <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n        </Picker>\n        {format === 'hex'\n          ? <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n          : getColorChannels(format).map(channel => (\n            <ColorField key={channel} colorSpace={format === 'hex' ? 'rgb' : format} channel={channel} isQuiet width=\"size-400\" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />\n          ))}\n        {!props.hideAlphaChannel &&\n          <ColorField channel=\"alpha\" isQuiet width=\"size-400\" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />}\n      </div>\n    </div>\n  );\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nlet _ColorEditor = React.forwardRef(ColorEditor);\nexport {_ColorEditor as ColorEditor};\n"],"names":[],"version":3,"file":"ColorEditor.module.js.map"}

package/dist/ColorField.main.js

@@ -0,0 +1,99 @@
+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");
+
+
+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, "ColorField", () => $8bdb9bc27ff3debb$export$b865d4358897bb17);
+/*
+ * Copyright 2020 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 $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, 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);
+    return /*#__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")
+    });
+}
+
+
+//# sourceMappingURL=ColorField.main.js.map

package/dist/ColorField.main.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,94 @@
+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 {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";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 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 $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, 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);
+    return /*#__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")
+    });
+}
+
+
+export {$0077d47e004328f0$export$b865d4358897bb17 as ColorField};
+//# sourceMappingURL=ColorField.mjs.map

package/dist/ColorField.module.js

@@ -0,0 +1,94 @@
+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 {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";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 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 $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, 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);
+    return /*#__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")
+    });
+}
+
+
+export {$0077d47e004328f0$export$b865d4358897bb17 as ColorField};
+//# sourceMappingURL=ColorField.module.js.map

package/dist/ColorField.module.js.map

@@ -0,0 +1 @@
+{"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"}