@audius/harmony 0.0.28 → 0.0.33

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  forwardRef,\n  MouseEventHandler,\n  useRef\n} from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\nimport { capitalize } from 'lodash'\nimport uniqueId from 'lodash/uniqueId'\nimport ReactDOM from 'react-dom'\n// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web\nimport { animated, useTransition } from 'react-spring'\nimport { useEffectOnce } from 'react-use'\n\nimport { useHotkeys, useScrollLock, useClickOutside } from '../../hooks'\nimport { IconClose } from '../../icons'\n\nimport styles from './Modal.module.css'\nimport { ModalContext } from './ModalContext'\nimport { findAncestor } from './findAncestor'\nimport { useModalScrollCount } from './hooks'\nimport { ModalProps, Anchor } from './types'\n\nconst rootContainer = 'modalRootContainer'\nconst rootId = 'modalRoot'\nconst bgId = 'bgModal'\nconst wrapperClass = 'modalWrapper'\n\nconst anchorStyleMap = {\n  [Anchor.TOP]: styles.top,\n  [Anchor.CENTER]: styles.center,\n  [Anchor.BOTTOM]: styles.bottom\n}\n\nconst anchorPropertyMap = {\n  [Anchor.TOP]: 'marginTop',\n  [Anchor.CENTER]: 'marginTop',\n  [Anchor.BOTTOM]: 'marginBottom'\n}\n\nconst getOffset = (anchor: Anchor, verticalAnchorOffset: number) => {\n  return { [anchorPropertyMap[anchor]]: verticalAnchorOffset }\n}\n\nconst useModalRoot = (id: string, zIndex?: number) => {\n  const [modalRoot, setModalRoot] = useState<HTMLElement | null>(null)\n  const [modalBg, setModalBg] = useState<HTMLElement | null>(null)\n\n  useEffect(() => {\n    const uniqueRootId = `${id}-${rootId}`\n    const uniqueBgId = `${id}-${bgId}`\n    const uniqueRootContainerId = `${id}-${rootContainer}`\n    let el = document.getElementById(uniqueRootId)\n    let bgEl = document.getElementById(uniqueBgId)\n    let container = document.getElementById(uniqueRootContainerId)\n\n    if (!bgEl) {\n      bgEl = document.createElement('div')\n      bgEl.id = uniqueBgId\n      bgEl.classList.add(bgId)\n      document.body.appendChild(bgEl)\n    }\n\n    if (!container) {\n      container = document.createElement('div')\n      container.id = uniqueRootContainerId\n      container.classList.add(rootContainer)\n      document.body.appendChild(container)\n    }\n\n    if (!el) {\n      el = document.createElement('div')\n      el.id = uniqueRootId\n      el.classList.add(rootId)\n      container.appendChild(el)\n    }\n\n    if (zIndex) {\n      container.style.zIndex = `${zIndex}`\n      el.style.zIndex = `${zIndex}`\n      bgEl.style.zIndex = `${zIndex - 1}`\n    }\n\n    setModalRoot(el)\n    setModalBg(bgEl)\n  }, [id, zIndex])\n\n  return [modalRoot, modalBg]\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  {\n    'aria-describedby': ariaDescribedbyProp,\n    'aria-labelledby': ariaLabelledbyProp,\n    modalKey,\n    children,\n    onClose,\n    onClosed,\n    isOpen,\n    wrapperClassName,\n    bodyClassName,\n    titleClassName,\n    subtitleClassName,\n    headerContainerClassName,\n    anchor = Anchor.CENTER,\n    subtitle,\n    verticalAnchorOffset = 0,\n    horizontalPadding = 8,\n    contentHorizontalPadding = 0,\n    allowScroll = false,\n    title = '',\n    showTitleHeader = false,\n    dismissOnClickOutside = true,\n    showDismissButton = false,\n    zIndex,\n    size\n  },\n  ref\n) {\n  useEffectOnce(() => {\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'development'\n    ) {\n      if (\n        subtitle ||\n        title ||\n        showTitleHeader ||\n        titleClassName ||\n        subtitleClassName ||\n        headerContainerClassName ||\n        showDismissButton\n      ) {\n        console.warn(\n          'Header and title-related props of `Modal` have been deprecated. Use the `ModalHeader` sub-component instead.'\n        )\n      }\n\n      if (allowScroll !== undefined) {\n        console.warn('`allowScroll` prop of `Modal` has been deprecated.')\n      }\n    }\n  })\n\n  const { spring } = useTheme()\n  const id = useMemo(() => modalKey || uniqueId('modal-'), [modalKey])\n  const titleId = ariaLabelledbyProp || `${id}-title`\n  const subtitleId = ariaDescribedbyProp || `${id}-subtitle`\n  const [isDoneOpening, setIsDoneOpening] = useState(false)\n  const modalContextValue = useMemo(() => {\n    return { titleId, subtitleId, onClose, isDoneOpening }\n  }, [titleId, subtitleId, onClose, isDoneOpening])\n\n  const onTouchMove = useCallback(\n    (e: any) => {\n      !allowScroll && e.preventDefault()\n    },\n    [allowScroll]\n  )\n\n  const [modalRoot, bgModal] = useModalRoot(id, zIndex)\n  const [isDestroyed, setIsDestroyed] = useState(isOpen)\n  const { incrementScrollCount, decrementScrollCount } = useModalScrollCount()\n  useScrollLock(isDestroyed, incrementScrollCount, decrementScrollCount)\n\n  useEffect(() => {\n    if (isOpen) setIsDestroyed(true)\n  }, [isOpen])\n\n  useEffect(() => {\n    if (isOpen) {\n      if (bgModal) {\n        bgModal.classList.add('bgModalVisible')\n      }\n\n      // Need to prevent safari iOS bounce\n      // overscroll effect by intercepting\n      // touchmove events.\n      if (modalRoot) modalRoot.addEventListener('touchmove', onTouchMove)\n      return () => {\n        if (bgModal) bgModal.classList.remove('bgModalVisible')\n      }\n    }\n    if (bgModal) bgModal.classList.remove('bgModalVisible')\n    if (modalRoot) modalRoot.removeEventListener('touchmove', onTouchMove)\n    return () => {}\n  }, [isOpen, bgModal, onTouchMove, modalRoot])\n\n  const transition = useTransition(isOpen, null, {\n    from: { transform: 'scale(0)', opacity: 0 },\n    // @ts-ignore function is a valid value for enter, but the types don't acknowledge that\n    enter:\n      (item: boolean) =>\n      async (\n        next: (props: { transform: string; opacity: number }) => Promise<void>\n      ) => {\n        await next({ transform: 'scale(1)', opacity: 1 })\n        if (item) {\n          setImmediate(() => setIsDoneOpening(true))\n        }\n      },\n    leave: { transform: 'scale(0)', opacity: 0 },\n    unique: true,\n    config: spring.standard,\n    onDestroyed: () => {\n      if (!isOpen) {\n        setIsDestroyed(false)\n        setIsDoneOpening(false)\n        if (onClosed) {\n          onClosed()\n        }\n      }\n    }\n  })\n\n  const modalContentClickedRef = useRef<boolean>(false)\n  const outsideClickRef = useClickOutside(\n    onClose,\n    // Check to see if the click outside is not another modal wrapper.\n    // If it is, that means we have a nested modal situation and shouldn't\n    // dismiss \"this\" modal. We let the useClickOutside in \"that\" modal to\n    // dismiss it.\n    (e: EventTarget) => {\n      // Only close if we're open.\n      // Closing when we're not open can cause a race condition when opened\n      // via a click since this handler exists prior to visibility,\n      // causing the modal to open and close immediately\n      if (!isOpen || modalContentClickedRef?.current) {\n        modalContentClickedRef.current = false\n        return true\n      }\n      if (e instanceof Element) {\n        const modalElement = findAncestor(e, `.${wrapperClass}`)\n        if (!modalElement) {\n          return false\n        }\n        const isModalWrapper = modalElement.classList.contains(wrapperClass)\n        const isThisModalWrapper = modalElement.classList.contains(\n          `${wrapperClass}-${id}`\n        )\n        return isModalWrapper && !isThisModalWrapper\n      }\n      return false\n    },\n    isOpen\n  )\n\n  const handleEscape = useCallback(() => {\n    if (isOpen) onClose()\n  }, [isOpen, onClose])\n\n  useHotkeys({ 27 /* escape */: handleEscape })\n\n  const wrapperClassNames = cn(\n    styles.wrapper,\n    anchorStyleMap[anchor],\n    {\n      [wrapperClassName!]: !!wrapperClassName\n    },\n    wrapperClass,\n    // Add a unique id class name to detect whether, if we're using\n    // click outside to dismiss the modal, the correct \"outside\" is being clicked.\n    `${wrapperClass}-${id}`\n  )\n\n  const wrapperStyle = {\n    paddingLeft: `${horizontalPadding}px`,\n    paddingRight: `${horizontalPadding}px`\n  }\n\n  /** Begin @deprecated section (favor using ModalContent sub-component)  */\n  const bodyStyle = {\n    paddingLeft: `${contentHorizontalPadding}px`,\n    paddingRight: `${contentHorizontalPadding}px`\n  }\n  /** End @deprecated section  */\n\n  const bodyClassNames = cn(styles.body, {\n    [styles.noScroll!]: !allowScroll,\n    [styles[`size${capitalize(size)}`]]: size,\n    [bodyClassName!]: !!bodyClassName\n  })\n\n  const headerContainerClassNames = cn(styles.headerContainer, {\n    [headerContainerClassName!]: !!headerContainerClassName\n  })\n\n  const [height, setHeight] = useState(\n    typeof window !== 'undefined' ? window.innerHeight : 0\n  )\n\n  useEffect(() => {\n    const onResize = () => {\n      setHeight(window.innerHeight)\n    }\n    window.addEventListener('resize', onResize)\n    return () => {\n      window.removeEventListener('resize', onResize)\n    }\n  }, [setHeight])\n\n  const bodyOffset = getOffset(anchor, verticalAnchorOffset)\n\n  const handleModalContentClicked: MouseEventHandler = () => {\n    modalContentClickedRef.current = true\n  }\n  return (\n    <>\n      {modalRoot &&\n        ReactDOM.createPortal(\n          <>\n            {transition.map(\n              ({ item, props, key }) =>\n                item && (\n                  <animated.div\n                    className={wrapperClassNames}\n                    style={{\n                      ...wrapperStyle,\n                      opacity: props.opacity,\n                      height,\n                      minHeight: height\n                    }}\n                    key={key}\n                    ref={ref}\n                  >\n                    <animated.div\n                      ref={dismissOnClickOutside ? outsideClickRef : null}\n                      className={bodyClassNames}\n                      style={{ ...props, ...bodyOffset, ...bodyStyle }}\n                      role='dialog'\n                      aria-labelledby={titleId}\n                      aria-describedby={subtitleId}\n                      onClick={handleModalContentClicked}\n                    >\n                      <>\n                        {/** Begin @deprecated section (moved to ModalHeader and ModalTitle sub-components)  */}\n                        {showTitleHeader && (\n                          <div className={headerContainerClassNames}>\n                            {showDismissButton && (\n                              <div\n                                className={styles.dismissButton}\n                                onClick={onClose}\n                              >\n                                <IconClose color='subdued' size='s' />\n                              </div>\n                            )}\n                            <div\n                              id={titleId}\n                              className={cn(styles.header, titleClassName)}\n                            >\n                              {title}\n                            </div>\n                            <div\n                              id={subtitleId}\n                              className={cn(styles.subtitle, subtitleClassName)}\n                            >\n                              {subtitle}\n                            </div>\n                          </div>\n                        )}\n                        {/** End @deprecated section  */}\n                        <ModalContext.Provider value={modalContextValue}>\n                          {children}\n                        </ModalContext.Provider>\n                      </>\n                    </animated.div>\n                  </animated.div>\n                )\n            )}\n          </>,\n          modalRoot\n        )}\n    </>\n  )\n})\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  forwardRef,\n  MouseEventHandler,\n  useRef\n} from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\nimport { capitalize } from 'lodash'\nimport uniqueId from 'lodash/uniqueId'\nimport ReactDOM from 'react-dom'\n// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web\nimport { animated, useTransition } from 'react-spring'\nimport { useEffectOnce } from 'react-use'\n\nimport { ModalState } from 'utils/modalState'\n\nimport { useHotkeys, useScrollLock, useClickOutside } from '../../hooks'\nimport { IconClose } from '../../icons'\n\nimport styles from './Modal.module.css'\nimport { ModalContext } from './ModalContext'\nimport { findAncestor } from './findAncestor'\nimport { useModalScrollCount } from './hooks'\nimport { ModalProps, Anchor } from './types'\n\nconst rootContainer = 'modalRootContainer'\nconst rootId = 'modalRoot'\nconst bgId = 'bgModal'\nconst wrapperClass = 'modalWrapper'\n\nconst anchorStyleMap = {\n  [Anchor.TOP]: styles.top,\n  [Anchor.CENTER]: styles.center,\n  [Anchor.BOTTOM]: styles.bottom\n}\n\nconst anchorPropertyMap = {\n  [Anchor.TOP]: 'marginTop',\n  [Anchor.CENTER]: 'marginTop',\n  [Anchor.BOTTOM]: 'marginBottom'\n}\n\nconst getOffset = (anchor: Anchor, verticalAnchorOffset: number) => {\n  return { [anchorPropertyMap[anchor]]: verticalAnchorOffset }\n}\n\nconst useModalRoot = (id: string, isOpen: boolean, zIndex?: number) => {\n  const [modalRoot, setModalRoot] = useState<HTMLElement | null>(null)\n  const [modalBg, setModalBg] = useState<HTMLElement | null>(null)\n\n  useEffect(() => {\n    const uniqueRootId = `${id}-${rootId}`\n    const uniqueBgId = `${id}-${bgId}`\n    const uniqueRootContainerId = `${id}-${rootContainer}`\n    let el = document.getElementById(uniqueRootId)\n    let bgEl = document.getElementById(uniqueBgId)\n    let container = document.getElementById(uniqueRootContainerId)\n\n    if (!isOpen) {\n      if (bgEl) {\n        document.body.removeChild(bgEl)\n      }\n      if (el && container) {\n        container.removeChild(el)\n      }\n\n      if (container) {\n        document.body.removeChild(container)\n      }\n\n      return\n    }\n\n    if (!bgEl) {\n      bgEl = document.createElement('div')\n      bgEl.id = uniqueBgId\n      bgEl.classList.add(bgId)\n      document.body.appendChild(bgEl)\n    }\n\n    if (!container) {\n      container = document.createElement('div')\n      container.id = uniqueRootContainerId\n      container.classList.add(rootContainer)\n      document.body.appendChild(container)\n    }\n\n    if (!el) {\n      el = document.createElement('div')\n      el.id = uniqueRootId\n      el.classList.add(rootId)\n      container.appendChild(el)\n    }\n\n    if (zIndex) {\n      container.style.zIndex = `${zIndex}`\n      el.style.zIndex = `${zIndex}`\n      bgEl.style.zIndex = `${zIndex - 1}`\n    }\n\n    setModalRoot(el)\n    setModalBg(bgEl)\n  }, [id, zIndex, isOpen])\n\n  return [modalRoot, modalBg]\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  {\n    'aria-describedby': ariaDescribedbyProp,\n    'aria-labelledby': ariaLabelledbyProp,\n    modalKey,\n    children,\n    onClose,\n    onClosed,\n    isOpen: isOpenProp,\n    wrapperClassName,\n    bodyClassName,\n    titleClassName,\n    subtitleClassName,\n    headerContainerClassName,\n    anchor = Anchor.CENTER,\n    subtitle,\n    verticalAnchorOffset = 0,\n    horizontalPadding = 8,\n    contentHorizontalPadding = 0,\n    allowScroll = false,\n    title = '',\n    showTitleHeader = false,\n    dismissOnClickOutside = true,\n    showDismissButton = false,\n    zIndex,\n    size\n  },\n  ref\n) {\n  useEffectOnce(() => {\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'development'\n    ) {\n      if (\n        subtitle ||\n        title ||\n        showTitleHeader ||\n        titleClassName ||\n        subtitleClassName ||\n        headerContainerClassName ||\n        showDismissButton\n      ) {\n        console.warn(\n          'Header and title-related props of `Modal` have been deprecated. Use the `ModalHeader` sub-component instead.'\n        )\n      }\n\n      if (allowScroll !== undefined) {\n        console.warn('`allowScroll` prop of `Modal` has been deprecated.')\n      }\n    }\n  })\n\n  const [modalState, setModalState] = useState<ModalState>('closed')\n  const isOpen = modalState !== 'closed'\n  const isDoneOpening = modalState === 'open'\n  const { spring } = useTheme()\n  const id = useMemo(() => modalKey || uniqueId('modal-'), [modalKey])\n  const titleId = ariaLabelledbyProp || `${id}-title`\n  const subtitleId = ariaDescribedbyProp || `${id}-subtitle`\n  const modalContextValue = useMemo(() => {\n    return { titleId, subtitleId, onClose, isDoneOpening }\n  }, [titleId, subtitleId, onClose, isDoneOpening])\n\n  const onTouchMove = useCallback(\n    (e: any) => {\n      !allowScroll && e.preventDefault()\n    },\n    [allowScroll]\n  )\n\n  const [modalRoot, bgModal] = useModalRoot(id, isOpen, zIndex)\n  const { incrementScrollCount, decrementScrollCount } = useModalScrollCount()\n  useScrollLock(isOpen, incrementScrollCount, decrementScrollCount)\n\n  useEffect(() => {\n    if (modalState === 'closed' && isOpenProp) {\n      setModalState('opening')\n    } else if (modalState === 'open' && !isOpenProp) {\n      setModalState('closing')\n    }\n  }, [isOpenProp, modalState])\n\n  useEffect(() => {\n    if (isOpen) {\n      if (bgModal) {\n        bgModal.classList.add('bgModalVisible')\n      }\n\n      // Need to prevent safari iOS bounce\n      // overscroll effect by intercepting\n      // touchmove events.\n      if (modalRoot) modalRoot.addEventListener('touchmove', onTouchMove)\n      return () => {\n        if (bgModal) bgModal.classList.remove('bgModalVisible')\n      }\n    }\n    if (bgModal) bgModal.classList.remove('bgModalVisible')\n    if (modalRoot) modalRoot.removeEventListener('touchmove', onTouchMove)\n    return () => {}\n  }, [isOpen, bgModal, onTouchMove, modalRoot])\n\n  const transition = useTransition(isOpenProp, null, {\n    from: { transform: 'scale(0)', opacity: 0 },\n    // @ts-ignore function is a valid value for enter, but the types don't acknowledge that\n    enter:\n      () =>\n      async (\n        next: (props: { transform: string; opacity: number }) => Promise<void>\n      ) => {\n        await next({ transform: 'scale(1)', opacity: 1 })\n      },\n    leave: { transform: 'scale(0)', opacity: 0 },\n    unique: true,\n    config: spring.standard,\n    onDestroyed: (isDestroyed) => {\n      setModalState(isDestroyed ? 'closed' : 'open')\n      if (isDestroyed) {\n        onClosed?.()\n      }\n    }\n  })\n\n  const modalContentClickedRef = useRef<boolean>(false)\n  const outsideClickRef = useClickOutside(\n    onClose,\n    // Check to see if the click outside is not another modal wrapper.\n    // If it is, that means we have a nested modal situation and shouldn't\n    // dismiss \"this\" modal. We let the useClickOutside in \"that\" modal to\n    // dismiss it.\n    (e: EventTarget) => {\n      // Only close if we're open.\n      // Closing when we're not open can cause a race condition when opened\n      // via a click since this handler exists prior to visibility,\n      // causing the modal to open and close immediately\n      if (!isOpen || modalContentClickedRef?.current) {\n        modalContentClickedRef.current = false\n        return true\n      }\n      if (e instanceof Element) {\n        const modalElement = findAncestor(e, `.${wrapperClass}`)\n        if (!modalElement) {\n          return false\n        }\n        const isModalWrapper = modalElement.classList.contains(wrapperClass)\n        const isThisModalWrapper = modalElement.classList.contains(\n          `${wrapperClass}-${id}`\n        )\n        return isModalWrapper && !isThisModalWrapper\n      }\n      return false\n    },\n    isOpen\n  )\n\n  const handleEscape = useCallback(() => {\n    if (isOpen) onClose()\n  }, [isOpen, onClose])\n\n  useHotkeys({ 27 /* escape */: handleEscape })\n\n  const wrapperClassNames = cn(\n    styles.wrapper,\n    anchorStyleMap[anchor],\n    {\n      [wrapperClassName!]: !!wrapperClassName\n    },\n    wrapperClass,\n    // Add a unique id class name to detect whether, if we're using\n    // click outside to dismiss the modal, the correct \"outside\" is being clicked.\n    `${wrapperClass}-${id}`\n  )\n\n  const wrapperStyle = {\n    paddingLeft: `${horizontalPadding}px`,\n    paddingRight: `${horizontalPadding}px`\n  }\n\n  /** Begin @deprecated section (favor using ModalContent sub-component)  */\n  const bodyStyle = {\n    paddingLeft: `${contentHorizontalPadding}px`,\n    paddingRight: `${contentHorizontalPadding}px`\n  }\n  /** End @deprecated section  */\n\n  const bodyClassNames = cn(styles.body, {\n    [styles.noScroll!]: !allowScroll,\n    [styles[`size${capitalize(size)}`]]: size,\n    [bodyClassName!]: !!bodyClassName\n  })\n\n  const headerContainerClassNames = cn(styles.headerContainer, {\n    [headerContainerClassName!]: !!headerContainerClassName\n  })\n\n  const [height, setHeight] = useState(\n    typeof window !== 'undefined' ? window.innerHeight : 0\n  )\n\n  useEffect(() => {\n    const onResize = () => {\n      setHeight(window.innerHeight)\n    }\n    window.addEventListener('resize', onResize)\n    return () => {\n      window.removeEventListener('resize', onResize)\n    }\n  }, [setHeight])\n\n  const bodyOffset = getOffset(anchor, verticalAnchorOffset)\n\n  const handleModalContentClicked: MouseEventHandler = () => {\n    modalContentClickedRef.current = true\n  }\n\n  return (\n    <>\n      {modalRoot && isOpen\n        ? ReactDOM.createPortal(\n            <>\n              {transition.map(\n                ({ item, props, key }) =>\n                  item && (\n                    <animated.div\n                      className={wrapperClassNames}\n                      style={{\n                        ...wrapperStyle,\n                        opacity: props.opacity,\n                        height,\n                        minHeight: height\n                      }}\n                      key={key}\n                      ref={ref}\n                    >\n                      <animated.div\n                        ref={dismissOnClickOutside ? outsideClickRef : null}\n                        className={bodyClassNames}\n                        style={{ ...props, ...bodyOffset, ...bodyStyle }}\n                        role='dialog'\n                        aria-labelledby={titleId}\n                        aria-describedby={subtitleId}\n                        onClick={handleModalContentClicked}\n                      >\n                        <>\n                          {/** Begin @deprecated section (moved to ModalHeader and ModalTitle sub-components)  */}\n                          {showTitleHeader && (\n                            <div className={headerContainerClassNames}>\n                              {showDismissButton && (\n                                <div\n                                  className={styles.dismissButton}\n                                  onClick={onClose}\n                                >\n                                  <IconClose color='subdued' size='s' />\n                                </div>\n                              )}\n                              <div\n                                id={titleId}\n                                className={cn(styles.header, titleClassName)}\n                              >\n                                {title}\n                              </div>\n                              <div\n                                id={subtitleId}\n                                className={cn(\n                                  styles.subtitle,\n                                  subtitleClassName\n                                )}\n                              >\n                                {subtitle}\n                              </div>\n                            </div>\n                          )}\n                          {/** End @deprecated section  */}\n                          <ModalContext.Provider value={modalContextValue}>\n                            {children}\n                          </ModalContext.Provider>\n                        </>\n                      </animated.div>\n                    </animated.div>\n                  )\n              )}\n            </>,\n            modalRoot\n          )\n        : null}\n    </>\n  )\n})\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/dist/components/popup-menu/PopupMenu.js

@@ -40,7 +40,7 @@ var PopupMenu = forwardRef(function PopupMenu(props, ref) {
                         return clickInsideRef.current.contains(target);
                     }
                     return false;
-                }, isVisible: isPopupVisible, showHeader: Boolean(title), hideCloseButton: hideCloseButton, onClose: handlePopupClose, ref: ref, title: title || '', zIndex: zIndex, containerRef: containerRef, transformOrigin: transformOrigin, anchorOrigin: anchorOrigin, className: cn(styles.popup, className), dismissOnMouseLeave: dismissOnMouseLeave, fixed: fixed }, { children: renderMenu ? (renderMenu(items)) : (jsx("ul", __assign({ className: styles.menu, role: 'menu', "aria-labelledby": triggerId, tabIndex: -1 }, { children: items.map(function (item, i) { return (jsxs("li", __assign({ role: 'menuitem', className: cn(styles.item, item.className), onClick: handleMenuItemClick(item), tabIndex: i === 0 ? 0 : -1 }, { children: [item.icon && (jsx("div", __assign({ className: cn(styles.icon, item.iconClassName) }, { children: item.icon }))), item.text] }), typeof item.text === 'string' ? item.text : i)); }) }))) }))] })));
+                }, isVisible: isPopupVisible, showHeader: Boolean(title), hideCloseButton: hideCloseButton, onClose: handlePopupClose, ref: ref, title: title || '', zIndex: zIndex, containerRef: containerRef, transformOrigin: transformOrigin, anchorOrigin: anchorOrigin, className: cn(styles.popup, className), dismissOnMouseLeave: dismissOnMouseLeave, fixed: fixed }, { children: renderMenu ? (renderMenu(items)) : (jsx("ul", __assign({ className: styles.menu, role: 'menu', "aria-labelledby": triggerId, tabIndex: -1 }, { children: items.map(function (item, i) { return (jsxs("li", __assign({ role: 'menuitem', className: cn(styles.item, item.className), onClick: handleMenuItemClick(item), tabIndex: i === 0 ? 0 : -1 }, { children: [item.icon ? (jsx("div", __assign({ className: cn(styles.icon, item.iconClassName) }, { children: item.icon }))) : null, item.text] }), typeof item.text === 'string' ? item.text : i)); }) }))) }))] })));
 });
 
 export { PopupMenu };

package/dist/components/popup-menu/PopupMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupMenu.js","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'\n\nimport cn from 'classnames'\n\nimport { Popup } from '../layout/Popup'\n\nimport styles from './PopupMenu.module.css'\nimport { PopupMenuItem, PopupMenuProps } from './types'\n\n/**\n * A menu that shows on top of the UI. Ideal for overflow menus, dropdowns, etc\n */\nexport const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(\n  function PopupMenu(props, ref) {\n    const {\n      items,\n      onClose,\n      renderMenu,\n      renderTrigger,\n      dismissOnMouseLeave,\n      hideCloseButton,\n      title,\n      className,\n      zIndex,\n      containerRef,\n      anchorOrigin,\n      transformOrigin,\n      id,\n      fixed\n    } = props\n    const clickInsideRef = useRef<any>()\n    const anchorRef = useRef<HTMLElement>(null)\n\n    const [isPopupVisible, setIsPopupVisible] = useState<boolean>(false)\n\n    const triggerPopup = useCallback(\n      (onMouseEnter?: boolean) => {\n        if (onMouseEnter && isPopupVisible) return\n        setIsPopupVisible(!isPopupVisible)\n      },\n      [isPopupVisible, setIsPopupVisible]\n    )\n\n    const handlePopupClose = useCallback(() => {\n      setIsPopupVisible(false)\n      if (onClose) onClose()\n    }, [setIsPopupVisible, onClose])\n\n    const handleMenuItemClick = useCallback(\n      (item: PopupMenuItem) => (e: MouseEvent<HTMLLIElement>) => {\n        e.stopPropagation()\n        item.onClick(e)\n        handlePopupClose()\n      },\n      [handlePopupClose]\n    )\n\n    const triggerId = id ? `${id}-trigger` : undefined\n\n    const triggerProps = {\n      'aria-controls': isPopupVisible ? id : undefined,\n      'aria-haspopup': true,\n      'aria-expanded': isPopupVisible ? ('true' as const) : undefined,\n      id: triggerId\n    }\n\n    return (\n      <div ref={clickInsideRef}>\n        {renderTrigger(anchorRef, triggerPopup, triggerProps)}\n        <Popup\n          anchorRef={anchorRef}\n          checkIfClickInside={(target: EventTarget) => {\n            if (target instanceof Element && clickInsideRef) {\n              return clickInsideRef.current.contains(target)\n            }\n            return false\n          }}\n          isVisible={isPopupVisible}\n          showHeader={Boolean(title)}\n          hideCloseButton={hideCloseButton}\n          onClose={handlePopupClose}\n          ref={ref}\n          title={title || ''}\n          zIndex={zIndex}\n          containerRef={containerRef}\n          transformOrigin={transformOrigin}\n          anchorOrigin={anchorOrigin}\n          className={cn(styles.popup, className)}\n          dismissOnMouseLeave={dismissOnMouseLeave}\n          fixed={fixed}\n        >\n          {renderMenu ? (\n            renderMenu(items)\n          ) : (\n            <ul\n              className={styles.menu}\n              role='menu'\n              aria-labelledby={triggerId}\n              tabIndex={-1}\n            >\n              {items.map((item, i) => (\n                <li\n                  key={typeof item.text === 'string' ? item.text : i}\n                  role='menuitem'\n                  className={cn(styles.item, item.className)}\n                  onClick={handleMenuItemClick(item)}\n                  tabIndex={i === 0 ? 0 : -1}\n                >\n                  {item.icon && (\n                    <div className={cn(styles.icon, item.iconClassName)}>\n                      {item.icon}\n                    </div>\n                  )}\n                  {item.text}\n                </li>\n              ))}\n            </ul>\n          )}\n        </Popup>\n      </div>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PopupMenu.js","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'\n\nimport cn from 'classnames'\n\nimport { Popup } from '../layout/Popup'\n\nimport styles from './PopupMenu.module.css'\nimport { PopupMenuItem, PopupMenuProps } from './types'\n\n/**\n * A menu that shows on top of the UI. Ideal for overflow menus, dropdowns, etc\n */\nexport const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(\n  function PopupMenu(props, ref) {\n    const {\n      items,\n      onClose,\n      renderMenu,\n      renderTrigger,\n      dismissOnMouseLeave,\n      hideCloseButton,\n      title,\n      className,\n      zIndex,\n      containerRef,\n      anchorOrigin,\n      transformOrigin,\n      id,\n      fixed\n    } = props\n    const clickInsideRef = useRef<any>()\n    const anchorRef = useRef<HTMLElement>(null)\n\n    const [isPopupVisible, setIsPopupVisible] = useState<boolean>(false)\n\n    const triggerPopup = useCallback(\n      (onMouseEnter?: boolean) => {\n        if (onMouseEnter && isPopupVisible) return\n        setIsPopupVisible(!isPopupVisible)\n      },\n      [isPopupVisible, setIsPopupVisible]\n    )\n\n    const handlePopupClose = useCallback(() => {\n      setIsPopupVisible(false)\n      if (onClose) onClose()\n    }, [setIsPopupVisible, onClose])\n\n    const handleMenuItemClick = useCallback(\n      (item: PopupMenuItem) => (e: MouseEvent<HTMLLIElement>) => {\n        e.stopPropagation()\n        item.onClick(e)\n        handlePopupClose()\n      },\n      [handlePopupClose]\n    )\n\n    const triggerId = id ? `${id}-trigger` : undefined\n\n    const triggerProps = {\n      'aria-controls': isPopupVisible ? id : undefined,\n      'aria-haspopup': true,\n      'aria-expanded': isPopupVisible ? ('true' as const) : undefined,\n      id: triggerId\n    }\n\n    return (\n      <div ref={clickInsideRef}>\n        {renderTrigger(anchorRef, triggerPopup, triggerProps)}\n        <Popup\n          anchorRef={anchorRef}\n          checkIfClickInside={(target: EventTarget) => {\n            if (target instanceof Element && clickInsideRef) {\n              return clickInsideRef.current.contains(target)\n            }\n            return false\n          }}\n          isVisible={isPopupVisible}\n          showHeader={Boolean(title)}\n          hideCloseButton={hideCloseButton}\n          onClose={handlePopupClose}\n          ref={ref}\n          title={title || ''}\n          zIndex={zIndex}\n          containerRef={containerRef}\n          transformOrigin={transformOrigin}\n          anchorOrigin={anchorOrigin}\n          className={cn(styles.popup, className)}\n          dismissOnMouseLeave={dismissOnMouseLeave}\n          fixed={fixed}\n        >\n          {renderMenu ? (\n            renderMenu(items)\n          ) : (\n            <ul\n              className={styles.menu}\n              role='menu'\n              aria-labelledby={triggerId}\n              tabIndex={-1}\n            >\n              {items.map((item, i) => (\n                <li\n                  key={typeof item.text === 'string' ? item.text : i}\n                  role='menuitem'\n                  className={cn(styles.item, item.className)}\n                  onClick={handleMenuItemClick(item)}\n                  tabIndex={i === 0 ? 0 : -1}\n                >\n                  {item.icon ? (\n                    <div className={cn(styles.icon, item.iconClassName)}>\n                      {item.icon}\n                    </div>\n                  ) : null}\n                  {item.text}\n                </li>\n              ))}\n            </ul>\n          )}\n        </Popup>\n      </div>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,3 @@
+import { ProgressBarProps } from './types';
+export declare const ProgressBar: (props: ProgressBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/progress-bar/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAiB,MAAM,SAAS,CAAA;AAYzD,eAAO,MAAM,WAAW,UAAW,gBAAgB,qDA4DlD,CAAA"}

package/dist/components/progress-bar/ProgressBar.js

@@ -0,0 +1,40 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import BN from 'bn.js';
+import cn from 'classnames';
+import styles from './ProgressBar.module.css.js';
+
+var getBN = function (num) {
+    if (num instanceof BN)
+        return num;
+    return new BN(num);
+};
+function clampBN(value, min, max) {
+    return BN.min(BN.max(value, min), max);
+}
+// @beta - This component was directly ported from stems and subject to change
+var ProgressBar = function (props) {
+    var _a, _b, _c;
+    var className = props.className, sliderClassName = props.sliderClassName, sliderBarClassName = props.sliderBarClassName, _d = props.min, min = _d === void 0 ? new BN(0) : _d, _e = props.max, max = _e === void 0 ? new BN(100) : _e, value = props.value, _f = props.showLabels, showLabels = _f === void 0 ? false : _f, MinWrapper = props.minWrapper, MaxWrapper = props.maxWrapper, other = __rest(props, ["className", "sliderClassName", "sliderBarClassName", "min", "max", "value", "showLabels", "minWrapper", "maxWrapper"]);
+    var _g = useState(0), sliderWidth = _g[0], setSliderWidth = _g[1];
+    var percentage = useMemo(function () {
+        var minBN = getBN(min);
+        var maxBN = getBN(max);
+        var valBN = getBN(value);
+        return clampBN(valBN.sub(minBN), new BN(0), maxBN)
+            .mul(new BN(100))
+            .div(maxBN.sub(minBN));
+    }, [max, min, value]);
+    useEffect(function () {
+        setSliderWidth(percentage.toNumber());
+    }, [percentage]);
+    return (jsxs("div", __assign({ className: cn(styles.container, (_a = {}, _a[className] = !!className, _a)), role: 'progressbar', "aria-valuenow": percentage.toNumber() }, other, { children: [jsx("div", __assign({ className: cn(styles.slider, (_b = {},
+                    _b[sliderClassName] = !!sliderClassName,
+                    _b)) }, { children: jsx("div", { className: cn(styles.sliderBar, (_c = {},
+                        _c[sliderBarClassName] = !!sliderBarClassName,
+                        _c)), style: { width: "".concat(sliderWidth, "%") } }) })), showLabels && (jsxs("div", __assign({ className: styles.labels }, { children: [jsx("div", __assign({ className: styles.minLabel }, { children: MinWrapper ? jsx(MinWrapper, { value: min }) : min.toString() })), jsx("div", __assign({ className: styles.maxLabel }, { children: MaxWrapper ? jsx(MaxWrapper, { value: max }) : max.toString() }))] })))] })));
+};
+
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react'\n\nimport BN from 'bn.js'\nimport cn from 'classnames'\n\nimport styles from './ProgressBar.module.css'\nimport { ProgressBarProps, ProgressValue } from './types'\n\nconst getBN = (num: ProgressValue): BN => {\n  if (num instanceof BN) return num\n  return new BN(num)\n}\n\nfunction clampBN(value: BN, min: BN, max: BN): BN {\n  return BN.min(BN.max(value, min), max)\n}\n\n// @beta - This component was directly ported from stems and subject to change\nexport const ProgressBar = (props: ProgressBarProps) => {\n  const {\n    className,\n    sliderClassName,\n    sliderBarClassName,\n    min = new BN(0),\n    max = new BN(100),\n    value,\n    showLabels = false,\n    minWrapper: MinWrapper,\n    maxWrapper: MaxWrapper,\n    ...other\n  } = props\n  const [sliderWidth, setSliderWidth] = useState(0)\n\n  const percentage = useMemo(() => {\n    const minBN = getBN(min)\n    const maxBN = getBN(max)\n    const valBN = getBN(value)\n\n    return clampBN(valBN.sub(minBN), new BN(0), maxBN)\n      .mul(new BN(100))\n      .div(maxBN.sub(minBN))\n  }, [max, min, value])\n\n  useEffect(() => {\n    setSliderWidth(percentage.toNumber())\n  }, [percentage])\n\n  return (\n    <div\n      className={cn(styles.container, { [className!]: !!className })}\n      role='progressbar'\n      aria-valuenow={percentage.toNumber()}\n      {...other}\n    >\n      <div\n        className={cn(styles.slider, {\n          [sliderClassName!]: !!sliderClassName\n        })}\n      >\n        <div\n          className={cn(styles.sliderBar, {\n            [sliderBarClassName!]: !!sliderBarClassName\n          })}\n          style={{ width: `${sliderWidth}%` }}\n        ></div>\n      </div>\n      {showLabels && (\n        <div className={styles.labels}>\n          <div className={styles.minLabel}>\n            {MinWrapper ? <MinWrapper value={min} /> : min.toString()}\n          </div>\n          <div className={styles.maxLabel}>\n            {MaxWrapper ? <MaxWrapper value={max} /> : max.toString()}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/progress-bar/ProgressBar.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"container":"ProgressBar-module_container__fENfH","slider":"ProgressBar-module_slider__z--Qf","sliderBar":"ProgressBar-module_sliderBar__kNzXs","labels":"ProgressBar-module_labels__zstfU","minLabel":"ProgressBar-module_minLabel__YYQ8n","maxLabel":"ProgressBar-module_maxLabel__mMtj2"};
+
+export { styles as default };
+//# sourceMappingURL=ProgressBar.module.css.js.map

package/dist/components/progress-bar/ProgressBar.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,3 @@
+export { ProgressBar } from './ProgressBar';
+export { ProgressBarProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/progress-bar/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import BN from 'bn.js';
+export type ProgressValue = number | BN;
+export type ProgressBarProps = {
+    className?: string;
+    sliderClassName?: string;
+    sliderBarClassName?: string;
+    min?: ProgressValue;
+    max?: ProgressValue;
+    value: ProgressValue;
+    showLabels?: boolean;
+    minWrapper?: React.ComponentType<{
+        value: ProgressValue;
+    }>;
+    maxWrapper?: React.ComponentType<{
+        value: ProgressValue;
+    }>;
+    'aria-labelledby'?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/progress-bar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,OAAO,CAAA;AAEtB,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,EAAE,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,aAAa,CAAA;IACnB,GAAG,CAAC,EAAE,aAAa,CAAA;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,aAAa,CAAA;KAAE,CAAC,CAAA;IAC1D,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,aAAa,CAAA;KAAE,CAAC,CAAA;IAC1D,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA"}

package/dist/components/scrubber/Scrubber.d.ts

@@ -0,0 +1,17 @@
+import { ScrubberProps } from './types';
+/**
+ * @beta - This component was directly ported from stems and subject to change
+ * Wraps the `<Slider />` component and provides timestamp indicators.
+ */
+export declare const Scrubber: {
+    ({ mediaKey, isPlaying, isDisabled, isMobile, includeTimestamps, elapsedSeconds, totalSeconds, playbackRate, onScrub, onScrubRelease, includeExpandedTargets, style, className }: ScrubberProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        isPlaying: boolean;
+        isDisabled: boolean;
+        isMobile: boolean;
+        includeTimestamps: boolean;
+        onScrub: () => void;
+        onScrubRelease: () => void;
+    };
+};
+//# sourceMappingURL=Scrubber.d.ts.map

package/dist/components/scrubber/Scrubber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/Scrubber.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAwB,MAAM,SAAS,CAAA;AAkB7D;;;GAGG;AACH,eAAO,MAAM,QAAQ;sLAclB,aAAa;;;;;;;;;CA4Df,CAAA"}

package/dist/components/scrubber/Scrubber.js

@@ -0,0 +1,61 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import cn from 'classnames';
+import moment from 'moment';
+import styles from './Scrubber.module.css.js';
+import { Slider } from './Slider.js';
+import { defaultScrubberProps } from './types.js';
+
+var SECONDS_PER_MINUTE = 60;
+var MINUTES_PER_HOUR = 60;
+var SECONDS_PER_HOUR = SECONDS_PER_MINUTE * MINUTES_PER_HOUR;
+/** Timeout applied when releasing the drag-handle before timestamps reset. */
+var SCRUB_RELEASE_TIMEOUT_MS = 200;
+/** Pretty formats seconds into m:ss. */
+var formatSeconds = function (seconds) {
+    var utc = moment.utc(moment.duration(seconds, 'seconds').asMilliseconds());
+    if (seconds > SECONDS_PER_HOUR) {
+        return utc.format('h:mm:ss');
+    }
+    return utc.format('m:ss');
+};
+/**
+ * @beta - This component was directly ported from stems and subject to change
+ * Wraps the `<Slider />` component and provides timestamp indicators.
+ */
+var Scrubber = function (_a) {
+    var _b;
+    var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isDisabled = _a.isDisabled, isMobile = _a.isMobile, includeTimestamps = _a.includeTimestamps, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, playbackRate = _a.playbackRate, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, includeExpandedTargets = _a.includeExpandedTargets, style = _a.style, className = _a.className;
+    var _c = useState(null), dragSeconds = _c[0], setDragSeconds = _c[1];
+    var resetDragSeconds = function (isPlaying) {
+        if (isPlaying) {
+            setTimeout(function () { return setDragSeconds(null); }, SCRUB_RELEASE_TIMEOUT_MS);
+        }
+    };
+    var onHandleScrub = function (seconds) {
+        setDragSeconds(seconds);
+        if (onScrub) {
+            onScrub(seconds);
+        }
+    };
+    var onHandleScrubRelease = function (seconds) {
+        if (onScrubRelease) {
+            onScrubRelease(seconds);
+        }
+        resetDragSeconds(isPlaying);
+    };
+    useEffect(function () {
+        resetDragSeconds(isPlaying);
+    }, [isPlaying]);
+    var timestampStart = dragSeconds !== null ? dragSeconds : elapsedSeconds;
+    return (jsxs("div", __assign({ className: cn(styles.scrubber, (_b = {},
+            _b[styles.isDisabled] = isDisabled,
+            _b[styles.isMobile] = isMobile,
+            _b.className = className,
+            _b)) }, { children: [includeTimestamps && (jsx("div", __assign({ className: styles.timestampStart }, { children: formatSeconds(timestampStart) }))), jsx(Slider, { mediaKey: mediaKey, isPlaying: isPlaying, isDisabled: isDisabled, isMobile: isMobile, elapsedSeconds: elapsedSeconds, totalSeconds: totalSeconds, playbackRate: playbackRate, onScrub: onHandleScrub, onScrubRelease: onHandleScrubRelease, includeExpandedTargets: includeExpandedTargets, style: style }), includeTimestamps && (jsx("div", __assign({ className: styles.timestampEnd }, { children: formatSeconds(totalSeconds) })))] })));
+};
+Scrubber.defaultProps = defaultScrubberProps;
+
+export { Scrubber };
+//# sourceMappingURL=Scrubber.js.map

package/dist/components/scrubber/Scrubber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.js","sources":["../../../src/components/scrubber/Scrubber.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nimport cn from 'classnames'\nimport moment from 'moment'\n\nimport styles from './Scrubber.module.css'\nimport { Slider } from './Slider'\nimport { ScrubberProps, defaultScrubberProps } from './types'\n\nconst SECONDS_PER_MINUTE = 60\nconst MINUTES_PER_HOUR = 60\nconst SECONDS_PER_HOUR = SECONDS_PER_MINUTE * MINUTES_PER_HOUR\n\n/** Timeout applied when releasing the drag-handle before timestamps reset. */\nconst SCRUB_RELEASE_TIMEOUT_MS = 200\n\n/** Pretty formats seconds into m:ss. */\nconst formatSeconds = (seconds: number) => {\n  const utc = moment.utc(moment.duration(seconds, 'seconds').asMilliseconds())\n  if (seconds > SECONDS_PER_HOUR) {\n    return utc.format('h:mm:ss')\n  }\n  return utc.format('m:ss')\n}\n\n/**\n * @beta - This component was directly ported from stems and subject to change\n * Wraps the `<Slider />` component and provides timestamp indicators.\n */\nexport const Scrubber = ({\n  mediaKey,\n  isPlaying,\n  isDisabled,\n  isMobile,\n  includeTimestamps,\n  elapsedSeconds,\n  totalSeconds,\n  playbackRate,\n  onScrub,\n  onScrubRelease,\n  includeExpandedTargets,\n  style,\n  className\n}: ScrubberProps) => {\n  const [dragSeconds, setDragSeconds] = useState<number | null>(null)\n\n  const resetDragSeconds = (isPlaying: boolean) => {\n    if (isPlaying) {\n      setTimeout(() => setDragSeconds(null), SCRUB_RELEASE_TIMEOUT_MS)\n    }\n  }\n\n  const onHandleScrub = (seconds: number) => {\n    setDragSeconds(seconds)\n    if (onScrub) {\n      onScrub(seconds)\n    }\n  }\n\n  const onHandleScrubRelease = (seconds: number) => {\n    if (onScrubRelease) {\n      onScrubRelease(seconds)\n    }\n    resetDragSeconds(isPlaying)\n  }\n\n  useEffect(() => {\n    resetDragSeconds(isPlaying)\n  }, [isPlaying])\n\n  const timestampStart = dragSeconds !== null ? dragSeconds : elapsedSeconds\n\n  return (\n    <div\n      className={cn(styles.scrubber, {\n        [styles.isDisabled]: isDisabled,\n        [styles.isMobile]: isMobile,\n        className\n      })}\n    >\n      {includeTimestamps && (\n        <div className={styles.timestampStart}>\n          {formatSeconds(timestampStart)}\n        </div>\n      )}\n      <Slider\n        mediaKey={mediaKey}\n        isPlaying={isPlaying}\n        isDisabled={isDisabled}\n        isMobile={isMobile}\n        elapsedSeconds={elapsedSeconds}\n        totalSeconds={totalSeconds}\n        playbackRate={playbackRate}\n        onScrub={onHandleScrub}\n        onScrubRelease={onHandleScrubRelease}\n        includeExpandedTargets={includeExpandedTargets}\n        style={style}\n      />\n      {includeTimestamps && (\n        <div className={styles.timestampEnd}>{formatSeconds(totalSeconds)}</div>\n      )}\n    </div>\n  )\n}\n\nScrubber.defaultProps = defaultScrubberProps\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/scrubber/Scrubber.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"scrubber":"Scrubber-module_scrubber__m-H2N","timestampStart":"Scrubber-module_timestampStart__o5CsT","timestampEnd":"Scrubber-module_timestampEnd__0LjFK","isMobile":"Scrubber-module_isMobile__klxqA"};
+
+export { styles as default };
+//# sourceMappingURL=Scrubber.module.css.js.map

package/dist/components/scrubber/Scrubber.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/scrubber/Slider.d.ts

@@ -0,0 +1,7 @@
+import { ScrubberProps } from './types';
+/**
+ * A smooth scrubbable slider that relies on CSS animations rather
+ * than progress ticks to achieve fluidity.
+ */
+export declare const Slider: ({ mediaKey, isPlaying, isMobile, isDisabled, elapsedSeconds, totalSeconds, playbackRate, onScrub, onScrubRelease, includeExpandedTargets, style }: ScrubberProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/scrubber/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/Slider.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAQvC;;;GAGG;AACH,eAAO,MAAM,MAAM,sJAYhB,aAAa,qDA2Rf,CAAA"}

package/dist/components/scrubber/Slider.js

@@ -0,0 +1,230 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import styles from './Slider.module.css.js';
+import { useAnimations } from './hooks.js';
+
+/** Gets the X-position of a div. */
+var getXPosition = function (element) {
+    var coords = element.getBoundingClientRect();
+    return window.pageXOffset + coords.left;
+};
+/**
+ * A smooth scrubbable slider that relies on CSS animations rather
+ * than progress ticks to achieve fluidity.
+ */
+var Slider = function (_a) {
+    var _b;
+    var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isMobile = _a.isMobile, isDisabled = _a.isDisabled, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, playbackRate = _a.playbackRate, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, _c = _a.includeExpandedTargets, includeExpandedTargets = _c === void 0 ? true : _c, style = _a.style;
+    var _d = useState(''), previousMediaKey = _d[0], setPreviousMediaKey = _d[1];
+    // Percentage of the complete scrubber being dragged to.
+    // e.g. 0.25 means the user has dragged the scrubber 1/4th of the way.
+    var dragPercent = useRef(0);
+    // Refs to handle event listeners
+    var mouseMoveRef = useRef(null);
+    var mouseUpRef = useRef(null);
+    var touchMoveRef = useRef(null);
+    var touchEndRef = useRef(null);
+    // Div refs
+    var railRef = useRef(null);
+    var trackRef = useRef(null);
+    var handleRef = useRef(null);
+    var _e = useAnimations(trackRef, handleRef, elapsedSeconds, totalSeconds, playbackRate), play = _e.play, pause = _e.pause, setPercent = _e.setPercent;
+    /**
+     * Sets the percentage across the scrubber for a given pageX position.
+     */
+    var setDragPercent = useCallback(function (pageX) {
+        if (railRef.current) {
+            var clickPosition = pageX - getXPosition(railRef.current);
+            var railWidth = railRef.current.offsetWidth;
+            var percent = Math.min(Math.max(0, clickPosition), railWidth) / railWidth;
+            dragPercent.current = percent;
+        }
+    }, [dragPercent]);
+    /**
+     * Sets the percentage across the scrubber for a given mouse event.
+     */
+    var setDragPercentMouse = useCallback(function (e) {
+        setDragPercent(e.pageX);
+    }, [setDragPercent]);
+    /**
+     * Sets the percentage across the scurbber for a given touch event.
+     */
+    var setDragPercentTouch = useCallback(function (e) {
+        setDragPercent(e.touches[0].pageX);
+    }, [setDragPercent]);
+    /**
+     * Watches user mouse movements while the scrubber handle is being dragged.
+     */
+    var onMouseMove = useCallback(function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        setDragPercentMouse(e);
+        if (dragPercent.current !== null) {
+            setPercent(dragPercent.current);
+            var seconds = dragPercent.current * totalSeconds;
+            if (onScrub) {
+                onScrub(seconds);
+            }
+        }
+    }, [dragPercent, setDragPercentMouse, totalSeconds, setPercent, onScrub]);
+    /**
+     * Watches user touch movements while the scrubber handle is being dragged.
+     */
+    var onTouchMove = useCallback(function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        setDragPercentTouch(e);
+        if (dragPercent.current !== null) {
+            setPercent(dragPercent.current);
+            var seconds = dragPercent.current * totalSeconds;
+            if (onScrub) {
+                onScrub(seconds);
+            }
+        }
+    }, [dragPercent, setDragPercentTouch, totalSeconds, setPercent, onScrub]);
+    /**
+     * Watches for a mouse-up action (which may not occur on the scrubber itself),
+     * calls the release callback, and resets dragging state.
+     */
+    var onMouseUp = useCallback(function () {
+        if (mouseMoveRef.current) {
+            document.removeEventListener('mousemove', mouseMoveRef.current);
+        }
+        if (mouseUpRef.current) {
+            document.removeEventListener('mouseup', mouseUpRef.current);
+        }
+        if (dragPercent.current !== null) {
+            var seconds = dragPercent.current * totalSeconds;
+            if (onScrubRelease) {
+                onScrubRelease(seconds);
+            }
+            dragPercent.current = null;
+        }
+    }, [mouseMoveRef, mouseUpRef, dragPercent, totalSeconds, onScrubRelease]);
+    /**
+     * Watches for a touch-end action (which may not occur on the scrubber itself),
+     * calls the release callback, and resets dragging state.
+     */
+    var onTouchEnd = useCallback(function () {
+        if (touchMoveRef.current) {
+            document.removeEventListener('touchmove', touchMoveRef.current);
+        }
+        if (touchEndRef.current) {
+            document.removeEventListener('touchend', touchEndRef.current);
+        }
+        if (dragPercent.current !== null) {
+            var seconds = dragPercent.current * totalSeconds;
+            if (onScrubRelease) {
+                onScrubRelease(seconds);
+            }
+            dragPercent.current = null;
+        }
+    }, [touchMoveRef, touchEndRef, dragPercent, totalSeconds, onScrubRelease]);
+    /**
+     * Attaches mouse-move and mouse-up event listeners and sets dragging state.
+     */
+    var onMouseDown = function (e) {
+        // Cancel mouse down if touch was fired.
+        if (e.button !== 0 || touchMoveRef.current)
+            return;
+        mouseMoveRef.current = onMouseMove;
+        mouseUpRef.current = onMouseUp;
+        document.addEventListener('mousemove', mouseMoveRef.current);
+        document.addEventListener('mouseup', mouseUpRef.current);
+        setDragPercentMouse(e);
+        if (dragPercent.current !== null) {
+            setPercent(dragPercent.current);
+        }
+    };
+    /**
+     * Attaches touch-move and touch-end event listeners and sets dragging state.
+     */
+    var onTouchStart = function (e) {
+        touchMoveRef.current = onTouchMove;
+        touchEndRef.current = onTouchEnd;
+        document.addEventListener('touchmove', touchMoveRef.current);
+        document.addEventListener('touchend', touchEndRef.current);
+        setDragPercentTouch(e);
+        if (dragPercent.current !== null) {
+            setPercent(dragPercent.current);
+        }
+    };
+    // Watch interactions to the scrubber and call to animate
+    useEffect(function () {
+        if (!dragPercent.current) {
+            if (isPlaying)
+                play();
+            else
+                pause();
+        }
+    }, [isPlaying, dragPercent, play, pause]);
+    useEffect(function () {
+        setPercent(elapsedSeconds / totalSeconds);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [playbackRate]);
+    // When the key changes, reset the animation
+    useEffect(function () {
+        if (mediaKey !== previousMediaKey) {
+            if (!totalSeconds) {
+                setPercent(0);
+            }
+            else {
+                setPercent(elapsedSeconds / totalSeconds);
+            }
+            setPreviousMediaKey(mediaKey);
+        }
+    }, [
+        mediaKey,
+        previousMediaKey,
+        setPreviousMediaKey,
+        setPercent,
+        elapsedSeconds,
+        totalSeconds
+    ]);
+    var getShowHandle = function () {
+        return !style || style.showHandle === undefined ? true : style.showHandle;
+    };
+    var getRailStyle = function () {
+        var s = {};
+        if (style && style.railUnlistenedColor) {
+            s.background = style.railUnlistenedColor;
+        }
+        return s;
+    };
+    var getTrackStyle = function () {
+        var s = {};
+        if (style && style.railListenedColor) {
+            s.background = style.railListenedColor;
+        }
+        if (style && style.railListenedColor) {
+            s.borderRadius = 'var(--unit-half)';
+        }
+        return s;
+    };
+    var getSliderStyle = function () {
+        if (style && style.sliderMargin)
+            return { margin: style.sliderMargin };
+        return {};
+    };
+    var getHandleStyle = function () {
+        var s = {};
+        if (style) {
+            if (style.handleColor)
+                s.background = style.handleColor;
+            if (style.handleShadow)
+                s.boxShadow = style.handleShadow;
+        }
+        return s;
+    };
+    return (jsxs("div", __assign({ className: cn(styles.slider, (_b = {},
+            _b[styles.isMobile] = isMobile,
+            _b[styles.isDisabled] = isDisabled,
+            _b[styles.showHandle] = getShowHandle(),
+            _b[styles.expandedTargets] = includeExpandedTargets,
+            _b)), onMouseDown: isDisabled ? function () { } : onMouseDown, onTouchStart: isDisabled ? function () { } : onTouchStart, style: getSliderStyle() }, { children: [jsx("div", __assign({ ref: railRef, className: styles.rail, style: getRailStyle() }, { children: jsx("div", __assign({ ref: trackRef, className: styles.trackWrapper }, { children: jsx("div", { ref: trackRef, className: styles.track, style: getTrackStyle() }) })) })), jsx("div", __assign({ ref: handleRef, className: styles.handleWrapper }, { children: jsx("div", { ref: handleRef, className: styles.handle, style: getHandleStyle() }) }))] })));
+};
+
+export { Slider };
+//# sourceMappingURL=Slider.js.map