@audius/harmony 0.4.0 → 0.4.3

package/dist/components/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MutableRefObject,\n  Ref,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\nimport ReactDOM from 'react-dom'\nimport { useTransition, animated } from 'react-spring'\nimport { usePrevious } from 'react-use'\n\nimport { PlainButton } from '~harmony/components/button/PlainButton/PlainButton'\nimport { IconClose } from '~harmony/icons'\nimport { ModalState } from '~harmony/utils/modalState'\n\nimport { useClickOutside } from '../../hooks/useClickOutside'\nimport { getScrollParent } from '../../utils/getScrollParent'\n\nimport styles from './Popup.module.css'\nimport type { PopupProps, Origin } from './types'\n\nconst messages = {\n  close: 'close popup'\n}\n\n/**\n * Number of pixels between the edge of the container and the popup\n * before the popup needs to reposition itself to be in view.\n */\nconst CONTAINER_INSET_PADDING = 16\n\n/**\n * Figures out whether the specified position would overflow the window\n * and picks a better position accordingly\n * @param {Origin} anchorOrigin where the origin is on the trigger\n * @param {Origin} transformOrigin where the origin is on the popup\n * @param {DOMRect} anchorRect the position and size of the trigger\n * @param {DOMRect} wrapperRect the position and size of the popup\n * @return {{ anchorOrigin: Origin, transformOrigin: Origin }} the new origin after accounting for overflow\n */\nconst getComputedOrigins = (\n  anchorOrigin: Origin,\n  transformOrigin: Origin,\n  anchorRect: DOMRect,\n  wrapperRect: DOMRect,\n  portal: HTMLElement,\n  containerRef?: MutableRefObject<HTMLDivElement | undefined>\n) => {\n  if (!anchorRect || !wrapperRect) return { anchorOrigin, transformOrigin }\n\n  let containerWidth, containerHeight\n  if (containerRef && containerRef.current) {\n    const containerRect = containerRef.current.getBoundingClientRect()\n    containerWidth =\n      containerRect.width + containerRect.x - CONTAINER_INSET_PADDING\n    containerHeight =\n      containerRect.height + containerRect.y - CONTAINER_INSET_PADDING\n  } else {\n    const portalRect = portal.getBoundingClientRect()\n    containerWidth = portalRect.width + portalRect.x - CONTAINER_INSET_PADDING\n    containerHeight = portalRect.height + portalRect.y - CONTAINER_INSET_PADDING\n  }\n\n  // Get new wrapper position\n  const anchorTranslation = getOriginTranslation(anchorOrigin, anchorRect)\n  const wrapperTranslation = getOriginTranslation(transformOrigin, wrapperRect)\n  const wrapperX = anchorRect.x + anchorTranslation.x - wrapperTranslation.x\n  const wrapperY = anchorRect.y + anchorTranslation.y - wrapperTranslation.y\n\n  // Check bounds of the wrapper in new position are inside container\n  const overflowRight = wrapperX + wrapperRect.width > containerWidth\n  const overflowLeft = wrapperX < 0\n  const overflowBottom = wrapperY + wrapperRect.height > containerHeight\n  const overflowTop = wrapperY < 0\n\n  // For all overflows, flip the position\n  if (overflowRight) {\n    anchorOrigin.horizontal = 'left'\n    transformOrigin.horizontal = 'right'\n  }\n  if (overflowLeft) {\n    anchorOrigin.horizontal = 'right'\n    transformOrigin.horizontal = 'left'\n  }\n  if (overflowTop) {\n    anchorOrigin.vertical = 'bottom'\n    transformOrigin.vertical = 'top'\n  }\n  if (overflowBottom) {\n    anchorOrigin.vertical = 'top'\n    transformOrigin.vertical = 'bottom'\n  }\n  return { anchorOrigin, transformOrigin }\n}\n\n/**\n * Figures out whether the specified position would still overflow the window\n * after being computed and adds extra offsets\n */\nconst getAdjustedPosition = (\n  top: number,\n  left: number,\n  wrapperRect: DOMRect,\n  portal: HTMLElement\n): { adjustedTop: number; adjustedLeft: number } => {\n  if (!wrapperRect) return { adjustedTop: 0, adjustedLeft: 0 }\n\n  const containerWidth =\n    portal.getBoundingClientRect().width - CONTAINER_INSET_PADDING\n  const containerHeight =\n    portal.getBoundingClientRect().height - CONTAINER_INSET_PADDING\n  // Account for the portal being a scrollable container.\n  // This will happen if the document body itself is what scrolls.\n  const containerTop = -1 * portal.getBoundingClientRect().top\n\n  const overflowRight = left + wrapperRect.width > containerWidth\n  const overflowLeft = left < 0\n  const overflowBottom = top + wrapperRect.height > containerHeight\n  const overflowTop = top < 0\n\n  const adjusted = { adjustedTop: containerTop, adjustedLeft: 0 }\n  if (overflowRight) {\n    adjusted.adjustedLeft =\n      adjusted.adjustedLeft - (left + wrapperRect.width - containerWidth)\n  }\n  if (overflowLeft) {\n    adjusted.adjustedLeft = adjusted.adjustedLeft + wrapperRect.width\n  }\n  if (overflowTop) {\n    adjusted.adjustedTop =\n      adjusted.adjustedTop - (top + wrapperRect.height - containerHeight)\n  }\n  if (overflowBottom) {\n    adjusted.adjustedTop = adjusted.adjustedTop + wrapperRect.height\n  }\n  return adjusted\n}\n\n/**\n * Gets the x, y offsets for the given origin using the dimensions\n * @param origin the relative origin\n * @param dimensions the dimensions to use with the relative origin\n * @returns the x and y coordinates of the new origin relative to the old one\n */\nconst getOriginTranslation = (\n  origin: Origin,\n  dimensions: { width: number; height: number }\n) => {\n  let x = 0\n  let y = 0\n  const { width, height } = dimensions\n  if (origin.horizontal === 'center') {\n    x += width / 2\n  } else if (origin.horizontal === 'right') {\n    x += width\n  }\n  if (origin.vertical === 'center') {\n    y += height / 2\n  } else if (origin.vertical === 'bottom') {\n    y += height\n  }\n  return { x, y }\n}\n\nconst defaultAnchorOrigin: Origin = {\n  horizontal: 'center',\n  vertical: 'bottom'\n}\n\nconst defaultTransformOrigin: Origin = {\n  horizontal: 'center',\n  vertical: 'top'\n}\n\nconst closingAnimationDuration = 90\n\n/**\n * A popup is an in-place container that shows on top of the UI. A popup does\n * not impact the rest of the UI (e.g. dimming background or shifting elements).\n * It differs from modals, which do take over the whole UI and are usually\n * center-screened.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(\n  props: PopupProps,\n  ref: Ref<HTMLDivElement>\n) {\n  const { isVisible: isVisibleProp } = props\n  const [popupState, setPopupState] = useState<ModalState>('closed')\n\n  const isVisible = popupState !== 'closed'\n  useEffect(() => {\n    if (popupState === 'closed' && isVisibleProp) {\n      setPopupState('opening')\n    } else if (popupState === 'open' && !isVisibleProp) {\n      setPopupState('closing')\n    }\n  }, [isVisibleProp, popupState])\n\n  return isVisible ? (\n    <PopupInternal\n      ref={ref}\n      popupState={popupState}\n      setPopupState={setPopupState}\n      {...props}\n    />\n  ) : null\n})\n\nexport const PopupInternal = forwardRef<\n  HTMLDivElement,\n  PopupProps & {\n    popupState: ModalState\n    setPopupState: (value: SetStateAction<ModalState>) => void\n  }\n>(function Popup(\n  props: PopupProps & {\n    popupState: ModalState\n    setPopupState: (value: SetStateAction<ModalState>) => void\n  },\n  ref: Ref<HTMLDivElement>\n) {\n  const {\n    popupState,\n    setPopupState,\n    anchorRef,\n    checkIfClickInside,\n    children,\n    className,\n    isVisible: isVisibleProp,\n    onAfterClose,\n    onClose,\n    anchorOrigin: anchorOriginProp = defaultAnchorOrigin,\n    transformOrigin: transformOriginProp = defaultTransformOrigin,\n    dismissOnMouseLeave,\n    hideCloseButton = false,\n    showHeader,\n    title,\n    zIndex,\n    containerRef,\n    portalLocation = document.body,\n    shadow = 'mid',\n    fixed,\n    takeWidthOfAnchor\n  } = props\n  const { spring, shadows } = useTheme()\n\n  const isVisible = popupState !== 'closed'\n  const previousIsVisible = usePrevious(isVisible)\n\n  const handleClose = useCallback(() => {\n    onClose?.()\n    setTimeout(() => {\n      if (onAfterClose) {\n        onAfterClose()\n      }\n    }, closingAnimationDuration)\n  }, [onClose, onAfterClose])\n\n  const [anchorOrigin, transformOrigin] = [\n    anchorOriginProp,\n    transformOriginProp\n  ]\n\n  const popupRef: React.MutableRefObject<HTMLDivElement> = useClickOutside(\n    handleClose,\n    isVisible,\n    checkIfClickInside,\n    typeof ref === 'function' ? undefined : ref\n  )\n\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const originalTopPosition = useRef<number>(0)\n  const [computedTransformOrigin, setComputedTransformOrigin] =\n    useState(anchorOrigin)\n\n  const wrapperHeight = wrapperRef?.current?.offsetHeight ?? null\n  const wrapperWidth = wrapperRef?.current?.offsetWidth ?? null\n  const previousHeight = usePrevious(wrapperHeight)\n  const previousWidth = usePrevious(wrapperWidth)\n  const wrapperSizeChange =\n    wrapperHeight !== previousHeight || wrapperWidth !== previousWidth\n\n  // On visible, set the position\n  useEffect(() => {\n    if ((isVisible && !previousIsVisible) || wrapperSizeChange) {\n      const [anchorRect, wrapperRect] = [anchorRef, wrapperRef].map((r) =>\n        r?.current?.getBoundingClientRect()\n      )\n      if (!anchorRect || !wrapperRect) return\n\n      const {\n        anchorOrigin: anchorOriginComputed,\n        transformOrigin: transformOriginComputed\n      } = getComputedOrigins(\n        anchorOrigin,\n        transformOrigin,\n        anchorRect,\n        wrapperRect,\n        portalLocation,\n        containerRef\n      )\n      setComputedTransformOrigin(transformOriginComputed)\n\n      const anchorTranslation = getOriginTranslation(\n        anchorOriginComputed,\n        anchorRect\n      )\n      const wrapperTranslation = getOriginTranslation(\n        transformOriginComputed,\n        wrapperRect\n      )\n\n      const top = anchorRect.y + anchorTranslation.y - wrapperTranslation.y\n      const left = anchorRect.x + anchorTranslation.x - wrapperTranslation.x\n\n      const { adjustedTop, adjustedLeft } = getAdjustedPosition(\n        top,\n        left,\n        wrapperRect,\n        portalLocation\n      )\n\n      if (wrapperRef.current) {\n        wrapperRef.current.style.top = `${top + adjustedTop}px`\n        wrapperRef.current.style.left = `${left + adjustedLeft}px`\n      }\n\n      originalTopPosition.current = top\n    }\n  }, [\n    isVisible,\n    wrapperRef,\n    anchorRef,\n    anchorOrigin,\n    transformOrigin,\n    setComputedTransformOrigin,\n    originalTopPosition,\n    portalLocation,\n    containerRef,\n    previousIsVisible,\n    previousHeight,\n    wrapperSizeChange\n  ])\n\n  // Callback invoked on each scroll. Uses original top position to scroll with content.\n  // Takes scrollParent to get the current scroll position as well as the intitial scroll position\n  // when the popup became visible.\n  const watchScroll = useCallback(\n    (scrollParent: Element, initialScrollPosition: number) => {\n      const scrollTop = scrollParent.scrollTop\n      if (wrapperRef.current) {\n        wrapperRef.current.style.top = `${\n          originalTopPosition.current - scrollTop + initialScrollPosition\n        }px`\n      }\n    },\n    [wrapperRef, originalTopPosition]\n  )\n\n  // Set up scroll listeners\n  useEffect(() => {\n    if (isVisible && anchorRef.current) {\n      const scrollParent = getScrollParent(anchorRef.current)\n      if (!scrollParent) return\n\n      const initialScrollPosition = scrollParent.scrollTop\n      const listener = () => watchScroll(scrollParent, initialScrollPosition)\n      scrollParent.addEventListener('scroll', listener)\n      return () => {\n        scrollParent.removeEventListener('scroll', listener)\n      }\n    }\n\n    return () => {}\n  }, [isVisible, watchScroll, anchorRef])\n\n  // Set up key listeners\n  useEffect(() => {\n    if (isVisible) {\n      const escapeListener = (e: KeyboardEvent) => {\n        if (e.code === 'Escape') {\n          handleClose()\n        }\n      }\n\n      window.addEventListener('keydown', escapeListener)\n\n      return () => window.removeEventListener('keydown', escapeListener)\n    }\n    return () => {}\n  }, [isVisible, handleClose])\n\n  useEffect(() => {\n    if (popupState === 'closed' && isVisibleProp) {\n    } else if (popupState === 'open' && !isVisibleProp) {\n      anchorRef.current?.focus()\n    }\n  }, [anchorRef, isVisibleProp, popupState])\n\n  const transitions = useTransition(isVisibleProp, null, {\n    from: {\n      transform: `scale(0)`,\n      opacity: 0\n    },\n    enter: {\n      transform: `scale(1)`,\n      opacity: 1\n    },\n    leave: {\n      transform: `scale(0)`,\n      opacity: 0\n    },\n    config: spring.standard,\n    unique: true,\n    onDestroyed: (isDestroyed) => {\n      setPopupState(isDestroyed ? 'closed' : 'open')\n    }\n  })\n\n  const rootStyle = {\n    zIndex,\n    position: fixed ? ('fixed' as const) : undefined,\n    width: takeWidthOfAnchor ? anchorRef.current?.clientWidth : undefined\n  }\n\n  const handleMouseLeave = useCallback(() => {\n    if (dismissOnMouseLeave) {\n      onClose?.()\n    }\n  }, [dismissOnMouseLeave, onClose])\n\n  return (\n    <>\n      {/* Portal the popup out of the dom structure so that it has a separate stacking context */}\n      {popupState !== 'closed'\n        ? ReactDOM.createPortal(\n            <div\n              ref={wrapperRef}\n              className={styles.root}\n              style={rootStyle}\n              onMouseLeave={handleMouseLeave}\n            >\n              {transitions.map(({ item, key, props }) =>\n                item ? (\n                  <animated.div\n                    className={cn(styles.popup, className)}\n                    css={{ boxShadow: shadows[shadow] }}\n                    ref={popupRef}\n                    key={key}\n                    style={{\n                      ...props,\n                      transformOrigin: `${computedTransformOrigin.horizontal} ${computedTransformOrigin.vertical}`\n                    }}\n                  >\n                    {showHeader && (\n                      <div\n                        className={cn(styles.header, {\n                          [styles.noAfter]: hideCloseButton\n                        })}\n                      >\n                        {hideCloseButton ? null : (\n                          <PlainButton\n                            variant='subdued'\n                            aria-label={messages.close}\n                            onClick={handleClose}\n                            iconLeft={IconClose}\n                          />\n                        )}\n                        <div className={styles.title}>{title}</div>\n                      </div>\n                    )}\n                    {children}\n                  </animated.div>\n                ) : null\n              )}\n            </div>,\n            portalLocation\n          )\n        : null}\n    </>\n  )\n})\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Popup.js","sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MutableRefObject,\n  Ref,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\nimport ReactDOM from 'react-dom'\nimport { useTransition, animated } from 'react-spring'\nimport { usePrevious } from 'react-use'\n\nimport { PlainButton } from '~harmony/components/button/PlainButton/PlainButton'\nimport { IconClose } from '~harmony/icons'\nimport { ModalState } from '~harmony/utils/modalState'\n\nimport { useClickOutside } from '../../hooks/useClickOutside'\nimport { getScrollParent } from '../../utils/getScrollParent'\n\nimport styles from './Popup.module.css'\nimport type { PopupProps, Origin } from './types'\n\nconst messages = {\n  close: 'close popup'\n}\n\n/**\n * Number of pixels between the edge of the container and the popup\n * before the popup needs to reposition itself to be in view.\n */\nconst CONTAINER_INSET_PADDING = 16\n\n/**\n * Figures out whether the specified position would overflow the window\n * and picks a better position accordingly\n * @param {Origin} anchorOrigin where the origin is on the trigger\n * @param {Origin} transformOrigin where the origin is on the popup\n * @param {DOMRect} anchorRect the position and size of the trigger\n * @param {DOMRect} wrapperRect the position and size of the popup\n * @return {{ anchorOrigin: Origin, transformOrigin: Origin }} the new origin after accounting for overflow\n */\nconst getComputedOrigins = (\n  anchorOrigin: Origin,\n  transformOrigin: Origin,\n  anchorRect: DOMRect,\n  wrapperRect: DOMRect,\n  portal: HTMLElement,\n  containerRef?: MutableRefObject<HTMLDivElement | undefined>\n) => {\n  if (!anchorRect || !wrapperRect) return { anchorOrigin, transformOrigin }\n\n  let containerWidth, containerHeight\n  if (containerRef && containerRef.current) {\n    const containerRect = containerRef.current.getBoundingClientRect()\n    containerWidth =\n      containerRect.width + containerRect.x - CONTAINER_INSET_PADDING\n    containerHeight =\n      containerRect.height + containerRect.y - CONTAINER_INSET_PADDING\n  } else {\n    const portalRect = portal.getBoundingClientRect()\n    containerWidth = portalRect.width + portalRect.x - CONTAINER_INSET_PADDING\n    containerHeight = portalRect.height + portalRect.y - CONTAINER_INSET_PADDING\n  }\n\n  // Get new wrapper position\n  const anchorTranslation = getOriginTranslation(anchorOrigin, anchorRect)\n  const wrapperTranslation = getOriginTranslation(transformOrigin, wrapperRect)\n  const wrapperX = anchorRect.x + anchorTranslation.x - wrapperTranslation.x\n  const wrapperY = anchorRect.y + anchorTranslation.y - wrapperTranslation.y\n\n  // Check bounds of the wrapper in new position are inside container\n  const overflowRight = wrapperX + wrapperRect.width > containerWidth\n  const overflowLeft = wrapperX < 0\n  const overflowBottom = wrapperY + wrapperRect.height > containerHeight\n  const overflowTop = wrapperY < 0\n\n  // For all overflows, flip the position\n  if (overflowRight) {\n    anchorOrigin.horizontal = 'left'\n    transformOrigin.horizontal = 'right'\n  }\n  if (overflowLeft) {\n    anchorOrigin.horizontal = 'right'\n    transformOrigin.horizontal = 'left'\n  }\n  if (overflowTop) {\n    anchorOrigin.vertical = 'bottom'\n    transformOrigin.vertical = 'top'\n  }\n  if (overflowBottom) {\n    anchorOrigin.vertical = 'top'\n    transformOrigin.vertical = 'bottom'\n  }\n  return { anchorOrigin, transformOrigin }\n}\n\n/**\n * Gets the x, y offsets for the given origin using the dimensions\n * @param origin the relative origin\n * @param dimensions the dimensions to use with the relative origin\n * @returns the x and y coordinates of the new origin relative to the old one\n */\nconst getOriginTranslation = (\n  origin: Origin,\n  dimensions: { width: number; height: number }\n) => {\n  let x = 0\n  let y = 0\n  const { width, height } = dimensions\n  if (origin.horizontal === 'center') {\n    x += width / 2\n  } else if (origin.horizontal === 'right') {\n    x += width\n  }\n  if (origin.vertical === 'center') {\n    y += height / 2\n  } else if (origin.vertical === 'bottom') {\n    y += height\n  }\n  return { x, y }\n}\n\nconst defaultAnchorOrigin: Origin = {\n  horizontal: 'center',\n  vertical: 'bottom'\n}\n\nconst defaultTransformOrigin: Origin = {\n  horizontal: 'center',\n  vertical: 'top'\n}\n\nconst closingAnimationDuration = 90\n\n/**\n * A popup is an in-place container that shows on top of the UI. A popup does\n * not impact the rest of the UI (e.g. dimming background or shifting elements).\n * It differs from modals, which do take over the whole UI and are usually\n * center-screened.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(\n  props: PopupProps,\n  ref: Ref<HTMLDivElement>\n) {\n  const { isVisible: isVisibleProp } = props\n  const [popupState, setPopupState] = useState<ModalState>('closed')\n\n  const isVisible = popupState !== 'closed'\n  useEffect(() => {\n    if (popupState === 'closed' && isVisibleProp) {\n      setPopupState('opening')\n    } else if (popupState === 'open' && !isVisibleProp) {\n      setPopupState('closing')\n    }\n  }, [isVisibleProp, popupState])\n\n  return isVisible ? (\n    <PopupInternal\n      ref={ref}\n      popupState={popupState}\n      setPopupState={setPopupState}\n      {...props}\n    />\n  ) : null\n})\n\nexport const PopupInternal = forwardRef<\n  HTMLDivElement,\n  PopupProps & {\n    popupState: ModalState\n    setPopupState: (value: SetStateAction<ModalState>) => void\n  }\n>(function Popup(\n  props: PopupProps & {\n    popupState: ModalState\n    setPopupState: (value: SetStateAction<ModalState>) => void\n  },\n  ref: Ref<HTMLDivElement>\n) {\n  const {\n    popupState,\n    setPopupState,\n    anchorRef,\n    checkIfClickInside,\n    children,\n    className,\n    isVisible: isVisibleProp,\n    onAfterClose,\n    onClose,\n    anchorOrigin: anchorOriginProp = defaultAnchorOrigin,\n    transformOrigin: transformOriginProp = defaultTransformOrigin,\n    dismissOnMouseLeave,\n    hideCloseButton = false,\n    showHeader,\n    title,\n    zIndex,\n    containerRef,\n    portalLocation = document.body,\n    shadow = 'mid',\n    fixed,\n    takeWidthOfAnchor\n  } = props\n  const { spring, shadows } = useTheme()\n\n  const isVisible = popupState !== 'closed'\n  const previousIsVisible = usePrevious(isVisible)\n\n  const handleClose = useCallback(() => {\n    onClose?.()\n    setTimeout(() => {\n      if (onAfterClose) {\n        onAfterClose()\n      }\n    }, closingAnimationDuration)\n  }, [onClose, onAfterClose])\n\n  const [anchorOrigin, transformOrigin] = [\n    anchorOriginProp,\n    transformOriginProp\n  ]\n\n  const popupRef: React.MutableRefObject<HTMLDivElement> = useClickOutside(\n    handleClose,\n    isVisible,\n    checkIfClickInside,\n    typeof ref === 'function' ? undefined : ref,\n    anchorRef\n  )\n\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const originalTopPosition = useRef<number>(0)\n  const [computedTransformOrigin, setComputedTransformOrigin] =\n    useState(anchorOrigin)\n\n  const wrapperHeight = wrapperRef?.current?.offsetHeight ?? null\n  const wrapperWidth = wrapperRef?.current?.offsetWidth ?? null\n  const previousHeight = usePrevious(wrapperHeight)\n  const previousWidth = usePrevious(wrapperWidth)\n  const wrapperSizeChange =\n    wrapperHeight !== previousHeight || wrapperWidth !== previousWidth\n\n  // On visible, set the position\n  useEffect(() => {\n    if ((isVisible && !previousIsVisible) || wrapperSizeChange) {\n      const [anchorRect, wrapperRect] = [anchorRef, wrapperRef].map((r) =>\n        r?.current?.getBoundingClientRect()\n      )\n      if (!anchorRect || !wrapperRect) return\n\n      // Add a small delay to ensure content is rendered\n      requestAnimationFrame(() => {\n        const {\n          anchorOrigin: anchorOriginComputed,\n          transformOrigin: transformOriginComputed\n        } = getComputedOrigins(\n          anchorOrigin,\n          transformOrigin,\n          anchorRect,\n          wrapperRect,\n          portalLocation,\n          containerRef\n        )\n        setComputedTransformOrigin(transformOriginComputed)\n\n        const anchorTranslation = getOriginTranslation(\n          anchorOriginComputed,\n          anchorRect\n        )\n        const wrapperTranslation = getOriginTranslation(\n          transformOriginComputed,\n          wrapperRect\n        )\n\n        const top = anchorRect.y + anchorTranslation.y - wrapperTranslation.y\n        const left = anchorRect.x + anchorTranslation.x - wrapperTranslation.x\n\n        // Ensure popup stays within viewport bounds\n        const viewportHeight = window.innerHeight\n        const viewportWidth = window.innerWidth\n        const adjustedTop = Math.min(\n          Math.max(0, top),\n          viewportHeight - wrapperRect.height\n        )\n        const adjustedLeft = Math.min(\n          Math.max(0, left),\n          viewportWidth - wrapperRect.width\n        )\n\n        if (wrapperRef.current) {\n          wrapperRef.current.style.top = `${adjustedTop}px`\n          wrapperRef.current.style.left = `${adjustedLeft}px`\n        }\n\n        originalTopPosition.current = adjustedTop\n      })\n    }\n  }, [\n    isVisible,\n    wrapperRef,\n    anchorRef,\n    anchorOrigin,\n    transformOrigin,\n    setComputedTransformOrigin,\n    originalTopPosition,\n    portalLocation,\n    containerRef,\n    previousIsVisible,\n    previousHeight,\n    wrapperSizeChange\n  ])\n\n  // Callback invoked on each scroll. Uses original top position to scroll with content.\n  // Takes scrollParent to get the current scroll position as well as the intitial scroll position\n  // when the popup became visible.\n  const watchScroll = useCallback(\n    (scrollParent: Element, initialScrollPosition: number) => {\n      const scrollTop = scrollParent.scrollTop\n      if (wrapperRef.current) {\n        wrapperRef.current.style.top = `${\n          originalTopPosition.current - scrollTop + initialScrollPosition\n        }px`\n      }\n    },\n    [wrapperRef, originalTopPosition]\n  )\n\n  // Set up scroll listeners\n  useEffect(() => {\n    if (isVisible && anchorRef.current) {\n      const scrollParent = getScrollParent(anchorRef.current)\n      if (!scrollParent) return\n\n      const initialScrollPosition = scrollParent.scrollTop\n      const listener = () => watchScroll(scrollParent, initialScrollPosition)\n      scrollParent.addEventListener('scroll', listener)\n      return () => {\n        scrollParent.removeEventListener('scroll', listener)\n      }\n    }\n\n    return () => {}\n  }, [isVisible, watchScroll, anchorRef])\n\n  // Set up key listeners\n  useEffect(() => {\n    if (isVisible) {\n      const escapeListener = (e: KeyboardEvent) => {\n        if (e.code === 'Escape') {\n          e.stopPropagation()\n          handleClose()\n        }\n      }\n\n      document.addEventListener('keydown', escapeListener, true)\n\n      return () => document.removeEventListener('keydown', escapeListener, true)\n    }\n    return () => {}\n  }, [isVisible, handleClose])\n\n  useEffect(() => {\n    if (popupState === 'closed' && isVisibleProp) {\n    } else if (popupState === 'open' && !isVisibleProp) {\n      anchorRef.current?.focus()\n    }\n  }, [anchorRef, isVisibleProp, popupState])\n\n  const transitions = useTransition(isVisibleProp, null, {\n    from: {\n      transform: `scale(0)`,\n      opacity: 0\n    },\n    enter: {\n      transform: `scale(1)`,\n      opacity: 1\n    },\n    leave: {\n      transform: `scale(0)`,\n      opacity: 0\n    },\n    config: spring.standard,\n    unique: true,\n    onDestroyed: (isDestroyed) => {\n      setPopupState(isDestroyed ? 'closed' : 'open')\n    }\n  })\n\n  const rootStyle = {\n    zIndex,\n    position: fixed ? ('fixed' as const) : undefined,\n    width: takeWidthOfAnchor ? anchorRef.current?.clientWidth : undefined\n  }\n\n  const handleMouseLeave = useCallback(() => {\n    if (dismissOnMouseLeave) {\n      onClose?.()\n    }\n  }, [dismissOnMouseLeave, onClose])\n\n  return (\n    <>\n      {/* Portal the popup out of the dom structure so that it has a separate stacking context */}\n      {popupState !== 'closed'\n        ? ReactDOM.createPortal(\n            <div\n              ref={wrapperRef}\n              className={styles.root}\n              style={rootStyle}\n              onMouseLeave={handleMouseLeave}\n            >\n              {transitions.map(({ item, key, props }) =>\n                item ? (\n                  <animated.div\n                    className={cn(styles.popup, className)}\n                    css={{ boxShadow: shadows[shadow] }}\n                    ref={popupRef}\n                    key={key}\n                    style={{\n                      ...props,\n                      transformOrigin: `${computedTransformOrigin.horizontal} ${computedTransformOrigin.vertical}`\n                    }}\n                  >\n                    {showHeader && (\n                      <div\n                        className={cn(styles.header, {\n                          [styles.noAfter]: hideCloseButton\n                        })}\n                      >\n                        {hideCloseButton ? null : (\n                          <PlainButton\n                            variant='subdued'\n                            aria-label={messages.close}\n                            onClick={handleClose}\n                            iconLeft={IconClose}\n                          />\n                        )}\n                        <div className={styles.title}>{title}</div>\n                      </div>\n                    )}\n                    {children}\n                  </animated.div>\n                ) : null\n              )}\n            </div>,\n            portalLocation\n          )\n        : null}\n    </>\n  )\n})\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/dist/components/popup-menu/PopupMenu.d.ts

@@ -9,7 +9,7 @@ export declare const PopupMenu: (props: {
     renderMenu?: ((menuItems: PopupMenuItem[]) => JSX.Element) | undefined;
     dismissOnMouseLeave?: boolean | undefined;
     overrideIconColor?: boolean | undefined;
-    renderTrigger: (anchorRef: import("react").MutableRefObject<any>, triggerPopup: (onMouseEnter?: boolean | undefined) => void, triggerProps: Partial<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>) => import("react").ReactNode;
+    renderTrigger: (anchorRef: import("react").MutableRefObject<any>, triggerPopup: (onMouseEnter?: boolean | undefined) => void, triggerProps: Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "id" | "aria-controls" | "aria-expanded" | "aria-haspopup">) => import("react").ReactNode;
     id?: string | undefined;
 } & {
     title?: string | undefined;

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

@@ -49,17 +49,17 @@ var PopupMenu = forwardRef(function PopupMenu(props, ref) {
         color: color.text.default,
         cursor: 'pointer',
         '&:hover': {
-            color: color.text.staticWhite,
+            color: color.text.white,
             background: color.secondary.s300,
             path: {
-                fill: color.text.staticWhite
+                fill: color.icon.white
             }
         },
         '&.destructive': {
             color: color.status.error,
             '&:hover': {
                 background: color.status.error,
-                color: color.text.staticWhite
+                color: color.icon.white
             }
         }
     };
@@ -73,7 +73,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: className, css: popupCss, dismissOnMouseLeave: dismissOnMouseLeave, fixed: fixed }, { children: renderMenu ? (renderMenu(items)) : (jsx(Box, __assign({ as: 'ul', role: 'menu', "aria-labelledby": triggerId, tabIndex: -1, css: { all: 'unset' } }, { children: items.map(function (item, i) { return (jsxs(Flex, __assign({ as: 'li', role: 'menuitem', className: cn(item.className, {
+                }, isVisible: isPopupVisible, showHeader: Boolean(title), hideCloseButton: hideCloseButton, onClose: handlePopupClose, ref: ref, title: title !== null && title !== void 0 ? title : '', zIndex: zIndex, containerRef: containerRef, transformOrigin: transformOrigin, anchorOrigin: anchorOrigin, className: className, css: popupCss, dismissOnMouseLeave: dismissOnMouseLeave, fixed: fixed }, { children: renderMenu ? (renderMenu(items)) : (jsx(Box, __assign({ as: 'ul', role: 'menu', "aria-labelledby": triggerId, tabIndex: -1, css: { all: 'unset' } }, { children: items.map(function (item, i) { return (jsxs(Flex, __assign({ as: 'li', role: 'menuitem', className: cn(item.className, {
                             destructive: item.destructive
                         }), onClick: handleMenuItemClick(item), tabIndex: i === 0 ? 0 : -1, css: menuItemCss, alignItems: 'center', gap: 's', p: 's', ph: 'm', borderRadius: 's' }, { children: [item.icon ? (jsx(Flex, __assign({ css: iconCss, className: item.iconClassName, alignItems: 'center', justifyContent: 'center', w: 'unit5', h: 'unit5' }, { children: item.icon }))) : null, item.text] }), typeof item.text === 'string' ? item.text : i)); }) }))) }))] })));
 });

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 { useTheme } from '@emotion/react'\nimport cn from 'classnames'\n\nimport { Box } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Popup } from '../popup'\n\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      overrideIconColor\n    } = props\n\n    const { spacing, typography, color } = useTheme()\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<HTMLElement>) => {\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    const popupCss = {\n      margin: spacing.s,\n      padding: spacing.s,\n      border: `1px solid ${color.border.strong}`\n    }\n\n    const menuItemCss = {\n      fontSize: typography.size.m,\n      fontWeight: typography.weight.demiBold,\n      color: color.text.default,\n      cursor: 'pointer',\n      '&:hover': {\n        color: color.text.staticWhite,\n        background: color.secondary.s300,\n        path: {\n          fill: color.text.staticWhite\n        }\n      },\n      '&.destructive': {\n        color: color.status.error,\n        '&:hover': {\n          background: color.status.error,\n          color: color.text.staticWhite\n        }\n      }\n    }\n\n    const iconCss = {\n      path: {\n        fill: overrideIconColor ? undefined : color.text.default\n      }\n    }\n\n    return (\n      <Box 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={className}\n          css={popupCss}\n          dismissOnMouseLeave={dismissOnMouseLeave}\n          fixed={fixed}\n        >\n          {renderMenu ? (\n            renderMenu(items)\n          ) : (\n            <Box\n              as='ul'\n              role='menu'\n              aria-labelledby={triggerId}\n              tabIndex={-1}\n              css={{ all: 'unset' }}\n            >\n              {items.map((item, i) => (\n                <Flex\n                  as='li'\n                  key={typeof item.text === 'string' ? item.text : i}\n                  role='menuitem'\n                  className={cn(item.className, {\n                    destructive: item.destructive\n                  })}\n                  onClick={handleMenuItemClick(item)}\n                  tabIndex={i === 0 ? 0 : -1}\n                  css={menuItemCss}\n                  alignItems='center'\n                  gap='s'\n                  p='s'\n                  ph='m'\n                  borderRadius='s'\n                >\n                  {item.icon ? (\n                    <Flex\n                      css={iconCss}\n                      className={item.iconClassName}\n                      alignItems='center'\n                      justifyContent='center'\n                      w='unit5'\n                      h='unit5'\n                    >\n                      {item.icon}\n                    </Flex>\n                  ) : null}\n                  {item.text}\n                </Flex>\n              ))}\n            </Box>\n          )}\n        </Popup>\n      </Box>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAWA;;AAEG;AACU,IAAA,SAAS,GAAG,UAAU,CACjC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG,EAAA;AAEzB,IAAA,IAAA,KAAK,GAeH,KAAK,CAAA,KAfF,EACL,OAAO,GAcL,KAAK,CAAA,OAdA,EACP,UAAU,GAaR,KAAK,CAAA,UAbG,EACV,aAAa,GAYX,KAAK,CAAA,aAZM,EACb,mBAAmB,GAWjB,KAAK,CAAA,mBAXY,EACnB,eAAe,GAUb,KAAK,CAAA,eAVQ,EACf,KAAK,GASH,KAAK,CAAA,KATF,EACL,SAAS,GAQP,KAAK,CAAA,SARE,EACT,MAAM,GAOJ,KAAK,OAPD,EACN,YAAY,GAMV,KAAK,aANK,EACZ,YAAY,GAKV,KAAK,aALK,EACZ,eAAe,GAIb,KAAK,gBAJQ,EACf,EAAE,GAGA,KAAK,GAHL,EACF,KAAK,GAEH,KAAK,MAFF,EACL,iBAAiB,GACf,KAAK,kBADU,CACV;AAEH,IAAA,IAAA,EAAiC,GAAA,QAAQ,EAAE,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAe,CAAA;AACjD,IAAA,IAAM,cAAc,GAAG,MAAM,EAAO,CAAA;AACpC,IAAA,IAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAErC,IAAA,EAAA,GAAsC,QAAQ,CAAU,KAAK,CAAC,EAA7D,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAA4B,CAAA;AAEpE,IAAA,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,YAAsB,EAAA;QACrB,IAAI,YAAY,IAAI,cAAc;YAAE,OAAM;AAC1C,QAAA,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAA;AACpC,KAAC,EACD,CAAC,cAAc,EAAE,iBAAiB,CAAC,CACpC,CAAA;IAED,IAAM,gBAAgB,GAAG,WAAW,CAAC,YAAA;QACnC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACxB,QAAA,IAAI,OAAO;AAAE,YAAA,OAAO,EAAE,CAAA;AACxB,KAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAA;IAEhC,IAAM,mBAAmB,GAAG,WAAW,CACrC,UAAC,IAAmB,EAAA,EAAK,OAAA,UAAC,CAA0B,EAAA;QAClD,CAAC,CAAC,eAAe,EAAE,CAAA;AACnB,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AACf,QAAA,gBAAgB,EAAE,CAAA;AACpB,KAAC,GAAA,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAA;AAED,IAAA,IAAM,SAAS,GAAG,EAAE,GAAG,EAAG,CAAA,MAAA,CAAA,EAAE,EAAU,UAAA,CAAA,GAAG,SAAS,CAAA;AAElD,IAAA,IAAM,YAAY,GAAG;QACnB,eAAe,EAAE,cAAc,GAAG,EAAE,GAAG,SAAS;AAChD,QAAA,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,cAAc,GAAI,MAAgB,GAAG,SAAS;AAC/D,QAAA,EAAE,EAAE,SAAS;KACd,CAAA;AAED,IAAA,IAAM,QAAQ,GAAG;QACf,MAAM,EAAE,OAAO,CAAC,CAAC;QACjB,OAAO,EAAE,OAAO,CAAC,CAAC;AAClB,QAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAE;KAC3C,CAAA;AAED,IAAA,IAAM,WAAW,GAAG;AAClB,QAAA,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;AAC3B,QAAA,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ;AACtC,QAAA,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AACzB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC7B,YAAA,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI;AAChC,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC7B,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;AACzB,YAAA,SAAS,EAAE;AACT,gBAAA,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;AAC9B,gBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;AAC9B,aAAA;AACF,SAAA;KACF,CAAA;AAED,IAAA,IAAM,OAAO,GAAG;AACd,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,iBAAiB,GAAG,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO;AACzD,SAAA;KACF,CAAA;IAED,QACEA,IAAC,CAAA,GAAG,EAAC,QAAA,CAAA,EAAA,GAAG,EAAE,cAAc,EACrB,EAAA,EAAA,QAAA,EAAA,CAAA,aAAa,CAAC,SAAS,EAAE,YAAY,EAAE,YAAY,CAAC,EACrDC,GAAC,CAAA,KAAK,EACJ,QAAA,CAAA,EAAA,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,UAAC,MAAmB,EAAA;AACtC,oBAAA,IAAI,MAAM,YAAY,OAAO,IAAI,cAAc,EAAE;wBAC/C,OAAO,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;AAC/C,qBAAA;AACD,oBAAA,OAAO,KAAK,CAAA;AACd,iBAAC,EACD,SAAS,EAAE,cAAc,EACzB,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,EAC1B,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,gBAAgB,EACzB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,QAAQ,EACb,mBAAmB,EAAE,mBAAmB,EACxC,KAAK,EAAE,KAAK,EAAA,EAAA,EAAA,QAAA,EAEX,UAAU,IACT,UAAU,CAAC,KAAK,CAAC,KAEjBA,GAAA,CAAC,GAAG,EAAA,QAAA,CAAA,EACF,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACM,iBAAA,EAAA,SAAS,EAC1B,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,EAEpB,EAAA,EAAA,QAAA,EAAA,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,CAAC,EAAA,EAAK,QACtBD,KAAC,IAAI,EAAA,QAAA,CAAA,EACH,EAAE,EAAC,IAAI,EAEP,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;4BAC5B,WAAW,EAAE,IAAI,CAAC,WAAW;yBAC9B,CAAC,EACF,OAAO,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAC1B,GAAG,EAAE,WAAW,EAChB,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,GAAG,EACP,CAAC,EAAC,GAAG,EACL,EAAE,EAAC,GAAG,EACN,YAAY,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EAAA,CAEf,IAAI,CAAC,IAAI,IACRC,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,CAAC,EAAC,OAAO,EACT,CAAC,EAAC,OAAO,EAAA,EAAA,EAAA,QAAA,EAER,IAAI,CAAC,IAAI,EAAA,CAAA,CACL,IACL,IAAI,EACP,IAAI,CAAC,IAAI,CAAA,EAAA,CAAA,EA1BL,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CA2B7C,EA9Be,EA+BvB,CAAC,EAAA,CAAA,CACE,CACP,EAAA,CAAA,CACK,CACJ,EAAA,CAAA,CAAA,EACP;AACH,CAAC;;;;"}
+{"version":3,"file":"PopupMenu.js","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'\n\nimport { useTheme } from '@emotion/react'\nimport cn from 'classnames'\n\nimport { Box } from '../layout/Box'\nimport { Flex } from '../layout/Flex'\nimport { Popup } from '../popup'\n\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      overrideIconColor\n    } = props\n\n    const { spacing, typography, color } = useTheme()\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<HTMLElement>) => {\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    const popupCss = {\n      margin: spacing.s,\n      padding: spacing.s,\n      border: `1px solid ${color.border.strong}`\n    }\n\n    const menuItemCss = {\n      fontSize: typography.size.m,\n      fontWeight: typography.weight.demiBold,\n      color: color.text.default,\n      cursor: 'pointer',\n      '&:hover': {\n        color: color.text.white,\n        background: color.secondary.s300,\n        path: {\n          fill: color.icon.white\n        }\n      },\n      '&.destructive': {\n        color: color.status.error,\n        '&:hover': {\n          background: color.status.error,\n          color: color.icon.white\n        }\n      }\n    }\n\n    const iconCss = {\n      path: {\n        fill: overrideIconColor ? undefined : color.text.default\n      }\n    }\n\n    return (\n      <Box 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={className}\n          css={popupCss}\n          dismissOnMouseLeave={dismissOnMouseLeave}\n          fixed={fixed}\n        >\n          {renderMenu ? (\n            renderMenu(items)\n          ) : (\n            <Box\n              as='ul'\n              role='menu'\n              aria-labelledby={triggerId}\n              tabIndex={-1}\n              css={{ all: 'unset' }}\n            >\n              {items.map((item, i) => (\n                <Flex\n                  as='li'\n                  key={typeof item.text === 'string' ? item.text : i}\n                  role='menuitem'\n                  className={cn(item.className, {\n                    destructive: item.destructive\n                  })}\n                  onClick={handleMenuItemClick(item)}\n                  tabIndex={i === 0 ? 0 : -1}\n                  css={menuItemCss}\n                  alignItems='center'\n                  gap='s'\n                  p='s'\n                  ph='m'\n                  borderRadius='s'\n                >\n                  {item.icon ? (\n                    <Flex\n                      css={iconCss}\n                      className={item.iconClassName}\n                      alignItems='center'\n                      justifyContent='center'\n                      w='unit5'\n                      h='unit5'\n                    >\n                      {item.icon}\n                    </Flex>\n                  ) : null}\n                  {item.text}\n                </Flex>\n              ))}\n            </Box>\n          )}\n        </Popup>\n      </Box>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/popup-menu/types.d.ts

@@ -27,7 +27,7 @@ export type PopupMenuProps = {
      * - An anchorRef for positioning the menu
      * - A triggerPopup function that will show/hide the popup
      */
-    renderTrigger: (anchorRef: React.MutableRefObject<any>, triggerPopup: (onMouseEnter?: boolean) => void, triggerProps: Partial<ComponentProps<'button'>>) => React.ReactNode;
+    renderTrigger: (anchorRef: React.MutableRefObject<any>, triggerPopup: (onMouseEnter?: boolean) => void, triggerProps: Pick<ComponentProps<'button'>, 'aria-controls' | 'aria-haspopup' | 'aria-expanded' | 'id'>) => React.ReactNode;
     /**
      * Providing an id is necessary for proper a11y
      */

package/dist/components/popup-menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/popup-menu/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,oBAAoB,GAAG,IAAI,CAC9B,UAAU,EACR,OAAO,GACP,WAAW,GACX,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,OAAO,CACV,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,EAAE,aAAa,EAAE,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAExD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;OAIG;IACH,aAAa,EAAE,CACb,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,EACtC,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,EAC9C,YAAY,EAAE,OAAO,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,KAC5C,KAAK,CAAC,SAAS,CAAA;IACpB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,GAAG,oBAAoB,CAAA;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAEjD;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAElC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/popup-menu/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,oBAAoB,GAAG,IAAI,CAC9B,UAAU,EACR,OAAO,GACP,WAAW,GACX,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,OAAO,CACV,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,EAAE,aAAa,EAAE,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAExD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;OAIG;IACH,aAAa,EAAE,CACb,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,EACtC,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,EAC9C,YAAY,EAAE,IAAI,CAChB,cAAc,CAAC,QAAQ,CAAC,EACxB,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,IAAI,CAC3D,KACE,KAAK,CAAC,SAAS,CAAA;IACpB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,GAAG,oBAAoB,CAAA;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAEjD;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAElC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}

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

@@ -1 +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"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAiB,MAAM,SAAS,CAAA;AAYzD,eAAO,MAAM,WAAW,UAAW,gBAAgB,qDA+DlD,CAAA"}

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

@@ -1,39 +1,37 @@
 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)
+var getBigInt = function (num) {
+    if (typeof num === 'bigint')
         return num;
-    return new BN(num);
+    return BigInt(Math.round(num));
 };
-function clampBN(value, min, max) {
-    return BN.min(BN.max(value, min), max);
+function clampBigInt(value, min, max) {
+    return value < min ? min : value > max ? max : value;
 }
 // @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 className = props.className, sliderClassName = props.sliderClassName, sliderBarClassName = props.sliderBarClassName, _d = props.min, min = _d === void 0 ? 0 : _d, _e = props.max, max = _e === void 0 ? 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));
+        var minBigInt = getBigInt(min);
+        var maxBigInt = getBigInt(max);
+        var valBigInt = getBigInt(value);
+        var clampedValue = clampBigInt(valBigInt - minBigInt, BigInt(0), maxBigInt);
+        return Number((clampedValue * BigInt(100)) / (maxBigInt - minBigInt));
     }, [max, min, value]);
     useEffect(function () {
-        setSliderWidth(percentage.toNumber());
+        setSliderWidth(percentage);
     }, [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 = {},
+    return (jsxs("div", __assign({ className: cn(styles.container, (_a = {}, _a[className] = !!className, _a)), role: 'progressbar', "aria-valuenow": percentage }, 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() }))] })))] })));
+                        _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 }) : String(min) })), jsx("div", __assign({ className: styles.maxLabel }, { children: MaxWrapper ? jsx(MaxWrapper, { value: max }) : String(max) }))] })))] })));
 };
 
 export { ProgressBar };

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

@@ -1 +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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"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './ProgressBar.module.css'\nimport { ProgressBarProps, ProgressValue } from './types'\n\nconst getBigInt = (num: ProgressValue): bigint => {\n  if (typeof num === 'bigint') return num\n  return BigInt(Math.round(num))\n}\n\nfunction clampBigInt(value: bigint, min: bigint, max: bigint): bigint {\n  return value < min ? min : value > max ? max : value\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 = 0,\n    max = 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 minBigInt = getBigInt(min)\n    const maxBigInt = getBigInt(max)\n    const valBigInt = getBigInt(value)\n\n    const clampedValue = clampBigInt(\n      valBigInt - minBigInt,\n      BigInt(0),\n      maxBigInt\n    )\n    return Number((clampedValue * BigInt(100)) / (maxBigInt - minBigInt))\n  }, [max, min, value])\n\n  useEffect(() => {\n    setSliderWidth(percentage)\n  }, [percentage])\n\n  return (\n    <div\n      className={cn(styles.container, { [className!]: !!className })}\n      role='progressbar'\n      aria-valuenow={percentage}\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} /> : String(min)}\n          </div>\n          <div className={styles.maxLabel}>\n            {MaxWrapper ? <MaxWrapper value={max} /> : String(max)}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import BN from 'bn.js';
-export type ProgressValue = number | BN;
+export type ProgressValue = number | bigint;
 export type ProgressBarProps = {
     className?: string;
     sliderClassName?: string;

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

@@ -1 +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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAA;AAE3C,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/radio/Radio.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 export type RadioProps = ComponentPropsWithoutRef<'input'> & {
     inputClassName?: string;
+    error?: boolean;
 };
 /**
  * Radio buttons allow a user to select a single option from a list of predefined options.

package/dist/components/radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAMhD,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,OAAO,CAAC,GAAG;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,UAAW,UAAU,qDAgEtC,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAMhD,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,OAAO,CAAC,GAAG;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,UAAW,UAAU,qDAoEtC,CAAA"}

package/dist/components/radio/Radio.js

@@ -8,7 +8,7 @@ import { useRadioGroup } from '../radio-group/useRadioGroup.js';
  * TODO: Add label + icon support
  */
 var Radio = function (props) {
-    var className = props.className, inputClassName = props.inputClassName, onChangeProp = props.onChange, nameProp = props.name, checkedProp = props.checked, disabled = props.disabled, other = __rest(props, ["className", "inputClassName", "onChange", "name", "checked", "disabled"]);
+    var className = props.className, inputClassName = props.inputClassName, onChangeProp = props.onChange, nameProp = props.name, checkedProp = props.checked, disabled = props.disabled, error = props.error, other = __rest(props, ["className", "inputClassName", "onChange", "name", "checked", "disabled", "error"]);
     var _a = useTheme(), spacing = _a.spacing, color = _a.color;
     var _b = useRadioGroup({
         name: nameProp,
@@ -20,11 +20,13 @@ var Radio = function (props) {
         position: 'relative',
         height: spacing.unit6,
         width: spacing.unit6,
-        '::before': __assign(__assign({ position: 'absolute', width: spacing.unit6, height: spacing.unit6, borderRadius: '50%', content: "' '", background: color.neutral.n200, boxShadow: 'inset 2px 2px 2px rgba(0, 0, 0, 0.1)', boxSizing: 'border-box' }, (checked && {
+        '::before': __assign(__assign(__assign({ position: 'absolute', width: spacing.unit6, height: spacing.unit6, borderRadius: '50%', content: "' '", background: color.neutral.n200, boxShadow: 'inset 2px 2px 2px rgba(0, 0, 0, 0.1)', boxSizing: 'border-box' }, (checked && {
             background: color.special.white,
             border: "6px solid ".concat(color.secondary.secondary)
         })), (disabled && {
             background: color.neutral.n150
+        })), (error && {
+            border: "2px solid ".concat(color.status.danger)
         }))
     };
     var inputCss = {

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { useRadioGroup } from '../radio-group/useRadioGroup'\n\nexport type RadioProps = ComponentPropsWithoutRef<'input'> & {\n  inputClassName?: string\n}\n\n/**\n * Radio buttons allow a user to select a single option from a list of predefined options.\n * TODO: Add label + icon support\n */\nexport const Radio = (props: RadioProps) => {\n  const {\n    className,\n    inputClassName,\n    onChange: onChangeProp,\n    name: nameProp,\n    checked: checkedProp,\n    disabled,\n    ...other\n  } = props\n  const { spacing, color } = useTheme()\n\n  const { name, checked, onChange } = useRadioGroup({\n    name: nameProp,\n    checked: checkedProp,\n    value: other.value,\n    onChange: onChangeProp\n  })\n\n  const rootCss: CSSObject = {\n    position: 'relative',\n    height: spacing.unit6,\n    width: spacing.unit6,\n    '::before': {\n      position: 'absolute',\n      width: spacing.unit6,\n      height: spacing.unit6,\n      borderRadius: '50%',\n      content: \"' '\",\n      background: color.neutral.n200,\n      boxShadow: 'inset 2px 2px 2px rgba(0, 0, 0, 0.1)',\n      boxSizing: 'border-box',\n      ...(checked && {\n        background: color.special.white,\n        border: `6px solid ${color.secondary.secondary}`\n      }),\n      ...(disabled && {\n        background: color.neutral.n150\n      })\n    }\n  }\n\n  const inputCss = {\n    opacity: 0,\n    margin: 0,\n    width: '100%',\n    height: '100%',\n    cursor: disabled ? 'default' : 'pointer'\n  }\n\n  return (\n    <div css={rootCss} className={className}>\n      <input\n        css={inputCss}\n        className={inputClassName}\n        name={name}\n        checked={checked}\n        type='radio'\n        onChange={onChange}\n        disabled={disabled}\n        {...other}\n      />\n    </div>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;AAUA;;;AAGG;AACI,IAAM,KAAK,GAAG,UAAC,KAAiB,EAAA;AAEnC,IAAA,IAAA,SAAS,GAOP,KAAK,CAPE,SAAA,EACT,cAAc,GAMZ,KAAK,CANO,cAAA,EACJ,YAAY,GAKpB,KAAK,CALe,QAAA,EAChB,QAAQ,GAIZ,KAAK,CAJO,IAAA,EACL,WAAW,GAGlB,KAAK,CAHa,OAAA,EACpB,QAAQ,GAEN,KAAK,CAFC,QAAA,EACL,KAAK,GACN,MAAA,CAAA,KAAK,EARH,CAAA,WAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,CAQL,CADS,CACD;IACH,IAAA,EAAA,GAAqB,QAAQ,EAAE,EAA7B,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAe,CAAA;IAE/B,IAAA,EAAA,GAA8B,aAAa,CAAC;AAChD,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,KAAK,CAAC,KAAK;AAClB,QAAA,QAAQ,EAAE,YAAY;KACvB,CAAC,EALM,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAK7B,CAAA;AAEF,IAAA,IAAM,OAAO,GAAc;AACzB,QAAA,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;QACrB,KAAK,EAAE,OAAO,CAAC,KAAK;AACpB,QAAA,UAAU,sBACR,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,MAAM,EAAE,OAAO,CAAC,KAAK,EACrB,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAC9B,SAAS,EAAE,sCAAsC,EACjD,SAAS,EAAE,YAAY,EACpB,GAAC,OAAO,IAAI;AACb,YAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;AAC/B,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,SAAS,CAAC,SAAS,CAAE;SACjD,EAAC,GACE,QAAQ,IAAI;AACd,YAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AAC/B,SAAA,EACF;KACF,CAAA;AAED,IAAA,IAAM,QAAQ,GAAG;AACf,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS;KACzC,CAAA;AAED,IAAA,QACEA,GAAK,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,gBACrCA,GACE,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EACd,KAAK,CACT,CAAA,EAAA,CAAA,CACE,EACP;AACH;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { useRadioGroup } from '../radio-group/useRadioGroup'\n\nexport type RadioProps = ComponentPropsWithoutRef<'input'> & {\n  inputClassName?: string\n  error?: boolean\n}\n\n/**\n * Radio buttons allow a user to select a single option from a list of predefined options.\n * TODO: Add label + icon support\n */\nexport const Radio = (props: RadioProps) => {\n  const {\n    className,\n    inputClassName,\n    onChange: onChangeProp,\n    name: nameProp,\n    checked: checkedProp,\n    disabled,\n    error,\n    ...other\n  } = props\n  const { spacing, color } = useTheme()\n\n  const { name, checked, onChange } = useRadioGroup({\n    name: nameProp,\n    checked: checkedProp,\n    value: other.value,\n    onChange: onChangeProp\n  })\n\n  const rootCss: CSSObject = {\n    position: 'relative',\n    height: spacing.unit6,\n    width: spacing.unit6,\n    '::before': {\n      position: 'absolute',\n      width: spacing.unit6,\n      height: spacing.unit6,\n      borderRadius: '50%',\n      content: \"' '\",\n      background: color.neutral.n200,\n      boxShadow: 'inset 2px 2px 2px rgba(0, 0, 0, 0.1)',\n      boxSizing: 'border-box',\n      ...(checked && {\n        background: color.special.white,\n        border: `6px solid ${color.secondary.secondary}`\n      }),\n      ...(disabled && {\n        background: color.neutral.n150\n      }),\n      ...(error && {\n        border: `2px solid ${color.status.danger}`\n      })\n    }\n  }\n\n  const inputCss = {\n    opacity: 0,\n    margin: 0,\n    width: '100%',\n    height: '100%',\n    cursor: disabled ? 'default' : 'pointer'\n  }\n\n  return (\n    <div css={rootCss} className={className}>\n      <input\n        css={inputCss}\n        className={inputClassName}\n        name={name}\n        checked={checked}\n        type='radio'\n        onChange={onChange}\n        disabled={disabled}\n        {...other}\n      />\n    </div>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;AAWA;;;AAGG;AACI,IAAM,KAAK,GAAG,UAAC,KAAiB,EAAA;AAEnC,IAAA,IAAA,SAAS,GAQP,KAAK,UARE,EACT,cAAc,GAOZ,KAAK,CAAA,cAPO,EACJ,YAAY,GAMpB,KAAK,CAAA,QANe,EAChB,QAAQ,GAKZ,KAAK,CALO,IAAA,EACL,WAAW,GAIlB,KAAK,CAJa,OAAA,EACpB,QAAQ,GAGN,KAAK,SAHC,EACR,KAAK,GAEH,KAAK,CAAA,KAFF,EACF,KAAK,GAAA,MAAA,CACN,KAAK,EATH,CAAA,WAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,EAAA,OAAA,CASL,CADS,CACD;IACH,IAAA,EAAA,GAAqB,QAAQ,EAAE,EAA7B,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAe,CAAA;IAE/B,IAAA,EAAA,GAA8B,aAAa,CAAC;AAChD,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,KAAK,CAAC,KAAK;AAClB,QAAA,QAAQ,EAAE,YAAY;KACvB,CAAC,EALM,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAK7B,CAAA;AAEF,IAAA,IAAM,OAAO,GAAc;AACzB,QAAA,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;QACrB,KAAK,EAAE,OAAO,CAAC,KAAK;AACpB,QAAA,UAAU,+BACR,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,MAAM,EAAE,OAAO,CAAC,KAAK,EACrB,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAC9B,SAAS,EAAE,sCAAsC,EACjD,SAAS,EAAE,YAAY,EACpB,GAAC,OAAO,IAAI;AACb,YAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;AAC/B,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,SAAS,CAAC,SAAS,CAAE;SACjD,EAAC,GACE,QAAQ,IAAI;AACd,YAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;SAC/B,EAAC,GACE,KAAK,IAAI;AACX,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAE;AAC3C,SAAA,EACF;KACF,CAAA;AAED,IAAA,IAAM,QAAQ,GAAG;AACf,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS;KACzC,CAAA;AAED,IAAA,QACEA,GAAK,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,gBACrCA,GACE,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EACd,KAAK,CACT,CAAA,EAAA,CAAA,CACE,EACP;AACH;;;;"}

package/dist/components/radio-group/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAQ,SAAS,EAAE,MAAM,WAAW,CAAA;AAI3C,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,GAAG,SAAS,CAAA;AAEb,eAAO,MAAM,UAAU,UAAW,eAAe,qDA4BhD,CAAA"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAGnE,OAAO,EAAQ,SAAS,EAAE,MAAM,WAAW,CAAA;AAI3C,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,GAAG,SAAS,CAAA;AAEb,eAAO,MAAM,UAAU,UAAW,eAAe,qDAwChD,CAAA"}

package/dist/components/radio-group/RadioGroup.js

@@ -1,6 +1,6 @@
 import { __rest, __assign } from '../../_virtual/_tslib.js';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 import { useControlled } from '../../hooks/useControlled.js';
 import '../layout/Box/Box.js';
 import '@emotion/react';
@@ -15,9 +15,18 @@ var RadioGroup = function (props) {
         defaultValue: defaultValue,
         componentName: 'RadioButtonGroup'
     }), value = _a[0], setValueState = _a[1];
+    var isChanging = useRef(false);
     var handleChange = useCallback(function (e) {
+        // Prevent concurrent changes
+        if (isChanging.current)
+            return;
+        isChanging.current = true;
         setValueState(e.target.value);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        // Reset the lock after a short delay
+        requestAnimationFrame(function () {
+            isChanging.current = false;
+        });
     }, [setValueState, onChange]);
     return (jsx(RadioGroupContext.Provider, __assign({ value: { name: name, onChange: handleChange, value: value } }, { children: jsx(Flex, __assign({ role: 'radiogroup', direction: 'column' }, other, { children: children })) })));
 };

package/dist/components/radio-group/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode, useCallback } from 'react'\n\nimport { useControlled } from '../../hooks/useControlled'\nimport { Flex, FlexProps } from '../layout'\n\nimport { RadioGroupContext } from './RadioGroupContext'\n\nexport type RadioGroupProps = {\n  name: string\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n  children?: ReactNode\n  defaultValue?: string\n  value?: string | null\n} & FlexProps\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const {\n    name,\n    onChange,\n    children,\n    value: valueProp,\n    defaultValue,\n    ...other\n  } = props\n  const [value, setValueState] = useControlled({\n    controlledProp: valueProp,\n    defaultValue,\n    componentName: 'RadioButtonGroup'\n  })\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setValueState(e.target.value)\n      onChange?.(e)\n    },\n    [setValueState, onChange]\n  )\n  return (\n    <RadioGroupContext.Provider value={{ name, onChange: handleChange, value }}>\n      <Flex role='radiogroup' direction='column' {...other}>\n        {children}\n      </Flex>\n    </RadioGroupContext.Provider>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAeO,IAAM,UAAU,GAAG,UAAC,KAAsB,EAAA;AAE7C,IAAA,IAAA,IAAI,GAMF,KAAK,CAAA,IANH,EACJ,QAAQ,GAKN,KAAK,CALC,QAAA,EACR,QAAQ,GAIN,KAAK,CAJC,QAAA,EACD,SAAS,GAGd,KAAK,CAAA,KAHS,EAChB,YAAY,GAEV,KAAK,CAAA,YAFK,EACT,KAAK,GACN,MAAA,CAAA,KAAK,EAPH,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,cAAA,CAOL,CADS,CACD;IACH,IAAA,EAAA,GAAyB,aAAa,CAAC;AAC3C,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAE,kBAAkB;AAClC,KAAA,CAAC,EAJK,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,QAIzB,CAAA;AACF,IAAA,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAgC,EAAA;AAC/B,QAAA,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAC7B,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,CAAC,CAAC,CAAA;AACf,KAAC,EACD,CAAC,aAAa,EAAE,QAAQ,CAAC,CAC1B,CAAA;AACD,IAAA,QACEA,GAAC,CAAA,iBAAiB,CAAC,QAAQ,aAAC,KAAK,EAAE,EAAE,IAAI,MAAA,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAA,KAAA,EAAE,EAAA,EAAA,EAAA,QAAA,EACxEA,IAAC,IAAI,EAAA,QAAA,CAAA,EAAC,IAAI,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,IAAK,KAAK,EAAA,EAAA,QAAA,EACjD,QAAQ,EACJ,CAAA,CAAA,EAAA,CAAA,CACoB,EAC9B;AACH;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode, useCallback, useRef } from 'react'\n\nimport { useControlled } from '../../hooks/useControlled'\nimport { Flex, FlexProps } from '../layout'\n\nimport { RadioGroupContext } from './RadioGroupContext'\n\nexport type RadioGroupProps = {\n  name: string\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n  children?: ReactNode\n  defaultValue?: string\n  value?: string | null\n} & FlexProps\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const {\n    name,\n    onChange,\n    children,\n    value: valueProp,\n    defaultValue,\n    ...other\n  } = props\n  const [value, setValueState] = useControlled({\n    controlledProp: valueProp,\n    defaultValue,\n    componentName: 'RadioButtonGroup'\n  })\n\n  const isChanging = useRef(false)\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      // Prevent concurrent changes\n      if (isChanging.current) return\n\n      isChanging.current = true\n      setValueState(e.target.value)\n      onChange?.(e)\n\n      // Reset the lock after a short delay\n      requestAnimationFrame(() => {\n        isChanging.current = false\n      })\n    },\n    [setValueState, onChange]\n  )\n  return (\n    <RadioGroupContext.Provider value={{ name, onChange: handleChange, value }}>\n      <Flex role='radiogroup' direction='column' {...other}>\n        {children}\n      </Flex>\n    </RadioGroupContext.Provider>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAeO,IAAM,UAAU,GAAG,UAAC,KAAsB,EAAA;AAE7C,IAAA,IAAA,IAAI,GAMF,KAAK,CAAA,IANH,EACJ,QAAQ,GAKN,KAAK,CALC,QAAA,EACR,QAAQ,GAIN,KAAK,CAJC,QAAA,EACD,SAAS,GAGd,KAAK,CAAA,KAHS,EAChB,YAAY,GAEV,KAAK,CAAA,YAFK,EACT,KAAK,GACN,MAAA,CAAA,KAAK,EAPH,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,cAAA,CAOL,CADS,CACD;IACH,IAAA,EAAA,GAAyB,aAAa,CAAC;AAC3C,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAE,kBAAkB;AAClC,KAAA,CAAC,EAJK,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,QAIzB,CAAA;AAEF,IAAA,IAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;AAEhC,IAAA,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAgC,EAAA;;QAE/B,IAAI,UAAU,CAAC,OAAO;YAAE,OAAM;AAE9B,QAAA,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;AACzB,QAAA,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAC7B,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,CAAC,CAAC,CAAA;;AAGb,QAAA,qBAAqB,CAAC,YAAA;AACpB,YAAA,UAAU,CAAC,OAAO,GAAG,KAAK,CAAA;AAC5B,SAAC,CAAC,CAAA;AACJ,KAAC,EACD,CAAC,aAAa,EAAE,QAAQ,CAAC,CAC1B,CAAA;AACD,IAAA,QACEA,GAAC,CAAA,iBAAiB,CAAC,QAAQ,aAAC,KAAK,EAAE,EAAE,IAAI,MAAA,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAA,KAAA,EAAE,EAAA,EAAA,EAAA,QAAA,EACxEA,IAAC,IAAI,EAAA,QAAA,CAAA,EAAC,IAAI,EAAC,YAAY,EAAC,SAAS,EAAC,QAAQ,IAAK,KAAK,EAAA,EAAA,QAAA,EACjD,QAAQ,EACJ,CAAA,CAAA,EAAA,CAAA,CACoB,EAC9B;AACH;;;;"}

package/dist/components/scrubber/Scrubber.js

@@ -5,6 +5,8 @@ import cn from 'classnames';
 import { formatTrackTimestamp } from '../../utils/formatTrackTimestamp.js';
 import 'lodash';
 import 'numeral';
+import '@emotion/react';
+import '../../contexts/MediaContext.js';
 import styles from './Scrubber.module.css.js';
 import { Slider } from './Slider.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Scrubber.js","sources":["../../../src/components/scrubber/Scrubber.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nimport cn from 'classnames'\n\nimport { formatTrackTimestamp } from '~harmony/utils'\n\nimport styles from './Scrubber.module.css'\nimport { Slider } from './Slider'\nimport { ScrubberProps } from './types'\n\n/** Timeout applied when releasing the drag-handle before timestamps reset. */\nconst SCRUB_RELEASE_TIMEOUT_MS = 200\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 = true,\n  elapsedSeconds,\n  totalSeconds,\n  playbackRate = 1,\n  getAudioPosition,\n  getTotalTime,\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          {formatTrackTimestamp(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        getAudioPosition={getAudioPosition}\n        getTotalTime={getTotalTime}\n        onScrubRelease={onHandleScrubRelease}\n        includeExpandedTargets={includeExpandedTargets}\n        style={style}\n      />\n      {includeTimestamps && (\n        <div className={styles.timestampEnd}>\n          {formatTrackTimestamp(totalSeconds)}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Scrubber.js","sources":["../../../src/components/scrubber/Scrubber.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nimport cn from 'classnames'\n\nimport { formatTrackTimestamp } from '~harmony/utils'\n\nimport styles from './Scrubber.module.css'\nimport { Slider } from './Slider'\nimport { ScrubberProps } from './types'\n\n/** Timeout applied when releasing the drag-handle before timestamps reset. */\nconst SCRUB_RELEASE_TIMEOUT_MS = 200\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 = true,\n  elapsedSeconds,\n  totalSeconds,\n  playbackRate = 1,\n  getAudioPosition,\n  getTotalTime,\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          {formatTrackTimestamp(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        getAudioPosition={getAudioPosition}\n        getTotalTime={getTotalTime}\n        onScrubRelease={onHandleScrubRelease}\n        includeExpandedTargets={includeExpandedTargets}\n        style={style}\n      />\n      {includeTimestamps && (\n        <div className={styles.timestampEnd}>\n          {formatTrackTimestamp(totalSeconds)}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/segmented-control/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,yGAuJ5B,CAAA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,yGA4K5B,CAAA"}

package/dist/components/segmented-control/SegmentedControl.js

@@ -15,10 +15,11 @@ import styles from './SegmentedControl.module.css.js';
  */
 var SegmentedControl = function (props) {
     var _a;
+    var _b, _c;
     var options = props.options, selected = props.selected, onSelectOption = props.onSelectOption, className = props.className, fullWidth = props.fullWidth, isMobile = props.isMobile, disabled = props.disabled, label = props.label, ariaLabelledBy = props["aria-labelledby"], equalWidth = props.equalWidth, forceRefreshAfterMs = props.forceRefreshAfterMs;
     var optionRefs = useRef(options.map(function (_) { return createRef(); }));
-    var _b = useState(options[0].key), localSelected = _b[0], setLocalSelected = _b[1];
-    var _c = useState(0), maxOptionWidth = _c[0], setMaxOptionWidth = _c[1];
+    var _d = useState((_c = (_b = options[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ''), localSelected = _d[0], setLocalSelected = _d[1];
+    var _e = useState(0), maxOptionWidth = _e[0], setMaxOptionWidth = _e[1];
     var selectedOption = selected || localSelected;
     var onSetSelected = function (option) {
         // Call props function if controlled
@@ -26,22 +27,33 @@ var SegmentedControl = function (props) {
             onSelectOption(option);
         setLocalSelected(option);
     };
-    var _d = useSpring(function () { return ({
+    var _f = useSpring(function () { return ({
         to: { left: '0px', width: '0px' }
-    }); }), tabProps = _d[0], tabApi = _d[1];
+    }); }), tabProps = _f[0], tabApi = _f[1];
+    // Update refs when options change
+    useEffect(function () {
+        optionRefs.current = options.map(function (_) { return createRef(); });
+    }, [options]);
+    // Update localSelected if current selection is no longer valid
+    useEffect(function () {
+        if (options.length > 0 &&
+            !options.some(function (option) { return option.key === localSelected; })) {
+            setLocalSelected(options[0].key);
+        }
+    }, [options, localSelected]);
     useEffect(function () {
         setMaxOptionWidth(optionRefs.current.reduce(function (currentMax, ref) {
             var _a, _b;
             var rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             return Math.max((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0, currentMax);
         }, 0));
-    }, []);
+    }, [options]);
     // Watch for resizes and repositions so that we move and resize the slider appropriately
-    var _e = useMeasure({
+    var _g = useMeasure({
         offsetSize: true,
         polyfill: ResizeObserver
-    }), selectedRef = _e[0], bounds = _e[1];
-    var _f = useState(false), forceRefresh = _f[0], setForceRefresh = _f[1];
+    }), selectedRef = _g[0], bounds = _g[1];
+    var _h = useState(false), forceRefresh = _h[0], setForceRefresh = _h[1];
     useEffect(function () {
         setTimeout(function () {
             setForceRefresh(!forceRefresh);
@@ -84,7 +96,7 @@ var SegmentedControl = function (props) {
                                 _a[styles.isMobile] = isMobile,
                                 _a)), style: equalWidth && maxOptionWidth
                                 ? { width: "".concat(maxOptionWidth, "px") }
-                                : undefined }, { children: [option.icon, jsx("input", { type: 'radio', checked: isSelected, onChange: function () {
+                                : undefined }, { children: [option.leftIcon && (jsx(option.leftIcon, { size: 's', color: isSelected ? 'default' : 'subdued' })), option.icon, jsx("input", { type: 'radio', checked: isSelected, onChange: function () {
                                         onSetSelected(option.key);
                                     }, disabled: isOptionDisabled }), jsx(Text, __assign({ variant: 'body', strength: 'strong', color: isSelected ? 'default' : 'subdued', lineHeight: 'single' }, { children: option.text }))] })), idx !== options.length - 1 ? (jsx("div", { className: cn(styles.separator, (_b = {},
                                 _b[styles.invisible] =