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

package/dist/ColorArea.main.js

@@ -1,7 +1,8 @@
 var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
-require("./vars.6f3d3943.css");
+require("./vars.6fa9fa04.css");
 var $d4b4e0a63f9ca8c1$exports = require("./colorarea_vars_css.main.js");
 var $6Gwd1$reactspectrumutils = require("@react-spectrum/utils");
+var $6Gwd1$reactariacomponents = require("react-aria-components");
 var $6Gwd1$reactariautils = require("@react-aria/utils");
 var $6Gwd1$react = require("react");
 var $6Gwd1$reactariacolor = require("@react-aria/color");
@@ -38,16 +39,18 @@ $parcel$export(module.exports, "ColorArea", () => $5f016e950c2dc3a6$export$b2103
 
 
 
+
 function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
     props = (0, $6Gwd1$reactspectrumprovider.useProviderProps)(props);
-    let { isDisabled: isDisabled } = props;
-    let size = props.size && (0, $6Gwd1$reactspectrumutils.dimensionValue)(props.size);
-    let { styleProps: styleProps } = (0, $6Gwd1$reactspectrumutils.useStyleProps)(props);
     let inputXRef = (0, $6Gwd1$react.useRef)(null);
     let inputYRef = (0, $6Gwd1$react.useRef)(null);
     let containerRef = (0, $6Gwd1$reactspectrumutils.useFocusableRef)(ref, inputXRef);
+    [props, containerRef] = (0, $6Gwd1$reactariacomponents.useContextProps)(props, containerRef, (0, $6Gwd1$reactariacomponents.ColorAreaContext));
+    let { isDisabled: isDisabled } = props;
+    let size = props.size && (0, $6Gwd1$reactspectrumutils.dimensionValue)(props.size);
+    let { styleProps: styleProps } = (0, $6Gwd1$reactspectrumutils.useStyleProps)(props);
     let state = (0, $6Gwd1$reactstatelycolor.useColorAreaState)(props);
-    let { colorAreaProps: colorAreaProps, gradientProps: gradientProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $6Gwd1$reactariacolor.useColorArea)({
+    let { colorAreaProps: colorAreaProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $6Gwd1$reactariacolor.useColorArea)({
         ...props,
         inputXRef: inputXRef,
         inputYRef: inputYRef,
@@ -61,20 +64,18 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
         }, styleProps.className),
         ref: containerRef,
         style: {
-            ...colorAreaProps.style,
+            ...isDisabled ? {} : colorAreaProps.style,
             ...styleProps.style,
             // Workaround around https://github.com/adobe/spectrum-css/issues/1032
             width: size,
             height: size
         }
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement("div", {
-        ...gradientProps,
-        className: (0, $6Gwd1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-gradient")
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement((0, $2b9adc23f6c7cae1$exports.ColorThumb), {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement((0, $2b9adc23f6c7cae1$exports.ColorThumb), {
         value: state.getDisplayColor(),
         isFocused: isFocusVisible,
         isDisabled: isDisabled,
         isDragging: state.isDragging,
+        containerRef: containerRef,
         className: (0, $6Gwd1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d4b4e0a63f9ca8c1$exports))), "spectrum-ColorArea-handle"),
         ...thumbProps
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).createElement("div", {

package/dist/ColorArea.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAcD,SAAS,gCAAU,KAA6B,EAAE,GAAiC;IACjF,QAAQ,CAAA,GAAA,6CAAe,EAAE;IAEzB,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IAExC,IAAI,QAAQ,CAAA,GAAA,0CAAgB,EAAE;IAE9B,IAAI,kBACF,cAAc,iBACd,aAAa,eACb,WAAW,eACX,WAAW,cACX,UAAU,EACX,GAAG,CAAA,GAAA,kCAAW,EAAE;QAAC,GAAG,KAAK;mBAAE;mBAAW;sBAAW;IAAY,GAAG;IACjE,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IAE9C,qBACE,0DAAC;QACE,GAAG,cAAc;QAClB,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,eAAe,KAAK;YACvB,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,0DAAC;QAAK,GAAG,aAAa;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACtD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAI,MAAK;qBACR,0DAAC;QAAM,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QAAE,KAAK;sBACjH,0DAAC;QAAM,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QAAE,KAAK;;AAK3H;AAEA;;CAEC,GACD,IAAI,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorArea.tsx"],"sourcesContent":["/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputXRef = useRef(null);\n  let inputYRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputXRef);\n\n  let state = useColorAreaState(props);\n\n  let {\n    colorAreaProps,\n    gradientProps,\n    xInputProps,\n    yInputProps,\n    thumbProps\n  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      {...colorAreaProps}\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorArea',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...colorAreaProps.style,\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorArea-handle')}\n        {...thumbProps}>\n        <div role=\"presentation\">\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n        </div>\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n"],"names":[],"version":3,"file":"ColorArea.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,SAAS,gCAAU,KAA6B,EAAE,GAAiC;IACjF,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,2CAAe;IAE5E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAGjC,IAAI,QAAQ,CAAA,GAAA,0CAAgB,EAAE;IAE9B,IAAI,kBACF,cAAc,eACd,WAAW,eACX,WAAW,cACX,UAAU,EACX,GAAG,CAAA,GAAA,kCAAW,EAAE;QAAC,GAAG,KAAK;mBAAE;mBAAW;sBAAW;IAAY,GAAG;IACjE,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IAE9C,qBACE,0DAAC;QACE,GAAG,cAAc;QAClB,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAI,aAAa,CAAC,IAAI,eAAe,KAAK;YAC1C,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAI,MAAK;qBACR,0DAAC;QAAM,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QAAE,KAAK;sBACjH,0DAAC;QAAM,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QAAE,KAAK;;AAK3H;AAEA;;CAEC,GACD,IAAI,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorArea.tsx"],"sourcesContent":["/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorAreaContext, useContextProps} from 'react-aria-components';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let inputXRef = useRef(null);\n  let inputYRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputXRef);\n  [props, containerRef] = useContextProps(props, containerRef, ColorAreaContext);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n\n  let state = useColorAreaState(props);\n\n  let {\n    colorAreaProps,\n    xInputProps,\n    yInputProps,\n    thumbProps\n  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      {...colorAreaProps}\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorArea',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...(isDisabled ? {} : colorAreaProps.style),\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        containerRef={containerRef}\n        className={classNames(styles, 'spectrum-ColorArea-handle')}\n        {...thumbProps}>\n        <div role=\"presentation\">\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n        </div>\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n"],"names":[],"version":3,"file":"ColorArea.main.js.map"}

package/dist/ColorArea.mjs

@@ -1,7 +1,8 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
-import "./vars.6f3d3943.css";
+import "./vars.6fa9fa04.css";
 import $4eSry$colorarea_vars_cssmodulejs from "./colorarea_vars_css.mjs";
-import {dimensionValue as $4eSry$dimensionValue, useStyleProps as $4eSry$useStyleProps, useFocusableRef as $4eSry$useFocusableRef, classNames as $4eSry$classNames} from "@react-spectrum/utils";
+import {useFocusableRef as $4eSry$useFocusableRef, dimensionValue as $4eSry$dimensionValue, useStyleProps as $4eSry$useStyleProps, classNames as $4eSry$classNames} from "@react-spectrum/utils";
+import {useContextProps as $4eSry$useContextProps, ColorAreaContext as $4eSry$ColorAreaContext} from "react-aria-components";
 import {mergeProps as $4eSry$mergeProps} from "@react-aria/utils";
 import $4eSry$react, {useRef as $4eSry$useRef} from "react";
 import {useColorArea as $4eSry$useColorArea} from "@react-aria/color";
@@ -32,16 +33,18 @@ function $parcel$interopDefault(a) {
 
 
 
+
 function $40046aa1a7ccb226$var$ColorArea(props, ref) {
     props = (0, $4eSry$useProviderProps)(props);
-    let { isDisabled: isDisabled } = props;
-    let size = props.size && (0, $4eSry$dimensionValue)(props.size);
-    let { styleProps: styleProps } = (0, $4eSry$useStyleProps)(props);
     let inputXRef = (0, $4eSry$useRef)(null);
     let inputYRef = (0, $4eSry$useRef)(null);
     let containerRef = (0, $4eSry$useFocusableRef)(ref, inputXRef);
+    [props, containerRef] = (0, $4eSry$useContextProps)(props, containerRef, (0, $4eSry$ColorAreaContext));
+    let { isDisabled: isDisabled } = props;
+    let size = props.size && (0, $4eSry$dimensionValue)(props.size);
+    let { styleProps: styleProps } = (0, $4eSry$useStyleProps)(props);
     let state = (0, $4eSry$useColorAreaState)(props);
-    let { colorAreaProps: colorAreaProps, gradientProps: gradientProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $4eSry$useColorArea)({
+    let { colorAreaProps: colorAreaProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $4eSry$useColorArea)({
         ...props,
         inputXRef: inputXRef,
         inputYRef: inputYRef,
@@ -55,20 +58,18 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
         }, styleProps.className),
         ref: containerRef,
         style: {
-            ...colorAreaProps.style,
+            ...isDisabled ? {} : colorAreaProps.style,
             ...styleProps.style,
             // Workaround around https://github.com/adobe/spectrum-css/issues/1032
             width: size,
             height: size
         }
-    }, /*#__PURE__*/ (0, $4eSry$react).createElement("div", {
-        ...gradientProps,
-        className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-gradient")
-    }), /*#__PURE__*/ (0, $4eSry$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
+    }, /*#__PURE__*/ (0, $4eSry$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
         value: state.getDisplayColor(),
         isFocused: isFocusVisible,
         isDisabled: isDisabled,
         isDragging: state.isDragging,
+        containerRef: containerRef,
         className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-handle"),
         ...thumbProps
     }, /*#__PURE__*/ (0, $4eSry$react).createElement("div", {

package/dist/ColorArea.module.js

@@ -1,7 +1,8 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
-import "./vars.6f3d3943.css";
+import "./vars.6fa9fa04.css";
 import $4eSry$colorarea_vars_cssmodulejs from "./colorarea_vars_css.module.js";
-import {dimensionValue as $4eSry$dimensionValue, useStyleProps as $4eSry$useStyleProps, useFocusableRef as $4eSry$useFocusableRef, classNames as $4eSry$classNames} from "@react-spectrum/utils";
+import {useFocusableRef as $4eSry$useFocusableRef, dimensionValue as $4eSry$dimensionValue, useStyleProps as $4eSry$useStyleProps, classNames as $4eSry$classNames} from "@react-spectrum/utils";
+import {useContextProps as $4eSry$useContextProps, ColorAreaContext as $4eSry$ColorAreaContext} from "react-aria-components";
 import {mergeProps as $4eSry$mergeProps} from "@react-aria/utils";
 import $4eSry$react, {useRef as $4eSry$useRef} from "react";
 import {useColorArea as $4eSry$useColorArea} from "@react-aria/color";
@@ -32,16 +33,18 @@ function $parcel$interopDefault(a) {
 
 
 
+
 function $40046aa1a7ccb226$var$ColorArea(props, ref) {
     props = (0, $4eSry$useProviderProps)(props);
-    let { isDisabled: isDisabled } = props;
-    let size = props.size && (0, $4eSry$dimensionValue)(props.size);
-    let { styleProps: styleProps } = (0, $4eSry$useStyleProps)(props);
     let inputXRef = (0, $4eSry$useRef)(null);
     let inputYRef = (0, $4eSry$useRef)(null);
     let containerRef = (0, $4eSry$useFocusableRef)(ref, inputXRef);
+    [props, containerRef] = (0, $4eSry$useContextProps)(props, containerRef, (0, $4eSry$ColorAreaContext));
+    let { isDisabled: isDisabled } = props;
+    let size = props.size && (0, $4eSry$dimensionValue)(props.size);
+    let { styleProps: styleProps } = (0, $4eSry$useStyleProps)(props);
     let state = (0, $4eSry$useColorAreaState)(props);
-    let { colorAreaProps: colorAreaProps, gradientProps: gradientProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $4eSry$useColorArea)({
+    let { colorAreaProps: colorAreaProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $4eSry$useColorArea)({
         ...props,
         inputXRef: inputXRef,
         inputYRef: inputYRef,
@@ -55,20 +58,18 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
         }, styleProps.className),
         ref: containerRef,
         style: {
-            ...colorAreaProps.style,
+            ...isDisabled ? {} : colorAreaProps.style,
             ...styleProps.style,
             // Workaround around https://github.com/adobe/spectrum-css/issues/1032
             width: size,
             height: size
         }
-    }, /*#__PURE__*/ (0, $4eSry$react).createElement("div", {
-        ...gradientProps,
-        className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-gradient")
-    }), /*#__PURE__*/ (0, $4eSry$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
+    }, /*#__PURE__*/ (0, $4eSry$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
         value: state.getDisplayColor(),
         isFocused: isFocusVisible,
         isDisabled: isDisabled,
         isDragging: state.isDragging,
+        containerRef: containerRef,
         className: (0, $4eSry$classNames)((0, ($parcel$interopDefault($4eSry$colorarea_vars_cssmodulejs))), "spectrum-ColorArea-handle"),
         ...thumbProps
     }, /*#__PURE__*/ (0, $4eSry$react).createElement("div", {

package/dist/ColorArea.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAcD,SAAS,gCAAU,KAA6B,EAAE,GAAiC;IACjF,QAAQ,CAAA,GAAA,uBAAe,EAAE;IAEzB,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,qBAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,sBAAc,EAAE,KAAK;IAExC,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;IAE9B,IAAI,kBACF,cAAc,iBACd,aAAa,eACb,WAAW,eACX,WAAW,cACX,UAAU,EACX,GAAG,CAAA,GAAA,mBAAW,EAAE;QAAC,GAAG,KAAK;mBAAE;mBAAW;sBAAW;IAAY,GAAG;IACjE,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACE,GAAG,cAAc;QAClB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,2DAAK,GACL,sBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,eAAe,KAAK;YACvB,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC;QAAK,GAAG,aAAa;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;sBACtD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QAAI,MAAK;qBACR,gCAAC;QAAM,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAE,KAAK;sBACjH,gCAAC;QAAM,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAE,KAAK;;AAK3H;AAEA;;CAEC,GACD,IAAI,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorArea.tsx"],"sourcesContent":["/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let inputXRef = useRef(null);\n  let inputYRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputXRef);\n\n  let state = useColorAreaState(props);\n\n  let {\n    colorAreaProps,\n    gradientProps,\n    xInputProps,\n    yInputProps,\n    thumbProps\n  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      {...colorAreaProps}\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorArea',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...colorAreaProps.style,\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        className={classNames(styles, 'spectrum-ColorArea-handle')}\n        {...thumbProps}>\n        <div role=\"presentation\">\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n        </div>\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n"],"names":[],"version":3,"file":"ColorArea.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,SAAS,gCAAU,KAA6B,EAAE,GAAiC;IACjF,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,sBAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,uBAAe;IAE5E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,qBAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAGjC,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;IAE9B,IAAI,kBACF,cAAc,eACd,WAAW,eACX,WAAW,cACX,UAAU,EACX,GAAG,CAAA,GAAA,mBAAW,EAAE;QAAC,GAAG,KAAK;mBAAE;mBAAW;sBAAW;IAAY,GAAG;IACjE,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACE,GAAG,cAAc;QAClB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,2DAAK,GACL,sBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAI,aAAa,CAAC,IAAI,eAAe,KAAK;YAC1C,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QAAI,MAAK;qBACR,gCAAC;QAAM,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAE,KAAK;sBACjH,gCAAC;QAAM,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAK,GAAG;QAA+B,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAE,KAAK;;AAK3H;AAEA;;CAEC,GACD,IAAI,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorArea.tsx"],"sourcesContent":["/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorAreaContext, useContextProps} from 'react-aria-components';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let inputXRef = useRef(null);\n  let inputYRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputXRef);\n  [props, containerRef] = useContextProps(props, containerRef, ColorAreaContext);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n\n  let state = useColorAreaState(props);\n\n  let {\n    colorAreaProps,\n    xInputProps,\n    yInputProps,\n    thumbProps\n  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      {...colorAreaProps}\n      className={\n        classNames(\n          styles,\n          'spectrum-ColorArea',\n          {\n            'is-disabled': isDisabled\n          },\n          styleProps.className\n        )\n      }\n      ref={containerRef}\n      style={{\n        ...(isDisabled ? {} : colorAreaProps.style),\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        containerRef={containerRef}\n        className={classNames(styles, 'spectrum-ColorArea-handle')}\n        {...thumbProps}>\n        <div role=\"presentation\">\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n        </div>\n      </ColorThumb>\n    </div>\n  );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n"],"names":[],"version":3,"file":"ColorArea.module.js.map"}

package/dist/ColorEditor.32e497e8.css

@@ -0,0 +1,20 @@
+@layer a {
+  ._Zb {
+    flex-direction: column;
+  }
+
+  ._Sd {
+    display: flex;
+  }
+
+  .le {
+    row-gap: 1rem;
+  }
+
+  .me {
+    column-gap: 1rem;
+  }
+}
+
+@layer b;
+/*# sourceMappingURL=ColorEditor.32e497e8.css.map */

package/dist/ColorEditor.32e497e8.css.map

@@ -0,0 +1 @@
+{"mappings":"ACAA;EASE;;;;EANA;;;;EAMA;;;;EAMA;;;;;AAfF","sources":["831a302ce8de66a2","packages/@react-spectrum/color/src/ColorEditor.tsx"],"sourcesContent":["@import \"61db59ad802e5cd4\";\n@import \"4bcaf5321f340d0a\";\n@import \"76e53872e9d29f42\";\n","@layer a, b;\n\n@layer a {\n  ._Sd {\n    display: flex;\n  }\n}\n\n@layer a {\n  ._Zb {\n    flex-direction: column;\n  }\n}\n\n@layer a {\n  .le {\n    row-gap: 1rem;\n  }\n}\n\n@layer a {\n  .me {\n    column-gap: 1rem;\n  }\n}\n\n"],"names":[],"version":3,"file":"ColorEditor.32e497e8.css.map"}

package/dist/ColorEditor.main.js

@@ -0,0 +1,116 @@
+require("./ColorEditor.32e497e8.css");
+var $5f016e950c2dc3a6$exports = require("./ColorArea.main.js");
+var $8bdb9bc27ff3debb$exports = require("./ColorField.main.js");
+var $4537dec0de08c277$exports = require("./ColorSlider.main.js");
+var $54ac9df6f63399af$exports = require("./intlStrings.main.js");
+var $2H14s$reactstatelycolor = require("@react-stately/color");
+var $2H14s$reactspectrumpicker = require("@react-spectrum/picker");
+var $2H14s$react = require("react");
+var $2H14s$reactspectrumutils = require("@react-spectrum/utils");
+var $2H14s$reactariai18n = require("@react-aria/i18n");
+
+
+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, "ColorEditor", () => $ecaab91cad36cb44$export$5aa54fd21eb08d23);
+
+
+
+
+
+
+
+
+
+function $ecaab91cad36cb44$var$ColorEditor(props, ref) {
+    let [format, setFormat] = (0, $2H14s$react.useState)("hex");
+    let domRef = (0, $2H14s$reactspectrumutils.useDOMRef)(ref);
+    let formatter = (0, $2H14s$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($54ac9df6f63399af$exports))), "@react-spectrum/color");
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement("div", {
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " _Sd";
+            rules += " _Zb";
+            rules += " le";
+            rules += " me";
+            return rules;
+        }(),
+        ref: domRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement("div", {
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " _Sd";
+            rules += " le";
+            rules += " me";
+            return rules;
+        }()
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $5f016e950c2dc3a6$exports.ColorArea), {
+        colorSpace: "hsb",
+        xChannel: "saturation",
+        yChannel: "brightness"
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $4537dec0de08c277$exports.ColorSlider), {
+        colorSpace: "hsb",
+        channel: "hue",
+        orientation: "vertical"
+    }), !props.hideAlphaChannel && /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $4537dec0de08c277$exports.ColorSlider), {
+        channel: "alpha",
+        orientation: "vertical"
+    })), /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement("div", {
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " _Sd";
+            rules += " le";
+            rules += " me";
+            return rules;
+        }()
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $2H14s$reactspectrumpicker.Picker), {
+        "aria-label": formatter.format("colorFormat"),
+        isQuiet: true,
+        width: "size-700",
+        menuWidth: "size-1000",
+        selectedKey: format,
+        onSelectionChange: (f)=>setFormat(f)
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $2H14s$reactspectrumpicker.Item), {
+        key: "hex"
+    }, formatter.format("hex")), /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $2H14s$reactspectrumpicker.Item), {
+        key: "rgb"
+    }, formatter.format("rgb")), /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $2H14s$reactspectrumpicker.Item), {
+        key: "hsl"
+    }, formatter.format("hsl")), /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $2H14s$reactspectrumpicker.Item), {
+        key: "hsb"
+    }, formatter.format("hsb"))), format === "hex" ? /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $8bdb9bc27ff3debb$exports.ColorField), {
+        isQuiet: true,
+        width: "size-1000",
+        "aria-label": formatter.format("hex")
+    }) : (0, $2H14s$reactstatelycolor.getColorChannels)(format).map((channel)=>/*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $8bdb9bc27ff3debb$exports.ColorField), {
+            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, ($parcel$interopDefault($2H14s$react))).createElement((0, $8bdb9bc27ff3debb$exports.ColorField), {
+        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 $ecaab91cad36cb44$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).forwardRef($ecaab91cad36cb44$var$ColorEditor);
+
+
+//# sourceMappingURL=ColorEditor.main.js.map

package/dist/ColorEditor.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,SAAS,kCAAY,KAA+B,EAAE,GAA2B;IAC/E,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAE1D,qBACE,0DAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,0DAAC;QAAI,WAAW;;;;;;;qBACd,0DAAC,CAAA,GAAA,mCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,0DAAC,CAAA,GAAA,qCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBACtB,0DAAC,CAAA,GAAA,qCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAG7C,0DAAC;QAAI,WAAW;;;;;;;qBACd,0DAAC,CAAA,GAAA,iCAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,0DAAC,CAAA,GAAA,+BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,+BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,+BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,+BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACR,0DAAC,CAAA,GAAA,oCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SACnE,CAAA,GAAA,yCAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC7B,0DAAC,CAAA,GAAA,oCAAS;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,0DAAC,CAAA,GAAA,oCAAS;QAAE,SAAQ;QAAQ,SAAA;QAAQ,OAAM;QAAW,MAAA;QAAK,cAAc;YAAC,kCAAkC;QAAC;;AAItH;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,sCAAI,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.main.js.map"}

package/dist/ColorEditor.mjs

@@ -0,0 +1,111 @@
+import "./ColorEditor.32e497e8.css";
+import {ColorArea as $40046aa1a7ccb226$export$b2103f68a961418e} from "./ColorArea.mjs";
+import {ColorField as $0077d47e004328f0$export$b865d4358897bb17} from "./ColorField.mjs";
+import {ColorSlider as $3870e4ce67ed7ee1$export$44fd664bcca5b6fb} from "./ColorSlider.mjs";
+import $3Vio4$intlStringsmodulejs from "./intlStrings.mjs";
+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.mjs.map

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"}