@faststore/ui 1.9.8 → 1.9.11

package/dist/ui.esm.js

@@ -1,2037 +0,0 @@
-import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo, useImperativeHandle, useReducer, createContext, useContext, cloneElement } from 'react';
-import ReachPopover, { positionDefault } from '@reach/popover';
-import { useSwipeable } from 'react-swipeable';
-import { createPortal } from 'react-dom';
-import { tabbable } from 'tabbable';
-
-const Link = /*#__PURE__*/forwardRef(function Link({
-  as,
-  children,
-  testId = 'store-link',
-  ...otherProps
-}, ref) {
-  const Component = as != null ? as : 'a';
-  return React.createElement(Component, Object.assign({
-    ref: ref,
-    "data-store-link": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const Button = /*#__PURE__*/forwardRef(function Button({
-  children,
-  testId = 'store-button',
-  ...otherProps
-}, ref) {
-  return React.createElement("button", Object.assign({
-    ref: ref,
-    "data-store-button": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const Input = /*#__PURE__*/forwardRef(function Input({
-  variant,
-  testId = 'store-input',
-  ...otherProps
-}, ref) {
-  const variants = {
-    'data-error': variant === 'error' || undefined,
-    'data-success': variant === 'success' || undefined
-  };
-  return React.createElement("input", Object.assign({
-    ref: ref,
-    "data-store-input": true,
-    "data-testid": testId
-  }, variants, otherProps));
-});
-
-const Icon = /*#__PURE__*/forwardRef(function Button({
-  component,
-  testId = 'store-icon',
-  ...otherProps
-}, ref) {
-  return React.createElement("span", Object.assign({
-    ref: ref,
-    "data-store-icon": true,
-    "data-testid": testId
-  }, otherProps), component);
-});
-
-const Popover = ({
-  targetRef,
-  testId = 'store-popover',
-  children,
-  ...otherProps
-}) => {
-  return React.createElement(ReachPopover, Object.assign({
-    "data-store-popover": true,
-    "data-testid": testId,
-    position: positionDefault,
-    targetRef: targetRef
-  }, otherProps), children);
-};
-
-const Price = /*#__PURE__*/forwardRef(function Price({
-  as: Component = 'span',
-  testId = 'store-price',
-  value,
-  formatter = price => price,
-  variant = 'selling',
-  ...otherProps
-}, ref) {
-  const formattedPrice = formatter(value, variant);
-  return React.createElement(Component, Object.assign({
-    ref: ref,
-    "data-store-price": true,
-    "data-testid": testId,
-    "data-variant": variant
-  }, otherProps), formattedPrice);
-});
-
-const TextArea = /*#__PURE__*/forwardRef(function TextArea({
-  variant,
-  testId = 'store-textarea',
-  ...otherProps
-}, ref) {
-  const variants = {
-    'data-success': variant === 'success' || undefined,
-    'data-error': variant === 'error' || undefined
-  };
-  return React.createElement("textarea", Object.assign({
-    ref: ref,
-    "data-store-textarea": true,
-    "data-testid": testId
-  }, variants, otherProps));
-});
-
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
-  testId = 'store-checkbox',
-  ...otherProps
-}, ref) {
-  return React.createElement("input", Object.assign({
-    ref: ref,
-    "data-store-checkbox": true,
-    "data-testid": testId,
-    type: "checkbox"
-  }, otherProps));
-});
-
-const Overlay = /*#__PURE__*/forwardRef(function Overlay({
-  testId = 'store-overlay',
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    role: "presentation",
-    "data-store-overlay": true,
-    "data-testid": testId,
-    ref: ref
-  }, otherProps));
-});
-
-const Select = /*#__PURE__*/forwardRef(function Select({
-  children,
-  testId = 'store-select',
-  ...otherProps
-}, ref) {
-  return React.createElement("select", Object.assign({
-    ref: ref,
-    "data-store-select": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const Radio = /*#__PURE__*/forwardRef(function Radio({
-  testId = 'store-radio',
-  ...otherProps
-}, ref) {
-  return React.createElement("input", Object.assign({
-    ref: ref,
-    "data-store-radio": true,
-    "data-testid": testId,
-    type: "radio"
-  }, otherProps));
-});
-
-const Badge = /*#__PURE__*/forwardRef(function Badge({
-  testId = 'store-badge',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-store-badge": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-/**
- * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
- */
-
-const Slider = ({
-  min,
-  max,
-  onChange,
-  testId = 'store-slider',
-  getAriaValueText,
-  className
-}) => {
-  const [minVal, setMinVal] = useState(min);
-  const [maxVal, setMaxVal] = useState(max);
-  const minValRef = useRef(min);
-  const maxValRef = useRef(max);
-  const range = useRef(null);
-  const getPercent = useCallback(value => Math.round((value - min) / (max - min) * 100), [min, max]); // width of the range to reduce from the left side
-
-  useEffect(() => {
-    const minPercent = getPercent(minVal);
-    const maxPercent = getPercent(maxValRef.current);
-
-    if (range.current) {
-      range.current.style.left = `${minPercent}%`;
-      range.current.style.width = `${maxPercent - minPercent}%`;
-    }
-  }, [minVal, getPercent]); // width of the range to reduce from the right side
-
-  useEffect(() => {
-    const minPercent = getPercent(minValRef.current);
-    const maxPercent = getPercent(maxVal);
-
-    if (range.current) {
-      range.current.style.width = `${maxPercent - minPercent}%`;
-    }
-  }, [maxVal, getPercent]);
-  useEffect(() => {
-    onChange == null ? void 0 : onChange({
-      min: minVal,
-      max: maxVal
-    });
-  }, [minVal, maxVal, onChange]);
-  return React.createElement("div", {
-    "data-store-slider": true,
-    "data-testid": testId,
-    className: className
-  }, React.createElement("div", {
-    ref: range,
-    "data-slider-range": true
-  }), React.createElement("input", {
-    type: "range",
-    min: min,
-    max: max,
-    value: minVal,
-    onChange: event => {
-      const value = Math.min(Number(event.target.value), maxVal - 1);
-      setMinVal(value);
-      minValRef.current = value;
-    },
-    "data-slider-thumb": "left",
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-valuenow": minVal,
-    "aria-label": String(minVal),
-    "aria-labelledby": getAriaValueText ? getAriaValueText(minVal, 'min') : undefined
-  }), React.createElement("input", {
-    type: "range",
-    min: min,
-    max: max,
-    value: maxVal,
-    onChange: event => {
-      const value = Math.max(Number(event.target.value), minVal + 1);
-      setMaxVal(value);
-      maxValRef.current = value;
-    },
-    "data-slider-thumb": "right",
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-valuenow": maxVal,
-    "aria-label": String(maxVal),
-    "aria-labelledby": getAriaValueText ? getAriaValueText(maxVal, 'max') : undefined
-  }));
-};
-
-const variantToElement = {
-  description: 'dl',
-  unordered: 'ul',
-  ordered: 'ol'
-};
-const List = /*#__PURE__*/forwardRef(function List({
-  testId = 'store-list',
-  variant = 'unordered',
-  as: MaybeComponent,
-  ...otherProps
-}, ref) {
-  var _ref;
-
-  const dataAttributes = {
-    'data-testid': testId,
-    'data-store-list': variant
-  };
-  const Component = (_ref = MaybeComponent != null ? MaybeComponent : variantToElement[variant]) != null ? _ref : 'ul';
-  return React.createElement(Component, Object.assign({
-    ref: ref
-  }, dataAttributes, otherProps));
-});
-
-const Skeleton = /*#__PURE__*/forwardRef(function Skeleton({
-  testId = 'store-skeleton',
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-store-skeleton": true,
-    "data-testid": testId
-  }, otherProps));
-});
-
-const Spinner = /*#__PURE__*/forwardRef(function Spinner({
-  children,
-  testId = 'store-spinner',
-  ...otherProps
-}, ref) {
-  return React.createElement("span", Object.assign({
-    ref: ref,
-    "data-store-spinner": true,
-    "data-testid": testId
-  }, otherProps));
-});
-
-const Label = /*#__PURE__*/forwardRef(function Label({
-  testId = 'store-label',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("label", Object.assign({
-    ref: ref,
-    "data-store-label": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const Incentive = /*#__PURE__*/forwardRef(function Incentive({
-  testId = 'store-incentive',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-store-incentive": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const ProductCard = /*#__PURE__*/forwardRef(function Card({
-  testId = 'store-product-card',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("article", Object.assign({
-    ref: ref,
-    "data-store-product-card": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const ProductCardImage = /*#__PURE__*/forwardRef(function ProductCardImage({
-  testId = 'store-product-card-image',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-product-card-image": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const ProductCardContent = /*#__PURE__*/forwardRef(function CardContent({
-  testId = 'store-product-card-content',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("section", Object.assign({
-    ref: ref,
-    "data-product-card-content": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const ProductCardActions = /*#__PURE__*/forwardRef(function CardActions({
-  testId = 'store-product-card-actions',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-product-card-actions": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const Card = /*#__PURE__*/forwardRef(function Card({
-  testId = 'store-card',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("article", Object.assign({
-    ref: ref,
-    "data-store-card": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const CardImage = /*#__PURE__*/forwardRef(function CardImage({
-  testId = 'store-card-image',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-card-image": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const CardContent = /*#__PURE__*/forwardRef(function CardContent({
-  testId = 'store-card-content',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("section", Object.assign({
-    ref: ref,
-    "data-card-content": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const CardActions = /*#__PURE__*/forwardRef(function CardActions({
-  testId = 'store-card-actions',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-card-actions": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const defaultAriaLabel = (idx, isActive) => isActive ? 'Current page' : `Go to page ${idx + 1}`;
-
-const Bullets = /*#__PURE__*/forwardRef(function Bullets({
-  totalQuantity,
-  activeBullet,
-  onClick,
-  testId = 'store-bullets',
-  ariaLabelGenerator = defaultAriaLabel,
-  ariaControlsGenerator,
-  ...otherProps
-}, ref) {
-  const bulletIndexes = useMemo(() => Array(totalQuantity).fill(0), [totalQuantity]);
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-store-bullets": true,
-    "data-testid": testId,
-    role: "tablist"
-  }, otherProps), bulletIndexes.map((_, idx) => {
-    const isActive = activeBullet === idx;
-    return React.createElement(Button, {
-      "data-bullet-item": true,
-      role: "tab",
-      tabIndex: -1,
-      key: idx,
-      testId: `${testId}-item`,
-      onClick: e => onClick(e, idx),
-      "aria-label": ariaLabelGenerator(idx, isActive),
-      "aria-controls": ariaControlsGenerator == null ? void 0 : ariaControlsGenerator(idx),
-      "aria-selected": isActive
-    });
-  }));
-});
-
-const Form = /*#__PURE__*/forwardRef(function Form({
-  testId = 'store-form',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("form", Object.assign({
-    ref: ref,
-    "data-store-form": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const SearchIcon = () => React.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-}, React.createElement("circle", {
-  cx: "11",
-  cy: "11",
-  r: "8"
-}), React.createElement("line", {
-  x1: "21",
-  y1: "21",
-  x2: "16.65",
-  y2: "16.65"
-}));
-
-const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
-  onSubmit,
-  icon,
-  'aria-label': ariaLabel = 'search',
-  testId = 'store-search-input',
-  ...otherProps
-}, ref) {
-  const inputRef = useRef(null);
-  const formRef = useRef(null);
-
-  const handleSubmit = event => {
-    var _inputRef$current;
-
-    event.preventDefault();
-
-    if (((_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) !== '') {
-      onSubmit(inputRef.current.value);
-    }
-  };
-
-  useImperativeHandle(ref, () => ({
-    inputRef: inputRef.current,
-    formRef: formRef.current
-  }));
-  return React.createElement(Form, {
-    ref: formRef,
-    "data-store-search-input": true,
-    "data-testid": testId,
-    onSubmit: handleSubmit,
-    role: "search"
-  }, React.createElement(Input, Object.assign({
-    ref: inputRef,
-    "aria-label": ariaLabel
-  }, otherProps)), React.createElement(Button, {
-    type: "submit",
-    "aria-label": "Submit Search"
-  }, React.createElement(Icon, {
-    component: icon != null ? icon : React.createElement(SearchIcon, null)
-  })));
-});
-
-const LeftArrowIcon = ({
-  size = {
-    width: 25,
-    height: 25
-  },
-  viewBox = '0 0 16 16',
-  color = 'currentColor'
-}) => React.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  xmlnsXlink: "http://www.w3.org/1999/xlink",
-  viewBox: viewBox,
-  width: size.width,
-  height: size.height
-}, React.createElement("path", {
-  d: "M11 1L4 8L11 15",
-  strokeWidth: "2",
-  strokeMiterlimit: "10",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  stroke: color,
-  fill: "none"
-}));
-const RightArrowIcon = ({
-  size = {
-    width: 25,
-    height: 25
-  },
-  viewBox = '0 0 16 16',
-  color = 'currentColor'
-}) => React.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  xmlnsXlink: "http://www.w3.org/1999/xlink",
-  viewBox: viewBox,
-  width: size.width,
-  height: size.height
-}, React.createElement("path", {
-  d: "M5 15L12 8L5 1",
-  strokeWidth: "2",
-  strokeMiterlimit: "10",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  stroke: color,
-  fill: "none"
-}));
-
-const nextPage = (current, total) => (current + 1) % total;
-const previousPage = (current, total) => (total - (total - current + 1) % total) % total;
-
-function reducer(state, action) {
-  switch (action.type) {
-    case 'NEXT_PAGE':
-      {
-        // If `state.infinite` is true, we need to take into account an extra
-        // page in the calculation. This extra page is a clone of the first page.
-        const adjustedTotalPages = state.infinite ? state.totalPages + 1 : state.totalPages;
-        const nextPageIndex = nextPage(state.currentPage, adjustedTotalPages);
-        const nextItemIndex = nextPageIndex % adjustedTotalPages * state.itemsPerPage;
-        return { ...state,
-          sliding: true,
-          slideDirection: 'next',
-          currentItem: nextItemIndex,
-          currentPage: nextPageIndex
-        };
-      }
-
-    case 'PREVIOUS_PAGE':
-      {
-        // If `state.infinite` is true, we need to take into account an extra
-        // page in the calculation. This extra page is a clone of the first page.
-        const adjustedTotalPages = state.infinite ? state.totalPages + 1 : state.totalPages; // If `state.infinite` is true and we're currently on page 0, we need to
-        // let the slider go to page -1. This -1 page is a clone of the last page.
-
-        const shouldGoToClone = state.infinite && state.currentPage === 0;
-        const previousPageIndex = shouldGoToClone ? -1 : previousPage(state.currentPage, state.totalPages);
-        return { ...state,
-          sliding: true,
-          slideDirection: 'previous',
-          currentItem: previousPageIndex % adjustedTotalPages * state.itemsPerPage,
-          currentPage: previousPageIndex
-        };
-      }
-
-    case 'GO_TO_PAGE':
-      {
-        if (action.payload.pageIndex === state.currentPage) {
-          return state;
-        }
-
-        return { ...state,
-          sliding: action.payload.shouldSlide,
-          slideDirection: action.payload.pageIndex > state.currentPage ? 'next' : 'previous',
-          currentItem: action.payload.pageIndex % state.totalPages * state.itemsPerPage,
-          currentPage: action.payload.pageIndex
-        };
-      }
-
-    case 'STOP_SLIDE':
-      return { ...state,
-        sliding: false
-      };
-
-    default:
-      return state;
-  }
-}
-
-const defaultSliderState = (totalItems, itemsPerPage, infinite) => ({
-  currentItem: 0,
-  currentPage: 0,
-  sliding: false,
-  slideDirection: 'next',
-  totalItems,
-  itemsPerPage,
-  totalPages: Math.ceil(totalItems / itemsPerPage),
-  infinite
-});
-
-const slide = (page, dispatch) => {
-  if (page === 'next') {
-    dispatch({
-      type: 'NEXT_PAGE'
-    });
-  }
-
-  if (page === 'previous') {
-    dispatch({
-      type: 'PREVIOUS_PAGE'
-    });
-  }
-
-  if (typeof page === 'number') {
-    dispatch({
-      type: 'GO_TO_PAGE',
-      payload: {
-        pageIndex: page,
-        shouldSlide: true
-      }
-    });
-  }
-};
-
-function useSlider({
-  totalItems,
-  itemsPerPage = 1,
-  infiniteMode = false,
-  ...swipeableConfigOverrides
-}) {
-  const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () => defaultSliderState(totalItems, itemsPerPage, infiniteMode));
-  const handlers = useSwipeable({
-    onSwipedRight: () => slide('previous', sliderDispatch),
-    onSwipedLeft: () => slide('next', sliderDispatch),
-    preventDefaultTouchmoveEvent: true,
-    trackMouse: true,
-    ...swipeableConfigOverrides
-  });
-  return {
-    handlers,
-    slide,
-    sliderState,
-    sliderDispatch
-  };
-}
-
-function isSlideVisible({
-  itemsPerPage,
-  currentSlide,
-  slideIdx,
-  totalItems
-}) {
-  const isClonedSlide = currentSlide < 0 || currentSlide >= totalItems;
-  const isVisible = slideIdx >= currentSlide && slideIdx < currentSlide + itemsPerPage;
-  return isClonedSlide || isVisible;
-}
-
-function useSlideVisibility({
-  currentSlide,
-  itemsPerPage,
-  totalItems
-}) {
-  /** Keeps track of slides that have been visualized before.
-   * We want to keep rendering them because the issue is mostly rendering
-   * slides that might never be viewed; On the other hand, hiding slides
-   * that were visible causes visual glitches */
-  const visitedSlides = useRef(new Set());
-  useEffect(() => {
-    for (let i = 0; i < itemsPerPage; i++) {
-      visitedSlides.current.add(currentSlide + i);
-    }
-  }, [currentSlide, itemsPerPage]);
-
-  const isItemVisible = index => isSlideVisible({
-    slideIdx: index,
-    currentSlide,
-    itemsPerPage,
-    totalItems
-  });
-
-  const shouldRenderItem = index => {
-    return visitedSlides.current.has(index) || isItemVisible(index);
-  };
-
-  return {
-    shouldRenderItem,
-    isItemVisible
-  };
-}
-
-const IconButton = /*#__PURE__*/forwardRef(function IconButton({
-  icon,
-  testId = 'store-icon-button',
-  ...buttonProps
-}, ref) {
-  return React.createElement(Button, Object.assign({
-    ref: ref,
-    "data-store-icon-button": true,
-    testId: testId
-  }, buttonProps), React.createElement(Icon, {
-    component: icon
-  }));
-});
-
-const createTransformValues = (infinite, totalItems) => {
-  const transformMap = {};
-  const slideWidth = 100 / totalItems;
-
-  for (let idx = 0; idx < totalItems; ++idx) {
-    const currIdx = infinite ? idx - 1 : idx;
-    const transformValue = -(slideWidth * idx);
-    transformMap[currIdx] = transformValue;
-  }
-
-  return transformMap;
-};
-
-function Carousel({
-  infiniteMode = true,
-  controls = 'complete',
-  testId = 'store-carousel',
-  transition = {
-    duration: 400,
-    property: 'transform'
-  },
-  children,
-  id = 'store-carousel',
-  ...swipeableConfigOverrides
-}) {
-  var _transition$timing, _transition$delay;
-
-  const childrenArray = React.Children.toArray(children);
-  const childrenCount = childrenArray.length;
-  const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount;
-  const slidingTransition = `${transition.property} ${transition.duration}ms ${(_transition$timing = transition.timing) != null ? _transition$timing : ''} ${(_transition$delay = transition.delay) != null ? _transition$delay : ''}`;
-  const showNavigationArrows = controls === 'complete' || controls === 'navigationArrows';
-  const showPaginationBullets = controls === 'complete' || controls === 'paginationBullets';
-  const transformValues = useMemo(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
-  const {
-    handlers,
-    slide,
-    sliderState,
-    sliderDispatch
-  } = useSlider({
-    totalItems: childrenCount,
-    itemsPerPage: 1,
-    infiniteMode,
-    ...swipeableConfigOverrides
-  });
-  const {
-    isItemVisible,
-    shouldRenderItem
-  } = useSlideVisibility({
-    itemsPerPage: sliderState.itemsPerPage,
-    currentSlide: sliderState.currentItem,
-    totalItems: childrenCount
-  });
-  const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
-  const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
-  const slides = preRenderedSlides.concat(children != null ? children : [], postRenderedSlides);
-
-  const slidePrevious = () => {
-    if (sliderState.sliding || !infiniteMode && sliderState.currentPage === 0) {
-      return;
-    }
-
-    slide('previous', sliderDispatch);
-  };
-
-  const slideNext = () => {
-    if (sliderState.sliding || !infiniteMode && sliderState.currentPage === childrenCount - 1) {
-      return;
-    }
-
-    slide('next', sliderDispatch);
-  }; // accessible behavior for tablist
-
-
-  const handleBulletsKeyDown = event => {
-    switch (event.key) {
-      case 'ArrowLeft':
-        {
-          slidePrevious();
-          break;
-        }
-
-      case 'ArrowRight':
-        {
-          slideNext();
-          break;
-        }
-
-      case 'Home':
-        {
-          slide(0, sliderDispatch);
-          break;
-        }
-
-      case 'End':
-        {
-          slide(childrenCount - 1, sliderDispatch);
-          break;
-        }
-    }
-  };
-
-  return React.createElement("section", {
-    id: id,
-    "data-store-carousel": true,
-    "data-testid": testId,
-    "aria-label": "carousel",
-    "aria-roledescription": "carousel"
-  }, React.createElement("div", Object.assign({
-    "data-carousel-track-container": true,
-    style: {
-      overflow: 'hidden',
-      width: '100%'
-    }
-  }, handlers), React.createElement("div", {
-    "data-carousel-track": true,
-    style: {
-      display: 'flex',
-      transition: sliderState.sliding ? slidingTransition : undefined,
-      width: `${numberOfSlides * 100}%`,
-      transform: `translate3d(${transformValues[sliderState.currentPage]}%, 0, 0)`
-    },
-    onTransitionEnd: () => {
-      sliderDispatch({
-        type: 'STOP_SLIDE'
-      });
-
-      if (sliderState.currentItem >= childrenCount) {
-        sliderDispatch({
-          type: 'GO_TO_PAGE',
-          payload: {
-            pageIndex: 0,
-            shouldSlide: false
-          }
-        });
-      }
-
-      if (sliderState.currentItem < 0) {
-        sliderDispatch({
-          type: 'GO_TO_PAGE',
-          payload: {
-            pageIndex: sliderState.totalPages - 1,
-            shouldSlide: false
-          }
-        });
-      }
-    },
-    "aria-live": "polite"
-  }, slides.map((currentSlide, idx) => React.createElement("div", {
-    role: "tabpanel",
-    "aria-roledescription": "slide",
-    key: idx,
-    id: `carousel-item-${idx}`,
-    "data-carousel-item": true,
-    style: {
-      width: '100%'
-    },
-    "data-visible": isItemVisible(idx - Number(infiniteMode)) || undefined
-  }, shouldRenderItem(idx - Number(infiniteMode)) ? currentSlide : null)))), showNavigationArrows && React.createElement("div", {
-    "data-carousel-controls": true
-  }, React.createElement(IconButton, {
-    "aria-label": "previous",
-    "data-arrow": "left",
-    "aria-controls": id,
-    onClick: slidePrevious,
-    icon: React.createElement(LeftArrowIcon, null)
-  }), React.createElement(IconButton, {
-    "aria-label": "next",
-    "data-arrow": "right",
-    "aria-controls": id,
-    onClick: slideNext,
-    icon: React.createElement(RightArrowIcon, null)
-  })), showPaginationBullets && React.createElement("div", {
-    "data-carousel-bullets": true
-  }, React.createElement(Bullets, {
-    tabIndex: 0,
-    totalQuantity: childrenCount,
-    activeBullet: sliderState.currentPage,
-    onClick: (_, idx) => {
-      if (sliderState.sliding) {
-        return;
-      }
-
-      slide(idx, sliderDispatch);
-    },
-    ariaControlsGenerator: idx => `carousel-item-${idx}`,
-    onKeyDown: handleBulletsKeyDown,
-    onFocus: event => {
-      event.currentTarget.focus();
-    }
-  })));
-}
-
-/*
- * Element that will maintain the focus inside trapFocusRef, focus the first element,
- * and focus back on the element that was in focus when useTrapFocus was triggered.
- *
- * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
- */
-
-const useTrapFocus = ({
-  trapFocusRef,
-  beforeElementRef,
-  afterElementRef
-}) => {
-  const tabbableNodesRef = useRef();
-  const nodeToRestoreRef = useRef(document.hasFocus() ? document.activeElement : null); // Focus back on the element that was focused when useTrapFocus is triggered.
-
-  useEffect(() => {
-    const nodeToRestore = nodeToRestoreRef.current;
-    return () => {
-      nodeToRestore == null ? void 0 : nodeToRestore.focus();
-    };
-  }, [nodeToRestoreRef]); // Set focus on first tabbable element
-
-  useEffect(() => {
-    if (!trapFocusRef.current) {
-      return;
-    }
-
-    if (!tabbableNodesRef.current) {
-      tabbableNodesRef.current = tabbable(trapFocusRef.current);
-    }
-
-    const [firstTabbable] = tabbableNodesRef.current;
-
-    if (!firstTabbable) {
-      trapFocusRef.current.focus();
-      return;
-    }
-
-    firstTabbable.focus();
-  }, [trapFocusRef]); // Handle loop focus. Set keydown and focusin event listeners
-
-  useEffect(() => {
-    if (!trapFocusRef.current || !beforeElementRef.current || !afterElementRef.current) {
-      return;
-    }
-
-    const beforeElement = beforeElementRef.current;
-    const afterElement = afterElementRef.current;
-    const trapFocus = trapFocusRef.current;
-
-    const handleLoopFocus = nativeEvent => {
-      if (!document.hasFocus()) {
-        return;
-      }
-
-      tabbableNodesRef.current = tabbable(trapFocusRef.current);
-
-      if (!tabbableNodesRef.current.length) {
-        trapFocus.focus();
-      }
-      /*
-       * Handle loop focus from beforeElementRef. This node can only be focused if the user press shift tab.
-       * It will focus the last element of the trapFocusRef.
-       */
-
-
-      if (nativeEvent.target === beforeElement) {
-        var _tabbableNodesRef$cur;
-
-        (_tabbableNodesRef$cur = tabbableNodesRef.current[tabbableNodesRef.current.length - 1]) == null ? void 0 : _tabbableNodesRef$cur.focus();
-      }
-      /*
-       * Handle loop focus from afterElementRef. This node can only be focused if the user press tab.
-       * It will focus the first element of the trapFocusRef.
-       */
-
-
-      if (nativeEvent.target === afterElement) {
-        var _tabbableNodesRef$cur2;
-
-        (_tabbableNodesRef$cur2 = tabbableNodesRef.current[0]) == null ? void 0 : _tabbableNodesRef$cur2.focus();
-      }
-    };
-
-    beforeElement == null ? void 0 : beforeElement.addEventListener('focusin', handleLoopFocus);
-    afterElement == null ? void 0 : afterElement.addEventListener('focusin', handleLoopFocus);
-    return () => {
-      beforeElement == null ? void 0 : beforeElement.removeEventListener('focusin', handleLoopFocus);
-      afterElement == null ? void 0 : afterElement.removeEventListener('focusin', handleLoopFocus);
-    };
-  }, [tabbableNodesRef, afterElementRef, beforeElementRef, trapFocusRef]);
-};
-
-const ModalContentPure = ({
-  beforeElementRef,
-  trapFocusRef,
-  afterElementRef,
-  testId = 'store-modal-content',
-  children,
-  ...otherProps
-}) => {
-  return React.createElement(React.Fragment, null, React.createElement("div", {
-    ref: beforeElementRef,
-    "data-testid": "beforeElement",
-    tabIndex: 0,
-    "aria-hidden": "true"
-  }), React.createElement("div", Object.assign({
-    "data-store-modal-content": true,
-    "data-testid": testId,
-    ref: trapFocusRef,
-    "aria-modal": "true",
-    role: "dialog",
-    tabIndex: -1
-  }, otherProps), children), React.createElement("div", {
-    ref: afterElementRef,
-    "data-testid": "afterElement",
-    tabIndex: 0,
-    "aria-hidden": "true"
-  }));
-};
-
-const ModalContent = ({
-  children,
-  ...otherProps
-}) => {
-  const trapFocusRef = useRef(null);
-  const beforeElementRef = useRef(null);
-  const afterElementRef = useRef(null);
-  useTrapFocus({
-    beforeElementRef,
-    trapFocusRef,
-    afterElementRef
-  });
-  return React.createElement(ModalContentPure, Object.assign({}, otherProps, {
-    trapFocusRef: trapFocusRef,
-    beforeElementRef: beforeElementRef,
-    afterElementRef: afterElementRef,
-    onClick: event => {
-      event.stopPropagation();
-    }
-  }), children);
-};
-
-/*
- * This component is based on @reach/dialog.
- * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
- * https://reach.tech/dialog
- */
-
-const Modal = ({
-  isOpen,
-  children,
-  onDismiss,
-  testId = 'store-modal',
-  ...otherProps
-}) => {
-  const handleBackdropClick = event => {
-    if (event.defaultPrevented) {
-      return;
-    }
-
-    event.stopPropagation();
-    onDismiss == null ? void 0 : onDismiss(event);
-  };
-
-  const handleBackdropKeyDown = event => {
-    if (event.key !== 'Escape' || event.defaultPrevented) {
-      return;
-    }
-
-    event.stopPropagation();
-    onDismiss == null ? void 0 : onDismiss(event);
-  };
-
-  return isOpen ? createPortal(React.createElement(Overlay, {
-    "data-modal-overlay": true,
-    onClick: handleBackdropClick,
-    onKeyDown: handleBackdropKeyDown
-  }, React.createElement(ModalContent, Object.assign({}, otherProps, {
-    testId: testId
-  }), children)), document.body) : null;
-};
-
-const Banner = /*#__PURE__*/forwardRef(function Banner({
-  testId = 'store-banner',
-  children,
-  variant = 'vertical',
-  ...otherProps
-}, ref) {
-  return React.createElement("article", Object.assign({
-    ref: ref,
-    "data-store-banner": variant,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const BannerImage = /*#__PURE__*/forwardRef(function BannerImage({
-  testId = 'store-banner-image',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-banner-image": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const BannerContent = /*#__PURE__*/forwardRef(function BannerContent({
-  testId = 'store-banner-content',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-banner-content": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const BannerLink = /*#__PURE__*/forwardRef(function BannerLink({
-  testId = 'store-banner-link',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-banner-link": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const PaymentMethods = /*#__PURE__*/forwardRef(function PaymentMethods({
-  testId = 'store-payment-methods',
-  title,
-  'aria-label': ariaLabel = 'Payment Methods',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-store-payment-methods": true,
-    "data-testid": testId
-  }, otherProps), !!title && React.createElement("div", null, title), React.createElement("div", {
-    "data-payment-methods-flags": true,
-    "aria-label": title ? undefined : ariaLabel
-  }, children));
-});
-
-const Divider = ({
-  divider,
-  testId
-}) => {
-  const props = {
-    'data-breadcrumb-divider': true,
-    'aria-hidden': true,
-    'data-testid': `${testId}-divider`
-  };
-
-  if (React.isValidElement(divider)) {
-    return React.cloneElement(divider, props);
-  }
-
-  return React.createElement("span", Object.assign({}, props), divider != null ? divider : '/');
-};
-
-const ListItem = ({
-  children,
-  isLastItem,
-  divider,
-  testId
-}) => {
-  const props = {
-    'data-testid': `${testId}-item`,
-    'data-breadcrumb-item': isLastItem ? 'current' : true,
-    'aria-current': isLastItem ? 'page' : undefined
-  };
-
-  if (!React.isValidElement(children)) {
-    return React.createElement("li", {
-      "data-breadcrumb-list-item": true
-    }, React.createElement("span", Object.assign({}, props), children, isLastItem ? null : React.createElement(Divider, {
-      divider: divider,
-      testId: testId
-    })));
-  }
-
-  return React.createElement("li", {
-    "data-breadcrumb-list-item": true
-  }, React.cloneElement(children, props), isLastItem ? null : React.createElement(Divider, {
-    divider: divider,
-    testId: testId
-  }));
-};
-
-const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
-  children,
-  divider: rawDivider,
-  testId = 'store-breadcrumb',
-  ...otherProps
-}, ref) {
-  return React.createElement("nav", Object.assign({
-    "aria-label": "Breadcrumb",
-    role: "navigation",
-    ref: ref,
-    "data-store-breadcrumb": true,
-    "data-testid": testId
-  }, otherProps), React.createElement(List, {
-    "data-breadcrumb-list": true,
-    variant: "ordered"
-  }, React.Children.toArray(children).map((child, index, childrenArray) => {
-    const isLastItem = index === childrenArray.length - 1;
-    return React.createElement(ListItem, {
-      isLastItem: isLastItem,
-      divider: rawDivider,
-      key: `breadcrumb-${index}`,
-      testId: testId
-    }, child);
-  })));
-});
-
-const LoadingButton = /*#__PURE__*/forwardRef(function LoadingButton({
-  children,
-  loading,
-  testId = 'store-loading-button',
-  ...otherProps
-}, ref) {
-  return React.createElement(Button, Object.assign({
-    ref: ref,
-    "data-store-loading-button": true,
-    testId: testId
-  }, otherProps), loading ? React.createElement(Spinner, null) : children);
-});
-
-const PriceRange = ({
-  className,
-  formatter,
-  max,
-  min,
-  onChange,
-  testId = 'store-price-range',
-  variant,
-  'aria-label': ariaLabel
-}) => {
-  const [minVal, setMinVal] = useState(min);
-  const [maxVal, setMaxVal] = useState(max);
-
-  const handleChange = values => {
-    if (values.min !== minVal) {
-      setMinVal(values.min);
-    }
-
-    if (values.max !== maxVal) {
-      setMaxVal(values.max);
-    }
-
-    onChange == null ? void 0 : onChange(values);
-  };
-
-  return React.createElement("div", {
-    "data-store-price-range": true,
-    "data-testid": testId,
-    className: className
-  }, React.createElement(Slider, {
-    min: min,
-    max: max,
-    onChange: handleChange,
-    "aria-label": ariaLabel
-  }), React.createElement("div", {
-    "data-price-range-values": true
-  }, React.createElement(Price, {
-    formatter: formatter,
-    "data-price-range-value": "min",
-    value: minVal,
-    variant: variant
-  }), React.createElement(Price, {
-    formatter: formatter,
-    "data-price-range-value": "max",
-    value: maxVal,
-    variant: variant
-  })));
-};
-
-const RadioGroupContext = /*#__PURE__*/createContext(undefined);
-function useRadioGroup() {
-  const context = useContext(RadioGroupContext);
-
-  if (!context) {
-    throw new Error(`useRadioOption hook cannot be used outside the RadioGroup context`);
-  }
-
-  return context;
-}
-
-const RadioGroup = ({
-  name,
-  onChange,
-  children,
-  selectedValue
-}) => {
-  const contextValues = React.useMemo(() => {
-    return {
-      name,
-      selectedValue,
-      onChange
-    };
-  }, [name, selectedValue, onChange]);
-  return React.createElement(RadioGroupContext.Provider, {
-    value: contextValues
-  }, children);
-};
-
-const RadioOption = /*#__PURE__*/forwardRef(function RadioOption({
-  label,
-  value,
-  children,
-  testId = 'store-radio-option',
-  ...otherProps
-}, ref) {
-  const {
-    name,
-    selectedValue,
-    onChange
-  } = useRadioGroup();
-  return React.createElement("label", {
-    "aria-label": label,
-    "data-store-radio-option": true
-  }, React.createElement(Radio, Object.assign({
-    "data-store-radio-option-item": true,
-    ref: ref,
-    name: name,
-    checked: value === selectedValue,
-    onChange: onChange,
-    value: value,
-    testId: testId
-  }, otherProps)), children);
-});
-
-const AccordionContext = /*#__PURE__*/createContext(undefined);
-const Accordion = /*#__PURE__*/forwardRef(function Accordion({
-  testId = 'store-accordion',
-  indices,
-  onChange,
-  children,
-  ...otherProps
-}, ref) {
-  const childrenWithIndex = React.Children.map(children, (child, index) => {
-    var _child$props$index;
-
-    return cloneElement(child, {
-      index: (_child$props$index = child.props.index) != null ? _child$props$index : index
-    });
-  });
-  const context = {
-    indices: new Set(indices),
-    onChange,
-    numberOfItems: childrenWithIndex.length
-  };
-  return React.createElement(AccordionContext.Provider, {
-    value: context
-  }, React.createElement("div", Object.assign({
-    ref: ref,
-    "data-store-accordion": true,
-    "data-testid": testId,
-    role: "region"
-  }, otherProps), childrenWithIndex));
-});
-function useAccordion() {
-  const context = useContext(AccordionContext);
-
-  if (context === undefined) {
-    throw new Error('Do not use Accordion components outside the Accordion context.');
-  }
-
-  return context;
-}
-
-const AccordionItemContext = /*#__PURE__*/createContext(undefined);
-const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
-  testId = 'store-accordion-item',
-  children,
-  prefixId = '',
-  index = 0,
-  ...otherProps
-}, ref) {
-  const context = {
-    index,
-    prefixId,
-    panel: `${prefixId && `${prefixId}-`}panel--${index}`,
-    button: `${prefixId && `${prefixId}-`}button--${index}`
-  };
-  return React.createElement(AccordionItemContext.Provider, {
-    value: context
-  }, React.createElement("div", Object.assign({
-    ref: ref,
-    "data-accordion-item": true,
-    "data-testid": testId
-  }, otherProps), children));
-});
-function useAccordionItem() {
-  const context = useContext(AccordionItemContext);
-
-  if (context === undefined) {
-    throw new Error('Do not use AccordionItem components outside the AccordionItem context.');
-  }
-
-  return context;
-}
-
-const AccordionButton = /*#__PURE__*/forwardRef(function AccordionButton({
-  testId = 'store-accordion-button',
-  children,
-  ...otherProps
-}, ref) {
-  const {
-    indices,
-    onChange,
-    numberOfItems
-  } = useAccordion();
-  const {
-    index,
-    panel,
-    button,
-    prefixId
-  } = useAccordionItem();
-
-  const onKeyDown = event => {
-    var _getNext, _getPrevious;
-
-    if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
-      return;
-    }
-
-    const getNext = () => {
-      const next = Number(index) + 1 === numberOfItems ? 0 : Number(index) + 1;
-      return document.getElementById(`${prefixId && `${prefixId}-`}button--${next}`);
-    };
-
-    const getPrevious = () => {
-      const previous = Number(index) - 1 < 0 ? numberOfItems - 1 : Number(index) - 1;
-      return document.getElementById(`${prefixId && `${prefixId}-`}button--${previous}`);
-    };
-
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        (_getNext = getNext()) == null ? void 0 : _getNext.focus();
-        break;
-
-      case 'ArrowUp':
-        event.preventDefault();
-        (_getPrevious = getPrevious()) == null ? void 0 : _getPrevious.focus();
-        break;
-    }
-  };
-
-  return React.createElement(Button, Object.assign({
-    ref: ref,
-    id: button,
-    "aria-expanded": indices.has(index),
-    "aria-controls": panel,
-    "data-accordion-button": true,
-    "data-testid": testId,
-    onKeyDown: onKeyDown,
-    onClick: () => {
-      onChange(index);
-    }
-  }, otherProps), children);
-});
-
-const AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel({
-  testId = 'store-accordion-panel',
-  children,
-  ...otherProps
-}, ref) {
-  const {
-    indices
-  } = useAccordion();
-  const {
-    index,
-    button,
-    panel
-  } = useAccordionItem();
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    id: panel,
-    "aria-labelledby": button,
-    role: "region",
-    "data-accordion-panel": true,
-    "data-testid": testId,
-    hidden: !indices.has(index)
-  }, otherProps), children);
-});
-
-const Table = /*#__PURE__*/forwardRef(function Table({
-  testId = 'store-table',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("table", Object.assign({
-    ref: ref,
-    "data-store-table": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const TableRow = /*#__PURE__*/forwardRef(function TableRow({
-  testId = 'store-table-row',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("tr", Object.assign({
-    ref: ref,
-    "data-table-row": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const TableCell = /*#__PURE__*/forwardRef(function TableCell({
-  testId = 'store-table-cell',
-  children,
-  variant = 'data',
-  scope,
-  ...otherProps
-}, ref) {
-  const Cell = variant === 'header' ? 'th' : 'td';
-  return React.createElement(Cell, Object.assign({
-    ref: ref,
-    "data-table-cell": variant,
-    "data-testid": testId,
-    scope: scope
-  }, otherProps), children);
-});
-
-const TableBody = /*#__PURE__*/forwardRef(function TableBody({
-  children,
-  testId = 'store-table-body',
-  ...otherProps
-}, ref) {
-  return React.createElement("tbody", Object.assign({
-    ref: ref,
-    "data-testid": testId,
-    "data-table-body": true
-  }, otherProps), children);
-});
-
-const TableHead = /*#__PURE__*/forwardRef(function TableHead({
-  children,
-  testId = 'store-table-head',
-  ...otherProps
-}, ref) {
-  return React.createElement("thead", Object.assign({
-    ref: ref,
-    "data-testid": testId,
-    "data-table-head": true
-  }, otherProps), children);
-});
-
-const TableFooter = /*#__PURE__*/forwardRef(function TableFooter({
-  children,
-  testId = 'store-table-footer',
-  ...otherProps
-}, ref) {
-  return React.createElement("tfoot", Object.assign({
-    ref: ref,
-    "data-testid": testId,
-    "data-table-footer": true
-  }, otherProps), children);
-});
-
-const Alert = /*#__PURE__*/forwardRef(function Alert({
-  testId = 'store-alert',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    role: "alert",
-    "data-store-alert": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const QuantitySelector = /*#__PURE__*/forwardRef(function QuantitySelector({
-  quantity,
-  testId = 'store-quantity-selector',
-  leftButtonProps,
-  inputProps,
-  rightButtonProps,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    "data-store-quantity-selector": true,
-    "data-testid": testId,
-    ref: ref
-  }, otherProps), React.createElement(IconButton, Object.assign({
-    "aria-controls": "quantity-selector-input",
-    "aria-label": "Decrement Quantity",
-    "data-quantity-selector-button": "left"
-  }, leftButtonProps)), React.createElement(Input, Object.assign({
-    "aria-label": "Quantity",
-    "data-quantity-selector-input": true,
-    id: "quantity-selector-input",
-    value: quantity
-  }, inputProps)), React.createElement(IconButton, Object.assign({
-    "aria-controls": "quantity-selector-input",
-    "aria-label": "Increment Quantity",
-    "data-quantity-selector-button": "right"
-  }, rightButtonProps)));
-});
-
-const defaultState = {
-  isOpen: false,
-  dropdownButtonRef: null,
-  selectedDropdownItemIndexRef: null,
-  dropdownItemsRef: null,
-  id: 'store-dropdown'
-};
-const DropdownContext = /*#__PURE__*/createContext(defaultState);
-
-const Dropdown = ({
-  children,
-  isOpen: isOpenDefault = false,
-  onDismiss,
-  id = 'store-dropdown'
-}) => {
-  const [isOpen, setIsOpen] = useState(isOpenDefault);
-  const dropdownItemsRef = useRef([]);
-  const selectedDropdownItemIndexRef = useRef(0);
-  const dropdownButtonRef = useRef(null);
-  const close = useCallback(() => {
-    var _dropdownButtonRef$cu;
-
-    setIsOpen(false);
-    onDismiss == null ? void 0 : onDismiss();
-    (_dropdownButtonRef$cu = dropdownButtonRef.current) == null ? void 0 : _dropdownButtonRef$cu.focus();
-  }, [onDismiss]);
-
-  const open = () => {
-    setIsOpen(true);
-  };
-
-  const toggle = useCallback(() => {
-    setIsOpen(old => {
-      if (old) {
-        var _dropdownButtonRef$cu2;
-
-        onDismiss == null ? void 0 : onDismiss();
-        (_dropdownButtonRef$cu2 = dropdownButtonRef.current) == null ? void 0 : _dropdownButtonRef$cu2.focus();
-      }
-
-      return !old;
-    });
-  }, [onDismiss]);
-  useEffect(() => {
-    setIsOpen(isOpenDefault);
-  }, [isOpenDefault]);
-  useEffect(() => {
-    var _dropdownItemsRef$cur;
-
-    isOpen && (dropdownItemsRef == null ? void 0 : (_dropdownItemsRef$cur = dropdownItemsRef.current[0]) == null ? void 0 : _dropdownItemsRef$cur.focus());
-  }, [isOpen]);
-  useEffect(() => {
-    let firstClick = true;
-
-    const event = e => {
-      const someItemWasClicked = dropdownItemsRef == null ? void 0 : dropdownItemsRef.current.some(item => e.target === item);
-
-      if (firstClick) {
-        firstClick = false;
-        return;
-      }
-
-      !someItemWasClicked && close();
-    };
-
-    if (isOpen) {
-      document.addEventListener('click', event);
-    } else {
-      document.removeEventListener('click', event);
-    }
-
-    return () => {
-      document.removeEventListener('click', event);
-    };
-  }, [close, isOpen]);
-  const value = useMemo(() => {
-    return {
-      isOpen,
-      close,
-      open,
-      toggle,
-      dropdownButtonRef,
-      onDismiss,
-      selectedDropdownItemIndexRef,
-      dropdownItemsRef,
-      id
-    };
-  }, [close, id, isOpen, onDismiss, toggle]);
-  return React.createElement(DropdownContext.Provider, {
-    value: value
-  }, children);
-};
-
-/**
- * Hook to use the Dropdown context.
- * @returns Dropdown context.
- */
-
-const useDropdown = () => {
-  const context = useContext(DropdownContext);
-
-  if (context === undefined) {
-    throw new Error('Do not use useDropdown hook outside the Dropdown context.');
-  }
-
-  return context;
-};
-
-const DropdownButton = /*#__PURE__*/forwardRef(function Button({
-  children,
-  testId = 'store-dropdown-button',
-  ...otherProps
-}, ref) {
-  const {
-    toggle,
-    dropdownButtonRef,
-    isOpen,
-    id
-  } = useDropdown();
-  useImperativeHandle(ref, () => dropdownButtonRef.current, [dropdownButtonRef]);
-  return React.createElement("button", Object.assign({
-    "data-store-dropdown-button": true,
-    onClick: toggle,
-    "data-testid": testId,
-    ref: dropdownButtonRef,
-    "aria-expanded": isOpen,
-    "aria-haspopup": "menu",
-    "aria-controls": id
-  }, otherProps), children);
-});
-
-const DropdownItem = /*#__PURE__*/forwardRef(function Button({
-  children,
-  onClick,
-  testId = 'store-dropdown-item',
-  ...otherProps
-}, ref) {
-  const {
-    dropdownItemsRef,
-    selectedDropdownItemIndexRef,
-    close
-  } = useDropdown();
-  const [dropdownItemIndex, setDropdownItemIndex] = useState(0);
-  const dropdownItemRef = useRef();
-
-  const addToRefs = el => {
-    if (el && !(dropdownItemsRef != null && dropdownItemsRef.current.includes(el))) {
-      var _dropdownItemsRef$cur;
-
-      dropdownItemsRef == null ? void 0 : dropdownItemsRef.current.push(el);
-      setDropdownItemIndex((_dropdownItemsRef$cur = dropdownItemsRef == null ? void 0 : dropdownItemsRef.current.findIndex(element => element === el)) != null ? _dropdownItemsRef$cur : 0);
-    }
-
-    dropdownItemRef.current = el;
-  };
-
-  const onFocusItem = () => {
-    var _dropdownItemsRef$cur2;
-
-    selectedDropdownItemIndexRef.current = dropdownItemIndex;
-    dropdownItemsRef == null ? void 0 : (_dropdownItemsRef$cur2 = dropdownItemsRef.current[selectedDropdownItemIndexRef.current]) == null ? void 0 : _dropdownItemsRef$cur2.focus();
-  };
-
-  const handleOnClickItem = event => {
-    onClick == null ? void 0 : onClick(event);
-    close == null ? void 0 : close();
-  };
-
-  useImperativeHandle(ref, () => dropdownItemRef.current, []);
-  return React.createElement("button", Object.assign({
-    "data-store-dropdown-item": true,
-    "data-testid": testId,
-    ref: addToRefs,
-    onFocus: onFocusItem,
-    onMouseEnter: onFocusItem,
-    onClick: handleOnClickItem,
-    role: "menuitem",
-    tabIndex: -1,
-    "data-index": dropdownItemIndex
-  }, otherProps), children);
-});
-
-/**
- * Hook used to find the DropdownMenu position in relation to DropdownButton
- * @returns Style with positions.
- */
-
-const useDropdownPosition = () => {
-  var _dropdownButtonRef$cu, _buttonRect$top, _buttonRect$height, _buttonRect$left, _document, _document$documentEle, _document2, _document2$documentEl;
-
-  const {
-    dropdownButtonRef
-  } = useDropdown(); // Necessary to use this component in SSR
-
-  const isBrowser = typeof window !== 'undefined';
-  const buttonRect = dropdownButtonRef == null ? void 0 : (_dropdownButtonRef$cu = dropdownButtonRef.current) == null ? void 0 : _dropdownButtonRef$cu.getBoundingClientRect();
-  const topLevel = (_buttonRect$top = buttonRect == null ? void 0 : buttonRect.top) != null ? _buttonRect$top : 0;
-  const topOffset = (_buttonRect$height = buttonRect == null ? void 0 : buttonRect.height) != null ? _buttonRect$height : 0;
-  const leftLevel = (_buttonRect$left = buttonRect == null ? void 0 : buttonRect.left) != null ? _buttonRect$left : 0; // The scroll properties fix the position of DropdownMenu when the scroll is activated.
-
-  const scrollTop = isBrowser ? (_document = document) == null ? void 0 : (_document$documentEle = _document.documentElement) == null ? void 0 : _document$documentEle.scrollTop : 0;
-  const scrollLeft = isBrowser ? (_document2 = document) == null ? void 0 : (_document2$documentEl = _document2.documentElement) == null ? void 0 : _document2$documentEl.scrollLeft : 0;
-  const topPosition = topLevel + topOffset + scrollTop;
-  const leftPosition = leftLevel + scrollLeft;
-  return {
-    position: 'absolute',
-    top: topPosition,
-    left: leftPosition
-  };
-};
-
-/*
- * This component is based on @reach/dialog.
- * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
- * https://reach.tech/dialog
- */
-
-const DropdownMenu = ({
-  children,
-  testId = 'store-dropdown-menu',
-  style,
-  ...otherProps
-}) => {
-  const {
-    isOpen,
-    close,
-    dropdownItemsRef,
-    selectedDropdownItemIndexRef,
-    id
-  } = useDropdown();
-  const dropdownPosition = useDropdownPosition();
-  const childrenLength = React.Children.toArray(children).length;
-
-  const handleDownPress = () => {
-    var _dropdownItemsRef$cur;
-
-    if (selectedDropdownItemIndexRef.current < childrenLength - 1) {
-      selectedDropdownItemIndexRef.current++;
-    } else {
-      selectedDropdownItemIndexRef.current = 0;
-    }
-
-    dropdownItemsRef == null ? void 0 : (_dropdownItemsRef$cur = dropdownItemsRef.current[selectedDropdownItemIndexRef.current]) == null ? void 0 : _dropdownItemsRef$cur.focus();
-  };
-
-  const handleUpPress = () => {
-    var _dropdownItemsRef$cur2;
-
-    if (selectedDropdownItemIndexRef.current > 0) {
-      selectedDropdownItemIndexRef.current--;
-    } else {
-      selectedDropdownItemIndexRef.current = childrenLength - 1;
-    }
-
-    dropdownItemsRef == null ? void 0 : (_dropdownItemsRef$cur2 = dropdownItemsRef.current[selectedDropdownItemIndexRef.current]) == null ? void 0 : _dropdownItemsRef$cur2.focus();
-  };
-
-  const handleHomePress = () => {
-    var _dropdownItemsRef$cur3;
-
-    selectedDropdownItemIndexRef.current = 0;
-    dropdownItemsRef == null ? void 0 : (_dropdownItemsRef$cur3 = dropdownItemsRef.current[selectedDropdownItemIndexRef.current]) == null ? void 0 : _dropdownItemsRef$cur3.focus();
-  };
-
-  const handleEndPress = () => {
-    var _dropdownItemsRef$cur4;
-
-    selectedDropdownItemIndexRef.current = childrenLength - 1;
-    dropdownItemsRef == null ? void 0 : (_dropdownItemsRef$cur4 = dropdownItemsRef.current[selectedDropdownItemIndexRef.current]) == null ? void 0 : _dropdownItemsRef$cur4.focus();
-  };
-
-  const handleEscapePress = () => {
-    close == null ? void 0 : close();
-  };
-
-  const handleBackdropKeyDown = event => {
-    if (event.defaultPrevented || event.key === 'Enter') {
-      return;
-    }
-
-    event.preventDefault();
-    event.key === 'Escape' && handleEscapePress();
-    event.key === 'ArrowDown' && handleDownPress();
-    event.key === 'ArrowUp' && handleUpPress();
-    event.key === 'Home' && handleHomePress();
-    event.key === 'End' && handleEndPress();
-    event.stopPropagation();
-  };
-
-  const clearChildrenReferences = () => {
-    dropdownItemsRef.current = [];
-    return null;
-  };
-
-  return isOpen ? createPortal(React.createElement("div", {
-    role: "presentation",
-    "data-store-dropdown-overlay": true,
-    onKeyDown: handleBackdropKeyDown,
-    "data-testid": `${testId}-overlay`
-  }, React.createElement("div", Object.assign({
-    role: "menu",
-    "aria-orientation": "vertical",
-    "data-store-dropdown-menu": true,
-    "data-testid": testId,
-    style: { ...dropdownPosition,
-      ...style
-    },
-    id: id
-  }, otherProps), children)), document.body) : clearChildrenReferences();
-};
-
-const OutOfStock = ({
-  testId = 'store-out-of-stock',
-  children,
-  ...otherProps
-}) => {
-  return React.createElement("section", {
-    "data-store-out-of-stock": true,
-    "data-testid": testId
-  }, React.createElement(Form, Object.assign({
-    "data-out-of-stock-form": true,
-    testId: `${testId}-form`
-  }, otherProps), children));
-};
-
-const OutOfStockMessage = ({
-  as: MessageComponent = 'p',
-  testId = 'store-out-of-stock-message',
-  children,
-  ...otherProps
-}) => {
-  return React.createElement(MessageComponent, Object.assign({
-    "data-out-of-stock-message": true,
-    "data-testid": testId
-  }, otherProps), children);
-};
-
-const OutOfStockTitle = ({
-  as: TitleComponent = 'h2',
-  testId = 'store-out-of-stock-title',
-  children,
-  ...otherProps
-}) => {
-  return React.createElement(TitleComponent, Object.assign({
-    "data-out-of-stock-title": true,
-    "data-testid": testId
-  }, otherProps), children);
-};
-
-const Hero = /*#__PURE__*/forwardRef(function Hero({
-  testId = 'store-hero',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("article", Object.assign({
-    ref: ref,
-    "data-store-hero": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const HeroImage = /*#__PURE__*/forwardRef(function HeroImage({
-  testId = 'store-hero-image',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("div", Object.assign({
-    ref: ref,
-    "data-hero-image": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-const HeroHeading = /*#__PURE__*/forwardRef(function HeroHeading({
-  testId = 'store-hero-heading',
-  children,
-  ...otherProps
-}, ref) {
-  return React.createElement("header", Object.assign({
-    ref: ref,
-    "data-hero-heading": true,
-    "data-testid": testId
-  }, otherProps), children);
-});
-
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, Badge, Banner, BannerContent, BannerImage, BannerLink, Breadcrumb, Bullets, Button, Card, CardActions, CardContent, CardImage, Carousel, Checkbox, Dropdown, DropdownButton, DropdownItem, DropdownMenu, Form, Hero, HeroHeading, HeroImage, Icon, IconButton, Incentive, Input, Label, Link, List, LoadingButton, Modal, OutOfStock, OutOfStockMessage, OutOfStockTitle, Overlay, PaymentMethods, Popover, Price, PriceRange, ProductCard, ProductCardActions, ProductCardContent, ProductCardImage, QuantitySelector, Radio, RadioGroup, RadioOption, SearchInput, Select, Skeleton, Slider, Spinner, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, TextArea, useSlider };
-//# sourceMappingURL=ui.esm.js.map