@react-spectrum/color 3.0.0-nightly.4555 → 3.0.0-nightly.4558

package/dist/ColorSlider.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/color/src/ColorSlider.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, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        }\n      )}>\n      {label &&\n        <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n          <Label {...labelProps}>{label}</Label>\n          {props.contextualHelp &&\n            <SlotProvider\n              slots={{\n                actionButton: {\n                  UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n                }\n              }}>\n              {props.contextualHelp}\n            </SlotProvider>\n          }\n          {showValueLabel && (\n            <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n              <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n            </Label>\n          )}\n        </div>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n"],"names":[],"version":3,"file":"ColorSlider.main.js.map"}

package/dist/ColorSlider.mjs

@@ -0,0 +1,120 @@
+import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
+import "./vars.571f903e.css";
+import $fxUYb$colorslider_vars_cssmodulejs from "./colorslider_vars_css.mjs";
+import {useStyleProps as $fxUYb$useStyleProps, useFocusableRef as $fxUYb$useFocusableRef, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
+import {Label as $fxUYb$Label} from "@react-spectrum/label";
+import $fxUYb$react, {useRef as $fxUYb$useRef, useState as $fxUYb$useState} from "react";
+import {useColorSlider as $fxUYb$useColorSlider} from "@react-aria/color";
+import {useColorSliderState as $fxUYb$useColorSliderState} from "@react-stately/color";
+import {useFocusVisible as $fxUYb$useFocusVisible, useFocus as $fxUYb$useFocus} from "@react-aria/interactions";
+import {useLocale as $fxUYb$useLocale} from "@react-aria/i18n";
+import {useProviderProps as $fxUYb$useProviderProps} from "@react-spectrum/provider";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
+    props = (0, $fxUYb$useProviderProps)(props);
+    let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, "aria-label": ariaLabel } = props;
+    let vertical = orientation === "vertical";
+    let { styleProps: styleProps } = (0, $fxUYb$useStyleProps)(props);
+    let { locale: locale } = (0, $fxUYb$useLocale)();
+    let inputRef = (0, $fxUYb$useRef)(null);
+    let trackRef = (0, $fxUYb$useRef)(null);
+    let domRef = (0, $fxUYb$useFocusableRef)(ref, inputRef);
+    let state = (0, $fxUYb$useColorSliderState)({
+        ...props,
+        locale: locale
+    });
+    // If vertical and a label is provided, use it as an aria-label instead.
+    if (vertical && label) {
+        ariaLabel = ariaLabel || (typeof label === "string" ? label : undefined);
+        label = null;
+    }
+    // If no external label, aria-label or aria-labelledby is provided,
+    // default to displaying the localized channel value.
+    // Specifically check if label is undefined. If label is `null` then display no visible label.
+    // A default aria-label is provided by useColorSlider in that case.
+    if (label === undefined && !ariaLabel && !props["aria-labelledby"] && !vertical) label = state.value.getChannelName(channel, locale);
+    // Show the value label by default if there is a visible label
+    if (showValueLabel == null) showValueLabel = !!label;
+    let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $fxUYb$useColorSlider)({
+        ...props,
+        label: label,
+        "aria-label": ariaLabel,
+        trackRef: trackRef,
+        inputRef: inputRef
+    }, state);
+    let { isFocusVisible: isFocusVisible } = (0, $fxUYb$useFocusVisible)();
+    let [isFocused, setIsFocused] = (0, $fxUYb$useState)(false);
+    let { focusProps: focusProps } = (0, $fxUYb$useFocus)({
+        isDisabled: isDisabled,
+        onFocusChange: setIsFocused
+    });
+    return /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
+        ref: domRef,
+        ...styleProps,
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), {
+            "spectrum-ColorSlider-container--horizontal": !vertical,
+            "spectrum-ColorSlider-container--vertical": vertical
+        })
+    }, label && /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-labelContainer")
+    }, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$SlotProvider), {
+        slots: {
+            actionButton: {
+                UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-contextualHelp")
+            }
+        }
+    }, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), {
+        elementType: "span",
+        UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-valueLabel")
+    }, /*#__PURE__*/ (0, $fxUYb$react).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
+        ...trackProps,
+        ref: trackRef,
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider", {
+            "is-disabled": isDisabled,
+            "spectrum-ColorSlider--vertical": vertical
+        })
+    }, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
+        value: state.getDisplayColor(),
+        isFocused: isFocused && isFocusVisible,
+        isDisabled: isDisabled,
+        isDragging: state.isThumbDragging(0),
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-handle"),
+        ...thumbProps
+    }, /*#__PURE__*/ (0, $fxUYb$react).createElement("input", {
+        ...inputProps,
+        ...focusProps,
+        ref: inputRef,
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-slider")
+    }))));
+}
+/**
+ * ColorSliders allow users to adjust an individual channel of a color value.
+ */ let $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $fxUYb$react).forwardRef($3870e4ce67ed7ee1$var$ColorSlider);
+
+
+export {$3870e4ce67ed7ee1$export$44fd664bcca5b6fb as ColorSlider};
+//# sourceMappingURL=ColorSlider.mjs.map

package/dist/ColorSlider.module.js

@@ -0,0 +1,120 @@
+import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
+import "./vars.571f903e.css";
+import $fxUYb$colorslider_vars_cssmodulejs from "./colorslider_vars_css.module.js";
+import {useStyleProps as $fxUYb$useStyleProps, useFocusableRef as $fxUYb$useFocusableRef, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
+import {Label as $fxUYb$Label} from "@react-spectrum/label";
+import $fxUYb$react, {useRef as $fxUYb$useRef, useState as $fxUYb$useState} from "react";
+import {useColorSlider as $fxUYb$useColorSlider} from "@react-aria/color";
+import {useColorSliderState as $fxUYb$useColorSliderState} from "@react-stately/color";
+import {useFocusVisible as $fxUYb$useFocusVisible, useFocus as $fxUYb$useFocus} from "@react-aria/interactions";
+import {useLocale as $fxUYb$useLocale} from "@react-aria/i18n";
+import {useProviderProps as $fxUYb$useProviderProps} from "@react-spectrum/provider";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
+    props = (0, $fxUYb$useProviderProps)(props);
+    let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, "aria-label": ariaLabel } = props;
+    let vertical = orientation === "vertical";
+    let { styleProps: styleProps } = (0, $fxUYb$useStyleProps)(props);
+    let { locale: locale } = (0, $fxUYb$useLocale)();
+    let inputRef = (0, $fxUYb$useRef)(null);
+    let trackRef = (0, $fxUYb$useRef)(null);
+    let domRef = (0, $fxUYb$useFocusableRef)(ref, inputRef);
+    let state = (0, $fxUYb$useColorSliderState)({
+        ...props,
+        locale: locale
+    });
+    // If vertical and a label is provided, use it as an aria-label instead.
+    if (vertical && label) {
+        ariaLabel = ariaLabel || (typeof label === "string" ? label : undefined);
+        label = null;
+    }
+    // If no external label, aria-label or aria-labelledby is provided,
+    // default to displaying the localized channel value.
+    // Specifically check if label is undefined. If label is `null` then display no visible label.
+    // A default aria-label is provided by useColorSlider in that case.
+    if (label === undefined && !ariaLabel && !props["aria-labelledby"] && !vertical) label = state.value.getChannelName(channel, locale);
+    // Show the value label by default if there is a visible label
+    if (showValueLabel == null) showValueLabel = !!label;
+    let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $fxUYb$useColorSlider)({
+        ...props,
+        label: label,
+        "aria-label": ariaLabel,
+        trackRef: trackRef,
+        inputRef: inputRef
+    }, state);
+    let { isFocusVisible: isFocusVisible } = (0, $fxUYb$useFocusVisible)();
+    let [isFocused, setIsFocused] = (0, $fxUYb$useState)(false);
+    let { focusProps: focusProps } = (0, $fxUYb$useFocus)({
+        isDisabled: isDisabled,
+        onFocusChange: setIsFocused
+    });
+    return /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
+        ref: domRef,
+        ...styleProps,
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), {
+            "spectrum-ColorSlider-container--horizontal": !vertical,
+            "spectrum-ColorSlider-container--vertical": vertical
+        })
+    }, label && /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-labelContainer")
+    }, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$SlotProvider), {
+        slots: {
+            actionButton: {
+                UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-contextualHelp")
+            }
+        }
+    }, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), {
+        elementType: "span",
+        UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-valueLabel")
+    }, /*#__PURE__*/ (0, $fxUYb$react).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
+        ...trackProps,
+        ref: trackRef,
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider", {
+            "is-disabled": isDisabled,
+            "spectrum-ColorSlider--vertical": vertical
+        })
+    }, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
+        value: state.getDisplayColor(),
+        isFocused: isFocused && isFocusVisible,
+        isDisabled: isDisabled,
+        isDragging: state.isThumbDragging(0),
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-handle"),
+        ...thumbProps
+    }, /*#__PURE__*/ (0, $fxUYb$react).createElement("input", {
+        ...inputProps,
+        ...focusProps,
+        ref: inputRef,
+        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-slider")
+    }))));
+}
+/**
+ * ColorSliders allow users to adjust an individual channel of a color value.
+ */ let $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $fxUYb$react).forwardRef($3870e4ce67ed7ee1$var$ColorSlider);
+
+
+export {$3870e4ce67ed7ee1$export$44fd664bcca5b6fb as ColorSlider};
+//# sourceMappingURL=ColorSlider.module.js.map

package/dist/ColorSlider.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/color/src/ColorSlider.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, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n    label = null;\n  }\n\n  // If no external label, aria-label or aria-labelledby is provided,\n  // default to displaying the localized channel value.\n  // Specifically check if label is undefined. If label is `null` then display no visible label.\n  // A default aria-label is provided by useColorSlider in that case.\n  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        }\n      )}>\n      {label &&\n        <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n          <Label {...labelProps}>{label}</Label>\n          {props.contextualHelp &&\n            <SlotProvider\n              slots={{\n                actionButton: {\n                  UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n                }\n              }}>\n              {props.contextualHelp}\n            </SlotProvider>\n          }\n          {showValueLabel && (\n            <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n              <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n            </Label>\n          )}\n        </div>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n"],"names":[],"version":3,"file":"ColorSlider.module.js.map"}

package/dist/ColorThumb.main.js

@@ -0,0 +1,94 @@
+require("./vars.08ba4b4c.css");
+var $f61d632765728b2e$exports = require("./colorhandle_vars_css.main.js");
+require("./vars.ef2c01b8.css");
+var $f65977ae56facfaa$exports = require("./colorloupe_vars_css.main.js");
+var $bRwD9$reactspectrumutils = require("@react-spectrum/utils");
+var $bRwD9$react = require("react");
+var $bRwD9$reactariautils = require("@react-aria/utils");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ColorThumb", () => $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+function $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc(props) {
+    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", ...otherProps } = props;
+    let patternId = (0, $bRwD9$reactariautils.useId)();
+    let valueCSS = value.toString("css");
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("div", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))), "spectrum-ColorHandle", {
+            "is-focused": isFocused,
+            "is-disabled": isDisabled
+        }) + " " + className,
+        ...otherProps
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("div", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))), "spectrum-ColorHandle-color"),
+        style: {
+            backgroundColor: valueCSS
+        }
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("svg", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe", {
+            "is-open": isDragging
+        }),
+        "aria-hidden": "true"
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("pattern", {
+        id: patternId,
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16",
+        patternUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-inner-background"),
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16"
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-inner-checker"),
+        x: "0",
+        y: "0",
+        width: "8",
+        height: "8"
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "spectrum-ColorLoupe-inner-checker"),
+        x: "8",
+        y: "8",
+        width: "8",
+        height: "8"
+    })), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "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})`
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "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
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
+        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), "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"
+    })), children);
+}
+
+
+//# sourceMappingURL=ColorThumb.main.js.map

package/dist/ColorThumb.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,SAAS,yCAAW,KAAsB;IACxC,IAAI,SAAC,KAAK,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,YAAE,QAAQ,aAAE,YAAY,IAAI,GAAG,YAAW,GAAG;IAE1F,IAAI,YAAY,CAAA,GAAA,2BAAI;IAEpB,IAAI,WAAW,MAAM,QAAQ,CAAC;IAE9B,qBACE,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG,wBAAwB;YAAC,cAAc;YAAW,eAAe;QAAU,KAAK,MAAM;QAAY,GAAG,UAAU;qBACtJ,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAW,GAAG;QAA+B,OAAO;YAAC,iBAAiB;QAAQ;sBACzG,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG,uBAAwB;YAAC,WAAW;QAAU;QAAI,eAAY;qBACpG,0DAAC;QAAQ,IAAI;QAAW,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;QAAK,cAAa;qBACtE,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAyC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;sBAChH,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;sBAC5G,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;uBAE9G,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;QACF,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;sBAC5B,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;QACF,MAAM;sBACR,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAU,GAAG;QACnC,GAAE;SAEL;AAGP","sources":["packages/@react-spectrum/color/src/ColorThumb.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 {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n  let patternId = useId();\n\n  let valueCSS = value.toString('css');\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden=\"true\">\n        <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n        </pattern>\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={`url(#${patternId})`} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={valueCSS} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n          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\" />\n      </svg>\n      {children}\n    </div>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.main.js.map"}

package/dist/ColorThumb.mjs

@@ -0,0 +1,89 @@
+import "./vars.08ba4b4c.css";
+import $1UQoL$colorhandle_vars_cssmodulejs from "./colorhandle_vars_css.mjs";
+import "./vars.ef2c01b8.css";
+import $1UQoL$colorloupe_vars_cssmodulejs from "./colorloupe_vars_css.mjs";
+import {classNames as $1UQoL$classNames} from "@react-spectrum/utils";
+import $1UQoL$react from "react";
+import {useId as $1UQoL$useId} from "@react-aria/utils";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
+    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", ...otherProps } = props;
+    let patternId = (0, $1UQoL$useId)();
+    let valueCSS = value.toString("css");
+    return /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), "spectrum-ColorHandle", {
+            "is-focused": isFocused,
+            "is-disabled": isDisabled
+        }) + " " + className,
+        ...otherProps
+    }, /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), "spectrum-ColorHandle-color"),
+        style: {
+            backgroundColor: valueCSS
+        }
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("svg", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe", {
+            "is-open": isDragging
+        }),
+        "aria-hidden": "true"
+    }, /*#__PURE__*/ (0, $1UQoL$react).createElement("pattern", {
+        id: patternId,
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16",
+        patternUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe-inner-background"),
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16"
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe-inner-checker"),
+        x: "0",
+        y: "0",
+        width: "8",
+        height: "8"
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe-inner-checker"),
+        x: "8",
+        y: "8",
+        width: "8",
+        height: "8"
+    })), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "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})`
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "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
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "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"
+    })), children);
+}
+
+
+export {$3a90e89d07d7bbd5$export$a3cc47cee1c1ccc as ColorThumb};
+//# sourceMappingURL=ColorThumb.mjs.map

package/dist/ColorThumb.module.js

@@ -0,0 +1,89 @@
+import "./vars.08ba4b4c.css";
+import $1UQoL$colorhandle_vars_cssmodulejs from "./colorhandle_vars_css.module.js";
+import "./vars.ef2c01b8.css";
+import $1UQoL$colorloupe_vars_cssmodulejs from "./colorloupe_vars_css.module.js";
+import {classNames as $1UQoL$classNames} from "@react-spectrum/utils";
+import $1UQoL$react from "react";
+import {useId as $1UQoL$useId} from "@react-aria/utils";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
+    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", ...otherProps } = props;
+    let patternId = (0, $1UQoL$useId)();
+    let valueCSS = value.toString("css");
+    return /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), "spectrum-ColorHandle", {
+            "is-focused": isFocused,
+            "is-disabled": isDisabled
+        }) + " " + className,
+        ...otherProps
+    }, /*#__PURE__*/ (0, $1UQoL$react).createElement("div", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorhandle_vars_cssmodulejs))), "spectrum-ColorHandle-color"),
+        style: {
+            backgroundColor: valueCSS
+        }
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("svg", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe", {
+            "is-open": isDragging
+        }),
+        "aria-hidden": "true"
+    }, /*#__PURE__*/ (0, $1UQoL$react).createElement("pattern", {
+        id: patternId,
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16",
+        patternUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe-inner-background"),
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16"
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe-inner-checker"),
+        x: "0",
+        y: "0",
+        width: "8",
+        height: "8"
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("rect", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "spectrum-ColorLoupe-inner-checker"),
+        x: "8",
+        y: "8",
+        width: "8",
+        height: "8"
+    })), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "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})`
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "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
+    }), /*#__PURE__*/ (0, $1UQoL$react).createElement("path", {
+        className: (0, $1UQoL$classNames)((0, ($parcel$interopDefault($1UQoL$colorloupe_vars_cssmodulejs))), "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"
+    })), children);
+}
+
+
+export {$3a90e89d07d7bbd5$export$a3cc47cee1c1ccc as ColorThumb};
+//# sourceMappingURL=ColorThumb.module.js.map

package/dist/ColorThumb.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,SAAS,yCAAW,KAAsB;IACxC,IAAI,SAAC,KAAK,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,YAAE,QAAQ,aAAE,YAAY,IAAI,GAAG,YAAW,GAAG;IAE1F,IAAI,YAAY,CAAA,GAAA,YAAI;IAEpB,IAAI,WAAW,MAAM,QAAQ,CAAC;IAE9B,qBACE,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAW,GAAG,wBAAwB;YAAC,cAAc;YAAW,eAAe;QAAU,KAAK,MAAM;QAAY,GAAG,UAAU;qBACtJ,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAW,GAAG;QAA+B,OAAO;YAAC,iBAAiB;QAAQ;sBACzG,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG,uBAAwB;YAAC,WAAW;QAAU;QAAI,eAAY;qBACpG,gCAAC;QAAQ,IAAI;QAAW,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;QAAK,cAAa;qBACtE,gCAAC;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QAAyC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAK,QAAO;sBAChH,gCAAC;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;sBAC5G,gCAAC;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QAAsC,GAAE;QAAI,GAAE;QAAI,OAAM;QAAI,QAAO;uBAE9G,gCAAC;QACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QACnC,GAAE;QACF,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;sBAC5B,gCAAC;QACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QACnC,GAAE;QACF,MAAM;sBACR,gCAAC;QACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAU,GAAG;QACnC,GAAE;SAEL;AAGP","sources":["packages/@react-spectrum/color/src/ColorThumb.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 {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n  let patternId = useId();\n\n  let valueCSS = value.toString('css');\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden=\"true\">\n        <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n        </pattern>\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={`url(#${patternId})`} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n          d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n          fill={valueCSS} />\n        <path\n          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n          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\" />\n      </svg>\n      {children}\n    </div>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.module.js.map"}