@react-spectrum/color 3.0.1 → 3.0.3

package/dist/ColorArea.main.js

@@ -40,7 +40,7 @@ $parcel$export(module.exports, "ColorArea", () => $5f016e950c2dc3a6$export$b2103
 
 
 
-function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
+const $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).forwardRef(function ColorArea(props, ref) {
     props = (0, $6Gwd1$reactspectrumprovider.useProviderProps)(props);
     let inputXRef = (0, $6Gwd1$react.useRef)(null);
     let inputYRef = (0, $6Gwd1$react.useRef)(null);
@@ -89,10 +89,7 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
         ...(0, $6Gwd1$reactariautils.mergeProps)(yInputProps, focusProps),
         ref: inputYRef
     }))));
-}
-/**
- * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */ let $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ (0, ($parcel$interopDefault($6Gwd1$react))).forwardRef($5f016e950c2dc3a6$var$ColorArea);
+});
 
 
 //# sourceMappingURL=ColorArea.main.js.map

package/dist/ColorArea.main.js.map

@@ -1 +1 @@
-{"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"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAY,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,UAAU,KAA6B,EAAE,GAAiC;IAC3H,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","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\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = React.forwardRef(function 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}) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ColorArea.main.js.map"}

package/dist/ColorArea.mjs

@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
 
 
 
-function $40046aa1a7ccb226$var$ColorArea(props, ref) {
+const $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef(function ColorArea(props, ref) {
     props = (0, $4eSry$useProviderProps)(props);
     let inputXRef = (0, $4eSry$useRef)(null);
     let inputYRef = (0, $4eSry$useRef)(null);
@@ -83,10 +83,7 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
         ...(0, $4eSry$mergeProps)(yInputProps, focusProps),
         ref: inputYRef
     }))));
-}
-/**
- * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef($40046aa1a7ccb226$var$ColorArea);
+});
 
 
 export {$40046aa1a7ccb226$export$b2103f68a961418e as ColorArea};

package/dist/ColorArea.module.js

@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
 
 
 
-function $40046aa1a7ccb226$var$ColorArea(props, ref) {
+const $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef(function ColorArea(props, ref) {
     props = (0, $4eSry$useProviderProps)(props);
     let inputXRef = (0, $4eSry$useRef)(null);
     let inputYRef = (0, $4eSry$useRef)(null);
@@ -83,10 +83,7 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
         ...(0, $4eSry$mergeProps)(yInputProps, focusProps),
         ref: inputYRef
     }))));
-}
-/**
- * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $4eSry$react).forwardRef($40046aa1a7ccb226$var$ColorArea);
+});
 
 
 export {$40046aa1a7ccb226$export$b2103f68a961418e as ColorArea};

package/dist/ColorArea.module.js.map

@@ -1 +1 @@
-{"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"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,UAAU,KAA6B,EAAE,GAAiC;IAC3H,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","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\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = React.forwardRef(function 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}) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ColorArea.module.js.map"}

package/dist/ColorEditor.f85fa1f2.css

@@ -0,0 +1,20 @@
+@layer s1-a, s1-b;
+
+@layer a {
+  .s1-_Zs1-b {
+    flex-direction: column;
+  }
+
+  .s1-_Ss1-d {
+    display: flex;
+  }
+
+  .s1-ls1-e {
+    row-gap: 1rem;
+  }
+
+  .s1-ms1-e {
+    column-gap: 1rem;
+  }
+}
+/*# sourceMappingURL=ColorEditor.f85fa1f2.css.map */

package/dist/ColorEditor.f85fa1f2.css.map

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

package/dist/ColorEditor.main.js

@@ -1,4 +1,4 @@
-require("./ColorEditor.32e497e8.css");
+require("./ColorEditor.f85fa1f2.css");
 var $5f016e950c2dc3a6$exports = require("./ColorArea.main.js");
 var $8bdb9bc27ff3debb$exports = require("./ColorField.main.js");
 var $4537dec0de08c277$exports = require("./ColorSlider.main.js");
@@ -28,26 +28,26 @@ $parcel$export(module.exports, "ColorEditor", () => $ecaab91cad36cb44$export$5aa
 
 
 
-function $ecaab91cad36cb44$var$ColorEditor(props, ref) {
+const $ecaab91cad36cb44$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).forwardRef(function 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($5cb66132bfdb0a33$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';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-_Zs1-b';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }(),
         ref: domRef
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement("div", {
         className: function anonymous(props) {
             let rules = "";
-            rules += ' _Sd';
-            rules += ' le';
-            rules += ' me';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }()
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $5f016e950c2dc3a6$exports.ColorArea), {
@@ -64,9 +64,9 @@ function $ecaab91cad36cb44$var$ColorEditor(props, ref) {
     })), /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement("div", {
         className: function anonymous(props) {
             let rules = "";
-            rules += ' _Sd';
-            rules += ' le';
-            rules += ' me';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }()
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($2H14s$react))).createElement((0, $2H14s$reactspectrumpicker.Picker), {
@@ -107,10 +107,7 @@ function $ecaab91cad36cb44$var$ColorEditor(props, ref) {
             '--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

@@ -1 +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;YAAQ,SAAS;YAAS,SAAA;YAAQ,OAAM;YAAW,MAAA;YAAK,cAAc;gBAAC,kCAAkC;YAAC;aAEnJ,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} 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"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAA2B;IAC3H,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;YAAQ,SAAS;YAAS,SAAA;YAAQ,OAAM;YAAW,MAAA;YAAK,cAAc;gBAAC,kCAAkC;YAAC;aAEnJ,CAAC,MAAM,gBAAgB,kBACtB,0DAAC,CAAA,GAAA,oCAAS;QAAE,SAAQ;QAAQ,SAAA;QAAQ,OAAM;QAAW,MAAA;QAAK,cAAc;YAAC,kCAAkC;QAAC;;AAItH","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\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function 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} 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"],"names":[],"version":3,"file":"ColorEditor.main.js.map"}

package/dist/ColorEditor.mjs

@@ -1,4 +1,4 @@
-import "./ColorEditor.32e497e8.css";
+import "./ColorEditor.f85fa1f2.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";
@@ -22,26 +22,26 @@ function $parcel$interopDefault(a) {
 
 
 
-function $49352c629f2d8349$var$ColorEditor(props, ref) {
+const $49352c629f2d8349$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, $3Vio4$react).forwardRef(function 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';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-_Zs1-b';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }(),
         ref: domRef
     }, /*#__PURE__*/ (0, $3Vio4$react).createElement("div", {
         className: function anonymous(props) {
             let rules = "";
-            rules += ' _Sd';
-            rules += ' le';
-            rules += ' me';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }()
     }, /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $40046aa1a7ccb226$export$b2103f68a961418e), {
@@ -58,9 +58,9 @@ function $49352c629f2d8349$var$ColorEditor(props, ref) {
     })), /*#__PURE__*/ (0, $3Vio4$react).createElement("div", {
         className: function anonymous(props) {
             let rules = "";
-            rules += ' _Sd';
-            rules += ' le';
-            rules += ' me';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }()
     }, /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3Vio4$Picker), {
@@ -101,10 +101,7 @@ function $49352c629f2d8349$var$ColorEditor(props, ref) {
             '--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};

package/dist/ColorEditor.module.js

@@ -1,4 +1,4 @@
-import "./ColorEditor.32e497e8.css";
+import "./ColorEditor.f85fa1f2.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";
@@ -22,26 +22,26 @@ function $parcel$interopDefault(a) {
 
 
 
-function $49352c629f2d8349$var$ColorEditor(props, ref) {
+const $49352c629f2d8349$export$5aa54fd21eb08d23 = /*#__PURE__*/ (0, $3Vio4$react).forwardRef(function 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';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-_Zs1-b';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }(),
         ref: domRef
     }, /*#__PURE__*/ (0, $3Vio4$react).createElement("div", {
         className: function anonymous(props) {
             let rules = "";
-            rules += ' _Sd';
-            rules += ' le';
-            rules += ' me';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }()
     }, /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $40046aa1a7ccb226$export$b2103f68a961418e), {
@@ -58,9 +58,9 @@ function $49352c629f2d8349$var$ColorEditor(props, ref) {
     })), /*#__PURE__*/ (0, $3Vio4$react).createElement("div", {
         className: function anonymous(props) {
             let rules = "";
-            rules += ' _Sd';
-            rules += ' le';
-            rules += ' me';
+            rules += ' s1-_Ss1-d';
+            rules += ' s1-ls1-e';
+            rules += ' s1-ms1-e';
             return rules;
         }()
     }, /*#__PURE__*/ (0, $3Vio4$react).createElement((0, $3Vio4$Picker), {
@@ -101,10 +101,7 @@ function $49352c629f2d8349$var$ColorEditor(props, ref) {
             '--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};

package/dist/ColorEditor.module.js.map

@@ -1 +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;YAAQ,SAAS;YAAS,SAAA;YAAQ,OAAM;YAAW,MAAA;YAAK,cAAc;gBAAC,kCAAkC;YAAC;aAEnJ,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} 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"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAA2B;IAC3H,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;YAAQ,SAAS;YAAS,SAAA;YAAQ,OAAM;YAAW,MAAA;YAAK,cAAc;gBAAC,kCAAkC;YAAC;aAEnJ,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAQ;QAAQ,SAAA;QAAQ,OAAM;QAAW,MAAA;QAAK,cAAc;YAAC,kCAAkC;QAAC;;AAItH","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\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function 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} 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"],"names":[],"version":3,"file":"ColorEditor.module.js.map"}

package/dist/ColorField.main.js

@@ -40,7 +40,7 @@ $parcel$export(module.exports, "ColorField", () => $8bdb9bc27ff3debb$export$b865
 
 
 
-function $8bdb9bc27ff3debb$var$ColorField(props, ref) {
+const $8bdb9bc27ff3debb$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$interopDefault($4ivT8$react))).forwardRef(function 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));
@@ -54,10 +54,7 @@ function $8bdb9bc27ff3debb$var$ColorField(props, ref) {
         ...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;

package/dist/ColorField.main.js.map

@@ -1 +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"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAsB;IACnH,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,MAAM,CAAA,GAAA,4CAAgB;IACvD,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,IAAI,MAAM,OAAO,EACf,qBAAO,0DAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,0DAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,kDAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,0CAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,oIACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACpC,MAAM,IAAI,kBAAI,0DAAC;QAAM,MAAK;QAAS,MAAM,MAAM,IAAI;QAAE,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAGpH;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,mCAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAEzC","sources":["packages/@react-spectrum/color/src/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';\nimport {ColorFieldContext, useContextProps} from 'react-aria-components';\nimport React, {Ref, useRef} from 'react';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorChannelField, useColorField} from '@react-aria/color';\nimport {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n  if (props.placeholder) {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n  }\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel,\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n      {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.main.js.map"}

package/dist/ColorField.mjs

@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
 
 
 
-function $0077d47e004328f0$var$ColorField(props, ref) {
+const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef(function ColorField(props, ref) {
     props = (0, $b4uus$useProviderProps)(props);
     props = (0, $b4uus$useFormProps)(props);
     [props] = (0, $b4uus$useContextProps)(props, null, (0, $b4uus$ColorFieldContext));
@@ -48,10 +48,7 @@ function $0077d47e004328f0$var$ColorField(props, ref) {
         ...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;

package/dist/ColorField.module.js

@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
 
 
 
-function $0077d47e004328f0$var$ColorField(props, ref) {
+const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $b4uus$react).forwardRef(function ColorField(props, ref) {
     props = (0, $b4uus$useProviderProps)(props);
     props = (0, $b4uus$useFormProps)(props);
     [props] = (0, $b4uus$useContextProps)(props, null, (0, $b4uus$ColorFieldContext));
@@ -48,10 +48,7 @@ function $0077d47e004328f0$var$ColorField(props, ref) {
         ...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;

package/dist/ColorField.module.js.map

@@ -1 +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"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAkBM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAsB;IACnH,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM,CAAA,GAAA,wBAAgB;IACvD,IAAI,MAAM,WAAW,EACnB,QAAQ,IAAI,CAAC;IAGf,IAAI,MAAM,OAAO,EACf,qBAAO,gCAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,gCAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,gCAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2BAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,gFACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACpC,MAAM,IAAI,kBAAI,gCAAC;QAAM,MAAK;QAAS,MAAM,MAAM,IAAI;QAAE,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAGpH;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,oBAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;;AAEzC","sources":["packages/@react-spectrum/color/src/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';\nimport {ColorFieldContext, useContextProps} from 'react-aria-components';\nimport React, {Ref, useRef} from 'react';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorChannelField, useColorField} from '@react-aria/color';\nimport {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n  if (props.placeholder) {\n    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n  }\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel,\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n      {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value,          // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.module.js.map"}