baseui 16.1.1 → 18.1.0

package/slider/slider.js

@@ -10,9 +10,8 @@ var _focusVisible = require("../utils/focusVisible");
 var _styledComponents = require("./styled-components");
 var _overrides = require("../helpers/overrides");
 var _themeProvider = require("../styles/theme-provider");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /*
 Copyright (c) Uber Technologies, Inc.
 
 This source code is licensed under the MIT license found in the

package/slider/stateful-slider-container.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _constants = require("./constants");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
 Copyright (c) Uber Technologies, Inc.
 

package/slider/stateful-slider.js

@@ -7,9 +7,8 @@ exports.default = StatefulSlider;
 var React = _interopRequireWildcard(require("react"));
 var _statefulSliderContainer = _interopRequireDefault(require("./stateful-slider-container"));
 var _slider = _interopRequireDefault(require("./slider"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /*
 Copyright (c) Uber Technologies, Inc.
 

package/sliding-button/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const THRESHOLD: {
+    readonly low: "low";
+    readonly high: "high";
+};
+export declare const THRESHOLD_VALUES: Record<(typeof THRESHOLD)[keyof typeof THRESHOLD], number>;
+export declare const BUTTON_SIZE: number;
+export declare const TAP_OFFSET = 16;

package/sliding-button/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.THRESHOLD_VALUES = exports.THRESHOLD = exports.TAP_OFFSET = exports.BUTTON_SIZE = void 0;
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const THRESHOLD = exports.THRESHOLD = {
+  low: "low",
+  high: "high"
+};
+const THRESHOLD_VALUES = exports.THRESHOLD_VALUES = {
+  low: 0.2,
+  high: 0.8
+};
+const GRABBER_ICON_SIZE_PX = 24;
+const GRABBER_PADDING_PX = 16;
+const BUTTON_SIZE = exports.BUTTON_SIZE = GRABBER_ICON_SIZE_PX + GRABBER_PADDING_PX * 2; // 56
+const TAP_OFFSET = exports.TAP_OFFSET = GRABBER_PADDING_PX; // 16

package/sliding-button/default-props.d.ts

@@ -0,0 +1,6 @@
+export declare const defaultProps: {
+    threshold: "high";
+    isLoading: boolean;
+    isDisabled: boolean;
+    overrides: {};
+};

package/sliding-button/default-props.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var _constants = require("./constants");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const defaultProps = exports.defaultProps = {
+  threshold: _constants.THRESHOLD.high,
+  isLoading: false,
+  isDisabled: false,
+  overrides: {}
+};

package/sliding-button/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SlidingButton } from "./sliding-button";
+export { THRESHOLD } from "./constants";
+export { Root as StyledRoot, Track as StyledTrack, Slider as StyledSlider, Label as StyledLabel, CompletedLabel as StyledCompletedLabel, Grabber as StyledGrabber, LoadingOverlay as StyledLoadingOverlay, LoadingSpinner as StyledLoadingSpinner, } from "./styled-components";
+export * from "./types";

package/sliding-button/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  SlidingButton: true,
+  THRESHOLD: true,
+  StyledRoot: true,
+  StyledTrack: true,
+  StyledSlider: true,
+  StyledLabel: true,
+  StyledCompletedLabel: true,
+  StyledGrabber: true,
+  StyledLoadingOverlay: true,
+  StyledLoadingSpinner: true
+};
+Object.defineProperty(exports, "SlidingButton", {
+  enumerable: true,
+  get: function () {
+    return _slidingButton.default;
+  }
+});
+Object.defineProperty(exports, "StyledCompletedLabel", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.CompletedLabel;
+  }
+});
+Object.defineProperty(exports, "StyledGrabber", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Grabber;
+  }
+});
+Object.defineProperty(exports, "StyledLabel", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Label;
+  }
+});
+Object.defineProperty(exports, "StyledLoadingOverlay", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.LoadingOverlay;
+  }
+});
+Object.defineProperty(exports, "StyledLoadingSpinner", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.LoadingSpinner;
+  }
+});
+Object.defineProperty(exports, "StyledRoot", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Root;
+  }
+});
+Object.defineProperty(exports, "StyledSlider", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Slider;
+  }
+});
+Object.defineProperty(exports, "StyledTrack", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Track;
+  }
+});
+Object.defineProperty(exports, "THRESHOLD", {
+  enumerable: true,
+  get: function () {
+    return _constants.THRESHOLD;
+  }
+});
+var _slidingButton = _interopRequireDefault(require("./sliding-button"));
+var _constants = require("./constants");
+var _styledComponents = require("./styled-components");
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/sliding-button/sliding-button.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SlidingButtonProps } from "./types";
+declare const SlidingButton: React.ForwardRefExoticComponent<SlidingButtonProps & React.RefAttributes<HTMLDivElement>>;
+export default SlidingButton;

package/sliding-button/sliding-button.js

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _arrowRight = _interopRequireDefault(require("../icon/arrow-right"));
+var _check = _interopRequireDefault(require("../icon/check"));
+var _overrides = require("../helpers/overrides");
+var _styles = require("../styles");
+var _styledComponents = require("./styled-components");
+var _constants = require("./constants");
+var _defaultProps = require("./default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+function SlidingButtonInner({
+  label,
+  threshold = _defaultProps.defaultProps.threshold,
+  isLoading = _defaultProps.defaultProps.isLoading,
+  isDisabled = _defaultProps.defaultProps.isDisabled,
+  onComplete,
+  overrides = _defaultProps.defaultProps.overrides,
+  slideBackAfterMs,
+  "aria-label": ariaLabel
+}, ref) {
+  const [, theme] = (0, _styles.useStyletron)();
+  const isRtl = theme.direction === "rtl";
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const [dragOffset, setDragOffset] = (0, _react.useState)(0);
+  const [isCompleted, setIsCompleted] = (0, _react.useState)(false);
+  const dragStartRef = (0, _react.useRef)(0);
+  const isDraggingRef = (0, _react.useRef)(false);
+  const containerRef = (0, _react.useRef)(null);
+  const thresholdValue = _constants.THRESHOLD_VALUES[threshold];
+  const isInteractive = !isDisabled && !isLoading && !isCompleted;
+
+  // -- Pointer handlers -------------------------------------------------------
+
+  const handlePointerDown = (0, _react.useCallback)(e => {
+    if (!isInteractive) return;
+    setIsDragging(true);
+    isDraggingRef.current = true;
+    setDragOffset(_constants.TAP_OFFSET);
+    const pos = isRtl ? -e.clientX : e.clientX;
+    dragStartRef.current = pos - _constants.TAP_OFFSET;
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [isInteractive, isRtl]);
+  const resetDrag = (0, _react.useCallback)(() => {
+    setIsDragging(false);
+    isDraggingRef.current = false;
+    if (!isCompleted) {
+      setDragOffset(0);
+    }
+  }, [isCompleted]);
+  (0, _react.useEffect)(() => {
+    const handleGlobalPointerMove = e => {
+      if (!isDraggingRef.current || !containerRef.current || isCompleted) return;
+      const pos = isRtl ? -e.clientX : e.clientX;
+      const delta = pos - dragStartRef.current;
+      if (delta <= 0) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      const maxOffset = containerWidth - _constants.BUTTON_SIZE;
+      const thresholdPixels = containerWidth * thresholdValue;
+      if (delta > thresholdPixels) {
+        setDragOffset(maxOffset);
+        setIsCompleted(true);
+        setIsDragging(false);
+        isDraggingRef.current = false;
+        onComplete?.();
+      } else {
+        setDragOffset(Math.min(delta, maxOffset));
+      }
+    };
+    const handleGlobalPointerUp = () => {
+      setIsDragging(false);
+      isDraggingRef.current = false;
+      if (!isCompleted) {
+        setDragOffset(0);
+      }
+    };
+    if (isDragging) {
+      document.addEventListener("pointermove", handleGlobalPointerMove);
+      document.addEventListener("pointerup", handleGlobalPointerUp);
+      return () => {
+        document.removeEventListener("pointermove", handleGlobalPointerMove);
+        document.removeEventListener("pointerup", handleGlobalPointerUp);
+      };
+    }
+  }, [isDragging, thresholdValue, isCompleted, onComplete, isRtl]);
+
+  // -- Slide-back timer -------------------------------------------------------
+
+  (0, _react.useEffect)(() => {
+    if (!isCompleted || slideBackAfterMs == null || slideBackAfterMs <= 0) return;
+    const timerId = setTimeout(() => {
+      setIsCompleted(false);
+      setDragOffset(0);
+    }, slideBackAfterMs);
+    return () => clearTimeout(timerId);
+  }, [isCompleted, slideBackAfterMs]);
+
+  // -- Keyboard handler -------------------------------------------------------
+
+  const handleKeyDown = (0, _react.useCallback)(e => {
+    if (!isInteractive) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsCompleted(true);
+      onComplete?.();
+    }
+  }, [isInteractive, onComplete]);
+
+  // -- Early return -----------------------------------------------------------
+
+  if (!label) {
+    return null;
+  }
+
+  // -- Derived values ---------------------------------------------------------
+
+  const sliderWidth = isCompleted ? "100%" : `${_constants.BUTTON_SIZE + dragOffset}px`;
+  const isActuallySliding = isDragging && dragOffset > _constants.TAP_OFFSET;
+  const sharedProps = {
+    $isDisabled: isDisabled,
+    $isLoading: isLoading,
+    $isCompleted: isCompleted,
+    $isDragging: isDragging,
+    $isInteractive: isInteractive,
+    $isActuallySliding: isActuallySliding,
+    $dragOffset: dragOffset,
+    $sliderWidth: sliderWidth,
+    $isRtl: isRtl
+  };
+
+  // -- Overrides --------------------------------------------------------------
+
+  const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.Root);
+  const [Track, trackProps] = (0, _overrides.getOverrides)(overrides.Track, _styledComponents.Track);
+  const [SliderEl, sliderProps] = (0, _overrides.getOverrides)(overrides.Slider, _styledComponents.Slider);
+  const [LabelEl, labelProps] = (0, _overrides.getOverrides)(overrides.Label, _styledComponents.Label);
+  const [CompletedLabelEl, completedLabelProps] = (0, _overrides.getOverrides)(overrides.CompletedLabel, _styledComponents.CompletedLabel);
+  const [GrabberEl, grabberProps] = (0, _overrides.getOverrides)(overrides.Grabber, _styledComponents.Grabber);
+  const [LoadingOverlayEl, loadingOverlayProps] = (0, _overrides.getOverrides)(overrides.LoadingOverlay, _styledComponents.LoadingOverlay);
+  const [LoadingSpinnerEl, loadingSpinnerProps] = (0, _overrides.getOverrides)(overrides.LoadingSpinner, _styledComponents.LoadingSpinner);
+
+  // -- Aria -------------------------------------------------------------------
+
+  const ariaProps = {
+    "aria-label": ariaLabel || label
+  };
+  if (isLoading) {
+    ariaProps["aria-busy"] = true;
+    ariaProps["aria-live"] = "polite";
+  }
+  if (isDisabled) {
+    ariaProps["aria-disabled"] = true;
+  }
+
+  // -- Render -----------------------------------------------------------------
+
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    ref: ref,
+    "data-baseweb": "sliding-button",
+    tabIndex: 0,
+    role: "button",
+    onKeyDown: handleKeyDown
+  }, ariaProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(Track, _extends({
+    ref: containerRef
+  }, sharedProps, trackProps), isLoading && /*#__PURE__*/React.createElement(LoadingOverlayEl, _extends({}, sharedProps, loadingOverlayProps), /*#__PURE__*/React.createElement(LoadingSpinnerEl, _extends({}, sharedProps, loadingSpinnerProps))), !isLoading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelEl, _extends({}, sharedProps, labelProps), label), /*#__PURE__*/React.createElement(SliderEl, _extends({}, sharedProps, sliderProps), isCompleted && /*#__PURE__*/React.createElement(CompletedLabelEl, _extends({}, sharedProps, completedLabelProps), label), /*#__PURE__*/React.createElement(GrabberEl, _extends({
+    "data-baseweb": "sliding-button-grabber",
+    onPointerDown: handlePointerDown,
+    onPointerUp: resetDrag,
+    onPointerCancel: resetDrag
+  }, sharedProps, grabberProps), /*#__PURE__*/React.createElement(ArrowIcon, {
+    isCompleted: isCompleted
+  }))))));
+}
+function ArrowIcon({
+  isCompleted
+}) {
+  if (isCompleted) {
+    return /*#__PURE__*/React.createElement(_check.default, {
+      title: "",
+      size: "24px"
+    });
+  }
+  return /*#__PURE__*/React.createElement(_arrowRight.default, {
+    title: "",
+    size: "24px"
+  });
+}
+const SlidingButton = /*#__PURE__*/React.forwardRef(SlidingButtonInner);
+SlidingButton.displayName = "SlidingButton";
+var _default = exports.default = SlidingButton;

package/sliding-button/styled-components.d.ts

@@ -0,0 +1,9 @@
+import type { StyleProps } from "./types";
+export declare const Root: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const Track: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const LoadingOverlay: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const LoadingSpinner: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const Label: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const Slider: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const CompletedLabel: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const Grabber: import("styletron-react").StyletronComponent<"div", StyleProps>;

package/sliding-button/styled-components.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Track = exports.Slider = exports.Root = exports.LoadingSpinner = exports.LoadingOverlay = exports.Label = exports.Grabber = exports.CompletedLabel = void 0;
+var _styles = require("../styles");
+var _constants = require("./constants");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const Root = exports.Root = (0, _styles.styled)("div", ({
+  $theme
+}) => ({
+  width: "100%",
+  borderTopLeftRadius: $theme.borders.radius300,
+  borderTopRightRadius: $theme.borders.radius300,
+  borderBottomLeftRadius: $theme.borders.radius300,
+  borderBottomRightRadius: $theme.borders.radius300,
+  ":focus": {
+    outline: "none"
+  },
+  ":focus-visible": {
+    outline: `3px solid ${$theme.colors.borderAccent}`,
+    outlineOffset: "0px"
+  }
+}));
+Root.displayName = "Root";
+Root.displayName = "Root";
+const Track = exports.Track = (0, _styles.styled)("div", ({
+  $theme,
+  $isDisabled
+}) => ({
+  position: "relative",
+  backgroundColor: $isDisabled ? $theme.colors.backgroundStateDisabled : $theme.colors.backgroundTertiary,
+  borderTopLeftRadius: $theme.borders.radius300,
+  borderTopRightRadius: $theme.borders.radius300,
+  borderBottomLeftRadius: $theme.borders.radius300,
+  borderBottomRightRadius: $theme.borders.radius300,
+  height: $theme.sizing.scale1400,
+  overflow: "hidden",
+  userSelect: "none",
+  touchAction: "none"
+}));
+Track.displayName = "Track";
+Track.displayName = "Track";
+const LoadingOverlay = exports.LoadingOverlay = (0, _styles.styled)("div", ({
+  $theme
+}) => ({
+  position: "absolute",
+  top: "0",
+  left: "0",
+  right: "0",
+  bottom: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: $theme.colors.backgroundInversePrimary,
+  borderTopLeftRadius: $theme.borders.radius300,
+  borderTopRightRadius: $theme.borders.radius300,
+  borderBottomLeftRadius: $theme.borders.radius300,
+  borderBottomRightRadius: $theme.borders.radius300
+}));
+LoadingOverlay.displayName = "LoadingOverlay";
+LoadingOverlay.displayName = "LoadingOverlay";
+const LoadingSpinner = exports.LoadingSpinner = (0, _styles.styled)("div", ({
+  $theme
+}) => ({
+  width: $theme.sizing.scale700,
+  height: $theme.sizing.scale700,
+  borderTopLeftRadius: "50%",
+  borderTopRightRadius: "50%",
+  borderBottomLeftRadius: "50%",
+  borderBottomRightRadius: "50%",
+  borderLeftWidth: $theme.sizing.scale0,
+  borderTopWidth: $theme.sizing.scale0,
+  borderRightWidth: $theme.sizing.scale0,
+  borderBottomWidth: $theme.sizing.scale0,
+  borderLeftStyle: "solid",
+  borderTopStyle: "solid",
+  borderRightStyle: "solid",
+  borderBottomStyle: "solid",
+  borderLeftColor: $theme.colors.borderInverseOpaque,
+  borderRightColor: $theme.colors.borderInverseOpaque,
+  borderBottomColor: $theme.colors.borderInverseOpaque,
+  borderTopColor: $theme.colors.contentInversePrimary,
+  boxSizing: "border-box",
+  animationName: {
+    from: {
+      transform: "rotate(0deg)"
+    },
+    to: {
+      transform: "rotate(360deg)"
+    }
+  },
+  animationDuration: "0.75s",
+  animationTimingFunction: "linear",
+  animationIterationCount: "infinite"
+}));
+LoadingSpinner.displayName = "LoadingSpinner";
+LoadingSpinner.displayName = "LoadingSpinner";
+const Label = exports.Label = (0, _styles.styled)("div", ({
+  $theme,
+  $isDisabled,
+  $isActuallySliding,
+  $isCompleted,
+  $isRtl
+}) => {
+  const startProperty = $isRtl ? "right" : "left";
+  const endProperty = $isRtl ? "left" : "right";
+  return {
+    position: "absolute",
+    top: "0",
+    [startProperty]: $theme.sizing.scale1400,
+    [endProperty]: "0",
+    bottom: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: $isDisabled || $isActuallySliding ? $theme.colors.contentStateDisabled : $theme.colors.contentPrimary,
+    opacity: $isCompleted ? 0 : 1,
+    transitionProperty: "opacity, color",
+    transitionDuration: $theme.animation.timing200,
+    transitionTimingFunction: "ease-out",
+    pointerEvents: "none",
+    ...$theme.typography.LabelLarge,
+    fontWeight: 500
+  };
+});
+Label.displayName = "Label";
+Label.displayName = "Label";
+const Slider = exports.Slider = (0, _styles.styled)("div", ({
+  $theme,
+  $isDisabled,
+  $isDragging,
+  $dragOffset,
+  $sliderWidth,
+  $isCompleted,
+  $isRtl
+}) => {
+  const startProperty = $isRtl ? "right" : "left";
+  const endAlign = $isRtl ? "flex-start" : "flex-end";
+  const paddingEnd = $isRtl ? "paddingLeft" : "paddingRight";
+  const suppressTransition = $isDragging && $dragOffset !== _constants.TAP_OFFSET;
+  return {
+    position: "absolute",
+    top: "0",
+    [startProperty]: "0",
+    bottom: "0",
+    width: $sliderWidth,
+    backgroundColor: $isDisabled ? $theme.colors.backgroundStateDisabled : $theme.colors.backgroundInversePrimary,
+    borderTopLeftRadius: $theme.borders.radius300,
+    borderTopRightRadius: $theme.borders.radius300,
+    borderBottomLeftRadius: $theme.borders.radius300,
+    borderBottomRightRadius: $theme.borders.radius300,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: endAlign,
+    [paddingEnd]: $isCompleted ? $theme.sizing.scale600 : "0",
+    overflow: "hidden",
+    ...(suppressTransition ? {
+      transition: "none"
+    } : {
+      transitionProperty: "width",
+      transitionDuration: $theme.animation.timing200,
+      transitionTimingFunction: "ease-out"
+    })
+  };
+});
+Slider.displayName = "Slider";
+Slider.displayName = "Slider";
+const CompletedLabel = exports.CompletedLabel = (0, _styles.styled)("div", ({
+  $theme,
+  $isDisabled
+}) => ({
+  position: "absolute",
+  top: "0",
+  left: "0",
+  right: "0",
+  bottom: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: $isDisabled ? $theme.colors.contentStateDisabled : $theme.colors.contentInversePrimary,
+  pointerEvents: "none",
+  ...$theme.typography.LabelLarge,
+  fontWeight: 500
+}));
+CompletedLabel.displayName = "CompletedLabel";
+CompletedLabel.displayName = "CompletedLabel";
+const Grabber = exports.Grabber = (0, _styles.styled)("div", ({
+  $theme,
+  $isDisabled,
+  $isInteractive
+}) => ({
+  width: $theme.sizing.scale1400,
+  height: $theme.sizing.scale1400,
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: $isDisabled ? $theme.colors.contentStateDisabled : $theme.colors.contentInversePrimary,
+  cursor: $isInteractive ? "grab" : "default",
+  touchAction: "none"
+}));
+Grabber.displayName = "Grabber";
+Grabber.displayName = "Grabber";