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

package/src/ColorThumb.tsx

@@ -13,10 +13,12 @@
 import {classNames} from '@react-spectrum/utils';
 import {Color} from '@react-types/color';
 import {DOMProps} from '@react-types/shared';
-import React, {ReactElement} from 'react';
+import {Overlay} from '@react-spectrum/overlays';
+import React, {CSSProperties, ReactElement, RefObject, useRef, useState} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
 import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
-import {useId} from '@react-aria/utils';
+import {useId, useLayoutEffect} from '@react-aria/utils';
+import {useProvider} from '@react-spectrum/provider';
 
 interface ColorThumbProps extends DOMProps {
   value: Color,
@@ -24,40 +26,85 @@ interface ColorThumbProps extends DOMProps {
   isDragging?: boolean, // shows the color loupe
   isFocused?: boolean, // makes the circle larger
   className?: string,
-  children?: ReactElement
+  children?: ReactElement,
+  style?: CSSProperties,
+  containerRef?: RefObject<HTMLElement>
 }
 
 function ColorThumb(props: ColorThumbProps) {
-  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;
-
-  let patternId = useId();
+  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;
 
   let valueCSS = value.toString('css');
+  let loupeRef = useRef<HTMLElement | null>(null);
+  let provider = useProvider();
 
   return (
-    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>
+    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>
       <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />
-      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden="true">
-        <pattern id={patternId} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x="0" y="0" width="16" height="16" />
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="0" y="0" width="8" height="8" />
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="8" y="8" width="8" height="8" />
-        </pattern>
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
-          d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-          fill={`url(#${patternId})`} />
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
-          d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-          fill={valueCSS} />
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}
-          d="M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" />
-      </svg>
+      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>
+        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />
+      </Overlay>
       {children}
     </div>
   );
 }
 
+// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).
+function ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {
+  let patternId = useId();
+
+  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).
+  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});
+  useLayoutEffect(() => {
+    let rect = containerRef.current?.getBoundingClientRect();
+    setContainerRect({
+      top: rect?.top || 0,
+      left: rect?.left || 0,
+      width: rect?.width || 0,
+      height: rect?.height || 0
+    });
+  }, [containerRef]);
+
+  // Compute the pixel position of the thumb.
+  let thumbTop = style.top || '50%';
+  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {
+    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
+  }
+
+  let thumbLeft = style.left || '50%';
+  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {
+    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
+  }
+
+  return (
+    <svg
+      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}
+      style={{
+        // Position relative to the viewport.
+        position: 'fixed',
+        top: containerRect.top + thumbTop,
+        left: containerRect.left + thumbLeft
+      }}
+      ref={loupeRef}
+      aria-hidden="true">
+      <pattern id={patternId} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x="0" y="0" width="16" height="16" />
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="0" y="0" width="8" height="8" />
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="8" y="8" width="8" height="8" />
+      </pattern>
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
+        d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
+        fill={`url(#${patternId})`} />
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
+        d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
+        fill={valueCSS} />
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}
+        d="M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" />
+    </svg>
+  );
+}
+
 export {ColorThumb};

package/src/ColorWheel.tsx

@@ -12,6 +12,7 @@
 
 import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {ColorThumb} from './ColorThumb';
+import {ColorWheelContext, useContextProps} from 'react-aria-components';
 import {FocusableRef} from '@react-types/shared';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {SpectrumColorWheelProps} from '@react-types/color';
@@ -26,13 +27,14 @@ const WHEEL_THICKNESS = 24;
 
 function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
+  let inputRef = useRef(null);
+  let containerRef = useFocusableRef(ref, inputRef);
+  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);
 
   let {isDisabled} = props;
   let size = props.size && dimensionValue(props.size);
   let {styleProps} = useStyleProps(props);
 
-  let inputRef = useRef(null);
-  let containerRef = useFocusableRef(ref, inputRef);
 
   let [wheelRadius, setWheelRadius] = useState<number>(0);
   let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);
@@ -96,6 +98,7 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
         isFocused={isFocusVisible}
         isDisabled={isDisabled}
         isDragging={state.isDragging}
+        containerRef={containerRef}
         className={classNames(styles, 'spectrum-ColorWheel-handle')}
         {...thumbProps}>
         <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />

package/src/index.ts

@@ -15,4 +15,14 @@ export {ColorArea} from './ColorArea';
 export {ColorWheel} from './ColorWheel';
 export {ColorSlider} from './ColorSlider';
 export {ColorField} from './ColorField';
+export {ColorSwatch} from './ColorSwatch';
+export {ColorPicker} from './ColorPicker';
+export {ColorEditor} from './ColorEditor';
+export {ColorSwatchPicker} from './ColorSwatchPicker';
+export {parseColor, getColorChannels} from '@react-stately/color';
 export type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';
+export type {SpectrumColorSwatchProps} from './ColorSwatch';
+export type {SpectrumColorPickerProps} from './ColorPicker';
+export type {SpectrumColorEditorProps} from './ColorEditor';
+export type {SpectrumColorSwatchPickerProps} from './ColorSwatchPicker';
+export type {Color, ColorSpace, ColorFormat} from '@react-types/color';

package/dist/main.css

@@ -1,491 +0,0 @@
-.hoc2UW_spectrum-ColorHandle {
-  z-index: 1;
-  box-sizing: border-box;
-  width: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200));
-  height: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200));
-  margin-left: calc(-1 * calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2));
-  margin-top: calc(-1 * calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2));
-  border-width: var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25));
-  background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px);
-  background-position: calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)) calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)), calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)) calc(var(--spectrum-global-dimension-static-size-100, 8px)  + calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px))), calc(var(--spectrum-global-dimension-static-size-100, 8px)  + calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px))) calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)  + calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px))), calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)  + calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px))) calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px));
-  transition: width var(--spectrum-global-animation-duration-100, .13s) ease-in-out, height var(--spectrum-global-animation-duration-100, .13s) ease-in-out, border-width var(--spectrum-global-animation-duration-100, .13s) ease-in-out, margin-left var(--spectrum-global-animation-duration-100, .13s) ease-in-out, margin-top var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
-  border-style: solid;
-  display: block;
-  position: absolute;
-}
-
-.hoc2UW_spectrum-ColorHandle {
-  border-radius: 100%;
-}
-
-.hoc2UW_spectrum-ColorHandle:after {
-  border-radius: 100%;
-}
-
-.hoc2UW_spectrum-ColorHandle:after {
-  content: "";
-  left: calc(50% - calc(var(--spectrum-global-dimension-size-300) / 2));
-  top: calc(50% - calc(var(--spectrum-global-dimension-size-300) / 2));
-  width: var(--spectrum-global-dimension-size-300);
-  height: var(--spectrum-global-dimension-size-300);
-  display: block;
-  position: absolute;
-}
-
-.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled {
-  pointer-events: none;
-}
-
-.hoc2UW_spectrum-ColorControl-handle--focused {
-  width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
-  height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
-  margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
-  margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
-}
-
-.hoc2UW_is-focused, .hoc2UW_focus-ring {
-}
-
-.hoc2UW_spectrum-ColorHandle-color {
-  border-radius: 100%;
-  width: 100%;
-  height: 100%;
-}
-
-.hoc2UW_spectrum-ColorHandle {
-  border-color: var(--spectrum-colorhandle-inner-border-color, var(--spectrum-global-color-static-white));
-  box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) #0000006b;
-  background-color: var(--spectrum-global-color-static-white, #fff);
-  background-image: linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%), linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%);
-}
-
-.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled {
-  border-color: var(--spectrum-colorhandle-inner-border-color-disabled, var(--spectrum-global-color-gray-400));
-  background: var(--spectrum-colorhandle-fill-color-disabled, var(--spectrum-global-color-gray-300));
-  box-shadow: none;
-}
-
-.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled .hoc2UW_spectrum-ColorHandle-color {
-  display: none;
-}
-
-.hoc2UW_spectrum-ColorHandle-color {
-  box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) #0000006b;
-}
-
-@media (forced-colors: active) {
-  .hoc2UW_spectrum-ColorHandle {
-    forced-color-adjust: none;
-    --spectrum-colorhandle-inner-border-color-disabled: GrayText;
-    --spectrum-colorhandle-fill-color-disabled: GrayText;
-    --spectrum-colorhandle-inner-border-color: ButtonText;
-    --spectrum-colorhandle-outer-border-color: ButtonFace;
-  }
-}
-
-.HpWpfq_spectrum-ColorLoupe {
-  width: calc(var(--spectrum-colorloupe-width, var(--spectrum-global-dimension-static-size-600))  + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2);
-  height: calc(var(--spectrum-colorloupe-height, var(--spectrum-global-dimension-static-size-800))  + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2);
-  transform: translate(0, var(--spectrum-global-dimension-static-size-100, 8px));
-  opacity: 0;
-  transform-origin: bottom;
-  bottom: calc(50% + var(--spectrum-global-dimension-static-size-200, 16px));
-  left: calc(50% - calc(calc(var(--spectrum-colorloupe-width, var(--spectrum-global-dimension-static-size-600))  + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2) / 2));
-  pointer-events: none;
-  transition: transform .1s ease-in-out, opacity .125s ease-in-out;
-  position: absolute;
-}
-
-.HpWpfq_spectrum-ColorLoupe.HpWpfq_is-open {
-  opacity: 1;
-  z-index: 2;
-  transform: translate(0);
-}
-
-.HpWpfq_spectrum-ColorLoupe-outer {
-  stroke-width: var(--spectrum-colorloupe-outer-border-size, var(--spectrum-global-dimension-static-size-10));
-  fill: var(--spectrum-colorloupe-inner-border-color, var(--spectrum-global-color-static-white));
-  stroke: var(--spectrum-colorloupe-outer-border-color, #3232321a);
-}
-
-.HpWpfq_spectrum-ColorLoupe-inner-background {
-  fill: var(--spectrum-global-color-static-white, #fff);
-}
-
-.HpWpfq_spectrum-ColorLoupe-inner-checker {
-  fill: var(--spectrum-global-color-static-gray-500, #bcbcbc);
-}
-
-@media (forced-colors: active) {
-  .HpWpfq_spectrum-ColorLoupe {
-    forced-color-adjust: none;
-    --spectrum-colorloupe-inner-border-color: ButtonText;
-    --spectrum-colorloupe-outer-border-color: ButtonFace;
-  }
-}
-
-.lm1DSq_spectrum-ColorArea {
-  inline-size: var(--spectrum-colorarea-default-width, var(--spectrum-global-dimension-size-2400));
-  block-size: var(--spectrum-colorarea-default-height, var(--spectrum-global-dimension-size-2400));
-  min-inline-size: var(--spectrum-colorarea-min-width, var(--spectrum-global-dimension-size-800));
-  min-block-size: var(--spectrum-colorarea-min-height, var(--spectrum-global-dimension-size-800));
-  border-radius: var(--spectrum-colorarea-border-radius, var(--spectrum-alias-border-radius-regular));
-  cursor: default;
-  -webkit-user-select: none;
-  user-select: none;
-  display: inline-block;
-  position: relative;
-}
-
-.lm1DSq_spectrum-ColorArea.lm1DSq_is-focused {
-  z-index: 2;
-}
-
-.lm1DSq_spectrum-ColorArea.lm1DSq_is-focused .lm1DSq_spectrum-ColorArea-handle {
-  width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
-  height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
-  margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
-  margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
-}
-
-.lm1DSq_spectrum-ColorArea.lm1DSq_focus-ring {
-  z-index: 2;
-}
-
-.lm1DSq_spectrum-ColorArea.lm1DSq_focus-ring .lm1DSq_spectrum-ColorArea-handle {
-  width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
-  height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
-  margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
-  margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
-}
-
-.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled {
-  pointer-events: none;
-}
-
-.lm1DSq_spectrum-ColorArea:before {
-  content: "";
-  z-index: 1;
-  border-radius: var(--spectrum-colorarea-border-radius, var(--spectrum-alias-border-radius-regular));
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.lm1DSq_spectrum-ColorArea-handle {
-  top: 0;
-  left: 0;
-}
-
-.lm1DSq_spectrum-ColorArea-handle:focus-within {
-  z-index: 2;
-}
-
-.lm1DSq_spectrum-ColorArea-gradient {
-  border-radius: var(--spectrum-colorarea-border-radius, var(--spectrum-alias-border-radius-regular));
-  width: 100%;
-  height: 100%;
-}
-
-.lm1DSq_spectrum-ColorArea-slider {
-  opacity: .0001;
-  z-index: 0;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.lm1DSq_spectrum-ColorArea:before {
-  box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorarea-border-color);
-}
-
-.lm1DSq_spectrum-ColorArea-gradient, .lm1DSq_spectrum-ColorHandle-color {
-  forced-color-adjust: none;
-}
-
-.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled {
-  background: var(--spectrum-colorarea-fill-color-disabled, var(--spectrum-global-color-gray-300));
-}
-
-.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled:before {
-  box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorarea-border-color-disabled, var(--spectrum-global-color-gray-300));
-}
-
-.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled .lm1DSq_spectrum-ColorArea-gradient {
-  display: none;
-}
-
-@media (forced-colors: active) {
-  .lm1DSq_spectrum-ColorArea {
-    --spectrum-colorarea-fill-color-disabled: GrayText;
-  }
-
-  .lm1DSq_spectrum-ColorArea {
-    forced-color-adjust: none;
-  }
-
-  .lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled {
-    forced-color-adjust: none;
-  }
-}
-
-.qPIMxa_spectrum-ColorControl-hiddenField {
-  opacity: .0001;
-  z-index: 0;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel {
-  width: calc(var(--spectrum-global-dimension-size-125) * 16);
-  height: calc(var(--spectrum-global-dimension-size-125) * 16);
-  --spectrum-colorwheel-track-thickness: var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300));
-  -webkit-user-select: none;
-  user-select: none;
-  touch-action: none;
-  cursor: default;
-  border-radius: 100%;
-  display: block;
-  position: relative;
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel .qPIMxa_spectrum-ColorWheel-handle {
-  margin: 0;
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-focused {
-  z-index: 2;
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled {
-  pointer-events: none;
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-dragged {
-  z-index: 2;
-}
-
-.qPIMxa_spectrum-ColorWheel-gradient {
-  z-index: 0;
-  width: calc(var(--spectrum-global-dimension-size-125) * 16);
-  height: calc(var(--spectrum-global-dimension-size-125) * 16);
-  position: relative;
-}
-
-.qPIMxa_spectrum-ColorWheel-gradient:before {
-  content: "";
-  border-width: var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin));
-  border-style: solid;
-  border-radius: 100%;
-  position: absolute;
-}
-
-.qPIMxa_spectrum-ColorWheel-gradient:after {
-  content: "";
-  border-width: var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin));
-  border-style: solid;
-  border-radius: 100%;
-  position: absolute;
-}
-
-.qPIMxa_spectrum-ColorWheel-gradient:before {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.qPIMxa_spectrum-ColorWheel-gradient:after {
-  top: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300))  - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
-  left: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300))  - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
-  bottom: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300))  - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
-  right: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300))  - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
-}
-
-.qPIMxa_spectrum-ColorWheel-slider {
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient {
-  background: var(--spectrum-colorwheel-fill-color-disabled, var(--spectrum-global-color-gray-300)) !important;
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient:before {
-  border-color: var(--spectrum-colorwheel-border-color-disabled, var(--spectrum-global-color-gray-300));
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient:after {
-  border-color: var(--spectrum-colorwheel-border-color-disabled, var(--spectrum-global-color-gray-300));
-}
-
-.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-segment {
-  display: none;
-}
-
-.qPIMxa_spectrum-ColorWheel-gradient:before {
-  border-color: var(--spectrum-colorarea-border-color);
-}
-
-.qPIMxa_spectrum-ColorWheel-gradient:after {
-  border-color: var(--spectrum-colorarea-border-color);
-}
-
-@media (forced-colors: active) {
-  .qPIMxa_spectrum-ColorWheel {
-    forced-color-adjust: none;
-    --spectrum-colorwheel-fill-color-disabled: GrayText;
-    --spectrum-colorwheel-border-color-disabled: GrayText;
-    --spectrum-colorwheel-border-color: ButtonText;
-    --spectrum-colorarea-border-color: ButtonText;
-  }
-}
-
-.WJOmgG_spectrum-ColorControl-hiddenField {
-  opacity: .0001;
-  z-index: 0;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.WJOmgG_spectrum-ColorSlider-container--horizontal {
-  width: var(--spectrum-colorslider-default-length, var(--spectrum-global-dimension-size-2400));
-}
-
-.WJOmgG_spectrum-ColorSlider-container--vertical {
-  height: var(--spectrum-colorslider-default-length, var(--spectrum-global-dimension-size-2400));
-  flex-direction: column;
-  display: flex;
-}
-
-.WJOmgG_spectrum-ColorSlider {
-  height: var(--spectrum-colorslider-height, var(--spectrum-global-dimension-size-300));
-  border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
-  -webkit-user-select: none;
-  user-select: none;
-  touch-action: none;
-  cursor: default;
-  width: 100%;
-  display: block;
-  position: relative;
-}
-
-.WJOmgG_spectrum-ColorSlider .WJOmgG_spectrum-ColorSlider-handle.WJOmgG_spectrum-ColorSlider-handle {
-  margin: 0;
-}
-
-.WJOmgG_spectrum-ColorSlider:before {
-  content: "";
-  z-index: -1;
-  border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
-  background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px);
-  background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100, 8px), var(--spectrum-global-dimension-static-size-100, 8px) calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)), calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)) 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.WJOmgG_spectrum-ColorSlider.WJOmgG_is-focused {
-  z-index: 2;
-}
-
-.WJOmgG_spectrum-ColorSlider.WJOmgG_is-disabled {
-  pointer-events: none;
-}
-
-.WJOmgG_spectrum-ColorSlider--vertical {
-  width: var(--spectrum-colorslider-vertical-width, var(--spectrum-global-dimension-size-300));
-  flex: 1;
-  display: inline-block;
-}
-
-.WJOmgG_spectrum-ColorSlider--vertical .WJOmgG_spectrum-ColorSlider-handle {
-  top: 0;
-  left: 50%;
-}
-
-.WJOmgG_spectrum-ColorSlider-handle {
-  top: 50%;
-  left: 0;
-}
-
-.WJOmgG_spectrum-ColorSlider-handle:after {
-  width: var(--spectrum-global-dimension-size-300);
-  height: var(--spectrum-global-dimension-size-300);
-  border-radius: 0%;
-}
-
-.WJOmgG_spectrum-ColorSlider-slider {
-}
-
-.WJOmgG_spectrum-ColorSlider-labelContainer {
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: "WJOmgG_label WJOmgG_contextualHelp WJOmgG_value";
-  justify-items: start;
-  display: grid;
-}
-
-.WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp {
-  margin-inline-start: var(--spectrum-global-dimension-size-50);
-  margin-top: var(--spectrum-global-dimension-size-25);
-  grid-area: WJOmgG_contextualHelp;
-}
-
-.WJOmgG_spectrum-ColorSlider-valueLabel {
-  grid-area: WJOmgG_value;
-  margin-inline-start: var(--spectrum-global-dimension-size-50);
-}
-
-.WJOmgG_spectrum-ColorSlider {
-  background-color: var(--spectrum-global-color-static-white, #fff);
-  box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorarea-border-color);
-}
-
-.WJOmgG_spectrum-ColorSlider:before {
-  background-image: linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%), linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%);
-}
-
-.WJOmgG_spectrum-ColorSlider.WJOmgG_is-disabled {
-  box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorslider-border-color-disabled, var(--spectrum-global-color-gray-300));
-  background: var(--spectrum-colorslider-fill-color-disabled, var(--spectrum-global-color-gray-300)) !important;
-}
-
-@media (forced-colors: active) {
-  .WJOmgG_spectrum-ColorSlider {
-    forced-color-adjust: none;
-    --spectrum-colorslider-fill-color-disabled: GrayText;
-    --spectrum-colorslider-border-color-disabled: GrayText;
-    --spectrum-colorslider-border-color: ButtonText;
-    --spectrum-colorarea-border-color: ButtonText;
-  }
-}
-
-.UccskW_react-spectrum-ColorField-input:not(:placeholder-shown) {
-  unicode-bidi: plaintext;
-}
-
-.UccskW_react-spectrum-ColorField-input:not(:placeholder-shown):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-  text-align: end;
-}
-
-.UccskW_react-spectrum-ColorField-input:not(:placeholder-shown):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-  text-align: end;
-}
-
-/*# sourceMappingURL=main.css.map */

package/dist/main.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA;;;;;;;;;;;;;;;;AA8BE;;;;AAAA;;;;AAKA;;;;;;;;;;AAUA;;;;AAKF;;;;;;;AASA;;;AAKA;;;;;;AAMA;;;;;;;AAaE;;;;;;AAKE;;;;AAMJ;;;;AAIA;EACE;;;;;;;;;ACnGF;;;;;;;;;;;;;AAuBE;;;;;;AAOF;;;;;;AASA;;;;AAIA;;;;AAIA;EACE;;;;;;;AChDF;;;;;;;;;;;;;AAcE;;;;AAIE;;;;;;;AAJF;;;;AAIE;;;;;;;AAUF;;;;AAKA;;;;;;;;;;;AAYF;;;;;AAIE;;;;AAKF;;;;;;AAMA;;;;;;;;;;;;AAaI;;;;AAKJ;;;;AASI;;;;AAGE;;;;AAIA;;;;AAMN;EACI;;;;EAGA;;;;EAEE;;;;;ACxGN;;;;;;;;;;;;AAYA;;;;;;;;;;;;;AAcE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAMF;;;;;;;AAME;;;;;;;;AAAA;;;;;;;;AASA;;;;;;;AAOA;;;;;;;AAQF;;;AAMI;;;;AAGE;;;;AAAA;;;;AAOF;;;;AAOF;;;;AAAA;;;;AAMF;EACE;;;;;;;;;AC1GF;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;;;;AAiBA;;;;AAIA;;;;AAKF;;;;;;AAME;;;;;AAMF;;;;;AAIE;;;;;;AAWF;;;AAIA;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;;AAIE;;;;AASA;;;;;AAMF;EACE;;;;;;;;;ACvIF;;;;AAEE;;;;AAAA","sources":["packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/colorfield.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-ColorField-input:not(:placeholder-shown) {\n  unicode-bidi: plaintext;\n  &:dir(rtl) {\n    text-align: end;\n  }\n}\n"],"names":[],"version":3,"file":"main.css.map"}