polaris-react-extended 13.10.3

package/build/cjs/components/PositionedOverlay/PositionedOverlay.js

@@ -0,0 +1,258 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var geometry = require('../../utilities/geometry.js');
+var shared = require('../shared.js');
+var math = require('./utilities/math.js');
+var PositionedOverlay_module = require('./PositionedOverlay.css.js');
+var Scrollable = require('../Scrollable/Scrollable.js');
+var EventListener = require('../EventListener/EventListener.js');
+
+const OBSERVER_CONFIG = {
+  childList: true,
+  subtree: true,
+  characterData: true,
+  attributeFilter: ['style']
+};
+class PositionedOverlay extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      measuring: true,
+      activatorRect: geometry.getRectForNode(this.props.activator),
+      right: undefined,
+      left: undefined,
+      top: 0,
+      height: 0,
+      width: null,
+      positioning: 'below',
+      zIndex: null,
+      outsideScrollableContainer: false,
+      lockPosition: false,
+      chevronOffset: 0
+    };
+    this.overlay = null;
+    this.scrollableContainers = [];
+    this.overlayDetails = () => {
+      const {
+        measuring,
+        left,
+        right,
+        positioning,
+        height,
+        activatorRect,
+        chevronOffset
+      } = this.state;
+      return {
+        measuring,
+        left,
+        right,
+        desiredHeight: height,
+        positioning,
+        activatorRect,
+        chevronOffset
+      };
+    };
+    this.setOverlay = node => {
+      this.overlay = node;
+    };
+    this.setScrollableContainers = () => {
+      const containers = [];
+      let scrollableContainer = Scrollable.Scrollable.forNode(this.props.activator);
+      if (scrollableContainer) {
+        containers.push(scrollableContainer);
+        while (scrollableContainer?.parentElement) {
+          scrollableContainer = Scrollable.Scrollable.forNode(scrollableContainer.parentElement);
+          containers.push(scrollableContainer);
+        }
+      }
+      this.scrollableContainers = containers;
+    };
+    this.registerScrollHandlers = () => {
+      this.scrollableContainers.forEach(node => {
+        node.addEventListener('scroll', this.handleMeasurement);
+      });
+    };
+    this.unregisterScrollHandlers = () => {
+      this.scrollableContainers.forEach(node => {
+        node.removeEventListener('scroll', this.handleMeasurement);
+      });
+    };
+    this.handleMeasurement = () => {
+      const {
+        lockPosition,
+        top
+      } = this.state;
+      this.observer.disconnect();
+      this.setState(({
+        left,
+        top,
+        right
+      }) => ({
+        left,
+        right,
+        top,
+        height: 0,
+        positioning: 'below',
+        measuring: true
+      }), () => {
+        if (this.overlay == null || this.firstScrollableContainer == null) {
+          return;
+        }
+        const {
+          activator,
+          preferredPosition = 'below',
+          preferredAlignment = 'center',
+          onScrollOut,
+          fullWidth,
+          fixed,
+          preferInputActivator = true
+        } = this.props;
+        const document = activator.ownerDocument;
+        const preferredActivator = preferInputActivator ? activator.querySelector('input') || activator : activator;
+        const activatorRect = geometry.getRectForNode(preferredActivator);
+        const currentOverlayRect = geometry.getRectForNode(this.overlay);
+        const scrollableElement = isDocument(this.firstScrollableContainer) ? document.body : this.firstScrollableContainer;
+        const scrollableContainerRect = geometry.getRectForNode(scrollableElement);
+        const overlayRect = fullWidth || preferredPosition === 'cover' ? new geometry.Rect({
+          ...currentOverlayRect,
+          width: activatorRect.width
+        }) : currentOverlayRect;
+
+        // If `body` is 100% height, it still acts as though it were not constrained to that size. This adjusts for that.
+        if (scrollableElement === document.body) {
+          scrollableContainerRect.height = document.body.scrollHeight;
+        }
+        let topBarOffset = 0;
+        const topBarElement = scrollableElement.querySelector(`${shared.dataPolarisTopBar.selector}`);
+        if (topBarElement) {
+          topBarOffset = topBarElement.clientHeight;
+        }
+        let overlayMargins = {
+          activator: 0,
+          container: 0,
+          horizontal: 0
+        };
+        if (this.overlay.firstElementChild) {
+          const nodeMargins = getMarginsForNode(this.overlay.firstElementChild);
+          overlayMargins = nodeMargins;
+        }
+        const containerRect = math.windowRect(activator);
+        const zIndexForLayer = getZIndexForLayerFromNode(activator);
+        const zIndex = zIndexForLayer == null ? zIndexForLayer : zIndexForLayer + 1;
+        const verticalPosition = math.calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed, topBarOffset);
+        const horizontalPosition = math.calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment);
+        const chevronOffset = activatorRect.center.x - horizontalPosition + overlayMargins.horizontal * 2;
+        this.setState({
+          measuring: false,
+          activatorRect: geometry.getRectForNode(activator),
+          left: preferredAlignment !== 'right' ? horizontalPosition : undefined,
+          right: preferredAlignment === 'right' ? horizontalPosition : undefined,
+          top: lockPosition ? top : verticalPosition.top,
+          lockPosition: Boolean(fixed),
+          height: verticalPosition.height || 0,
+          width: fullWidth || preferredPosition === 'cover' ? overlayRect.width : null,
+          positioning: verticalPosition.positioning,
+          outsideScrollableContainer: onScrollOut != null && math.rectIsOutsideOfRect(activatorRect, math.intersectionWithViewport(scrollableContainerRect, containerRect)),
+          zIndex,
+          chevronOffset
+        }, () => {
+          if (!this.overlay) return;
+          this.observer.observe(this.overlay, OBSERVER_CONFIG);
+          this.observer.observe(activator, OBSERVER_CONFIG);
+        });
+      });
+    };
+    this.observer = new MutationObserver(this.handleMeasurement);
+  }
+  componentDidMount() {
+    this.setScrollableContainers();
+    if (this.scrollableContainers.length && !this.props.fixed) {
+      this.registerScrollHandlers();
+    }
+    this.handleMeasurement();
+  }
+  componentWillUnmount() {
+    this.observer.disconnect();
+    if (this.scrollableContainers.length && !this.props.fixed) {
+      this.unregisterScrollHandlers();
+    }
+  }
+  componentDidUpdate() {
+    const {
+      outsideScrollableContainer,
+      top
+    } = this.state;
+    const {
+      onScrollOut,
+      active
+    } = this.props;
+    if (active && onScrollOut != null && top !== 0 && outsideScrollableContainer) {
+      onScrollOut();
+    }
+  }
+  render() {
+    const {
+      left,
+      right,
+      top,
+      zIndex,
+      width
+    } = this.state;
+    const {
+      render,
+      fixed,
+      preventInteraction,
+      classNames: propClassNames,
+      zIndexOverride
+    } = this.props;
+    const style = {
+      top: top == null || isNaN(top) ? undefined : top,
+      left: left == null || isNaN(left) ? undefined : left,
+      right: right == null || isNaN(right) ? undefined : right,
+      width: width == null || isNaN(width) ? undefined : width,
+      zIndex: zIndexOverride || zIndex || undefined
+    };
+    const className = css.classNames(PositionedOverlay_module.default.PositionedOverlay, fixed && PositionedOverlay_module.default.fixed, preventInteraction && PositionedOverlay_module.default.preventInteraction, propClassNames);
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      style: style,
+      ref: this.setOverlay
+    }, /*#__PURE__*/React.createElement(EventListener.EventListener, {
+      event: "resize",
+      handler: this.handleMeasurement,
+      window: this.overlay?.ownerDocument.defaultView
+    }), render(this.overlayDetails()));
+  }
+  get firstScrollableContainer() {
+    return this.scrollableContainers[0] ?? null;
+  }
+  forceUpdatePosition() {
+    // Wait a single animation frame before re-measuring.
+    // Consumer's may also need to setup their own timers for
+    // triggering forceUpdatePosition() `children` use animation.
+    // Ideally, forceUpdatePosition() is fired at the end of a transition event.
+    requestAnimationFrame(this.handleMeasurement);
+  }
+}
+function getMarginsForNode(node) {
+  // Accounts for when the node is moved between documents
+  const window = node.ownerDocument.defaultView || globalThis.window;
+  const nodeStyles = window.getComputedStyle(node);
+  return {
+    activator: parseFloat(nodeStyles.marginTop || '0'),
+    container: parseFloat(nodeStyles.marginBottom || '0'),
+    horizontal: parseFloat(nodeStyles.marginLeft || '0')
+  };
+}
+function getZIndexForLayerFromNode(node) {
+  const layerNode = node.closest(shared.layer.selector) || node.ownerDocument.body;
+  const zIndex = layerNode === node.ownerDocument.body ? 'auto' : parseInt(window.getComputedStyle(layerNode).zIndex || '0', 10);
+  return zIndex === 'auto' || isNaN(zIndex) ? null : zIndex;
+}
+function isDocument(node) {
+  return node.ownerDocument === null;
+}
+
+exports.PositionedOverlay = PositionedOverlay;

package/build/cjs/components/PositionedOverlay/utilities/math.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var geometry = require('../../../utilities/geometry.js');
+
+function calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed, topBarOffset = 0) {
+  const activatorTop = activatorRect.top;
+  const activatorBottom = activatorTop + activatorRect.height;
+  const spaceAbove = activatorRect.top - topBarOffset;
+  const spaceBelow = containerRect.height - activatorRect.top - activatorRect.height;
+  const desiredHeight = overlayRect.height;
+  const verticalMargins = overlayMargins.activator + overlayMargins.container;
+  const minimumSpaceToScroll = overlayMargins.container;
+  const distanceToTopScroll = activatorRect.top - Math.max(scrollableContainerRect.top, 0);
+  const distanceToBottomScroll = containerRect.top + Math.min(containerRect.height, scrollableContainerRect.top + scrollableContainerRect.height) - (activatorRect.top + activatorRect.height);
+  const enoughSpaceFromTopScroll = distanceToTopScroll >= minimumSpaceToScroll;
+  const enoughSpaceFromBottomScroll = distanceToBottomScroll >= minimumSpaceToScroll;
+  const heightIfAbove = Math.min(spaceAbove, desiredHeight);
+  const heightIfBelow = Math.min(spaceBelow, desiredHeight);
+  const heightIfAboveCover = Math.min(spaceAbove + activatorRect.height, desiredHeight);
+  const heightIfBelowCover = Math.min(spaceBelow + activatorRect.height, desiredHeight);
+  const containerRectTop = fixed ? 0 : containerRect.top;
+  const positionIfAbove = {
+    height: heightIfAbove - verticalMargins,
+    top: activatorTop + containerRectTop - heightIfAbove,
+    positioning: 'above'
+  };
+  const positionIfBelow = {
+    height: heightIfBelow - verticalMargins,
+    top: activatorBottom + containerRectTop,
+    positioning: 'below'
+  };
+  const positionIfCoverBelow = {
+    height: heightIfBelowCover - verticalMargins,
+    top: activatorTop + containerRectTop,
+    positioning: 'cover'
+  };
+  const positionIfCoverAbove = {
+    height: heightIfAboveCover - verticalMargins,
+    top: activatorTop + containerRectTop - heightIfAbove + activatorRect.height + verticalMargins,
+    positioning: 'cover'
+  };
+  if (preferredPosition === 'above') {
+    return (enoughSpaceFromTopScroll || distanceToTopScroll >= distanceToBottomScroll && !enoughSpaceFromBottomScroll) && (spaceAbove > desiredHeight || spaceAbove > spaceBelow) ? positionIfAbove : positionIfBelow;
+  }
+  if (preferredPosition === 'below') {
+    return (enoughSpaceFromBottomScroll || distanceToBottomScroll >= distanceToTopScroll && !enoughSpaceFromTopScroll) && (spaceBelow > desiredHeight || spaceBelow > spaceAbove) ? positionIfBelow : positionIfAbove;
+  }
+  if (preferredPosition === 'cover') {
+    return (enoughSpaceFromBottomScroll || distanceToBottomScroll >= distanceToTopScroll && !enoughSpaceFromTopScroll) && (spaceBelow + activatorRect.height > desiredHeight || spaceBelow > spaceAbove) ? positionIfCoverBelow : positionIfCoverAbove;
+  }
+  if (enoughSpaceFromTopScroll && enoughSpaceFromBottomScroll) {
+    return spaceAbove > spaceBelow ? positionIfAbove : positionIfBelow;
+  }
+  return distanceToTopScroll > minimumSpaceToScroll ? positionIfAbove : positionIfBelow;
+}
+function calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment) {
+  const maximum = containerRect.width - overlayRect.width;
+  if (preferredAlignment === 'left') {
+    return Math.min(maximum, Math.max(0, activatorRect.left - overlayMargins.horizontal));
+  } else if (preferredAlignment === 'right') {
+    const activatorRight = containerRect.width - (activatorRect.left + activatorRect.width);
+    return Math.min(maximum, Math.max(0, activatorRight - overlayMargins.horizontal));
+  }
+  return Math.min(maximum, Math.max(0, activatorRect.center.x - overlayRect.width / 2));
+}
+function rectIsOutsideOfRect(inner, outer) {
+  const {
+    center
+  } = inner;
+  return center.y < outer.top || center.y > outer.top + outer.height;
+}
+function intersectionWithViewport(rect, viewport = windowRect()) {
+  const top = Math.max(rect.top, 0);
+  const left = Math.max(rect.left, 0);
+  const bottom = Math.min(rect.top + rect.height, viewport.height);
+  const right = Math.min(rect.left + rect.width, viewport.width);
+  return new geometry.Rect({
+    top,
+    left,
+    height: bottom - top,
+    width: right - left
+  });
+}
+function windowRect(node) {
+  const document = node?.ownerDocument || globalThis.document;
+  const window = document.defaultView || globalThis.window;
+  return new geometry.Rect({
+    top: window.scrollY,
+    left: window.scrollX,
+    height: window.innerHeight,
+    width: document.body.clientWidth
+  });
+}
+
+exports.calculateHorizontalPosition = calculateHorizontalPosition;
+exports.calculateVerticalPosition = calculateVerticalPosition;
+exports.intersectionWithViewport = intersectionWithViewport;
+exports.rectIsOutsideOfRect = rectIsOutsideOfRect;
+exports.windowRect = windowRect;

package/build/cjs/components/ProgressBar/ProgressBar.css.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "ProgressBar": "Polaris-ProgressBar",
+  "sizeSmall": "Polaris-ProgressBar--sizeSmall",
+  "sizeMedium": "Polaris-ProgressBar--sizeMedium",
+  "sizeLarge": "Polaris-ProgressBar--sizeLarge",
+  "toneHighlight": "Polaris-ProgressBar--toneHighlight",
+  "tonePrimary": "Polaris-ProgressBar--tonePrimary",
+  "toneSuccess": "Polaris-ProgressBar--toneSuccess",
+  "toneCritical": "Polaris-ProgressBar--toneCritical",
+  "Indicator": "Polaris-ProgressBar__Indicator",
+  "IndicatorAppearActive": "Polaris-ProgressBar__IndicatorAppearActive",
+  "IndicatorAppearDone": "Polaris-ProgressBar__IndicatorAppearDone",
+  "Progress": "Polaris-ProgressBar__Progress",
+  "Label": "Polaris-ProgressBar__Label"
+};
+
+exports.default = styles;

package/build/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var css = require('../../utilities/css.js');
+var useTheme = require('../../utilities/use-theme.js');
+var ProgressBar_module = require('./ProgressBar.css.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+
+function ProgressBar({
+  progress = 0,
+  size = 'medium',
+  tone = 'highlight',
+  animated: hasAppearAnimation = true,
+  ariaLabelledBy
+}) {
+  const theme = useTheme.useTheme();
+  const i18n = hooks.useI18n();
+  const indicatorRef = React.useRef(null);
+  const className = css.classNames(ProgressBar_module.default.ProgressBar, size && ProgressBar_module.default[css.variationName('size', size)], tone && ProgressBar_module.default[css.variationName('tone', tone)]);
+  const warningMessage = i18n.translate(progress < 0 ? 'Polaris.ProgressBar.negativeWarningMessage' : 'Polaris.ProgressBar.exceedWarningMessage', {
+    progress
+  });
+  const parsedProgress = parseProgress(progress, warningMessage);
+  const progressBarDuration = hasAppearAnimation ? theme.motion['motion-duration-500'] : theme.motion['motion-duration-0'];
+
+  /* eslint-disable @shopify/jsx-no-hardcoded-content */
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement("progress", {
+    "aria-labelledby": ariaLabelledBy,
+    className: ProgressBar_module.default.Progress,
+    value: parsedProgress,
+    max: "100"
+  }), /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
+    in: true,
+    appear: true,
+    timeout: parseInt(progressBarDuration, 10),
+    nodeRef: indicatorRef,
+    classNames: {
+      appearActive: ProgressBar_module.default.IndicatorAppearActive,
+      appearDone: ProgressBar_module.default.IndicatorAppearDone
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: indicatorRef,
+    className: ProgressBar_module.default.Indicator,
+    style: {
+      '--pc-progress-bar-duration': progressBarDuration,
+      '--pc-progress-bar-percent': parsedProgress / 100
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ProgressBar_module.default.Label
+  }, parsedProgress, "%"))))
+  /* eslint-enable @shopify/jsx-no-hardcoded-content */;
+}
+function parseProgress(progress, warningMessage) {
+  let progressWidth;
+  if (progress < 0) {
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn(warningMessage);
+    }
+    progressWidth = 0;
+  } else if (progress > 100) {
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn(warningMessage);
+    }
+    progressWidth = 100;
+  } else {
+    progressWidth = progress;
+  }
+  return progressWidth;
+}
+
+exports.ProgressBar = ProgressBar;

package/build/cjs/components/RadioButton/RadioButton.css.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "RadioButton": "Polaris-RadioButton",
+  "Input": "Polaris-RadioButton__Input",
+  "Backdrop": "Polaris-RadioButton__Backdrop",
+  "ChoiceLabel": "Polaris-RadioButton__ChoiceLabel",
+  "toneMagic": "Polaris-RadioButton--toneMagic"
+};
+
+exports.default = styles;

package/build/cjs/components/RadioButton/RadioButton.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var RadioButton_module = require('./RadioButton.css.js');
+var Choice = require('../Choice/Choice.js');
+
+function RadioButton({
+  ariaDescribedBy: ariaDescribedByProp,
+  label,
+  labelHidden,
+  helpText,
+  checked,
+  disabled,
+  onChange,
+  onFocus,
+  onBlur,
+  id: idProp,
+  name: nameProp,
+  value,
+  fill,
+  bleed,
+  bleedBlockStart,
+  bleedBlockEnd,
+  bleedInlineStart,
+  bleedInlineEnd,
+  tone
+}) {
+  const uniqId = React.useId();
+  const id = idProp ?? uniqId;
+  const name = nameProp || id;
+  const inputNode = React.useRef(null);
+  const handleBlur = () => {
+    onBlur && onBlur();
+  };
+  function handleChange({
+    currentTarget
+  }) {
+    onChange && onChange(currentTarget.checked, id);
+  }
+  const describedBy = [];
+  if (helpText) {
+    describedBy.push(Choice.helpTextID(id));
+  }
+  if (ariaDescribedByProp) {
+    describedBy.push(ariaDescribedByProp);
+  }
+  const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
+  const inputClassName = css.classNames(RadioButton_module.default.Input, tone && RadioButton_module.default[css.variationName('tone', tone)]);
+  const extraChoiceProps = {
+    helpText,
+    bleed,
+    bleedBlockStart,
+    bleedBlockEnd,
+    bleedInlineStart,
+    bleedInlineEnd
+  };
+  return /*#__PURE__*/React.createElement(Choice.Choice, Object.assign({
+    label: label,
+    labelHidden: labelHidden,
+    disabled: disabled,
+    id: id,
+    labelClassName: RadioButton_module.default.ChoiceLabel,
+    fill: fill
+  }, extraChoiceProps, checked ? {
+    tone
+  } : {}), /*#__PURE__*/React.createElement("span", {
+    className: RadioButton_module.default.RadioButton
+  }, /*#__PURE__*/React.createElement("input", {
+    id: id,
+    name: name,
+    value: value,
+    type: "radio",
+    checked: checked,
+    disabled: disabled,
+    className: inputClassName,
+    onChange: handleChange,
+    onFocus: onFocus,
+    onBlur: handleBlur,
+    "aria-describedby": ariaDescribedBy,
+    ref: inputNode
+  }), /*#__PURE__*/React.createElement("span", {
+    className: RadioButton_module.default.Backdrop
+  })));
+}
+
+exports.RadioButton = RadioButton;

package/build/cjs/components/RangeSlider/RangeSlider.css.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sharedStyles = {
+  "RangeSlider": "Polaris-RangeSlider",
+  "Track--dashed-after": "Polaris-RangeSlider--trackDashedAfter",
+  "Track--dashed": "Polaris-RangeSlider--trackDashed"
+};
+
+exports.default = sharedStyles;

package/build/cjs/components/RangeSlider/RangeSlider.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var DualThumb = require('./components/DualThumb/DualThumb.js');
+var SingleThumb = require('./components/SingleThumb/SingleThumb.js');
+
+// The script in the styleguide that generates the Props Explorer data expects
+// that the interface defining the props is defined in this file, not imported
+// from elsewhere. This silly workaround ensures that the Props Explorer table
+// is generated correctly.
+
+function RangeSlider({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  ...rest
+}) {
+  const id = React.useId();
+  const sharedProps = {
+    id,
+    min,
+    max,
+    step,
+    ...rest
+  };
+  return isDualThumb(value) ? /*#__PURE__*/React.createElement(DualThumb.DualThumb, Object.assign({
+    value: value
+  }, sharedProps)) : /*#__PURE__*/React.createElement(SingleThumb.SingleThumb, Object.assign({
+    value: value
+  }, sharedProps));
+}
+function isDualThumb(value) {
+  return Array.isArray(value);
+}
+
+exports.RangeSlider = RangeSlider;

package/build/cjs/components/RangeSlider/components/DualThumb/DualThumb.css.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "DualThumb": "Polaris-DualThumb",
+  "TrackWrapper": "Polaris-DualThumb__TrackWrapper",
+  "disabled": "Polaris-DualThumb--disabled",
+  "Track": "Polaris-DualThumb__Track",
+  "error": "Polaris-DualThumb--error",
+  "Thumbs": "Polaris-DualThumb__Thumbs",
+  "Prefix": "Polaris-DualThumb__Prefix",
+  "Suffix": "Polaris-DualThumb__Suffix",
+  "Output": "Polaris-DualThumb__Output",
+  "OutputBubble": "Polaris-DualThumb__OutputBubble"
+};
+
+exports.default = styles;