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

package/dist/ColorPicker.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA6BD,SAAS,kCAAY,KAA+B,EAAE,GAAoC;IACxF,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,UAAU,CAAA,GAAA,2BAAI;IAClB,qBACE,0DAAC,CAAA,GAAA,sCAAc,GAAM,qBACnB,0DAAC,CAAA,GAAA,wCAAY;QAAE,MAAK;QAAU,YAAW;QAAO,WAAW,CAAA,GAAA,sCAAW,EAAE;qBACtE,0DAAC,CAAA,GAAA,iCAAK;QACJ,KAAK;QACL,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkBR;YAAC,MAAM,MAAM,IAAI,IAAI;QAAG;OAC1B,CAAC,kBAAC,cAAc,EAAC,iBAChB,oIACE,0DAAC;YACC,WAAW;;;;;;;;;;;;;cASR;gCAAC;YAAc;yBAClB,0DAAC,CAAA,GAAA,qCAAU;YACT,KAAK;YACL,MAAM,MAAM,IAAI;YAChB,UAAU,MAAM,QAAQ;YACxB,cAAY,KAAK,CAAC,aAAa;YAC/B,mBAAiB,KAAK,CAAC,kBAAkB;YACzC,oBAAkB,KAAK,CAAC,mBAAmB;YAC3C,gBAAc,KAAK,CAAC,eAAe;aAEtC,MAAM,KAAK,kBACV,0DAAC;YAAK,IAAI;WAAU,MAAM,KAAK,mBAKvC,0DAAC,CAAA,GAAA,iCAAK;QACJ,mBAAiB,MAAM,KAAK,GAAG,UAAU,KAAK,CAAC,kBAAkB;QACjE,cAAY,KAAK,CAAC,aAAa;QAC/B,cAAc;YACZ,OAAO;YACP,UAAU;YACV,QAAQ,SAAS,sBAAsB;QACzC;qBACA,0DAAC,CAAA,GAAA,gCAAM;QACL,cAAc;YACZ,UAAU;YACV,QAAQ;YACR,SAAS;QACX;OACC,MAAM,QAAQ;AAM3B;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {ColorPicker as AriaColorPicker, Button, Color} from 'react-aria-components';\nimport {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';\nimport {ColorSwatch} from './ColorSwatch';\nimport {Content} from '@react-spectrum/view';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport React, {ReactNode, useRef} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {unwrapDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\n\nexport interface SpectrumColorPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps {\n  /** A visual label for the color picker. */\n  label?: ReactNode,\n  /** The contents of the color picker popover, e.g. `<ColorEditor />`. */\n  children?: ReactNode,\n  /**\n   * The size of the color swatch.\n   * @default \"M\"\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatch.\n   * @default \"default\"\n   */\n  rounding?: 'default' | 'none' | 'full'\n}\n\nfunction ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {\n  let swatchRef = useRef(null);\n  let domRef = useFocusableRef(ref);\n  let labelId = useId();\n  return (\n    <AriaColorPicker {...props}>\n      <DialogTrigger type=\"popover\" mobileType=\"tray\" targetRef={unwrapDOMRef(swatchRef)}>\n        <Button \n          ref={domRef}\n          className={style({\n            backgroundColor: 'transparent',\n            borderStyle: 'none',\n            padding: 0,\n            display: 'flex',\n            alignItems: 'center',\n            gap: 'text-to-control',\n            outlineStyle: 'none',\n            fontFamily: 'sans',\n            color: 'body',\n            fontSize: {\n              size: {\n                XS: 'xs',\n                S: 'sm',\n                M: 'base',\n                L: 'lg'\n              }\n            }\n          })({size: props.size || 'M'})}>\n          {({isFocusVisible}) => (\n            <>\n              <div\n                className={style({\n                  outlineStyle: {\n                    default: 'none',\n                    isFocusVisible: 'solid'\n                  },\n                  outlineColor: 'focus-ring',\n                  outlineWidth: 2,\n                  outlineOffset: 2,\n                  borderRadius: 'default'\n                })({isFocusVisible})}>\n                <ColorSwatch\n                  ref={swatchRef}\n                  size={props.size}\n                  rounding={props.rounding}\n                  aria-label={props['aria-label']}\n                  aria-labelledby={props['aria-labelledby']}\n                  aria-describedby={props['aria-describedby']}\n                  aria-details={props['aria-details']} />\n              </div>\n              {props.label && \n                <span id={labelId}>{props.label}</span>\n              }\n            </>\n          )}\n        </Button>\n        <Dialog \n          aria-labelledby={props.label ? labelId : props['aria-labelledby']}\n          aria-label={props['aria-label']}\n          UNSAFE_style={{\n            width: 'fit-content',\n            minWidth: 0,\n            margin: '0 auto' // Center within tray.\n          }}>\n          <Content \n            UNSAFE_style={{\n              position: 'relative',\n              margin: 'calc(var(--spectrum-dialog-padding) * -1)',\n              padding: 'var(--spectrum-global-dimension-size-200)'\n            }}>\n            {props.children}\n          </Content>\n        </Dialog>\n      </DialogTrigger>\n    </AriaColorPicker>\n  );\n}\n\n/**\n * A ColorPicker combines a swatch with a customizable popover for editing a color.\n */\nlet _ColorPicker = React.forwardRef(ColorPicker);\nexport {_ColorPicker as ColorPicker};\n"],"names":[],"version":3,"file":"ColorPicker.main.js.map"}

package/dist/ColorPicker.mjs

@@ -0,0 +1,116 @@
+import "./ColorPicker.ab9f47c0.css";
+import {ColorSwatch as $d68786ae409fa722$export$cae13e90592f246a} from "./ColorSwatch.mjs";
+import {ColorPicker as $5bRyn$ColorPicker, Button as $5bRyn$Button} from "react-aria-components";
+import {Content as $5bRyn$Content} from "@react-spectrum/view";
+import {DialogTrigger as $5bRyn$DialogTrigger, Dialog as $5bRyn$Dialog} from "@react-spectrum/dialog";
+import $5bRyn$react, {useRef as $5bRyn$useRef} from "react";
+import {useFocusableRef as $5bRyn$useFocusableRef, unwrapDOMRef as $5bRyn$unwrapDOMRef} from "@react-spectrum/utils";
+import {useId as $5bRyn$useId} from "@react-aria/utils";
+
+/*
+ * Copyright 2024 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 $d9654c66f3a7e70a$var$ColorPicker(props, ref) {
+    let swatchRef = (0, $5bRyn$useRef)(null);
+    let domRef = (0, $5bRyn$useFocusableRef)(ref);
+    let labelId = (0, $5bRyn$useId)();
+    return /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$ColorPicker), props, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$DialogTrigger), {
+        type: "popover",
+        mobileType: "tray",
+        targetRef: (0, $5bRyn$unwrapDOMRef)(swatchRef)
+    }, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Button), {
+        ref: domRef,
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " ba";
+            rules += " Af";
+            rules += " Ia";
+            rules += " Ja";
+            rules += " Ga";
+            rules += " Ha";
+            rules += " _Sd";
+            rules += " _Uc";
+            rules += " lM";
+            rules += " mM";
+            rules += " _Ea";
+            rules += " _5-bc1l9oh";
+            rules += " _5-1uotwbwg";
+            rules += " _5-eo0c6sf";
+            rules += " _5-enzzrge";
+            rules += " _5-enzykdd";
+            rules += " _5-enzwzjc";
+            rules += " _5-enzrfpb";
+            rules += " _5a";
+            rules += " a___K";
+            if (props.size === "L") rules += " _6d";
+            else if (props.size === "M") rules += " _6c";
+            else if (props.size === "S") rules += " _6b";
+            else if (props.size === "XS") rules += " _6a";
+            return rules;
+        }({
+            size: props.size || "M"
+        })
+    }, ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$react).Fragment, null, /*#__PURE__*/ (0, $5bRyn$react).createElement("div", {
+            className: function anonymous(props) {
+                let rules = "";
+                if (props.isFocusVisible) rules += " _Eb";
+                else rules += " _Ea";
+                rules += " da___D";
+                rules += " d___I";
+                rules += " _Gc";
+                rules += " _Fc";
+                rules += " _pc";
+                rules += " _qc";
+                rules += " _rc";
+                rules += " _sc";
+                return rules;
+            }({
+                isFocusVisible: isFocusVisible
+            })
+        }, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $d68786ae409fa722$export$cae13e90592f246a), {
+            ref: swatchRef,
+            size: props.size,
+            rounding: props.rounding,
+            "aria-label": props["aria-label"],
+            "aria-labelledby": props["aria-labelledby"],
+            "aria-describedby": props["aria-describedby"],
+            "aria-details": props["aria-details"]
+        })), props.label && /*#__PURE__*/ (0, $5bRyn$react).createElement("span", {
+            id: labelId
+        }, props.label))), /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Dialog), {
+        "aria-labelledby": props.label ? labelId : props["aria-labelledby"],
+        "aria-label": props["aria-label"],
+        UNSAFE_style: {
+            width: "fit-content",
+            minWidth: 0,
+            margin: "0 auto" // Center within tray.
+        }
+    }, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Content), {
+        UNSAFE_style: {
+            position: "relative",
+            margin: "calc(var(--spectrum-dialog-padding) * -1)",
+            padding: "var(--spectrum-global-dimension-size-200)"
+        }
+    }, props.children))));
+}
+/**
+ * A ColorPicker combines a swatch with a customizable popover for editing a color.
+ */ let $d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, $5bRyn$react).forwardRef($d9654c66f3a7e70a$var$ColorPicker);
+
+
+export {$d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 as ColorPicker};
+//# sourceMappingURL=ColorPicker.mjs.map

package/dist/ColorPicker.module.js

@@ -0,0 +1,116 @@
+import "./ColorPicker.ab9f47c0.css";
+import {ColorSwatch as $d68786ae409fa722$export$cae13e90592f246a} from "./ColorSwatch.module.js";
+import {ColorPicker as $5bRyn$ColorPicker, Button as $5bRyn$Button} from "react-aria-components";
+import {Content as $5bRyn$Content} from "@react-spectrum/view";
+import {DialogTrigger as $5bRyn$DialogTrigger, Dialog as $5bRyn$Dialog} from "@react-spectrum/dialog";
+import $5bRyn$react, {useRef as $5bRyn$useRef} from "react";
+import {useFocusableRef as $5bRyn$useFocusableRef, unwrapDOMRef as $5bRyn$unwrapDOMRef} from "@react-spectrum/utils";
+import {useId as $5bRyn$useId} from "@react-aria/utils";
+
+/*
+ * Copyright 2024 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 $d9654c66f3a7e70a$var$ColorPicker(props, ref) {
+    let swatchRef = (0, $5bRyn$useRef)(null);
+    let domRef = (0, $5bRyn$useFocusableRef)(ref);
+    let labelId = (0, $5bRyn$useId)();
+    return /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$ColorPicker), props, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$DialogTrigger), {
+        type: "popover",
+        mobileType: "tray",
+        targetRef: (0, $5bRyn$unwrapDOMRef)(swatchRef)
+    }, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Button), {
+        ref: domRef,
+        className: function anonymous(props) {
+            let rules = "";
+            rules += " ba";
+            rules += " Af";
+            rules += " Ia";
+            rules += " Ja";
+            rules += " Ga";
+            rules += " Ha";
+            rules += " _Sd";
+            rules += " _Uc";
+            rules += " lM";
+            rules += " mM";
+            rules += " _Ea";
+            rules += " _5-bc1l9oh";
+            rules += " _5-1uotwbwg";
+            rules += " _5-eo0c6sf";
+            rules += " _5-enzzrge";
+            rules += " _5-enzykdd";
+            rules += " _5-enzwzjc";
+            rules += " _5-enzrfpb";
+            rules += " _5a";
+            rules += " a___K";
+            if (props.size === "L") rules += " _6d";
+            else if (props.size === "M") rules += " _6c";
+            else if (props.size === "S") rules += " _6b";
+            else if (props.size === "XS") rules += " _6a";
+            return rules;
+        }({
+            size: props.size || "M"
+        })
+    }, ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$react).Fragment, null, /*#__PURE__*/ (0, $5bRyn$react).createElement("div", {
+            className: function anonymous(props) {
+                let rules = "";
+                if (props.isFocusVisible) rules += " _Eb";
+                else rules += " _Ea";
+                rules += " da___D";
+                rules += " d___I";
+                rules += " _Gc";
+                rules += " _Fc";
+                rules += " _pc";
+                rules += " _qc";
+                rules += " _rc";
+                rules += " _sc";
+                return rules;
+            }({
+                isFocusVisible: isFocusVisible
+            })
+        }, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $d68786ae409fa722$export$cae13e90592f246a), {
+            ref: swatchRef,
+            size: props.size,
+            rounding: props.rounding,
+            "aria-label": props["aria-label"],
+            "aria-labelledby": props["aria-labelledby"],
+            "aria-describedby": props["aria-describedby"],
+            "aria-details": props["aria-details"]
+        })), props.label && /*#__PURE__*/ (0, $5bRyn$react).createElement("span", {
+            id: labelId
+        }, props.label))), /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Dialog), {
+        "aria-labelledby": props.label ? labelId : props["aria-labelledby"],
+        "aria-label": props["aria-label"],
+        UNSAFE_style: {
+            width: "fit-content",
+            minWidth: 0,
+            margin: "0 auto" // Center within tray.
+        }
+    }, /*#__PURE__*/ (0, $5bRyn$react).createElement((0, $5bRyn$Content), {
+        UNSAFE_style: {
+            position: "relative",
+            margin: "calc(var(--spectrum-dialog-padding) * -1)",
+            padding: "var(--spectrum-global-dimension-size-200)"
+        }
+    }, props.children))));
+}
+/**
+ * A ColorPicker combines a swatch with a customizable popover for editing a color.
+ */ let $d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 = /*#__PURE__*/ (0, $5bRyn$react).forwardRef($d9654c66f3a7e70a$var$ColorPicker);
+
+
+export {$d9654c66f3a7e70a$export$9feb1bc2e5f1ccb3 as ColorPicker};
+//# sourceMappingURL=ColorPicker.module.js.map

package/dist/ColorPicker.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA6BD,SAAS,kCAAY,KAA+B,EAAE,GAAoC;IACxF,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,UAAU,CAAA,GAAA,YAAI;IAClB,qBACE,gCAAC,CAAA,GAAA,kBAAc,GAAM,qBACnB,gCAAC,CAAA,GAAA,oBAAY;QAAE,MAAK;QAAU,YAAW;QAAO,WAAW,CAAA,GAAA,mBAAW,EAAE;qBACtE,gCAAC,CAAA,GAAA,aAAK;QACJ,KAAK;QACL,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkBR;YAAC,MAAM,MAAM,IAAI,IAAI;QAAG;OAC1B,CAAC,kBAAC,cAAc,EAAC,iBAChB,gFACE,gCAAC;YACC,WAAW;;;;;;;;;;;;;cASR;gCAAC;YAAc;yBAClB,gCAAC,CAAA,GAAA,yCAAU;YACT,KAAK;YACL,MAAM,MAAM,IAAI;YAChB,UAAU,MAAM,QAAQ;YACxB,cAAY,KAAK,CAAC,aAAa;YAC/B,mBAAiB,KAAK,CAAC,kBAAkB;YACzC,oBAAkB,KAAK,CAAC,mBAAmB;YAC3C,gBAAc,KAAK,CAAC,eAAe;aAEtC,MAAM,KAAK,kBACV,gCAAC;YAAK,IAAI;WAAU,MAAM,KAAK,mBAKvC,gCAAC,CAAA,GAAA,aAAK;QACJ,mBAAiB,MAAM,KAAK,GAAG,UAAU,KAAK,CAAC,kBAAkB;QACjE,cAAY,KAAK,CAAC,aAAa;QAC/B,cAAc;YACZ,OAAO;YACP,UAAU;YACV,QAAQ,SAAS,sBAAsB;QACzC;qBACA,gCAAC,CAAA,GAAA,cAAM;QACL,cAAc;YACZ,UAAU;YACV,QAAQ;YACR,SAAS;QACX;OACC,MAAM,QAAQ;AAM3B;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/color/src/ColorPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {ColorPicker as AriaColorPicker, Button, Color} from 'react-aria-components';\nimport {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';\nimport {ColorSwatch} from './ColorSwatch';\nimport {Content} from '@react-spectrum/view';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport React, {ReactNode, useRef} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {unwrapDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\n\nexport interface SpectrumColorPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps {\n  /** A visual label for the color picker. */\n  label?: ReactNode,\n  /** The contents of the color picker popover, e.g. `<ColorEditor />`. */\n  children?: ReactNode,\n  /**\n   * The size of the color swatch.\n   * @default \"M\"\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatch.\n   * @default \"default\"\n   */\n  rounding?: 'default' | 'none' | 'full'\n}\n\nfunction ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {\n  let swatchRef = useRef(null);\n  let domRef = useFocusableRef(ref);\n  let labelId = useId();\n  return (\n    <AriaColorPicker {...props}>\n      <DialogTrigger type=\"popover\" mobileType=\"tray\" targetRef={unwrapDOMRef(swatchRef)}>\n        <Button \n          ref={domRef}\n          className={style({\n            backgroundColor: 'transparent',\n            borderStyle: 'none',\n            padding: 0,\n            display: 'flex',\n            alignItems: 'center',\n            gap: 'text-to-control',\n            outlineStyle: 'none',\n            fontFamily: 'sans',\n            color: 'body',\n            fontSize: {\n              size: {\n                XS: 'xs',\n                S: 'sm',\n                M: 'base',\n                L: 'lg'\n              }\n            }\n          })({size: props.size || 'M'})}>\n          {({isFocusVisible}) => (\n            <>\n              <div\n                className={style({\n                  outlineStyle: {\n                    default: 'none',\n                    isFocusVisible: 'solid'\n                  },\n                  outlineColor: 'focus-ring',\n                  outlineWidth: 2,\n                  outlineOffset: 2,\n                  borderRadius: 'default'\n                })({isFocusVisible})}>\n                <ColorSwatch\n                  ref={swatchRef}\n                  size={props.size}\n                  rounding={props.rounding}\n                  aria-label={props['aria-label']}\n                  aria-labelledby={props['aria-labelledby']}\n                  aria-describedby={props['aria-describedby']}\n                  aria-details={props['aria-details']} />\n              </div>\n              {props.label && \n                <span id={labelId}>{props.label}</span>\n              }\n            </>\n          )}\n        </Button>\n        <Dialog \n          aria-labelledby={props.label ? labelId : props['aria-labelledby']}\n          aria-label={props['aria-label']}\n          UNSAFE_style={{\n            width: 'fit-content',\n            minWidth: 0,\n            margin: '0 auto' // Center within tray.\n          }}>\n          <Content \n            UNSAFE_style={{\n              position: 'relative',\n              margin: 'calc(var(--spectrum-dialog-padding) * -1)',\n              padding: 'var(--spectrum-global-dimension-size-200)'\n            }}>\n            {props.children}\n          </Content>\n        </Dialog>\n      </DialogTrigger>\n    </AriaColorPicker>\n  );\n}\n\n/**\n * A ColorPicker combines a swatch with a customizable popover for editing a color.\n */\nlet _ColorPicker = React.forwardRef(ColorPicker);\nexport {_ColorPicker as ColorPicker};\n"],"names":[],"version":3,"file":"ColorPicker.module.js.map"}

package/dist/ColorSlider.main.js

@@ -1,7 +1,8 @@
 var $2b9adc23f6c7cae1$exports = require("./ColorThumb.main.js");
-require("./vars.571f903e.css");
+require("./vars.aa07b6d2.css");
 var $28060baf29cc5ac7$exports = require("./colorslider_vars_css.main.js");
 var $5EHW1$reactspectrumutils = require("@react-spectrum/utils");
+var $5EHW1$reactariacomponents = require("react-aria-components");
 var $5EHW1$reactspectrumlabel = require("@react-spectrum/label");
 var $5EHW1$react = require("react");
 var $5EHW1$reactariacolor = require("@react-aria/color");
@@ -40,15 +41,17 @@ $parcel$export(module.exports, "ColorSlider", () => $4537dec0de08c277$export$44f
 
 
 
+
 function $4537dec0de08c277$var$ColorSlider(props, ref) {
     props = (0, $5EHW1$reactspectrumprovider.useProviderProps)(props);
+    let inputRef = (0, $5EHW1$react.useRef)(null);
+    let trackRef = (0, $5EHW1$react.useRef)(null);
+    let domRef = (0, $5EHW1$reactspectrumutils.useFocusableRef)(ref, inputRef);
+    [props, domRef] = (0, $5EHW1$reactariacomponents.useContextProps)(props, domRef, (0, $5EHW1$reactariacomponents.ColorSliderContext));
     let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, "aria-label": ariaLabel } = props;
     let vertical = orientation === "vertical";
     let { styleProps: styleProps } = (0, $5EHW1$reactspectrumutils.useStyleProps)(props);
     let { locale: locale } = (0, $5EHW1$reactariai18n.useLocale)();
-    let inputRef = (0, $5EHW1$react.useRef)(null);
-    let trackRef = (0, $5EHW1$react.useRef)(null);
-    let domRef = (0, $5EHW1$reactspectrumutils.useFocusableRef)(ref, inputRef);
     let state = (0, $5EHW1$reactstatelycolor.useColorSliderState)({
         ...props,
         locale: locale
@@ -108,6 +111,7 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
         isFocused: isFocused && isFocusVisible,
         isDisabled: isDisabled,
         isDragging: state.isThumbDragging(0),
+        containerRef: trackRef,
         className: (0, $5EHW1$reactspectrumutils.classNames)((0, ($parcel$interopDefault($28060baf29cc5ac7$exports))), "spectrum-ColorSlider-handle"),
         ...thumbProps
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($5EHW1$react))).createElement("input", {

package/dist/ColorSlider.main.js.map

@@ -1 +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"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAgBD,SAAS,kCAAY,KAA+B,EAAE,GAAiC;IACrF,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,6CAAiB;IAElE,IAAI,cACF,UAAU,WACV,OAAO,eACP,WAAW,SACX,KAAK,kBACL,cAAc,EACd,cAAc,SAAS,EACxB,GAAG;IACJ,IAAI,WAAW,gBAAgB;IAE/B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAEvB,IAAI,QAAQ,CAAA,GAAA,4CAAkB,EAAE;QAAC,GAAG,KAAK;gBAAE;IAAM;IAEjD,wEAAwE;IACxE,IAAI,YAAY,OAAO;QACrB,YAAY,aAAc,CAAA,OAAO,UAAU,WAAW,QAAQ,SAAQ;QACtE,QAAQ;IACV;IAEA,mEAAmE;IACnE,qDAAqD;IACrD,8FAA8F;IAC9F,mEAAmE;IACnE,IAAI,UAAU,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,kBAAkB,IAAI,CAAC,UACrE,QAAQ,MAAM,KAAK,CAAC,cAAc,CAAC,SAAS;IAG9C,8DAA8D;IAC9D,IAAI,kBAAkB,MACpB,iBAAiB,CAAC,CAAC;IAGrB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,CAAA,GAAA,oCAAa,EAAE;QACjF,GAAG,KAAK;eACR;QACA,cAAc;kBACd;kBACA;IACF,GAAG;IAEH,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,4CAAc;IACrC,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzC,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAC1B;QACA,eAAe;IACjB;IAEA,qBACE,0DAAC;QACC,KAAK;QACJ,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL;YACE,8CAA8C,CAAC;YAC/C,4CAA4C;QAC9C;OAED,uBACC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC,CAAA,GAAA,+BAAI,GAAM,YAAa,QACvB,MAAM,cAAc,kBACnB,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,cAAc;gBACZ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;QACF;OACC,MAAM,cAAc,GAGxB,gCACC,0DAAC,CAAA,GAAA,+BAAI;QAAE,aAAY;QAAO,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC7D,0DAAC,UAAW,aAAc,MAAM,KAAK,CAAC,kBAAkB,CAAC,SAAS,0BAK1E,0DAAC;QACE,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,wBAAwB;YACtB,eAAe;YACf,kCAAkC;QACpC;qBAGF,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW,aAAa;QACxB,YAAY;QACZ,YAAY,MAAM,eAAe,CAAC;QAClC,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAO,GAAG,UAAU;QAAG,GAAG,UAAU;QAAE,KAAK;QAAU,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAK9F;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","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 {ColorSliderContext, useContextProps} from 'react-aria-components';\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  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\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 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          containerRef={trackRef}\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

@@ -1,7 +1,8 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
-import "./vars.571f903e.css";
+import "./vars.aa07b6d2.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 {useFocusableRef as $fxUYb$useFocusableRef, useStyleProps as $fxUYb$useStyleProps, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
+import {useContextProps as $fxUYb$useContextProps, ColorSliderContext as $fxUYb$ColorSliderContext} from "react-aria-components";
 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";
@@ -34,15 +35,17 @@ function $parcel$interopDefault(a) {
 
 
 
+
 function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
     props = (0, $fxUYb$useProviderProps)(props);
+    let inputRef = (0, $fxUYb$useRef)(null);
+    let trackRef = (0, $fxUYb$useRef)(null);
+    let domRef = (0, $fxUYb$useFocusableRef)(ref, inputRef);
+    [props, domRef] = (0, $fxUYb$useContextProps)(props, domRef, (0, $fxUYb$ColorSliderContext));
     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
@@ -102,6 +105,7 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
         isFocused: isFocused && isFocusVisible,
         isDisabled: isDisabled,
         isDragging: state.isThumbDragging(0),
+        containerRef: trackRef,
         className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-handle"),
         ...thumbProps
     }, /*#__PURE__*/ (0, $fxUYb$react).createElement("input", {

package/dist/ColorSlider.module.js

@@ -1,7 +1,8 @@
 import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
-import "./vars.571f903e.css";
+import "./vars.aa07b6d2.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 {useFocusableRef as $fxUYb$useFocusableRef, useStyleProps as $fxUYb$useStyleProps, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
+import {useContextProps as $fxUYb$useContextProps, ColorSliderContext as $fxUYb$ColorSliderContext} from "react-aria-components";
 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";
@@ -34,15 +35,17 @@ function $parcel$interopDefault(a) {
 
 
 
+
 function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
     props = (0, $fxUYb$useProviderProps)(props);
+    let inputRef = (0, $fxUYb$useRef)(null);
+    let trackRef = (0, $fxUYb$useRef)(null);
+    let domRef = (0, $fxUYb$useFocusableRef)(ref, inputRef);
+    [props, domRef] = (0, $fxUYb$useContextProps)(props, domRef, (0, $fxUYb$ColorSliderContext));
     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
@@ -102,6 +105,7 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
         isFocused: isFocused && isFocusVisible,
         isDisabled: isDisabled,
         isDragging: state.isThumbDragging(0),
+        containerRef: trackRef,
         className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), "spectrum-ColorSlider-handle"),
         ...thumbProps
     }, /*#__PURE__*/ (0, $fxUYb$react).createElement("input", {

package/dist/ColorSlider.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,SAAS,kCAAY,KAA+B,EAAE,GAAiC;IACrF,QAAQ,CAAA,GAAA,uBAAe,EAAE;IAEzB,IAAI,cACF,UAAU,WACV,OAAO,eACP,WAAW,SACX,KAAK,kBACL,cAAc,EACd,cAAc,SAAS,EACxB,GAAG;IACJ,IAAI,WAAW,gBAAgB;IAE/B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAEvB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAElC,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;QAAC,GAAG,KAAK;gBAAE;IAAM;IAEjD,wEAAwE;IACxE,IAAI,YAAY,OAAO;QACrB,YAAY,aAAc,CAAA,OAAO,UAAU,WAAW,QAAQ,SAAQ;QACtE,QAAQ;IACV;IAEA,mEAAmE;IACnE,qDAAqD;IACrD,8FAA8F;IAC9F,mEAAmE;IACnE,IAAI,UAAU,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,kBAAkB,IAAI,CAAC,UACrE,QAAQ,MAAM,KAAK,CAAC,cAAc,CAAC,SAAS;IAG9C,8DAA8D;IAC9D,IAAI,kBAAkB,MACpB,iBAAiB,CAAC,CAAC;IAGrB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACjF,GAAG,KAAK;eACR;QACA,cAAc;kBACd;kBACA;IACF,GAAG;IAEH,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,sBAAc;IACrC,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,eAAO,EAAE;IACzC,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAC1B;QACA,eAAe;IACjB;IAEA,qBACE,gCAAC;QACC,KAAK;QACJ,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,6DAAK,GACL;YACE,8CAA8C,CAAC;YAC/C,4CAA4C;QAC9C;OAED,uBACC,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;qBACjC,gCAAC,CAAA,GAAA,YAAI,GAAM,YAAa,QACvB,MAAM,cAAc,kBACnB,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,cAAc;gBACZ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;YACvC;QACF;OACC,MAAM,cAAc,GAGxB,gCACC,gCAAC,CAAA,GAAA,YAAI;QAAE,aAAY;QAAO,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;qBAC7D,gCAAC,UAAW,aAAc,MAAM,KAAK,CAAC,kBAAkB,CAAC,SAAS,0BAK1E,gCAAC;QACE,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,6DAAK,GACL,wBAAwB;YACtB,eAAe;YACf,kCAAkC;QACpC;qBAGF,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW,aAAa;QACxB,YAAY;QACZ,YAAY,MAAM,eAAe,CAAC;QAClC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QAAO,GAAG,UAAU;QAAG,GAAG,UAAU;QAAE,KAAK;QAAU,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;;AAK9F;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","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"}
+{"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 {ColorSliderContext, useContextProps} from 'react-aria-components';\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  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\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 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          containerRef={trackRef}\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"}