@artsy/palette 45.14.0-canary.1497.33070.0 → 45.14.0-canary.1497.33075.0

package/dist/esm/elements/Pointer/Pointer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pointer.js","names":["React","FC","useEffect","useMemo","useState","useCallback","styled","variant","Position","useResizeObserver","Box","themeGet","POINTER_VARIANTS","defaultLight","backgroundColor","defaultDark","Pointer","_ref","anchorRef","tooltipRef","isFlipped","placement","_ref$variant","_useState","_useState2","_slicedToArray","_useState2$","anchorWidth","anchorHeight","setAnchorDimensions","_useState3","_useState4","_useState4$","tooltipWidth","tooltipHeight","setTooltipDimensions","position","horizontalCenter","verticalCenter","bottom","left","concat","POINTER_WIDTH","right","top","_objectSpread","handleResize","current","anchorRect","getBoundingClientRect","tooltipRect","width","height","target","onResize","createElement","Container","_extends","displayName","POINTER_SIZE","Math","sqrt","pow","withConfig","componentId","variants"],"sources":["../../../../src/elements/Pointer/Pointer.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState, useCallback } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Position } from \"../../utils\"\nimport { useResizeObserver } from \"../../utils/useResizeObserver\"\nimport { Box } from \"../Box\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nconst POINTER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n  },\n}\n\ntype PointerVariant = keyof typeof POINTER_VARIANTS\n\nexport interface PointerProps {\n  anchorRef: React.RefObject<HTMLElement>\n  tooltipRef: React.RefObject<HTMLElement>\n  isFlipped: boolean\n  placement: Position\n  variant?: PointerVariant\n}\n\n/**\n * Internal-use component for displaying a triangular pointer to an anchor node\n */\nexport const Pointer: FC<React.PropsWithChildren<PointerProps>> = ({\n  anchorRef,\n  tooltipRef,\n  isFlipped,\n  placement,\n  variant = \"defaultLight\",\n}) => {\n  const [[anchorWidth, anchorHeight], setAnchorDimensions] = useState([0, 0])\n  const [[tooltipWidth, tooltipHeight], setTooltipDimensions] = useState([0, 0])\n\n  const position = useMemo(() => {\n    const horizontalCenter = anchorWidth / 2\n    const verticalCenter = anchorHeight / 2\n\n    switch (placement) {\n      case \"top-start\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          left: `${\n            horizontalCenter > tooltipWidth\n              ? POINTER_WIDTH\n              : horizontalCenter - POINTER_WIDTH / 2\n          }px`,\n        }\n      case \"top\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n        }\n      case \"top-end\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          right: `${\n            horizontalCenter > tooltipWidth\n              ? POINTER_WIDTH * 2\n              : horizontalCenter + POINTER_WIDTH / 2\n          }px`,\n        }\n      case \"bottom-start\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          left: `${\n            horizontalCenter > tooltipWidth\n              ? POINTER_WIDTH\n              : horizontalCenter - POINTER_WIDTH / 2\n          }px`,\n        }\n      case \"bottom\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n        }\n      case \"bottom-end\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          right: `${\n            horizontalCenter > tooltipWidth\n              ? POINTER_WIDTH * 2\n              : horizontalCenter + POINTER_WIDTH / 2\n          }px`,\n        }\n      case \"left-start\":\n        return {\n          top: `${\n            verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n              ? POINTER_WIDTH\n              : verticalCenter\n          }px`,\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"left\":\n        return {\n          top: \"50%\",\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"left-end\":\n        return {\n          bottom: `${\n            verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n              ? POINTER_WIDTH\n              : verticalCenter\n          }px`,\n\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right-start\":\n        return {\n          top: `${\n            verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n              ? POINTER_WIDTH\n              : verticalCenter\n          }px`,\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right\":\n        return {\n          top: \"50%\",\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right-end\":\n        return {\n          bottom: `${\n            verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n              ? POINTER_WIDTH\n              : verticalCenter\n          }px`,\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n    }\n  }, [\n    anchorHeight,\n    anchorWidth,\n    isFlipped,\n    placement,\n    tooltipHeight,\n    tooltipWidth,\n  ])\n\n  const handleResize = useCallback(() => {\n    if (!anchorRef.current || !tooltipRef.current) return\n\n    const anchorRect = anchorRef.current.getBoundingClientRect()\n    const tooltipRect = tooltipRef.current.getBoundingClientRect()\n\n    setAnchorDimensions([anchorRect.width, anchorRect.height])\n    setTooltipDimensions([tooltipRect.width, tooltipRect.height])\n  }, [anchorRef, tooltipRef])\n\n  useEffect(handleResize, [handleResize])\n\n  useResizeObserver({ target: anchorRef, onResize: handleResize })\n\n  return <Container variant={variant} {...position} />\n}\n\nconst POINTER_SIZE = 10 // px\nconst POINTER_WIDTH = Math.sqrt(2 * Math.pow(10, 2)) // px\n\nconst Container = styled(Box)<{ variant: PointerVariant }>`\n  z-index: -1;\n  position: absolute;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: ${POINTER_SIZE}px;\n    height: ${POINTER_SIZE}px;\n    transform-origin: 0 0;\n    transform: rotate(-45deg);\n    box-shadow: ${themeGet(\"effects.dropShadow\")};\n    ${variant({ variants: POINTER_VARIANTS })}\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"Pointer.js","names":["React","useEffect","useMemo","useState","useCallback","styled","variant","useResizeObserver","Box","themeGet","POINTER_VARIANTS","defaultLight","backgroundColor","defaultDark","Pointer","_ref","anchorRef","tooltipRef","isFlipped","placement","_ref$variant","_useState","_useState2","_slicedToArray","_useState2$","anchorWidth","anchorHeight","setAnchorDimensions","_useState3","_useState4","_useState4$","tooltipWidth","tooltipHeight","setTooltipDimensions","position","horizontalCenter","verticalCenter","bottom","left","concat","POINTER_WIDTH","right","top","_objectSpread","handleResize","current","anchorRect","getBoundingClientRect","tooltipRect","width","height","target","onResize","createElement","Container","_extends","displayName","POINTER_SIZE","Math","sqrt","pow","withConfig","componentId","variants"],"sources":["../../../../src/elements/Pointer/Pointer.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState, useCallback } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Position } from \"../../utils\"\nimport { useResizeObserver } from \"../../utils/useResizeObserver\"\nimport { Box } from \"../Box\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nconst POINTER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n  },\n}\n\ntype PointerVariant = keyof typeof POINTER_VARIANTS\n\nexport interface PointerProps {\n  anchorRef: React.RefObject<HTMLElement>\n  tooltipRef: React.RefObject<HTMLElement>\n  isFlipped: boolean\n  placement: Position\n  variant?: PointerVariant\n}\n\n/**\n * Internal-use component for displaying a triangular pointer to an anchor node\n */\nexport const Pointer: FC<React.PropsWithChildren<PointerProps>> = ({\n  anchorRef,\n  tooltipRef,\n  isFlipped,\n  placement,\n  variant = \"defaultLight\",\n}) => {\n  const [[anchorWidth, anchorHeight], setAnchorDimensions] = useState([0, 0])\n  const [[tooltipWidth, tooltipHeight], setTooltipDimensions] = useState([0, 0])\n\n  const position = useMemo(() => {\n    const horizontalCenter = anchorWidth / 2\n    const verticalCenter = anchorHeight / 2\n\n    switch (placement) {\n      case \"top-start\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          left: `${\n            horizontalCenter > tooltipWidth\n              ? POINTER_WIDTH\n              : horizontalCenter - POINTER_WIDTH / 2\n          }px`,\n        }\n      case \"top\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n        }\n      case \"top-end\":\n        return {\n          bottom: isFlipped ? \"100%\" : 0,\n          right: `${\n            horizontalCenter > tooltipWidth\n              ? POINTER_WIDTH * 2\n              : horizontalCenter + POINTER_WIDTH / 2\n          }px`,\n        }\n      case \"bottom-start\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          left: `${\n            horizontalCenter > tooltipWidth\n              ? POINTER_WIDTH\n              : horizontalCenter - POINTER_WIDTH / 2\n          }px`,\n        }\n      case \"bottom\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          left: `calc(50% - ${POINTER_WIDTH / 2}px)`,\n        }\n      case \"bottom-end\":\n        return {\n          top: isFlipped ? \"100%\" : 0,\n          right: `${\n            horizontalCenter > tooltipWidth\n              ? POINTER_WIDTH * 2\n              : horizontalCenter + POINTER_WIDTH / 2\n          }px`,\n        }\n      case \"left-start\":\n        return {\n          top: `${\n            verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n              ? POINTER_WIDTH\n              : verticalCenter\n          }px`,\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"left\":\n        return {\n          top: \"50%\",\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"left-end\":\n        return {\n          bottom: `${\n            verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n              ? POINTER_WIDTH\n              : verticalCenter\n          }px`,\n\n          ...(isFlipped\n            ? { left: `-${POINTER_WIDTH / 2}px` }\n            : { right: `${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right-start\":\n        return {\n          top: `${\n            verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n              ? POINTER_WIDTH\n              : verticalCenter\n          }px`,\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right\":\n        return {\n          top: \"50%\",\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n      case \"right-end\":\n        return {\n          bottom: `${\n            verticalCenter > tooltipHeight - POINTER_WIDTH / 2\n              ? POINTER_WIDTH\n              : verticalCenter\n          }px`,\n          ...(isFlipped\n            ? { right: `${POINTER_WIDTH / 2}px` }\n            : { left: `-${POINTER_WIDTH / 2}px` }),\n        }\n    }\n  }, [\n    anchorHeight,\n    anchorWidth,\n    isFlipped,\n    placement,\n    tooltipHeight,\n    tooltipWidth,\n  ])\n\n  const handleResize = useCallback(() => {\n    if (!anchorRef.current || !tooltipRef.current) return\n\n    const anchorRect = anchorRef.current.getBoundingClientRect()\n    const tooltipRect = tooltipRef.current.getBoundingClientRect()\n\n    setAnchorDimensions([anchorRect.width, anchorRect.height])\n    setTooltipDimensions([tooltipRect.width, tooltipRect.height])\n  }, [anchorRef, tooltipRef])\n\n  useEffect(handleResize, [handleResize])\n\n  useResizeObserver({ target: anchorRef, onResize: handleResize })\n\n  return <Container variant={variant} {...position} />\n}\n\nconst POINTER_SIZE = 10 // px\nconst POINTER_WIDTH = Math.sqrt(2 * Math.pow(10, 2)) // px\n\nconst Container = styled(Box)<{ variant: PointerVariant }>`\n  z-index: -1;\n  position: absolute;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: ${POINTER_SIZE}px;\n    height: ${POINTER_SIZE}px;\n    transform-origin: 0 0;\n    transform: rotate(-45deg);\n    box-shadow: ${themeGet(\"effects.dropShadow\")};\n    ${variant({ variants: POINTER_VARIANTS })}\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/Popover/Popover.js

@@ -12,9 +12,9 @@ import React, { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
 import CloseIcon from "@artsy/icons/CloseIcon";
-import { Position, useClickOutside, usePortal, usePosition } from "../../utils";
+import { useClickOutside, usePortal, usePosition } from "../../utils";
 import { useUpdateEffect } from "../../utils/useUpdateEffect";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Clickable } from "../Clickable";
 import { Pointer } from "../Pointer";
 import { themeGet } from "@styled-system/theme-get";

package/dist/esm/elements/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","useCallback","useEffect","useState","styled","variant","CloseIcon","Position","useClickOutside","usePortal","usePosition","useUpdateEffect","Box","BoxProps","Clickable","Pointer","themeGet","POPOVER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Popover","_ref","children","_ref$ignoreClickOutsi","ignoreClickOutside","_ref$manageFocus","manageFocus","_ref$offset","offset","onClose","onDismiss","_ref$placement","placement","_ref$pointer","pointer","popover","_ref$showCloseButton","showCloseButton","_ref$variant","_ref$visible","visible","_visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleHide","handleDismiss","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","active","isFlipped","state","ref","onClickOutside","when","type","_usePortal","createPortal","createElement","Fragment","Tip","tabIndex","display","Close","p","onClick","fill","Panel","_extends","withConfig","displayName","componentId","variants"],"sources":["../../../../src/elements/Popover/Popover.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Position, useClickOutside, usePortal, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Pointer } from \"../Pointer\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const POPOVER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type PopoverVariant = keyof typeof POPOVER_VARIANTS\n\nexport interface PopoverActions {\n  /** Call to show popover */\n  onVisible(): void\n  /** Call to hide popover */\n  onHide(): void\n  /** Call to dismiss popover */\n  onDismiss(): void\n  /** Pass ref to element you want the popover to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n  children: (actions: PopoverActions) => JSX.Element\n  ignoreClickOutside?: boolean\n  manageFocus?: boolean\n  offset?: number\n  /** Called whenever the Popver is closed (both explcitly dismissed and through click outside) */\n  onClose?: () => void\n  /** Called whenever the Popover is dismissed (explicitly) */\n  onDismiss?: () => void\n  placement?: Position\n  /** Display triangular pointer back to anchor node */\n  pointer?: boolean\n  popover:\n    | ((actions: Omit<PopoverActions, \"anchorRef\">) => JSX.Element)\n    | React.ReactNode\n  /** Show the close icon button */\n  showCloseButton?: boolean\n  variant?: PopoverVariant\n  /** Initial default visibility */\n  visible?: boolean\n}\n\n/**\n * A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover = ({\n  children,\n  ignoreClickOutside = false,\n  manageFocus = true,\n  offset = 10,\n  onClose,\n  onDismiss,\n  placement = \"top\",\n  pointer = false,\n  popover,\n  showCloseButton = true,\n  variant = \"defaultLight\",\n  visible: _visible = false,\n  zIndex = 1,\n  ...rest\n}: PopoverProps) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (!manageFocus) return\n\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = useCallback(() => {\n    setVisible(true)\n  }, [])\n\n  const onHide = useCallback(() => {\n    setVisible(false)\n  }, [])\n\n  const handleHide = useCallback(() => {\n    onHide()\n    onClose?.()\n  }, [onHide, onClose])\n\n  const handleDismiss = useCallback(() => {\n    handleHide()\n    onDismiss?.()\n  }, [handleHide, onDismiss])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [handleHide])\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible,\n  })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible && !ignoreClickOutside,\n    type: \"click\",\n  })\n\n  const { createPortal } = usePortal()\n\n  return (\n    <>\n      {children({\n        anchorRef: anchorRef as any,\n        onVisible,\n        onHide: handleHide,\n        onDismiss: handleDismiss,\n      })}\n\n      {visible &&\n        createPortal(\n          <Tip\n            tabIndex={0}\n            ref={tooltipRef as any}\n            zIndex={zIndex}\n            display=\"inline-block\"\n            position=\"relative\"\n            variant={variant}\n          >\n            {pointer && (\n              <Pointer\n                anchorRef={anchorRef}\n                tooltipRef={tooltipRef}\n                variant={variant}\n                placement={placement}\n                isFlipped={isFlipped}\n              />\n            )}\n\n            {showCloseButton && (\n              <Close\n                position=\"relative\"\n                zIndex={2}\n                p={1}\n                onClick={handleDismiss}\n                aria-label=\"Close\"\n              >\n                <CloseIcon fill=\"currentColor\" display=\"block\" />\n              </Close>\n            )}\n\n            <Panel\n              variant={variant}\n              position=\"relative\"\n              p={1}\n              zIndex={1}\n              {...rest}\n            >\n              {typeof popover === \"function\"\n                ? popover({\n                    onVisible,\n                    onHide: handleHide,\n                    onDismiss: handleDismiss,\n                  })\n                : popover}\n            </Panel>\n          </Tip>\n        )}\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: PopoverVariant }>`\n  position: fixed;\n  text-align: left;\n  transition: opacity 250ms ease-out;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: PopoverVariant }>`\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Close = styled(Clickable)`\n  float: right;\n`\n"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":["React","useCallback","useEffect","useState","styled","variant","CloseIcon","useClickOutside","usePortal","usePosition","useUpdateEffect","Box","Clickable","Pointer","themeGet","POPOVER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Popover","_ref","children","_ref$ignoreClickOutsi","ignoreClickOutside","_ref$manageFocus","manageFocus","_ref$offset","offset","onClose","onDismiss","_ref$placement","placement","_ref$pointer","pointer","popover","_ref$showCloseButton","showCloseButton","_ref$variant","_ref$visible","visible","_visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleHide","handleDismiss","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","active","isFlipped","state","ref","onClickOutside","when","type","_usePortal","createPortal","createElement","Fragment","Tip","tabIndex","display","Close","p","onClick","fill","Panel","_extends","withConfig","displayName","componentId","variants"],"sources":["../../../../src/elements/Popover/Popover.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Position, useClickOutside, usePortal, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Pointer } from \"../Pointer\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const POPOVER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type PopoverVariant = keyof typeof POPOVER_VARIANTS\n\nexport interface PopoverActions {\n  /** Call to show popover */\n  onVisible(): void\n  /** Call to hide popover */\n  onHide(): void\n  /** Call to dismiss popover */\n  onDismiss(): void\n  /** Pass ref to element you want the popover to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n  children: (actions: PopoverActions) => JSX.Element\n  ignoreClickOutside?: boolean\n  manageFocus?: boolean\n  offset?: number\n  /** Called whenever the Popver is closed (both explcitly dismissed and through click outside) */\n  onClose?: () => void\n  /** Called whenever the Popover is dismissed (explicitly) */\n  onDismiss?: () => void\n  placement?: Position\n  /** Display triangular pointer back to anchor node */\n  pointer?: boolean\n  popover:\n    | ((actions: Omit<PopoverActions, \"anchorRef\">) => JSX.Element)\n    | React.ReactNode\n  /** Show the close icon button */\n  showCloseButton?: boolean\n  variant?: PopoverVariant\n  /** Initial default visibility */\n  visible?: boolean\n}\n\n/**\n * A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover = ({\n  children,\n  ignoreClickOutside = false,\n  manageFocus = true,\n  offset = 10,\n  onClose,\n  onDismiss,\n  placement = \"top\",\n  pointer = false,\n  popover,\n  showCloseButton = true,\n  variant = \"defaultLight\",\n  visible: _visible = false,\n  zIndex = 1,\n  ...rest\n}: PopoverProps) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (!manageFocus) return\n\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = useCallback(() => {\n    setVisible(true)\n  }, [])\n\n  const onHide = useCallback(() => {\n    setVisible(false)\n  }, [])\n\n  const handleHide = useCallback(() => {\n    onHide()\n    onClose?.()\n  }, [onHide, onClose])\n\n  const handleDismiss = useCallback(() => {\n    handleHide()\n    onDismiss?.()\n  }, [handleHide, onDismiss])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [handleHide])\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible,\n  })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible && !ignoreClickOutside,\n    type: \"click\",\n  })\n\n  const { createPortal } = usePortal()\n\n  return (\n    <>\n      {children({\n        anchorRef: anchorRef as any,\n        onVisible,\n        onHide: handleHide,\n        onDismiss: handleDismiss,\n      })}\n\n      {visible &&\n        createPortal(\n          <Tip\n            tabIndex={0}\n            ref={tooltipRef as any}\n            zIndex={zIndex}\n            display=\"inline-block\"\n            position=\"relative\"\n            variant={variant}\n          >\n            {pointer && (\n              <Pointer\n                anchorRef={anchorRef}\n                tooltipRef={tooltipRef}\n                variant={variant}\n                placement={placement}\n                isFlipped={isFlipped}\n              />\n            )}\n\n            {showCloseButton && (\n              <Close\n                position=\"relative\"\n                zIndex={2}\n                p={1}\n                onClick={handleDismiss}\n                aria-label=\"Close\"\n              >\n                <CloseIcon fill=\"currentColor\" display=\"block\" />\n              </Close>\n            )}\n\n            <Panel\n              variant={variant}\n              position=\"relative\"\n              p={1}\n              zIndex={1}\n              {...rest}\n            >\n              {typeof popover === \"function\"\n                ? popover({\n                    onVisible,\n                    onHide: handleHide,\n                    onDismiss: handleDismiss,\n                  })\n                : popover}\n            </Panel>\n          </Tip>\n        )}\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: PopoverVariant }>`\n  position: fixed;\n  text-align: left;\n  transition: opacity 250ms ease-out;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: PopoverVariant }>`\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Close = styled(Clickable)`\n  float: right;\n`\n"],"mappings":"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"}

package/dist/esm/elements/Popover/Popover.story.js

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { States } from "storybook-states";
-import { Position, POSITION } from "../../utils";
+import { POSITION } from "../../utils";
 import { Box } from "../Box";
 import { Button } from "../Button";
 import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
 import { Text } from "../Text";
-import { Popover, PopoverProps } from "./Popover";
+import { Popover } from "./Popover";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var CONTENT = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.";
 export default {

package/dist/esm/elements/Popover/Popover.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.story.js","names":["React","States","Position","POSITION","Box","Button","Flex","Spacer","Text","Popover","PopoverProps","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","placement","popover","createElement","variant","width","children","_ref","onVisible","anchorRef","textAlign","ref","size","onClick","story","Visible","visible","_ref2","WithContentInteraction","_ref3","Pointer","pointer","p","Fragment","Array","fill","map","_","i","key","overflowEllipsis","bg","px","py","_ref4","DarkVariant","zIndex","_ref5","HideCloseButton","showCloseButton","_ref6","IgnoreClickOutside","ignoreClickOutside","_ref7","Placement","render","states","Object","keys","props","_extends","JSON","stringify","_ref8","maxWidth","mx","chromatic","disable","ManageFocus","manageFocus","_ref9","PopoverActions","_ref10","onHide","onDismiss","y","flex","x","_ref11","CrashAtSpecificZoomLevels","height","_ref12","_ref13"],"sources":["../../../../src/elements/Popover/Popover.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n  component: Popover,\n  title: \"Components/Popover\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A floating popover component that can be positioned relative to an anchor element.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    placement: \"bottom\",\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Click to display popover\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default popover.\",\n      },\n    },\n  },\n}\n\nexport const Visible = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Visible\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover visible state.\",\n      },\n    },\n  },\n}\n\nexport const WithContentInteraction = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | — (Content interaction with\n        close button.)\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover With Content Interaction\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with content interaction.\",\n      },\n    },\n  },\n}\n\nexport const Pointer = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    pointer: true,\n    visible: true,\n    p: 0,\n    popover: (\n      <>\n        {new Array(4).fill(0).map((_, i) => (\n          <Text\n            key={i}\n            variant=\"sm-display\"\n            overflowEllipsis\n            bg=\"red10\"\n            px={1}\n            py={0.5}\n          >\n            Example Item\n          </Text>\n        ))}\n      </>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover With Pointer\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with pointer and multiple items.\",\n      },\n    },\n  },\n}\n\nexport const DarkVariant = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    variant: \"defaultDark\",\n    visible: true,\n    pointer: true,\n    zIndex: 99,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Dark Variant\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with dark variant styling.\",\n      },\n    },\n  },\n}\n\nexport const HideCloseButton = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    showCloseButton: false,\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Without Close Button\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with close button hidden.\",\n      },\n    },\n  },\n}\n\nexport const IgnoreClickOutside = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    ignoreClickOutside: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Ignore Click Outside\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with ignoreClickOutside enabled.\",\n      },\n    },\n  },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => (\n        <Popover\n          popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n          visible\n          variant=\"defaultDark\"\n          pointer\n          {...props}\n        >\n          {({ anchorRef }) => (\n            <Text\n              ref={anchorRef as any}\n              variant=\"xs\"\n              textAlign=\"center\"\n              p={1}\n              maxWidth=\"50%\"\n              mx=\"auto\"\n              bg=\"mono10\"\n            >\n              {JSON.stringify(props)}\n            </Text>\n          )}\n        </Popover>\n      )}\n    </States>\n  ),\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story: \"Popover shown in all available placement positions.\",\n      },\n    },\n  },\n}\n\nexport const ManageFocus = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>>\n      states={[\n        { visible: true, manageFocus: false },\n        { visible: true, manageFocus: true },\n      ]}\n    >\n      <Popover\n        placement=\"bottom\"\n        popover={\n          <Text variant=\"xs\" width={300}>\n            {CONTENT}\n          </Text>\n        }\n      >\n        {({ onVisible, anchorRef }) => (\n          <Box textAlign=\"center\">\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onClick={onVisible}\n            >\n              Click to display popover\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </States>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with different focus management settings.\",\n      },\n    },\n  },\n}\n\nexport const PopoverActions = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>> states={[{ visible: true }]}>\n      <Popover\n        placement=\"bottom\"\n        popover={({ onHide, onDismiss }) => (\n          <>\n            <Text variant=\"xs\" width={300}>\n              {CONTENT}\n            </Text>\n\n            <Spacer y={2} />\n\n            <Flex>\n              <Button\n                flex={1}\n                size=\"small\"\n                variant=\"secondaryBlack\"\n                onClick={onHide}\n              >\n                Hide\n              </Button>\n\n              <Spacer x={1} />\n\n              <Button\n                flex={1}\n                size=\"small\"\n                variant=\"secondaryBlack\"\n                onClick={onDismiss}\n              >\n                Dismiss\n              </Button>\n            </Flex>\n          </>\n        )}\n      >\n        {({ onVisible, anchorRef }) => (\n          <Box textAlign=\"center\">\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onClick={onVisible}\n            >\n              Click to display popover\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </States>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with action buttons (Hide and Dismiss).\",\n      },\n    },\n  },\n}\n\nexport const CrashAtSpecificZoomLevels = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <>\n      <Box height={100}>Zoom to 90% in Chrome, click, then scroll.</Box>\n\n      <Box height={2000} bg=\"mono5\">\n        <Box height={200} />\n\n        <Popover\n          placement=\"top\"\n          popover={({ onHide, onDismiss }) => (\n            <>\n              <Text variant=\"xs\" width={300}>\n                {CONTENT}\n              </Text>\n\n              <Spacer y={2} />\n\n              <Flex>\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onHide}\n                >\n                  Hide\n                </Button>\n\n                <Spacer x={1} />\n\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onDismiss}\n                >\n                  Dismiss\n                </Button>\n              </Flex>\n            </>\n          )}\n        >\n          {({ onVisible, anchorRef }) => (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )}\n        </Popover>\n      </Box>\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Test case for popover behavior at specific zoom levels.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Popover.story.js","names":["React","States","POSITION","Box","Button","Flex","Spacer","Text","Popover","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","placement","popover","createElement","variant","width","children","_ref","onVisible","anchorRef","textAlign","ref","size","onClick","story","Visible","visible","_ref2","WithContentInteraction","_ref3","Pointer","pointer","p","Fragment","Array","fill","map","_","i","key","overflowEllipsis","bg","px","py","_ref4","DarkVariant","zIndex","_ref5","HideCloseButton","showCloseButton","_ref6","IgnoreClickOutside","ignoreClickOutside","_ref7","Placement","render","states","Object","keys","props","_extends","JSON","stringify","_ref8","maxWidth","mx","chromatic","disable","ManageFocus","manageFocus","_ref9","PopoverActions","_ref10","onHide","onDismiss","y","flex","x","_ref11","CrashAtSpecificZoomLevels","height","_ref12","_ref13"],"sources":["../../../../src/elements/Popover/Popover.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n  component: Popover,\n  title: \"Components/Popover\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A floating popover component that can be positioned relative to an anchor element.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    placement: \"bottom\",\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Click to display popover\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default popover.\",\n      },\n    },\n  },\n}\n\nexport const Visible = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Visible\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover visible state.\",\n      },\n    },\n  },\n}\n\nexport const WithContentInteraction = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | — (Content interaction with\n        close button.)\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover With Content Interaction\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with content interaction.\",\n      },\n    },\n  },\n}\n\nexport const Pointer = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    pointer: true,\n    visible: true,\n    p: 0,\n    popover: (\n      <>\n        {new Array(4).fill(0).map((_, i) => (\n          <Text\n            key={i}\n            variant=\"sm-display\"\n            overflowEllipsis\n            bg=\"red10\"\n            px={1}\n            py={0.5}\n          >\n            Example Item\n          </Text>\n        ))}\n      </>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover With Pointer\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with pointer and multiple items.\",\n      },\n    },\n  },\n}\n\nexport const DarkVariant = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    variant: \"defaultDark\",\n    visible: true,\n    pointer: true,\n    zIndex: 99,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Dark Variant\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with dark variant styling.\",\n      },\n    },\n  },\n}\n\nexport const HideCloseButton = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    showCloseButton: false,\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Without Close Button\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with close button hidden.\",\n      },\n    },\n  },\n}\n\nexport const IgnoreClickOutside = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    ignoreClickOutside: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Popover Ignore Click Outside\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with ignoreClickOutside enabled.\",\n      },\n    },\n  },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => (\n        <Popover\n          popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n          visible\n          variant=\"defaultDark\"\n          pointer\n          {...props}\n        >\n          {({ anchorRef }) => (\n            <Text\n              ref={anchorRef as any}\n              variant=\"xs\"\n              textAlign=\"center\"\n              p={1}\n              maxWidth=\"50%\"\n              mx=\"auto\"\n              bg=\"mono10\"\n            >\n              {JSON.stringify(props)}\n            </Text>\n          )}\n        </Popover>\n      )}\n    </States>\n  ),\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story: \"Popover shown in all available placement positions.\",\n      },\n    },\n  },\n}\n\nexport const ManageFocus = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>>\n      states={[\n        { visible: true, manageFocus: false },\n        { visible: true, manageFocus: true },\n      ]}\n    >\n      <Popover\n        placement=\"bottom\"\n        popover={\n          <Text variant=\"xs\" width={300}>\n            {CONTENT}\n          </Text>\n        }\n      >\n        {({ onVisible, anchorRef }) => (\n          <Box textAlign=\"center\">\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onClick={onVisible}\n            >\n              Click to display popover\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </States>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with different focus management settings.\",\n      },\n    },\n  },\n}\n\nexport const PopoverActions = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>> states={[{ visible: true }]}>\n      <Popover\n        placement=\"bottom\"\n        popover={({ onHide, onDismiss }) => (\n          <>\n            <Text variant=\"xs\" width={300}>\n              {CONTENT}\n            </Text>\n\n            <Spacer y={2} />\n\n            <Flex>\n              <Button\n                flex={1}\n                size=\"small\"\n                variant=\"secondaryBlack\"\n                onClick={onHide}\n              >\n                Hide\n              </Button>\n\n              <Spacer x={1} />\n\n              <Button\n                flex={1}\n                size=\"small\"\n                variant=\"secondaryBlack\"\n                onClick={onDismiss}\n              >\n                Dismiss\n              </Button>\n            </Flex>\n          </>\n        )}\n      >\n        {({ onVisible, anchorRef }) => (\n          <Box textAlign=\"center\">\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onClick={onVisible}\n            >\n              Click to display popover\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </States>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with action buttons (Hide and Dismiss).\",\n      },\n    },\n  },\n}\n\nexport const CrashAtSpecificZoomLevels = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <>\n      <Box height={100}>Zoom to 90% in Chrome, click, then scroll.</Box>\n\n      <Box height={2000} bg=\"mono5\">\n        <Box height={200} />\n\n        <Popover\n          placement=\"top\"\n          popover={({ onHide, onDismiss }) => (\n            <>\n              <Text variant=\"xs\" width={300}>\n                {CONTENT}\n              </Text>\n\n              <Spacer y={2} />\n\n              <Flex>\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onHide}\n                >\n                  Hide\n                </Button>\n\n                <Spacer x={1} />\n\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onDismiss}\n                >\n                  Dismiss\n                </Button>\n              </Flex>\n            </>\n          )}\n        >\n          {({ onVisible, anchorRef }) => (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )}\n        </Popover>\n      </Box>\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Test case for popover behavior at specific zoom levels.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/ProgressBar/ProgressBar.js

@@ -3,8 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
-import { Color } from "../../themes/types";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 /** ProgressBar */
 export var ProgressBar = function ProgressBar(_ref) {
   var percentComplete = _ref.percentComplete,

package/dist/esm/elements/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["React","Color","Box","BoxProps","ProgressBar","_ref","percentComplete","_ref$highlight","highlight","_ref$showBackground","showBackground","_ref$transition","transition","rest","_objectWithoutProperties","_excluded","createElement","_extends","tabIndex","role","height","position","overflow","mt","mb","bg","width","style","transform","concat","backfaceVisibility","displayName"],"sources":["../../../../src/elements/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\"\nimport { Color } from \"../../themes/types\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface ProgressBarProps extends BoxProps {\n  percentComplete: number\n  highlight?: Color\n  showBackground?: boolean\n  transition?: string\n}\n\n/** ProgressBar */\nexport const ProgressBar: React.FC<\n  React.PropsWithChildren<ProgressBarProps>\n> = ({\n  percentComplete,\n  highlight = \"brand\",\n  showBackground = true,\n  transition = \"transform 1s ease\",\n  ...rest\n}) => {\n  return (\n    <Box\n      tabIndex={0}\n      role=\"progressbar\"\n      aria-valuenow={percentComplete}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      height=\"2px\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      mt={0.5}\n      mb={1}\n      bg={showBackground ? \"mono30\" : \"transparent\"}\n      {...rest}\n    >\n      <Box\n        bg={highlight}\n        width=\"100%\"\n        height=\"100%\"\n        style={{\n          transition,\n          transform: `translateX(-${100 - percentComplete}%)`,\n          backfaceVisibility: \"hidden\",\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK;AACd,SAASC,GAAG,EAAEC,QAAQ;AAStB;AACA,OAAO,IAAMC,WAEZ,GAAG,SAFSA,WAEZA,CAAAC,IAAA,EAMK;EAAA,IALJC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IAAAC,cAAA,GAAAF,IAAA,CACfG,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,OAAO,GAAAA,cAAA;IAAAE,mBAAA,GAAAJ,IAAA,CACnBK,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,IAAI,GAAAA,mBAAA;IAAAE,eAAA,GAAAN,IAAA,CACrBO,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,mBAAmB,GAAAA,eAAA;IAC7BE,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAEP,oBACEf,KAAA,CAAAgB,aAAA,CAACd,GAAG,EAAAe,QAAA;IACFC,QAAQ,EAAE,CAAE;IACZC,IAAI,EAAC,aAAa;IAClB,iBAAeb,eAAgB;IAC/B,iBAAe,CAAE;IACjB,iBAAe,GAAI;IACnBc,MAAM,EAAC,KAAK;IACZC,QAAQ,EAAC,UAAU;IACnBC,QAAQ,EAAC,QAAQ;IACjBC,EAAE,EAAE,GAAI;IACRC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAEf,cAAc,GAAG,QAAQ,GAAG;EAAc,GAC1CG,IAAI,gBAERb,KAAA,CAAAgB,aAAA,CAACd,GAAG;IACFuB,EAAE,EAAEjB,SAAU;IACdkB,KAAK,EAAC,MAAM;IACZN,MAAM,EAAC,MAAM;IACbO,KAAK,EAAE;MACLf,UAAU,EAAVA,UAAU;MACVgB,SAAS,iBAAAC,MAAA,CAAiB,GAAG,GAAGvB,eAAe,OAAI;MACnDwB,kBAAkB,EAAE;IACtB;EAAE,EACF,CACE;AAEV,CAAC;AApCY1B,WAEZ,CAAA2B,WAAA"}
+{"version":3,"file":"ProgressBar.js","names":["React","Box","ProgressBar","_ref","percentComplete","_ref$highlight","highlight","_ref$showBackground","showBackground","_ref$transition","transition","rest","_objectWithoutProperties","_excluded","createElement","_extends","tabIndex","role","height","position","overflow","mt","mb","bg","width","style","transform","concat","backfaceVisibility","displayName"],"sources":["../../../../src/elements/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\"\nimport { Color } from \"../../themes/types\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface ProgressBarProps extends BoxProps {\n  percentComplete: number\n  highlight?: Color\n  showBackground?: boolean\n  transition?: string\n}\n\n/** ProgressBar */\nexport const ProgressBar: React.FC<\n  React.PropsWithChildren<ProgressBarProps>\n> = ({\n  percentComplete,\n  highlight = \"brand\",\n  showBackground = true,\n  transition = \"transform 1s ease\",\n  ...rest\n}) => {\n  return (\n    <Box\n      tabIndex={0}\n      role=\"progressbar\"\n      aria-valuenow={percentComplete}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      height=\"2px\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      mt={0.5}\n      mb={1}\n      bg={showBackground ? \"mono30\" : \"transparent\"}\n      {...rest}\n    >\n      <Box\n        bg={highlight}\n        width=\"100%\"\n        height=\"100%\"\n        style={{\n          transition,\n          transform: `translateX(-${100 - percentComplete}%)`,\n          backfaceVisibility: \"hidden\",\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,GAAG;AASZ;AACA,OAAO,IAAMC,WAEZ,GAAG,SAFSA,WAEZA,CAAAC,IAAA,EAMK;EAAA,IALJC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IAAAC,cAAA,GAAAF,IAAA,CACfG,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,OAAO,GAAAA,cAAA;IAAAE,mBAAA,GAAAJ,IAAA,CACnBK,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,IAAI,GAAAA,mBAAA;IAAAE,eAAA,GAAAN,IAAA,CACrBO,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,mBAAmB,GAAAA,eAAA;IAC7BE,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAEP,oBACEb,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAc,QAAA;IACFC,QAAQ,EAAE,CAAE;IACZC,IAAI,EAAC,aAAa;IAClB,iBAAeb,eAAgB;IAC/B,iBAAe,CAAE;IACjB,iBAAe,GAAI;IACnBc,MAAM,EAAC,KAAK;IACZC,QAAQ,EAAC,UAAU;IACnBC,QAAQ,EAAC,QAAQ;IACjBC,EAAE,EAAE,GAAI;IACRC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAEf,cAAc,GAAG,QAAQ,GAAG;EAAc,GAC1CG,IAAI,gBAERX,KAAA,CAAAc,aAAA,CAACb,GAAG;IACFsB,EAAE,EAAEjB,SAAU;IACdkB,KAAK,EAAC,MAAM;IACZN,MAAM,EAAC,MAAM;IACbO,KAAK,EAAE;MACLf,UAAU,EAAVA,UAAU;MACVgB,SAAS,iBAAAC,MAAA,CAAiB,GAAG,GAAGvB,eAAe,OAAI;MACnDwB,kBAAkB,EAAE;IACtB;EAAE,EACF,CACE;AAEV,CAAC;AApCY1B,WAEZ,CAAA2B,WAAA"}

package/dist/esm/elements/ProgressDots/ProgressDots.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Clickable } from "../Clickable";
 import { VisuallyHidden } from "../VisuallyHidden";
 var VARIANTS = {

package/dist/esm/elements/ProgressDots/ProgressDots.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressDots.js","names":["React","styled","variant","Box","BoxProps","Clickable","VisuallyHidden","VARIANTS","dot","width","height","borderRadius","dash","flex","ProgressDots","_ref","activeIndex","amount","_ref$variant","indicatorVariant","onClick","rest","_objectWithoutProperties","_excluded","createElement","Fragment","_extends","role","undefined","display","alignItems","justifyContent","my","Array","from","map","_","i","isActive","indicator","Indicator","key","bg","mx","handleClick","concat","position","top","bottom","left","withConfig","displayName","componentId","variants"],"sources":["../../../../src/elements/ProgressDots/ProgressDots.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\n\nconst VARIANTS = {\n  dot: {\n    width: \"5px\",\n    height: \"5px\",\n    borderRadius: \"50%\",\n  },\n  dash: {\n    height: \"1px\",\n    flex: 1,\n  },\n}\n\ntype Variant = keyof typeof VARIANTS\n\n/** ProgressDotsProps */\nexport interface ProgressDotsProps extends BoxProps {\n  activeIndex: number\n  amount: number\n  variant?: Variant\n  onClick?: (index: number) => void\n}\n\n/**\n * Renders an `amount` of dots and announces progress when updated\n */\nexport const ProgressDots: React.FC<\n  React.PropsWithChildren<ProgressDotsProps>\n> = ({\n  activeIndex,\n  amount,\n  variant: indicatorVariant = \"dot\",\n  onClick,\n  ...rest\n}) => {\n  return (\n    <>\n      <Box\n        role={onClick ? \"tablist\" : \"presentation\"}\n        aria-label={onClick ? \"Progress indicators\" : undefined}\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        my={0.5}\n        {...rest}\n      >\n        {Array.from(Array(amount)).map((_, i) => {\n          const isActive = i === activeIndex\n          const indicator = (\n            <Indicator\n              key={i}\n              variant={indicatorVariant}\n              bg={isActive ? \"mono100\" : \"mono30\"}\n              mx={0.5}\n            />\n          )\n\n          const handleClick = () => onClick && onClick(i)\n\n          if (onClick) {\n            return (\n              <Clickable\n                key={i}\n                role=\"tab\"\n                aria-label={`Go to ${i + 1} of ${amount}`}\n                aria-selected={isActive}\n                aria-current={isActive ? \"page\" : undefined}\n                display=\"block\"\n                position=\"relative\"\n                width={indicatorVariant === \"dash\" ? \"100%\" : \"auto\"}\n                onClick={handleClick}\n              >\n                {/* Pads out hit area. */}\n                <Box\n                  position=\"absolute\"\n                  top={-10}\n                  bottom={-10}\n                  left={0}\n                  width=\"100%\"\n                />\n\n                {indicator}\n              </Clickable>\n            )\n          }\n\n          return indicator\n        })}\n      </Box>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        {activeIndex + 1} of {amount}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst Indicator = styled(Box)<{\n  variant: Variant\n  onClick?: (index: number) => void\n}>`\n  ${variant({ variants: VARIANTS })}\n  transition: background-color 250ms;\n`\n\nIndicator.displayName = \"Indicator\"\n"],"mappings":"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"}
+{"version":3,"file":"ProgressDots.js","names":["React","styled","variant","Box","Clickable","VisuallyHidden","VARIANTS","dot","width","height","borderRadius","dash","flex","ProgressDots","_ref","activeIndex","amount","_ref$variant","indicatorVariant","onClick","rest","_objectWithoutProperties","_excluded","createElement","Fragment","_extends","role","undefined","display","alignItems","justifyContent","my","Array","from","map","_","i","isActive","indicator","Indicator","key","bg","mx","handleClick","concat","position","top","bottom","left","withConfig","displayName","componentId","variants"],"sources":["../../../../src/elements/ProgressDots/ProgressDots.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\n\nconst VARIANTS = {\n  dot: {\n    width: \"5px\",\n    height: \"5px\",\n    borderRadius: \"50%\",\n  },\n  dash: {\n    height: \"1px\",\n    flex: 1,\n  },\n}\n\ntype Variant = keyof typeof VARIANTS\n\n/** ProgressDotsProps */\nexport interface ProgressDotsProps extends BoxProps {\n  activeIndex: number\n  amount: number\n  variant?: Variant\n  onClick?: (index: number) => void\n}\n\n/**\n * Renders an `amount` of dots and announces progress when updated\n */\nexport const ProgressDots: React.FC<\n  React.PropsWithChildren<ProgressDotsProps>\n> = ({\n  activeIndex,\n  amount,\n  variant: indicatorVariant = \"dot\",\n  onClick,\n  ...rest\n}) => {\n  return (\n    <>\n      <Box\n        role={onClick ? \"tablist\" : \"presentation\"}\n        aria-label={onClick ? \"Progress indicators\" : undefined}\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        my={0.5}\n        {...rest}\n      >\n        {Array.from(Array(amount)).map((_, i) => {\n          const isActive = i === activeIndex\n          const indicator = (\n            <Indicator\n              key={i}\n              variant={indicatorVariant}\n              bg={isActive ? \"mono100\" : \"mono30\"}\n              mx={0.5}\n            />\n          )\n\n          const handleClick = () => onClick && onClick(i)\n\n          if (onClick) {\n            return (\n              <Clickable\n                key={i}\n                role=\"tab\"\n                aria-label={`Go to ${i + 1} of ${amount}`}\n                aria-selected={isActive}\n                aria-current={isActive ? \"page\" : undefined}\n                display=\"block\"\n                position=\"relative\"\n                width={indicatorVariant === \"dash\" ? \"100%\" : \"auto\"}\n                onClick={handleClick}\n              >\n                {/* Pads out hit area. */}\n                <Box\n                  position=\"absolute\"\n                  top={-10}\n                  bottom={-10}\n                  left={0}\n                  width=\"100%\"\n                />\n\n                {indicator}\n              </Clickable>\n            )\n          }\n\n          return indicator\n        })}\n      </Box>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        {activeIndex + 1} of {amount}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst Indicator = styled(Box)<{\n  variant: Variant\n  onClick?: (index: number) => void\n}>`\n  ${variant({ variants: VARIANTS })}\n  transition: background-color 250ms;\n`\n\nIndicator.displayName = \"Indicator\"\n"],"mappings":"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"}

package/dist/esm/elements/Radio/Radio.js

@@ -4,7 +4,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
 import styled, { css } from "styled-components";
-import { Flex, FlexProps } from "../../elements/Flex";
+import { Flex } from "../../elements/Flex";
 import { isText } from "../../helpers/isText";
 import { Text } from "../Text";
 import { RadioDot } from "./RadioDot";

package/dist/esm/elements/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["React","styled","css","Flex","FlexProps","isText","Text","RadioDot","RADIO_DOT_STATES","RADIO_STATES","RADIO_SIZES","Radio","_ref","children","disabled","hover","focus","error","label","selected","value","_ref$size","size","onSelect","rest","_objectWithoutProperties","_excluded","handleClick","handleKeyPress","event","key","preventDefault","title","description","createElement","Container","_extends","as","alignItems","role","onClick","tabIndex","onKeyPress","height","dotSize","width","alignSelf","mr","flexDirection","flex","variant","labelFontSize","lineHeight","undefined","descriptionFontSize","color","displayName","withConfig","componentId","props","default","resting"],"sources":["../../../../src/elements/Radio/Radio.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Flex, FlexProps } from \"../../elements/Flex\"\nimport { isText } from \"../../helpers/isText\"\nimport { Text } from \"../Text\"\nimport { RadioDot } from \"./RadioDot\"\nimport { RADIO_DOT_STATES, RADIO_STATES, RADIO_SIZES } from \"./tokens\"\n\nexport interface RadioProps<T>\n  extends FlexProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable interactions */\n  disabled?: boolean\n  /** Select the button on render. If the Radio is inside a RadioGroup, use RadioGroup.defaultValue instead. */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Show hover state on render */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Value of radio button */\n  value?: T\n  /** Name of the radio button */\n  name?: string\n  /** The label content, if not specified the children will be used  */\n  label?: React.ReactNode\n  /** The radio size, if not specified, \"sm\" will be used  */\n  size?: keyof typeof RADIO_SIZES\n  /** Callback when selected */\n  onSelect?: (selected: { selected: boolean; value: T }) => void\n}\n\n/** A Radio button */\nexport const Radio = <T,>({\n  children,\n  disabled,\n  hover,\n  focus,\n  error,\n  label,\n  selected,\n  value,\n  size = \"sm\",\n  onSelect,\n  ...rest\n}: RadioProps<T>) => {\n  const handleClick = () => {\n    onSelect && onSelect({ selected: !selected, value: value! })\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \") {\n      event.preventDefault()\n      onSelect && onSelect({ selected: !selected, value: value! })\n    }\n  }\n\n  // TODO: Re-name props to match <Input />\n  const title = label ? label : children\n  const description = label ? children : null\n\n  return (\n    <Container\n      as=\"label\"\n      alignItems=\"center\"\n      role=\"radio\"\n      aria-checked={selected}\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      disabled={disabled}\n      hover={hover}\n      focus={focus}\n      selected={selected}\n      error={error}\n      {...rest}\n    >\n      <Flex\n        height={RADIO_SIZES[size].dotSize}\n        width={RADIO_SIZES[size].dotSize}\n        alignSelf=\"start\"\n        mr={1}\n      >\n        <RadioDot\n          disabled={disabled}\n          hover={hover}\n          focus={focus}\n          selected={selected}\n          error={error}\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" flex={1}>\n        <Flex alignItems=\"center\" flex={1}>\n          {isText(title) ? (\n            <Text\n              variant={RADIO_SIZES[size].labelFontSize}\n              lineHeight={description ? undefined : 1}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n        </Flex>\n\n        {isText(description) ? (\n          <Text variant={RADIO_SIZES[size].descriptionFontSize} color=\"mono60\">\n            {description}\n          </Text>\n        ) : (\n          description\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Flex)<{\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n  as?: React.ElementType\n}>`\n  ${(props) => {\n    return css`\n      ${props.selected ? RADIO_STATES.selected : RADIO_STATES.default}\n      ${props.focus && RADIO_STATES.focus}\n      ${props.hover && RADIO_STATES.hover}\n      ${props.disabled && RADIO_STATES.disabled}\n      ${props.error && RADIO_STATES.error}\n\n      &:hover {\n        ${!props.error &&\n        !props.disabled &&\n        css`\n          ${RADIO_STATES.hover}\n\n          // Radio\n          > ${RadioDot} {\n            ${props.selected\n              ? RADIO_DOT_STATES.hover.selected\n              : RADIO_DOT_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus-visible {\n        ${RADIO_STATES.focus}\n\n        // Radio\n        > ${RadioDot} {\n          ${props.selected\n            ? RADIO_DOT_STATES.focus.selected\n            : RADIO_DOT_STATES.focus.resting}\n        }\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${RADIO_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Radio.js","names":["React","styled","css","Flex","isText","Text","RadioDot","RADIO_DOT_STATES","RADIO_STATES","RADIO_SIZES","Radio","_ref","children","disabled","hover","focus","error","label","selected","value","_ref$size","size","onSelect","rest","_objectWithoutProperties","_excluded","handleClick","handleKeyPress","event","key","preventDefault","title","description","createElement","Container","_extends","as","alignItems","role","onClick","tabIndex","onKeyPress","height","dotSize","width","alignSelf","mr","flexDirection","flex","variant","labelFontSize","lineHeight","undefined","descriptionFontSize","color","displayName","withConfig","componentId","props","default","resting"],"sources":["../../../../src/elements/Radio/Radio.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Flex, FlexProps } from \"../../elements/Flex\"\nimport { isText } from \"../../helpers/isText\"\nimport { Text } from \"../Text\"\nimport { RadioDot } from \"./RadioDot\"\nimport { RADIO_DOT_STATES, RADIO_STATES, RADIO_SIZES } from \"./tokens\"\n\nexport interface RadioProps<T>\n  extends FlexProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable interactions */\n  disabled?: boolean\n  /** Select the button on render. If the Radio is inside a RadioGroup, use RadioGroup.defaultValue instead. */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Show hover state on render */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Value of radio button */\n  value?: T\n  /** Name of the radio button */\n  name?: string\n  /** The label content, if not specified the children will be used  */\n  label?: React.ReactNode\n  /** The radio size, if not specified, \"sm\" will be used  */\n  size?: keyof typeof RADIO_SIZES\n  /** Callback when selected */\n  onSelect?: (selected: { selected: boolean; value: T }) => void\n}\n\n/** A Radio button */\nexport const Radio = <T,>({\n  children,\n  disabled,\n  hover,\n  focus,\n  error,\n  label,\n  selected,\n  value,\n  size = \"sm\",\n  onSelect,\n  ...rest\n}: RadioProps<T>) => {\n  const handleClick = () => {\n    onSelect && onSelect({ selected: !selected, value: value! })\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \") {\n      event.preventDefault()\n      onSelect && onSelect({ selected: !selected, value: value! })\n    }\n  }\n\n  // TODO: Re-name props to match <Input />\n  const title = label ? label : children\n  const description = label ? children : null\n\n  return (\n    <Container\n      as=\"label\"\n      alignItems=\"center\"\n      role=\"radio\"\n      aria-checked={selected}\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      disabled={disabled}\n      hover={hover}\n      focus={focus}\n      selected={selected}\n      error={error}\n      {...rest}\n    >\n      <Flex\n        height={RADIO_SIZES[size].dotSize}\n        width={RADIO_SIZES[size].dotSize}\n        alignSelf=\"start\"\n        mr={1}\n      >\n        <RadioDot\n          disabled={disabled}\n          hover={hover}\n          focus={focus}\n          selected={selected}\n          error={error}\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" flex={1}>\n        <Flex alignItems=\"center\" flex={1}>\n          {isText(title) ? (\n            <Text\n              variant={RADIO_SIZES[size].labelFontSize}\n              lineHeight={description ? undefined : 1}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n        </Flex>\n\n        {isText(description) ? (\n          <Text variant={RADIO_SIZES[size].descriptionFontSize} color=\"mono60\">\n            {description}\n          </Text>\n        ) : (\n          description\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Flex)<{\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n  as?: React.ElementType\n}>`\n  ${(props) => {\n    return css`\n      ${props.selected ? RADIO_STATES.selected : RADIO_STATES.default}\n      ${props.focus && RADIO_STATES.focus}\n      ${props.hover && RADIO_STATES.hover}\n      ${props.disabled && RADIO_STATES.disabled}\n      ${props.error && RADIO_STATES.error}\n\n      &:hover {\n        ${!props.error &&\n        !props.disabled &&\n        css`\n          ${RADIO_STATES.hover}\n\n          // Radio\n          > ${RadioDot} {\n            ${props.selected\n              ? RADIO_DOT_STATES.hover.selected\n              : RADIO_DOT_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus-visible {\n        ${RADIO_STATES.focus}\n\n        // Radio\n        > ${RadioDot} {\n          ${props.selected\n            ? RADIO_DOT_STATES.focus.selected\n            : RADIO_DOT_STATES.focus.resting}\n        }\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${RADIO_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"mappings":"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"}

package/dist/esm/elements/Radio/tokens.js

@@ -1,7 +1,5 @@
 import { themeGet } from "@styled-system/theme-get";
 import { css } from "styled-components";
-import { ResponsiveValue } from "styled-system";
-import { TextVariant } from "../../Theme";
 export var RADIO_DOT_STATES = {
   default: {
     resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30")),

package/dist/esm/elements/Radio/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","ResponsiveValue","TextVariant","RADIO_DOT_STATES","default","resting","selected","focus","disabled","error","hover","RADIO_STATES","RADIO_SIZES","sm","labelFontSize","descriptionFontSize","dotSize","md","lg"],"sources":["../../../../src/elements/Radio/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { ResponsiveValue } from \"styled-system\"\nimport { TextVariant } from \"../../Theme\"\n\nexport const RADIO_DOT_STATES = {\n  default: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono100\")};\n    `,\n  },\n  focus: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono100\")};\n    `,\n  },\n  disabled: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n      background-color: ${themeGet(\"colors.mono30\")};\n    `,\n  },\n  error: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.red100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.red100\")};\n      background-color: ${themeGet(\"colors.red100\")};\n    `,\n  },\n  hover: {\n    resting: css`\n      border: 1px solid;\n      color: transparent;\n      border-color: ${themeGet(\"colors.blue100\")};\n      background-color: ${themeGet(\"colors.mono0\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      background-color: ${themeGet(\"colors.blue100\")};\n    `,\n  },\n}\n\nexport const RADIO_STATES = {\n  default: css`\n    color: ${themeGet(\"colors.mono60\")};\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n\n    /* Label */\n    > div > div:first-of-type {\n      text-decoration: underline;\n    }\n  `,\n  selected: css`\n    color: ${themeGet(\"colors.mono100\")};\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n\n    /* Label */\n    > div > div:first-of-type {\n      text-decoration: underline;\n    }\n  `,\n  disabled: css`\n    pointer-events: none;\n    color: ${themeGet(\"colors.mono30\")};\n  `,\n  error: css`\n    color: ${themeGet(\"colors.red100\")};\n  `,\n} as const\n\ninterface SizeVariant {\n  labelFontSize: ResponsiveValue<TextVariant>\n  descriptionFontSize: ResponsiveValue<TextVariant>\n  dotSize: string\n}\n\nexport const RADIO_SIZES: Record<string, SizeVariant> = {\n  sm: {\n    labelFontSize: \"sm-display\",\n    descriptionFontSize: \"xs\",\n    dotSize: \"20px\",\n  },\n  md: {\n    labelFontSize: \"md\",\n    descriptionFontSize: \"sm\",\n    dotSize: \"25px\",\n  },\n  lg: {\n    labelFontSize: \"lg-display\",\n    descriptionFontSize: \"md\",\n    dotSize: \"32px\",\n  },\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,eAAe,QAAQ,eAAe;AAC/C,SAASC,WAAW;AAEpB,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAE;IACPC,OAAO,EAAEL,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD,CAAC;EACDQ,KAAK,EAAE;IACLF,OAAO,EAAEL,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,CAC3C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD,CAAC;EACDS,QAAQ,EAAE;IACRH,OAAO,EAAEL,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,eAAe,CAAC;EAEjD,CAAC;EACDU,KAAK,EAAE;IACLJ,OAAO,EAAEL,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,eAAe,CAAC;EAEjD,CAAC;EACDW,KAAK,EAAE;IACLL,OAAO,EAAEL,GAAG,kFAGMD,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,cAAc,CAAC,CAC7C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD;AACF,CAAC;AAED,OAAO,IAAMY,YAAY,GAAG;EAC1BP,OAAO,EAAEJ,GAAG,kBACDD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDQ,KAAK,EAAEP,GAAG,uEACCD,QAAQ,CAAC,gBAAgB,CAAC,CAMpC;EACDO,QAAQ,EAAEN,GAAG,kBACFD,QAAQ,CAAC,gBAAgB,CAAC,CACpC;EACDW,KAAK,EAAEV,GAAG,uEACCD,QAAQ,CAAC,gBAAgB,CAAC,CAMpC;EACDS,QAAQ,EAAER,GAAG,sCAEFD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDU,KAAK,EAAET,GAAG,kBACCD,QAAQ,CAAC,eAAe,CAAC;AAEtC,CAAU;AAQV,OAAO,IAAMa,WAAwC,GAAG;EACtDC,EAAE,EAAE;IACFC,aAAa,EAAE,YAAY;IAC3BC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX,CAAC;EACDC,EAAE,EAAE;IACFH,aAAa,EAAE,IAAI;IACnBC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX,CAAC;EACDE,EAAE,EAAE;IACFJ,aAAa,EAAE,YAAY;IAC3BC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX;AACF,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","RADIO_DOT_STATES","default","resting","selected","focus","disabled","error","hover","RADIO_STATES","RADIO_SIZES","sm","labelFontSize","descriptionFontSize","dotSize","md","lg"],"sources":["../../../../src/elements/Radio/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { ResponsiveValue } from \"styled-system\"\nimport { TextVariant } from \"../../Theme\"\n\nexport const RADIO_DOT_STATES = {\n  default: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono100\")};\n    `,\n  },\n  focus: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono100\")};\n    `,\n  },\n  disabled: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n      background-color: ${themeGet(\"colors.mono30\")};\n    `,\n  },\n  error: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.red100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.red100\")};\n      background-color: ${themeGet(\"colors.red100\")};\n    `,\n  },\n  hover: {\n    resting: css`\n      border: 1px solid;\n      color: transparent;\n      border-color: ${themeGet(\"colors.blue100\")};\n      background-color: ${themeGet(\"colors.mono0\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      background-color: ${themeGet(\"colors.blue100\")};\n    `,\n  },\n}\n\nexport const RADIO_STATES = {\n  default: css`\n    color: ${themeGet(\"colors.mono60\")};\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n\n    /* Label */\n    > div > div:first-of-type {\n      text-decoration: underline;\n    }\n  `,\n  selected: css`\n    color: ${themeGet(\"colors.mono100\")};\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n\n    /* Label */\n    > div > div:first-of-type {\n      text-decoration: underline;\n    }\n  `,\n  disabled: css`\n    pointer-events: none;\n    color: ${themeGet(\"colors.mono30\")};\n  `,\n  error: css`\n    color: ${themeGet(\"colors.red100\")};\n  `,\n} as const\n\ninterface SizeVariant {\n  labelFontSize: ResponsiveValue<TextVariant>\n  descriptionFontSize: ResponsiveValue<TextVariant>\n  dotSize: string\n}\n\nexport const RADIO_SIZES: Record<string, SizeVariant> = {\n  sm: {\n    labelFontSize: \"sm-display\",\n    descriptionFontSize: \"xs\",\n    dotSize: \"20px\",\n  },\n  md: {\n    labelFontSize: \"md\",\n    descriptionFontSize: \"sm\",\n    dotSize: \"25px\",\n  },\n  lg: {\n    labelFontSize: \"lg-display\",\n    descriptionFontSize: \"md\",\n    dotSize: \"32px\",\n  },\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAIvC,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAE;IACPC,OAAO,EAAEH,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD,CAAC;EACDM,KAAK,EAAE;IACLF,OAAO,EAAEH,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,CAC3C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD,CAAC;EACDO,QAAQ,EAAE;IACRH,OAAO,EAAEH,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,eAAe,CAAC;EAEjD,CAAC;EACDQ,KAAK,EAAE;IACLJ,OAAO,EAAEH,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,eAAe,CAAC;EAEjD,CAAC;EACDS,KAAK,EAAE;IACLL,OAAO,EAAEH,GAAG,kFAGMD,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,cAAc,CAAC,CAC7C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD;AACF,CAAC;AAED,OAAO,IAAMU,YAAY,GAAG;EAC1BP,OAAO,EAAEF,GAAG,kBACDD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDM,KAAK,EAAEL,GAAG,uEACCD,QAAQ,CAAC,gBAAgB,CAAC,CAMpC;EACDK,QAAQ,EAAEJ,GAAG,kBACFD,QAAQ,CAAC,gBAAgB,CAAC,CACpC;EACDS,KAAK,EAAER,GAAG,uEACCD,QAAQ,CAAC,gBAAgB,CAAC,CAMpC;EACDO,QAAQ,EAAEN,GAAG,sCAEFD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDQ,KAAK,EAAEP,GAAG,kBACCD,QAAQ,CAAC,eAAe,CAAC;AAEtC,CAAU;AAQV,OAAO,IAAMW,WAAwC,GAAG;EACtDC,EAAE,EAAE;IACFC,aAAa,EAAE,YAAY;IAC3BC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX,CAAC;EACDC,EAAE,EAAE;IACFH,aAAa,EAAE,IAAI;IACnBC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX,CAAC;EACDE,EAAE,EAAE;IACFJ,aAAa,EAAE,YAAY;IAC3BC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX;AACF,CAAC"}

package/dist/esm/elements/RadioGroup/RadioGroup.js

@@ -28,8 +28,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 import React from "react";
-import { Flex, FlexProps } from "../Flex";
-import { RadioProps } from "../Radio";
+import { Flex } from "../Flex";
 import { Text } from "../Text";
 /**
  * A stateful collection of Radio buttons

package/dist/esm/elements/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["React","Flex","FlexProps","RadioProps","Text","RadioGroup","_React$Component","_this2$props$defaultV","_this2","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","state","selectedOption","props","defaultValue","onSelect","_ref","value","update","deselectable","setState","_inherits","_createClass","key","componentDidUpdate","prevProps","renderRadioButtons","_this3","Children","map","children","child","cloneElement","disabled","undefined","selected","_child$props$onSelect","_child$props","call","render","_this$props","disabledText","_onSelect","_defaultValue","_children","rest","_objectWithoutProperties","_excluded","createElement","_extends","flexDirection","variant","mb","color","Component","displayName"],"sources":["../../../../src/elements/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from \"react\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { RadioProps } from \"../Radio\"\nimport { Text } from \"../Text\"\n\nexport interface RadioGroupProps<T> extends FlexProps {\n  /** Ability to deselect the selection */\n  deselectable?: boolean\n  /** Disable interactions */\n  disabled?: boolean\n  /** Text to display when disabled */\n  disabledText?: string\n  /** Callback when selected */\n  onSelect?: (selectedOption: T) => void\n  /** Default value of radio button */\n  defaultValue?: T\n  /** Child <Radio /> elements */\n  children:\n    | Array<React.ReactElement<RadioProps<T>>>\n    | React.ReactElement<RadioProps<T>>\n}\n\ninterface RadioGroupState<T> {\n  selectedOption: T | null\n}\n\n/**\n * A stateful collection of Radio buttons\n */\nexport class RadioGroup<T> extends React.Component<\n  RadioGroupProps<T>,\n  RadioGroupState<T>\n> {\n  state = {\n    selectedOption: this.props.defaultValue ?? null,\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.defaultValue !== this.props.defaultValue) {\n      this.setState({\n        selectedOption: this.props.defaultValue!,\n      })\n    }\n  }\n\n  onSelect = ({ value }) => {\n    // After state update, call back up the tree with the latest state\n    const update = () => {\n      if (this.props.onSelect) {\n        this.props.onSelect(this.state.selectedOption!)\n      }\n    }\n\n    if (this.props.deselectable) {\n      if (this.state.selectedOption === value) {\n        this.setState(\n          {\n            selectedOption: null,\n          },\n          update\n        )\n        return\n      }\n    }\n\n    this.setState({ selectedOption: value }, update)\n  }\n\n  renderRadioButtons() {\n    return React.Children.map(\n      this.props.children,\n      (child: React.ReactElement<RadioProps<T>>) => {\n        return React.cloneElement(child, {\n          disabled:\n            child.props.disabled !== undefined\n              ? child.props.disabled\n              : this.props.disabled,\n          onSelect: child.props.onSelect\n            ? (selected) => {\n                this.onSelect(selected)\n                child.props.onSelect?.(selected)\n              }\n            : this.onSelect,\n          // FIXME: Throw an error `child.props.selected' is set once we enable the dev code elimination.\n          selected: this.state.selectedOption === child.props.value,\n        })\n      }\n    )\n  }\n\n  render() {\n    const {\n      disabled,\n      disabledText,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onSelect: _onSelect,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      defaultValue: _defaultValue,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      children: _children,\n      ...rest\n    } = this.props\n    return (\n      <Flex flexDirection=\"column\" {...rest}>\n        {disabled && disabledText && (\n          <Text variant=\"xs\" mb={1} color=\"mono60\">\n            {disabledText}\n          </Text>\n        )}\n\n        {this.renderRadioButtons()}\n      </Flex>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","names":["React","Flex","Text","RadioGroup","_React$Component","_this2$props$defaultV","_this2","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","state","selectedOption","props","defaultValue","onSelect","_ref","value","update","deselectable","setState","_inherits","_createClass","key","componentDidUpdate","prevProps","renderRadioButtons","_this3","Children","map","children","child","cloneElement","disabled","undefined","selected","_child$props$onSelect","_child$props","call","render","_this$props","disabledText","_onSelect","_defaultValue","_children","rest","_objectWithoutProperties","_excluded","createElement","_extends","flexDirection","variant","mb","color","Component","displayName"],"sources":["../../../../src/elements/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from \"react\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { RadioProps } from \"../Radio\"\nimport { Text } from \"../Text\"\n\nexport interface RadioGroupProps<T> extends FlexProps {\n  /** Ability to deselect the selection */\n  deselectable?: boolean\n  /** Disable interactions */\n  disabled?: boolean\n  /** Text to display when disabled */\n  disabledText?: string\n  /** Callback when selected */\n  onSelect?: (selectedOption: T) => void\n  /** Default value of radio button */\n  defaultValue?: T\n  /** Child <Radio /> elements */\n  children:\n    | Array<React.ReactElement<RadioProps<T>>>\n    | React.ReactElement<RadioProps<T>>\n}\n\ninterface RadioGroupState<T> {\n  selectedOption: T | null\n}\n\n/**\n * A stateful collection of Radio buttons\n */\nexport class RadioGroup<T> extends React.Component<\n  RadioGroupProps<T>,\n  RadioGroupState<T>\n> {\n  state = {\n    selectedOption: this.props.defaultValue ?? null,\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.defaultValue !== this.props.defaultValue) {\n      this.setState({\n        selectedOption: this.props.defaultValue!,\n      })\n    }\n  }\n\n  onSelect = ({ value }) => {\n    // After state update, call back up the tree with the latest state\n    const update = () => {\n      if (this.props.onSelect) {\n        this.props.onSelect(this.state.selectedOption!)\n      }\n    }\n\n    if (this.props.deselectable) {\n      if (this.state.selectedOption === value) {\n        this.setState(\n          {\n            selectedOption: null,\n          },\n          update\n        )\n        return\n      }\n    }\n\n    this.setState({ selectedOption: value }, update)\n  }\n\n  renderRadioButtons() {\n    return React.Children.map(\n      this.props.children,\n      (child: React.ReactElement<RadioProps<T>>) => {\n        return React.cloneElement(child, {\n          disabled:\n            child.props.disabled !== undefined\n              ? child.props.disabled\n              : this.props.disabled,\n          onSelect: child.props.onSelect\n            ? (selected) => {\n                this.onSelect(selected)\n                child.props.onSelect?.(selected)\n              }\n            : this.onSelect,\n          // FIXME: Throw an error `child.props.selected' is set once we enable the dev code elimination.\n          selected: this.state.selectedOption === child.props.value,\n        })\n      }\n    )\n  }\n\n  render() {\n    const {\n      disabled,\n      disabledText,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onSelect: _onSelect,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      defaultValue: _defaultValue,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      children: _children,\n      ...rest\n    } = this.props\n    return (\n      <Flex flexDirection=\"column\" {...rest}>\n        {disabled && disabledText && (\n          <Text variant=\"xs\" mb={1} color=\"mono60\">\n            {disabledText}\n          </Text>\n        )}\n\n        {this.renderRadioButtons()}\n      </Flex>\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/esm/elements/Range/Range.js

@@ -17,7 +17,7 @@ import { useEffect, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 import { useUpdateEffect } from "../../utils";
 import { remapValue } from "../../utils/remapValue";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Flex } from "../Flex";
 export var RANGE_HANDLE_SIZE = 24;
 export var Range = function Range(_ref) {

package/dist/esm/elements/Range/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","names":["themeGet","React","useEffect","useRef","useState","styled","css","useUpdateEffect","remapValue","Box","BoxProps","Flex","RANGE_HANDLE_SIZE","Range","_ref","ariaLabels","min","max","step","_ref$value","value","onChange","rest","_objectWithoutProperties","_excluded","minRef","maxRef","_useState","_useState2","_slicedToArray","values","setValues","_useState3","_useState4","maxWidth","setMaxWidth","handleMinChange","_ref2","target","valueAsNumber","handleMaxChange","_ref3","handleResize","current","offsetWidth","requestAnimationFrame","window","addEventListener","passive","removeEventListener","_toConsumableArray","selectionRectangle","concat","maxRectangle","createElement","Track","Selection","style","clip","Slider","ref","onInput","displayName","withConfig","componentId","railStyles","handleStyles","input","defaultProps","type"],"sources":["../../../../src/elements/Range/Range.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [number, number]) => void\n}\n\nexport const Range: React.FC<React.PropsWithChildren<RangeProps>> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1] - step) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0] + step) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    requestAnimationFrame(handleResize)\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  // Sync local state with value prop\n  useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.mono30\")};\n  }\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.mono0\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  box-shadow: ${themeGet(\"effects.flatShadow\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"Range.js","names":["themeGet","React","useEffect","useRef","useState","styled","css","useUpdateEffect","remapValue","Box","Flex","RANGE_HANDLE_SIZE","Range","_ref","ariaLabels","min","max","step","_ref$value","value","onChange","rest","_objectWithoutProperties","_excluded","minRef","maxRef","_useState","_useState2","_slicedToArray","values","setValues","_useState3","_useState4","maxWidth","setMaxWidth","handleMinChange","_ref2","target","valueAsNumber","handleMaxChange","_ref3","handleResize","current","offsetWidth","requestAnimationFrame","window","addEventListener","passive","removeEventListener","_toConsumableArray","selectionRectangle","concat","maxRectangle","createElement","Track","Selection","style","clip","Slider","ref","onInput","displayName","withConfig","componentId","railStyles","handleStyles","input","defaultProps","type"],"sources":["../../../../src/elements/Range/Range.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [number, number]) => void\n}\n\nexport const Range: React.FC<React.PropsWithChildren<RangeProps>> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1] - step) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0] + step) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    requestAnimationFrame(handleResize)\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  // Sync local state with value prop\n  useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.mono30\")};\n  }\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.mono0\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  box-shadow: ${themeGet(\"effects.flatShadow\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"mappings":"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"}