@react-spectrum/slider 3.6.8-nightly.4552 → 3.6.8-nightly.4558

package/dist/RangeSlider.main.js

@@ -0,0 +1,117 @@
+var $a8b5f113a6a8e4d8$exports = require("./intlStrings.main.js");
+var $ec6ca573d82152ff$exports = require("./SliderBase.main.js");
+var $77acc7fb8bfd13d6$exports = require("./SliderThumb.main.js");
+require("./vars.b570f076.css");
+var $57893a49ef34c169$exports = require("./slider_vars_css.main.js");
+var $5TzYf$reactspectrumutils = require("@react-spectrum/utils");
+var $5TzYf$react = require("react");
+var $5TzYf$reactariai18n = require("@react-aria/i18n");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "RangeSlider", () => $f166b52c7f82645c$export$826424dabc3dd705);
+/*
+ * 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 $f166b52c7f82645c$var$RangeSlider(props, ref) {
+    let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, getValueLabel: getValueLabel, ...otherProps } = props;
+    var _props_minValue, _props_maxValue;
+    let baseProps = {
+        ...otherProps,
+        value: value != null ? [
+            value.start,
+            value.end
+        ] : undefined,
+        defaultValue: defaultValue != null ? [
+            defaultValue.start,
+            defaultValue.end
+        ] : [
+            (_props_minValue = props.minValue) !== null && _props_minValue !== void 0 ? _props_minValue : 0,
+            (_props_maxValue = props.maxValue) !== null && _props_maxValue !== void 0 ? _props_maxValue : 100
+        ],
+        onChange (v) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                start: v[0],
+                end: v[1]
+            });
+        },
+        onChangeEnd (v) {
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd({
+                start: v[0],
+                end: v[1]
+            });
+        },
+        getValueLabel: getValueLabel ? ([start, end])=>getValueLabel({
+                start: start,
+                end: end
+            }) : undefined
+    };
+    let stringFormatter = (0, $5TzYf$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($a8b5f113a6a8e4d8$exports))), "@react-spectrum/slider");
+    let { direction: direction } = (0, $5TzYf$reactariai18n.useLocale)();
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).createElement((0, $ec6ca573d82152ff$exports.SliderBase), {
+        ...baseProps,
+        classes: "spectrum-Slider--range",
+        ref: ref
+    }, ({ trackRef: trackRef, inputRef: inputRef, state: state })=>{
+        let cssDirection = direction === "rtl" ? "right" : "left";
+        return /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).createElement((0, ($parcel$interopDefault($5TzYf$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).createElement("div", {
+            className: (0, $5TzYf$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), "spectrum-Slider-track"),
+            style: {
+                width: `${state.getThumbPercent(0) * 100}%`
+            }
+        }), /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).createElement((0, $77acc7fb8bfd13d6$exports.SliderThumb), {
+            index: 0,
+            "aria-label": stringFormatter.format("minimum"),
+            isDisabled: props.isDisabled,
+            trackRef: trackRef,
+            inputRef: inputRef,
+            state: state,
+            name: props.startName
+        }), /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).createElement("div", {
+            className: (0, $5TzYf$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), "spectrum-Slider-track"),
+            style: {
+                [cssDirection]: `${state.getThumbPercent(0) * 100}%`,
+                width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`
+            }
+        }), /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).createElement((0, $77acc7fb8bfd13d6$exports.SliderThumb), {
+            index: 1,
+            "aria-label": stringFormatter.format("maximum"),
+            isDisabled: props.isDisabled,
+            trackRef: trackRef,
+            state: state,
+            name: props.endName
+        }), /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).createElement("div", {
+            className: (0, $5TzYf$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), "spectrum-Slider-track"),
+            style: {
+                width: `${(1 - state.getThumbPercent(1)) * 100}%`
+            }
+        }));
+    });
+}
+/**
+ * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
+ */ const $f166b52c7f82645c$export$826424dabc3dd705 = /*#__PURE__*/ (0, ($parcel$interopDefault($5TzYf$react))).forwardRef($f166b52c7f82645c$var$RangeSlider);
+
+
+//# sourceMappingURL=RangeSlider.main.js.map

package/dist/RangeSlider.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAaD,SAAS,kCAAY,KAA+B,EAAE,GAAiC;IACrF,IAAI,YAAC,QAAQ,eAAE,WAAW,SAAE,KAAK,gBAAE,YAAY,iBAAE,aAAa,EAAE,GAAG,YAAW,GAAG;QAQ1E,iBAAqB;IAN5B,IAAI,YAAyD;QAC3D,GAAG,UAAU;QACb,OAAO,SAAS,OAAO;YAAC,MAAM,KAAK;YAAE,MAAM,GAAG;SAAC,GAAG;QAClD,cAAc,gBAAgB,OAC1B;YAAC,aAAa,KAAK;YAAE,aAAa,GAAG;SAAC,GAEtC;YAAC,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;YAAG,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;SAAI;QAChD,UAAS,CAAC;YACR,qBAAA,+BAAA,SAAW;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACpC;QACA,aAAY,CAAC;YACX,wBAAA,kCAAA,YAAc;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACvC;QACA,eAAe,gBAAgB,CAAC,CAAC,OAAO,IAAI,GAAK,cAAc;uBAAC;qBAAO;YAAG,KAAK;IACjF;IAEA,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,qBACE,0DAAC,CAAA,GAAA,oCAAS;QAAG,GAAG,SAAS;QAAE,SAAS;QAA0B,KAAK;OAChE,CAAC,YAAC,QAAQ,YAAE,QAAQ,SAAE,KAAK,EAA2B;QACrD,IAAI,eAAe,cAAc,QAAQ,UAAU;QACnD,qBACE,oIACE,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBAAC,OAAO,CAAC,EAAE,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;YAAA;0BACrD,0DAAC,CAAA,GAAA,qCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,UAAU;YACV,OAAO;YACP,MAAM,MAAM,SAAS;0BACvB,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBACL,CAAC,aAAa,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;gBACpD,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC,MAAM,IAAI,CAAC,CAAC;YAClF;0BACF,0DAAC,CAAA,GAAA,qCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,OAAO;YACP,MAAM,MAAM,OAAO;0BACrB,0DAAC;YACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,CAAC,EAAE,AAAC,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAK,IAAI,CAAC,CAAC;YACnD;;IAGR;AAGN;AAEA;;CAEC,GACD,MAAM,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/slider/src/RangeSlider.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 {FocusableRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumRangeSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nfunction RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;\n\n  let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {\n    ...otherProps,\n    value: value != null ? [value.start, value.end] : undefined,\n    defaultValue: defaultValue != null\n      ? [defaultValue.start, defaultValue.end]\n      // make sure that useSliderState knows we have two handles\n      : [props.minValue ?? 0, props.maxValue ?? 100],\n    onChange(v) {\n      onChange?.({start: v[0], end: v[1]});\n    },\n    onChangeEnd(v) {\n      onChangeEnd?.({start: v[0], end: v[1]});\n    },\n    getValueLabel: getValueLabel ? ([start, end]) => getValueLabel({start, end}) : undefined\n  };\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/slider');\n  let {direction} = useLocale();\n\n  return (\n    <SliderBase {...baseProps} classes={'spectrum-Slider--range'} ref={ref}>\n      {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n        let cssDirection = direction === 'rtl' ? 'right' : 'left';\n        return (\n          <>\n            <div\n              className={classNames(styles, 'spectrum-Slider-track')}\n              style={{width: `${state.getThumbPercent(0) * 100}%`}} />\n            <SliderThumb\n              index={0}\n              aria-label={stringFormatter.format('minimum')}\n              isDisabled={props.isDisabled}\n              trackRef={trackRef}\n              inputRef={inputRef}\n              state={state}\n              name={props.startName} />\n            <div\n              className={classNames(styles, 'spectrum-Slider-track')}\n              style={{\n                [cssDirection]: `${state.getThumbPercent(0) * 100}%`,\n                width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`\n              }} />\n            <SliderThumb\n              index={1}\n              aria-label={stringFormatter.format('maximum')}\n              isDisabled={props.isDisabled}\n              trackRef={trackRef}\n              state={state}\n              name={props.endName} />\n            <div\n              className={classNames(styles, 'spectrum-Slider-track')}\n              style={{\n                width: `${(1 - state.getThumbPercent(1)) * 100}%`\n              }} />\n          </>\n        );\n      }}\n    </SliderBase>\n  );\n}\n\n/**\n * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.\n */\nconst _RangeSlider = React.forwardRef(RangeSlider);\nexport {_RangeSlider as RangeSlider};\n"],"names":[],"version":3,"file":"RangeSlider.main.js.map"}

package/dist/RangeSlider.mjs

@@ -0,0 +1,112 @@
+import $bc8Se$intlStringsmodulejs from "./intlStrings.mjs";
+import {SliderBase as $39572711324a3b8e$export$9418495bb635ebde} from "./SliderBase.mjs";
+import {SliderThumb as $9058ca69d66a724f$export$2c1b491743890dec} from "./SliderThumb.mjs";
+import "./vars.b570f076.css";
+import $bc8Se$slider_vars_cssmodulejs from "./slider_vars_css.mjs";
+import {classNames as $bc8Se$classNames} from "@react-spectrum/utils";
+import $bc8Se$react from "react";
+import {useLocalizedStringFormatter as $bc8Se$useLocalizedStringFormatter, useLocale as $bc8Se$useLocale} from "@react-aria/i18n";
+
+
+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 $d42a197b273dc031$var$RangeSlider(props, ref) {
+    let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, getValueLabel: getValueLabel, ...otherProps } = props;
+    var _props_minValue, _props_maxValue;
+    let baseProps = {
+        ...otherProps,
+        value: value != null ? [
+            value.start,
+            value.end
+        ] : undefined,
+        defaultValue: defaultValue != null ? [
+            defaultValue.start,
+            defaultValue.end
+        ] : [
+            (_props_minValue = props.minValue) !== null && _props_minValue !== void 0 ? _props_minValue : 0,
+            (_props_maxValue = props.maxValue) !== null && _props_maxValue !== void 0 ? _props_maxValue : 100
+        ],
+        onChange (v) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                start: v[0],
+                end: v[1]
+            });
+        },
+        onChangeEnd (v) {
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd({
+                start: v[0],
+                end: v[1]
+            });
+        },
+        getValueLabel: getValueLabel ? ([start, end])=>getValueLabel({
+                start: start,
+                end: end
+            }) : undefined
+    };
+    let stringFormatter = (0, $bc8Se$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bc8Se$intlStringsmodulejs))), "@react-spectrum/slider");
+    let { direction: direction } = (0, $bc8Se$useLocale)();
+    return /*#__PURE__*/ (0, $bc8Se$react).createElement((0, $39572711324a3b8e$export$9418495bb635ebde), {
+        ...baseProps,
+        classes: "spectrum-Slider--range",
+        ref: ref
+    }, ({ trackRef: trackRef, inputRef: inputRef, state: state })=>{
+        let cssDirection = direction === "rtl" ? "right" : "left";
+        return /*#__PURE__*/ (0, $bc8Se$react).createElement((0, $bc8Se$react).Fragment, null, /*#__PURE__*/ (0, $bc8Se$react).createElement("div", {
+            className: (0, $bc8Se$classNames)((0, ($parcel$interopDefault($bc8Se$slider_vars_cssmodulejs))), "spectrum-Slider-track"),
+            style: {
+                width: `${state.getThumbPercent(0) * 100}%`
+            }
+        }), /*#__PURE__*/ (0, $bc8Se$react).createElement((0, $9058ca69d66a724f$export$2c1b491743890dec), {
+            index: 0,
+            "aria-label": stringFormatter.format("minimum"),
+            isDisabled: props.isDisabled,
+            trackRef: trackRef,
+            inputRef: inputRef,
+            state: state,
+            name: props.startName
+        }), /*#__PURE__*/ (0, $bc8Se$react).createElement("div", {
+            className: (0, $bc8Se$classNames)((0, ($parcel$interopDefault($bc8Se$slider_vars_cssmodulejs))), "spectrum-Slider-track"),
+            style: {
+                [cssDirection]: `${state.getThumbPercent(0) * 100}%`,
+                width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`
+            }
+        }), /*#__PURE__*/ (0, $bc8Se$react).createElement((0, $9058ca69d66a724f$export$2c1b491743890dec), {
+            index: 1,
+            "aria-label": stringFormatter.format("maximum"),
+            isDisabled: props.isDisabled,
+            trackRef: trackRef,
+            state: state,
+            name: props.endName
+        }), /*#__PURE__*/ (0, $bc8Se$react).createElement("div", {
+            className: (0, $bc8Se$classNames)((0, ($parcel$interopDefault($bc8Se$slider_vars_cssmodulejs))), "spectrum-Slider-track"),
+            style: {
+                width: `${(1 - state.getThumbPercent(1)) * 100}%`
+            }
+        }));
+    });
+}
+/**
+ * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
+ */ const $d42a197b273dc031$export$826424dabc3dd705 = /*#__PURE__*/ (0, $bc8Se$react).forwardRef($d42a197b273dc031$var$RangeSlider);
+
+
+export {$d42a197b273dc031$export$826424dabc3dd705 as RangeSlider};
+//# sourceMappingURL=RangeSlider.mjs.map

package/dist/RangeSlider.module.js

@@ -0,0 +1,112 @@
+import $bc8Se$intlStringsmodulejs from "./intlStrings.module.js";
+import {SliderBase as $39572711324a3b8e$export$9418495bb635ebde} from "./SliderBase.module.js";
+import {SliderThumb as $9058ca69d66a724f$export$2c1b491743890dec} from "./SliderThumb.module.js";
+import "./vars.b570f076.css";
+import $bc8Se$slider_vars_cssmodulejs from "./slider_vars_css.module.js";
+import {classNames as $bc8Se$classNames} from "@react-spectrum/utils";
+import $bc8Se$react from "react";
+import {useLocalizedStringFormatter as $bc8Se$useLocalizedStringFormatter, useLocale as $bc8Se$useLocale} from "@react-aria/i18n";
+
+
+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 $d42a197b273dc031$var$RangeSlider(props, ref) {
+    let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, getValueLabel: getValueLabel, ...otherProps } = props;
+    var _props_minValue, _props_maxValue;
+    let baseProps = {
+        ...otherProps,
+        value: value != null ? [
+            value.start,
+            value.end
+        ] : undefined,
+        defaultValue: defaultValue != null ? [
+            defaultValue.start,
+            defaultValue.end
+        ] : [
+            (_props_minValue = props.minValue) !== null && _props_minValue !== void 0 ? _props_minValue : 0,
+            (_props_maxValue = props.maxValue) !== null && _props_maxValue !== void 0 ? _props_maxValue : 100
+        ],
+        onChange (v) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                start: v[0],
+                end: v[1]
+            });
+        },
+        onChangeEnd (v) {
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd({
+                start: v[0],
+                end: v[1]
+            });
+        },
+        getValueLabel: getValueLabel ? ([start, end])=>getValueLabel({
+                start: start,
+                end: end
+            }) : undefined
+    };
+    let stringFormatter = (0, $bc8Se$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bc8Se$intlStringsmodulejs))), "@react-spectrum/slider");
+    let { direction: direction } = (0, $bc8Se$useLocale)();
+    return /*#__PURE__*/ (0, $bc8Se$react).createElement((0, $39572711324a3b8e$export$9418495bb635ebde), {
+        ...baseProps,
+        classes: "spectrum-Slider--range",
+        ref: ref
+    }, ({ trackRef: trackRef, inputRef: inputRef, state: state })=>{
+        let cssDirection = direction === "rtl" ? "right" : "left";
+        return /*#__PURE__*/ (0, $bc8Se$react).createElement((0, $bc8Se$react).Fragment, null, /*#__PURE__*/ (0, $bc8Se$react).createElement("div", {
+            className: (0, $bc8Se$classNames)((0, ($parcel$interopDefault($bc8Se$slider_vars_cssmodulejs))), "spectrum-Slider-track"),
+            style: {
+                width: `${state.getThumbPercent(0) * 100}%`
+            }
+        }), /*#__PURE__*/ (0, $bc8Se$react).createElement((0, $9058ca69d66a724f$export$2c1b491743890dec), {
+            index: 0,
+            "aria-label": stringFormatter.format("minimum"),
+            isDisabled: props.isDisabled,
+            trackRef: trackRef,
+            inputRef: inputRef,
+            state: state,
+            name: props.startName
+        }), /*#__PURE__*/ (0, $bc8Se$react).createElement("div", {
+            className: (0, $bc8Se$classNames)((0, ($parcel$interopDefault($bc8Se$slider_vars_cssmodulejs))), "spectrum-Slider-track"),
+            style: {
+                [cssDirection]: `${state.getThumbPercent(0) * 100}%`,
+                width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`
+            }
+        }), /*#__PURE__*/ (0, $bc8Se$react).createElement((0, $9058ca69d66a724f$export$2c1b491743890dec), {
+            index: 1,
+            "aria-label": stringFormatter.format("maximum"),
+            isDisabled: props.isDisabled,
+            trackRef: trackRef,
+            state: state,
+            name: props.endName
+        }), /*#__PURE__*/ (0, $bc8Se$react).createElement("div", {
+            className: (0, $bc8Se$classNames)((0, ($parcel$interopDefault($bc8Se$slider_vars_cssmodulejs))), "spectrum-Slider-track"),
+            style: {
+                width: `${(1 - state.getThumbPercent(1)) * 100}%`
+            }
+        }));
+    });
+}
+/**
+ * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
+ */ const $d42a197b273dc031$export$826424dabc3dd705 = /*#__PURE__*/ (0, $bc8Se$react).forwardRef($d42a197b273dc031$var$RangeSlider);
+
+
+export {$d42a197b273dc031$export$826424dabc3dd705 as RangeSlider};
+//# sourceMappingURL=RangeSlider.module.js.map

package/dist/RangeSlider.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAaD,SAAS,kCAAY,KAA+B,EAAE,GAAiC;IACrF,IAAI,YAAC,QAAQ,eAAE,WAAW,SAAE,KAAK,gBAAE,YAAY,iBAAE,aAAa,EAAE,GAAG,YAAW,GAAG;QAQ1E,iBAAqB;IAN5B,IAAI,YAAyD;QAC3D,GAAG,UAAU;QACb,OAAO,SAAS,OAAO;YAAC,MAAM,KAAK;YAAE,MAAM,GAAG;SAAC,GAAG;QAClD,cAAc,gBAAgB,OAC1B;YAAC,aAAa,KAAK;YAAE,aAAa,GAAG;SAAC,GAEtC;YAAC,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;YAAG,CAAA,kBAAA,MAAM,QAAQ,cAAd,6BAAA,kBAAkB;SAAI;QAChD,UAAS,CAAC;YACR,qBAAA,+BAAA,SAAW;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACpC;QACA,aAAY,CAAC;YACX,wBAAA,kCAAA,YAAc;gBAAC,OAAO,CAAC,CAAC,EAAE;gBAAE,KAAK,CAAC,CAAC,EAAE;YAAA;QACvC;QACA,eAAe,gBAAgB,CAAC,CAAC,OAAO,IAAI,GAAK,cAAc;uBAAC;qBAAO;YAAG,KAAK;IACjF;IAEA,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,qBACE,gCAAC,CAAA,GAAA,yCAAS;QAAG,GAAG,SAAS;QAAE,SAAS;QAA0B,KAAK;OAChE,CAAC,YAAC,QAAQ,YAAE,QAAQ,SAAE,KAAK,EAA2B;QACrD,IAAI,eAAe,cAAc,QAAQ,UAAU;QACnD,qBACE,gFACE,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBAAC,OAAO,CAAC,EAAE,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;YAAA;0BACrD,gCAAC,CAAA,GAAA,yCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,UAAU;YACV,OAAO;YACP,MAAM,MAAM,SAAS;0BACvB,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBACL,CAAC,aAAa,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC;gBACpD,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC,MAAM,IAAI,CAAC,CAAC;YAClF;0BACF,gCAAC,CAAA,GAAA,yCAAU;YACT,OAAO;YACP,cAAY,gBAAgB,MAAM,CAAC;YACnC,YAAY,MAAM,UAAU;YAC5B,UAAU;YACV,OAAO;YACP,MAAM,MAAM,OAAO;0BACrB,gCAAC;YACC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YAC9B,OAAO;gBACL,OAAO,CAAC,EAAE,AAAC,CAAA,IAAI,MAAM,eAAe,CAAC,EAAC,IAAK,IAAI,CAAC,CAAC;YACnD;;IAGR;AAGN;AAEA;;CAEC,GACD,MAAM,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/slider/src/RangeSlider.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 {FocusableRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumRangeSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nfunction RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;\n\n  let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {\n    ...otherProps,\n    value: value != null ? [value.start, value.end] : undefined,\n    defaultValue: defaultValue != null\n      ? [defaultValue.start, defaultValue.end]\n      // make sure that useSliderState knows we have two handles\n      : [props.minValue ?? 0, props.maxValue ?? 100],\n    onChange(v) {\n      onChange?.({start: v[0], end: v[1]});\n    },\n    onChangeEnd(v) {\n      onChangeEnd?.({start: v[0], end: v[1]});\n    },\n    getValueLabel: getValueLabel ? ([start, end]) => getValueLabel({start, end}) : undefined\n  };\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/slider');\n  let {direction} = useLocale();\n\n  return (\n    <SliderBase {...baseProps} classes={'spectrum-Slider--range'} ref={ref}>\n      {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n        let cssDirection = direction === 'rtl' ? 'right' : 'left';\n        return (\n          <>\n            <div\n              className={classNames(styles, 'spectrum-Slider-track')}\n              style={{width: `${state.getThumbPercent(0) * 100}%`}} />\n            <SliderThumb\n              index={0}\n              aria-label={stringFormatter.format('minimum')}\n              isDisabled={props.isDisabled}\n              trackRef={trackRef}\n              inputRef={inputRef}\n              state={state}\n              name={props.startName} />\n            <div\n              className={classNames(styles, 'spectrum-Slider-track')}\n              style={{\n                [cssDirection]: `${state.getThumbPercent(0) * 100}%`,\n                width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`\n              }} />\n            <SliderThumb\n              index={1}\n              aria-label={stringFormatter.format('maximum')}\n              isDisabled={props.isDisabled}\n              trackRef={trackRef}\n              state={state}\n              name={props.endName} />\n            <div\n              className={classNames(styles, 'spectrum-Slider-track')}\n              style={{\n                width: `${(1 - state.getThumbPercent(1)) * 100}%`\n              }} />\n          </>\n        );\n      }}\n    </SliderBase>\n  );\n}\n\n/**\n * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.\n */\nconst _RangeSlider = React.forwardRef(RangeSlider);\nexport {_RangeSlider as RangeSlider};\n"],"names":[],"version":3,"file":"RangeSlider.module.js.map"}

package/dist/Slider.main.js

@@ -0,0 +1,123 @@
+var $ec6ca573d82152ff$exports = require("./SliderBase.main.js");
+var $77acc7fb8bfd13d6$exports = require("./SliderThumb.main.js");
+require("./vars.b570f076.css");
+var $57893a49ef34c169$exports = require("./slider_vars_css.main.js");
+var $h9MRe$reactariautils = require("@react-aria/utils");
+var $h9MRe$reactspectrumutils = require("@react-spectrum/utils");
+var $h9MRe$react = require("react");
+var $h9MRe$reactariai18n = require("@react-aria/i18n");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "Slider", () => $3a761bdd22d32681$export$472062a354075cee);
+/*
+ * 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 $3a761bdd22d32681$var$Slider(props, ref) {
+    let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, isFilled: isFilled, fillOffset: fillOffset, trackGradient: trackGradient, getValueLabel: getValueLabel, ...otherProps } = props;
+    let baseProps = {
+        ...otherProps,
+        // Normalize `value: number[]` to `value: number`
+        value: value != null ? [
+            value
+        ] : undefined,
+        defaultValue: defaultValue != null ? [
+            defaultValue
+        ] : undefined,
+        onChange: (v)=>{
+            onChange === null || onChange === void 0 ? void 0 : onChange(v[0]);
+        },
+        onChangeEnd: (v)=>{
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(v[0]);
+        },
+        getValueLabel: getValueLabel ? ([v])=>getValueLabel(v) : undefined
+    };
+    let { direction: direction } = (0, $h9MRe$reactariai18n.useLocale)();
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).createElement((0, $ec6ca573d82152ff$exports.SliderBase), {
+        ...baseProps,
+        ref: ref,
+        classes: {
+            "spectrum-Slider--filled": isFilled && fillOffset == null
+        },
+        style: // @ts-ignore
+        {
+            "--spectrum-slider-track-gradient": trackGradient && `linear-gradient(to ${direction === "ltr" ? "right" : "left"}, ${trackGradient.join(", ")})`
+        }
+    }, ({ trackRef: trackRef, inputRef: inputRef, state: state })=>{
+        fillOffset = fillOffset != null ? (0, $h9MRe$reactariautils.clamp)(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;
+        let cssDirection = direction === "rtl" ? "right" : "left";
+        let lowerTrack = /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).createElement("div", {
+            className: (0, $h9MRe$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), "spectrum-Slider-track"),
+            style: {
+                width: `${state.getThumbPercent(0) * 100}%`,
+                // TODO not sure if it has advantages, but this could also be implemented as CSS calc():
+                // .track::before {
+                //    background-size: calc((1/ (var(--width)/100)) * 100%);
+                //    width: calc(var(--width) * 1%)M
+                // }
+                // @ts-ignore
+                "--spectrum-track-background-size": `${1 / state.getThumbPercent(0) * 100}%`,
+                "--spectrum-track-background-position": direction === "ltr" ? "0" : "100%"
+            }
+        });
+        let upperTrack = /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).createElement("div", {
+            className: (0, $h9MRe$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), "spectrum-Slider-track"),
+            style: {
+                width: `${(1 - state.getThumbPercent(0)) * 100}%`,
+                // @ts-ignore
+                "--spectrum-track-background-size": `${1 / (1 - state.getThumbPercent(0)) * 100}%`,
+                "--spectrum-track-background-position": direction === "ltr" ? "100%" : "0"
+            }
+        });
+        let filledTrack = null;
+        if (isFilled && fillOffset != null) {
+            let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
+            let isRightOfOffset = width > 0;
+            let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);
+            filledTrack = /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).createElement("div", {
+                className: (0, $h9MRe$reactspectrumutils.classNames)((0, ($parcel$interopDefault($57893a49ef34c169$exports))), "spectrum-Slider-fill", {
+                    "spectrum-Slider-fill--right": isRightOfOffset
+                }),
+                style: {
+                    [cssDirection]: `${offset * 100}%`,
+                    width: `${Math.abs(width) * 100}%`
+                }
+            });
+        }
+        return /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).createElement((0, ($parcel$interopDefault($h9MRe$react))).Fragment, null, lowerTrack, /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).createElement((0, $77acc7fb8bfd13d6$exports.SliderThumb), {
+            index: 0,
+            isDisabled: props.isDisabled,
+            trackRef: trackRef,
+            inputRef: inputRef,
+            state: state,
+            name: props.name
+        }), filledTrack, upperTrack);
+    });
+}
+/**
+ * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
+ */ const $3a761bdd22d32681$export$472062a354075cee = /*#__PURE__*/ (0, ($parcel$interopDefault($h9MRe$react))).forwardRef($3a761bdd22d32681$var$Slider);
+
+
+//# sourceMappingURL=Slider.main.js.map

package/dist/Slider.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/slider/src/Slider.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 {clamp} from '@react-aria/utils';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport React from 'react';\nimport {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';\nimport {SliderThumb} from './SliderThumb';\nimport {SpectrumSliderProps} from '@react-types/slider';\nimport styles from '@adobe/spectrum-css-temp/components/slider/vars.css';\nimport {useLocale} from '@react-aria/i18n';\n\nfunction Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;\n\n  let baseProps: Omit<SliderBaseProps, 'children'> = {\n    ...otherProps,\n    // Normalize `value: number[]` to `value: number`\n    value: value != null ? [value] : undefined,\n    defaultValue: defaultValue != null ? [defaultValue] : undefined,\n    onChange: (v: number[]): void => {\n      onChange?.(v[0]);\n    },\n    onChangeEnd: (v: number[]): void => {\n      onChangeEnd?.(v[0]);\n    },\n    getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined\n  };\n\n  let {direction} = useLocale();\n\n  return (\n    <SliderBase\n      {...baseProps}\n      ref={ref}\n      classes={{\n        'spectrum-Slider--filled': isFilled && fillOffset == null\n      }}\n      style={\n        // @ts-ignore\n        {'--spectrum-slider-track-gradient': trackGradient && `linear-gradient(to ${direction === 'ltr' ? 'right' : 'left'}, ${trackGradient.join(', ')})`}\n      }>\n      {({trackRef, inputRef, state}: SliderBaseChildArguments) => {\n        fillOffset = fillOffset != null ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;\n        let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n        let lowerTrack = (\n          <div\n            className={classNames(styles, 'spectrum-Slider-track')}\n            style={{\n              width: `${state.getThumbPercent(0) * 100}%`,\n              // TODO not sure if it has advantages, but this could also be implemented as CSS calc():\n              // .track::before {\n              //    background-size: calc((1/ (var(--width)/100)) * 100%);\n              //    width: calc(var(--width) * 1%)M\n              // }\n              // @ts-ignore\n              '--spectrum-track-background-size': `${(1 / state.getThumbPercent(0)) * 100}%`,\n              '--spectrum-track-background-position': direction === 'ltr' ? '0' : '100%'\n            }} />\n        );\n        let upperTrack = (\n          <div\n            className={classNames(styles, 'spectrum-Slider-track')}\n            style={{\n              width: `${(1 - state.getThumbPercent(0)) * 100}%`,\n              // @ts-ignore\n              '--spectrum-track-background-size': `${(1 / (1 - state.getThumbPercent(0))) * 100}%`,\n              '--spectrum-track-background-position': direction === 'ltr' ? '100%' : '0'\n            }} />\n        );\n\n        let filledTrack = null;\n        if (isFilled && fillOffset != null) {\n          let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n          let isRightOfOffset = width > 0;\n          let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n          filledTrack = (\n            <div\n              className={classNames(styles, 'spectrum-Slider-fill', {'spectrum-Slider-fill--right': isRightOfOffset})}\n              style={{\n                [cssDirection]: `${offset * 100}%`,\n                width: `${Math.abs(width) * 100}%`\n              }} />\n          );\n        }\n\n        return  (\n          <>\n            {lowerTrack}\n            <SliderThumb\n              index={0}\n              isDisabled={props.isDisabled}\n              trackRef={trackRef}\n              inputRef={inputRef}\n              state={state}\n              name={props.name} />\n            {filledTrack}\n            {upperTrack}\n          </>\n        );\n      }}\n    </SliderBase>\n  );\n}\n\n/**\n * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.\n */\nconst _Slider = React.forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.main.js.map"}

package/dist/Slider.mjs

@@ -0,0 +1,118 @@
+import {SliderBase as $39572711324a3b8e$export$9418495bb635ebde} from "./SliderBase.mjs";
+import {SliderThumb as $9058ca69d66a724f$export$2c1b491743890dec} from "./SliderThumb.mjs";
+import "./vars.b570f076.css";
+import $i1AIe$slider_vars_cssmodulejs from "./slider_vars_css.mjs";
+import {clamp as $i1AIe$clamp} from "@react-aria/utils";
+import {classNames as $i1AIe$classNames} from "@react-spectrum/utils";
+import $i1AIe$react from "react";
+import {useLocale as $i1AIe$useLocale} from "@react-aria/i18n";
+
+
+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 $a1251704aa53e1a5$var$Slider(props, ref) {
+    let { onChange: onChange, onChangeEnd: onChangeEnd, value: value, defaultValue: defaultValue, isFilled: isFilled, fillOffset: fillOffset, trackGradient: trackGradient, getValueLabel: getValueLabel, ...otherProps } = props;
+    let baseProps = {
+        ...otherProps,
+        // Normalize `value: number[]` to `value: number`
+        value: value != null ? [
+            value
+        ] : undefined,
+        defaultValue: defaultValue != null ? [
+            defaultValue
+        ] : undefined,
+        onChange: (v)=>{
+            onChange === null || onChange === void 0 ? void 0 : onChange(v[0]);
+        },
+        onChangeEnd: (v)=>{
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(v[0]);
+        },
+        getValueLabel: getValueLabel ? ([v])=>getValueLabel(v) : undefined
+    };
+    let { direction: direction } = (0, $i1AIe$useLocale)();
+    return /*#__PURE__*/ (0, $i1AIe$react).createElement((0, $39572711324a3b8e$export$9418495bb635ebde), {
+        ...baseProps,
+        ref: ref,
+        classes: {
+            "spectrum-Slider--filled": isFilled && fillOffset == null
+        },
+        style: // @ts-ignore
+        {
+            "--spectrum-slider-track-gradient": trackGradient && `linear-gradient(to ${direction === "ltr" ? "right" : "left"}, ${trackGradient.join(", ")})`
+        }
+    }, ({ trackRef: trackRef, inputRef: inputRef, state: state })=>{
+        fillOffset = fillOffset != null ? (0, $i1AIe$clamp)(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;
+        let cssDirection = direction === "rtl" ? "right" : "left";
+        let lowerTrack = /*#__PURE__*/ (0, $i1AIe$react).createElement("div", {
+            className: (0, $i1AIe$classNames)((0, ($parcel$interopDefault($i1AIe$slider_vars_cssmodulejs))), "spectrum-Slider-track"),
+            style: {
+                width: `${state.getThumbPercent(0) * 100}%`,
+                // TODO not sure if it has advantages, but this could also be implemented as CSS calc():
+                // .track::before {
+                //    background-size: calc((1/ (var(--width)/100)) * 100%);
+                //    width: calc(var(--width) * 1%)M
+                // }
+                // @ts-ignore
+                "--spectrum-track-background-size": `${1 / state.getThumbPercent(0) * 100}%`,
+                "--spectrum-track-background-position": direction === "ltr" ? "0" : "100%"
+            }
+        });
+        let upperTrack = /*#__PURE__*/ (0, $i1AIe$react).createElement("div", {
+            className: (0, $i1AIe$classNames)((0, ($parcel$interopDefault($i1AIe$slider_vars_cssmodulejs))), "spectrum-Slider-track"),
+            style: {
+                width: `${(1 - state.getThumbPercent(0)) * 100}%`,
+                // @ts-ignore
+                "--spectrum-track-background-size": `${1 / (1 - state.getThumbPercent(0)) * 100}%`,
+                "--spectrum-track-background-position": direction === "ltr" ? "100%" : "0"
+            }
+        });
+        let filledTrack = null;
+        if (isFilled && fillOffset != null) {
+            let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
+            let isRightOfOffset = width > 0;
+            let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);
+            filledTrack = /*#__PURE__*/ (0, $i1AIe$react).createElement("div", {
+                className: (0, $i1AIe$classNames)((0, ($parcel$interopDefault($i1AIe$slider_vars_cssmodulejs))), "spectrum-Slider-fill", {
+                    "spectrum-Slider-fill--right": isRightOfOffset
+                }),
+                style: {
+                    [cssDirection]: `${offset * 100}%`,
+                    width: `${Math.abs(width) * 100}%`
+                }
+            });
+        }
+        return /*#__PURE__*/ (0, $i1AIe$react).createElement((0, $i1AIe$react).Fragment, null, lowerTrack, /*#__PURE__*/ (0, $i1AIe$react).createElement((0, $9058ca69d66a724f$export$2c1b491743890dec), {
+            index: 0,
+            isDisabled: props.isDisabled,
+            trackRef: trackRef,
+            inputRef: inputRef,
+            state: state,
+            name: props.name
+        }), filledTrack, upperTrack);
+    });
+}
+/**
+ * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
+ */ const $a1251704aa53e1a5$export$472062a354075cee = /*#__PURE__*/ (0, $i1AIe$react).forwardRef($a1251704aa53e1a5$var$Slider);
+
+
+export {$a1251704aa53e1a5$export$472062a354075cee as Slider};
+//# sourceMappingURL=Slider.mjs.map