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

package/dist/esm/elements/ModalDialog/ModalDialogContent.js

@@ -2,9 +2,9 @@ var _excluded = ["children", "footer", "hasLogo", "leftPanel", "onClose", "right
 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); }
 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, { FC, isValidElement } from "react";
-import { Clickable, ClickableProps } from "../Clickable";
-import { Box, BoxProps } from "../Box";
+import React, { isValidElement } from "react";
+import { Clickable } from "../Clickable";
+import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 import CloseIcon from "@artsy/icons/CloseIcon";

package/dist/esm/elements/ModalDialog/ModalDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialogContent.js","names":["React","FC","isValidElement","Clickable","ClickableProps","Box","BoxProps","Flex","Text","CloseIcon","ArtsyLogoIcon","useSentinelVisibility","Spacer","styled","themeGet","useTheme","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_objectWithoutProperties","_excluded","_useSentinelVisibilit","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","_useTheme","theme","createElement","_extends","bg","m","style","boxShadow","effects","dropShadow","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","display","height","y","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","displayName","props","Close","ml","fill","withConfig","componentId"],"sources":["../../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC, isValidElement } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: React.ReactNode\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<\n  React.PropsWithChildren<ModalDialogContentProps>\n> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  const { theme } = useTheme()\n\n  return (\n    <Flex\n      bg=\"mono0\"\n      m={2}\n      style={{ boxShadow: theme.effects.dropShadow }}\n      {...rest}\n    >\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? theme.effects.dropShadow : undefined,\n          }}\n        >\n          {isValidElement(title) ? (\n            title\n          ) : (\n            <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n              {(title || hasLogo) && (\n                <Box m={2}>\n                  {hasLogo && (\n                    <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                  )}\n\n                  {hasLogo && title && <Spacer y={2} />}\n\n                  {title && (\n                    <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                      {title}\n                    </Text>\n                  )}\n                </Box>\n              )}\n\n              <ModalClose onClick={onClose} />\n            </Flex>\n          )}\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? theme.effects.dropShadow : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<React.PropsWithChildren<ModalCloseProps>> = (\n  props\n) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.mono100\")};\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.mono60\")};\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"ModalDialogContent.js","names":["React","isValidElement","Clickable","Box","Flex","Text","CloseIcon","ArtsyLogoIcon","useSentinelVisibility","Spacer","styled","themeGet","useTheme","ModalDialogContent","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","rest","_objectWithoutProperties","_excluded","_useSentinelVisibilit","topSentinel","sentinel","isAtTop","isSentinelVisible","_useSentinelVisibilit2","bottomSentinel","isAtBottom","_useTheme","theme","createElement","_extends","bg","m","style","boxShadow","effects","dropShadow","flexDirection","overflow","width","zIndex","transition","undefined","alignItems","justifyContent","display","height","y","variant","lineClamp","hyphenate","ModalClose","onClick","px","pb","flex","WebkitOverflowScrolling","p","displayName","props","Close","ml","fill","withConfig","componentId"],"sources":["../../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"sourcesContent":["import React, { FC, isValidElement } from \"react\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  leftPanel?: React.ReactNode\n  onClose: () => void\n  rightPanel?: React.ReactNode\n  title?: React.ReactNode\n  header?: React.ReactNode\n}\n\nexport const ModalDialogContent: React.FC<\n  React.PropsWithChildren<ModalDialogContentProps>\n> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  const { theme } = useTheme()\n\n  return (\n    <Flex\n      bg=\"mono0\"\n      m={2}\n      style={{ boxShadow: theme.effects.dropShadow }}\n      {...rest}\n    >\n      {leftPanel}\n\n      <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n        <Flex\n          flexDirection=\"column\"\n          zIndex={1}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtTop ? theme.effects.dropShadow : undefined,\n          }}\n        >\n          {isValidElement(title) ? (\n            title\n          ) : (\n            <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n              {(title || hasLogo) && (\n                <Box m={2}>\n                  {hasLogo && (\n                    <ArtsyLogoIcon display=\"block\" width={75} height={26} />\n                  )}\n\n                  {hasLogo && title && <Spacer y={2} />}\n\n                  {title && (\n                    <Text variant=\"lg-display\" lineClamp={6} hyphenate>\n                      {title}\n                    </Text>\n                  )}\n                </Box>\n              )}\n\n              <ModalClose onClick={onClose} />\n            </Flex>\n          )}\n\n          {header && (\n            <Box px={2} pb={2}>\n              {header}\n            </Box>\n          )}\n        </Flex>\n\n        <Box\n          px={2}\n          pb={2}\n          flex={1}\n          overflow=\"auto\"\n          style={{ WebkitOverflowScrolling: \"touch\" }}\n        >\n          {topSentinel}\n          {children}\n          {bottomSentinel}\n        </Box>\n\n        {footer && (\n          <Box\n            p={2}\n            style={{\n              transition: \"box-shadow 250ms\",\n              boxShadow: isAtBottom ? theme.effects.dropShadow : undefined,\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </Flex>\n\n      {rightPanel}\n    </Flex>\n  )\n}\n\nexport type ModalCloseProps = ClickableProps\n\nexport const ModalClose: FC<React.PropsWithChildren<ModalCloseProps>> = (\n  props\n) => {\n  return (\n    <Close p={2} ml=\"auto\" aria-label=\"Close\" {...props}>\n      <CloseIcon fill=\"currentColor\" display=\"block\" />\n    </Close>\n  )\n}\n\nconst Close = styled(Clickable)`\n  color: ${themeGet(\"colors.mono100\")};\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    color: ${themeGet(\"colors.mono60\")};\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/MultiSelect/MultiSelect.js

@@ -20,10 +20,10 @@ import { RequiredField } from "../../shared/RequiredField";
 import { useClickOutside, usePosition } from "../../utils";
 import { useUpdateEffect } from "../../utils/useUpdateEffect";
 import { useWidthOf } from "../../utils/useWidthOf";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Checkbox } from "../Checkbox";
 import { Clickable } from "../Clickable";
-import { caretMixin, Option } from "../Select";
+import { caretMixin } from "../Select";
 import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
 import { MULTISELECT_STATES } from "./tokens";

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","names":["themeGet","React","useEffect","useState","styled","css","FORM_ELEMENT_TRANSITION","RequiredField","useClickOutside","usePosition","useUpdateEffect","useWidthOf","Box","BoxProps","Checkbox","Clickable","caretMixin","Option","Text","Tooltip","MULTISELECT_STATES","MultiSelect","_ref","_ref$autoOpen","autoOpen","complete","description","disabled","error","focus","hover","_ref$selected","selected","_ref$name","name","options","required","title","onBlur","onFocus","onSelect","rest","_objectWithoutProperties","_excluded","selectedOptions","valuesToOptions","_useState","_useState2","_slicedToArray","visible","setVisible","_useState3","_useState4","selection","setSelection","newSelectedOptions","toString","tooltipRef","current","anchorRef","handleVisible","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","offset","active","_useWidthOf","ref","width","onClickOutside","when","type","handleSelect","option","prevSelection","nextSelection","concat","_toConsumableArray","filter","_ref2","value","createElement","_extends","pointer","content","placement","variant","color","textAlign","Container","mt","onClick","length","lineHeight","overflowEllipsis","reverse","map","s","text","join","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","height","px","o","includes","ml","displayName","values","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { Clickable } from \"../Clickable\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  /** Whether to open the dropdown automatically on mount or render (default: false) */\n  autoOpen?: boolean\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  /** Selected values (updating the list will refresh the internal selection and re-render the component) */\n  selected?: Option[\"value\"][]\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onBlur?: (selection: Option[]) => void\n  onFocus?: () => void\n  onSelect?: (selection: Option[]) => void\n\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<\n  React.PropsWithChildren<MultiSelectProps>\n> = ({\n  autoOpen = false,\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  selected = [],\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onBlur,\n  onFocus,\n  onSelect,\n  ...rest\n}) => {\n  const selectedOptions = valuesToOptions(selected, options)\n\n  const [visible, setVisible] = useState(autoOpen)\n  const [selection, setSelection] = useState<Option[]>(selectedOptions || [])\n\n  useEffect(() => {\n    const newSelectedOptions = valuesToOptions(selected, options)\n    setSelection(newSelectedOptions)\n  }, [selected.toString()])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\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 handleVisible = () => {\n    setVisible(true)\n    onFocus?.()\n  }\n\n  const handleHide = () => {\n    setVisible(false)\n    onBlur?.(selection)\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={handleVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1} overflowEllipsis>\n          {selection.length > 0\n            ? [...selection]\n                .reverse()\n                .map((s) => s.text)\n                .join(\", \")\n            : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"mono0\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.map((o) => o.value).includes(option.value)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst valuesToOptions = (\n  values: Option[\"value\"][],\n  options: Option[]\n): Option[] => {\n  return options.filter((option) => values.includes(option.value))\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.mono0\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n\n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.mono0\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","names":["themeGet","React","useEffect","useState","styled","css","FORM_ELEMENT_TRANSITION","RequiredField","useClickOutside","usePosition","useUpdateEffect","useWidthOf","Box","Checkbox","Clickable","caretMixin","Text","Tooltip","MULTISELECT_STATES","MultiSelect","_ref","_ref$autoOpen","autoOpen","complete","description","disabled","error","focus","hover","_ref$selected","selected","_ref$name","name","options","required","title","onBlur","onFocus","onSelect","rest","_objectWithoutProperties","_excluded","selectedOptions","valuesToOptions","_useState","_useState2","_slicedToArray","visible","setVisible","_useState3","_useState4","selection","setSelection","newSelectedOptions","toString","tooltipRef","current","anchorRef","handleVisible","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","_usePosition","position","offset","active","_useWidthOf","ref","width","onClickOutside","when","type","handleSelect","option","prevSelection","nextSelection","concat","_toConsumableArray","filter","_ref2","value","createElement","_extends","pointer","content","placement","variant","color","textAlign","Container","mt","onClick","length","lineHeight","overflowEllipsis","reverse","map","s","text","join","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","height","px","o","includes","ml","displayName","values","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { Clickable } from \"../Clickable\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  /** Whether to open the dropdown automatically on mount or render (default: false) */\n  autoOpen?: boolean\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  /** Selected values (updating the list will refresh the internal selection and re-render the component) */\n  selected?: Option[\"value\"][]\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onBlur?: (selection: Option[]) => void\n  onFocus?: () => void\n  onSelect?: (selection: Option[]) => void\n\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<\n  React.PropsWithChildren<MultiSelectProps>\n> = ({\n  autoOpen = false,\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  selected = [],\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onBlur,\n  onFocus,\n  onSelect,\n  ...rest\n}) => {\n  const selectedOptions = valuesToOptions(selected, options)\n\n  const [visible, setVisible] = useState(autoOpen)\n  const [selection, setSelection] = useState<Option[]>(selectedOptions || [])\n\n  useEffect(() => {\n    const newSelectedOptions = valuesToOptions(selected, options)\n    setSelection(newSelectedOptions)\n  }, [selected.toString()])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\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 handleVisible = () => {\n    setVisible(true)\n    onFocus?.()\n  }\n\n  const handleHide = () => {\n    setVisible(false)\n    onBlur?.(selection)\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={handleVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1} overflowEllipsis>\n          {selection.length > 0\n            ? [...selection]\n                .reverse()\n                .map((s) => s.text)\n                .join(\", \")\n            : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"mono0\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.map((o) => o.value).includes(option.value)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst valuesToOptions = (\n  values: Option[\"value\"][],\n  options: Option[]\n): Option[] => {\n  return options.filter((option) => values.includes(option.value))\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.mono0\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n\n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.mono0\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { themeGet } from "@styled-system/theme-get";
-import { css, ExecutionContext } from "styled-components";
-import { State } from "../Select/types";
+import { css } from "styled-components";
 export var MULTISELECT_STATES = {
   default: css(["height:50px;font-size:", ";color:", ";border-color:", ";& > label{color:", ";font-size:", ";}"], themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize")),
   focus: css(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","ExecutionContext","State","MULTISELECT_STATES","default","focus","hover","_ref","complete","completed","disabled","error"],"sources":["../../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\ninterface MultiSelectProps extends ExecutionContext {\n  complete?: boolean\n}\n\nexport const MULTISELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n\n      ${({ complete }: MultiSelectProps) =>\n        !complete &&\n        css`\n          text-decoration: underline;\n        `}\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,EAAEC,gBAAgB,QAAQ,mBAAmB;AACzD,SAASC,KAAK;AAMd,OAAO,IAAMC,kBAAsC,GAAG;EACpDC,OAAO,EAAEJ,GAAG,oGAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDM,KAAK,EAAEL,GAAG,+HACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAEpD;EACDO,KAAK,EAAEN,GAAG,wFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,gBAAgB,CAAC,EAEjC,UAAAQ,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,IACTR,GAAG,gCAEF;EAAA,EAEN;EACDS,SAAS,EAAET,GAAG,+GACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAEpD;EACDW,QAAQ,EAAEV,GAAG,oGACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,CAGrC;EACDY,KAAK,EAAEX,GAAG,0DACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","MULTISELECT_STATES","default","focus","hover","_ref","complete","completed","disabled","error"],"sources":["../../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\ninterface MultiSelectProps extends ExecutionContext {\n  complete?: boolean\n}\n\nexport const MULTISELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    & > label {\n      color: ${themeGet(\"colors.blue100\")};\n\n      ${({ complete }: MultiSelectProps) =>\n        !complete &&\n        css`\n          text-decoration: underline;\n        `}\n    }\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-250%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    & > label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAA0B,mBAAmB;AAOzD,OAAO,IAAMC,kBAAsC,GAAG;EACpDC,OAAO,EAAEF,GAAG,oGAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDI,KAAK,EAAEH,GAAG,+HACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAEpD;EACDK,KAAK,EAAEJ,GAAG,wFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,gBAAgB,CAAC,EAEjC,UAAAM,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,IACTN,GAAG,gCAEF;EAAA,EAEN;EACDO,SAAS,EAAEP,GAAG,+GACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAEpD;EACDS,QAAQ,EAAER,GAAG,oGACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,CAGrC;EACDU,KAAK,EAAET,GAAG,0DACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}

package/dist/esm/elements/Pagination/Pagination.js

@@ -4,13 +4,13 @@ var _excluded = ["getHref", "hasNextPage", "onClick", "onNext", "pageCursors"],
 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); }
 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, { FC } from "react";
+import React from "react";
 import ChevronLeftIcon from "@artsy/icons/ChevronLeftIcon";
 import ChevronRightIcon from "@artsy/icons/ChevronRightIcon";
-import { Flex, FlexProps } from "../Flex";
+import { Flex } from "../Flex";
 import { Text } from "../Text";
 import styled from "styled-components";
-import { Box, boxMixin, BoxProps } from "../Box";
+import { Box, boxMixin } from "../Box";
 import { SkeletonBox } from "../Skeleton";
 export var PageLink = styled.a.withConfig({
   displayName: "Pagination__PageLink",

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["React","FC","ChevronLeftIcon","ChevronRightIcon","Flex","FlexProps","Text","styled","Box","boxMixin","BoxProps","SkeletonBox","PageLink","a","withConfig","displayName","componentId","Pagination","_ref","getHref","hasNextPage","onClick","onNext","_ref$pageCursors","pageCursors","around","first","last","previous","rest","_objectWithoutProperties","_excluded","handlePrevClick","event","cursor","page","handleNextClick","nextPage","createElement","PaginationContainer","NextPrevButton","disabled","pr","mr","height","width","Fragment","Page","pageCursor","alignItems","p","color","map","key","pl","ml","_ref2","_ref2$pageCursor","isCurrent","_excluded2","handleClick","href","_extends","borderRadius","display","_ref3","children","_excluded3","py","style","opacity","pointerEvents","attrs","as","variant","PaginationSkeleton"],"sources":["../../../../src/elements/Pagination/Pagination.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { Box, boxMixin, BoxProps } from \"../Box\"\nimport { SkeletonBox } from \"../Skeleton\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <PaginationContainer {...rest}>\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<React.PropsWithChildren<PageProps>> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"mono100\", \"aria-current\": \"page\" }\n        : { color: \"mono60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick?: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<\n  React.PropsWithChildren<NextPrevButtonProps>\n> = ({ disabled, getHref, onClick, page, children, ...rest }) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"mono30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n\nconst PaginationContainer = styled(Text).attrs({\n  as: \"nav\",\n  \"aria-label\": \"Pagination\",\n  variant: \"sm\",\n})`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n`\n\nexport const PaginationSkeleton: FC<React.PropsWithChildren<unknown>> = () => {\n  return (\n    <PaginationContainer aria-hidden>\n      <NextPrevButton disabled pr={0.5}>\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <SkeletonBox width={100}>\n        <Box opacity={0}>0</Box>\n      </SkeletonBox>\n\n      <NextPrevButton disabled pl={0.5}>\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["React","ChevronLeftIcon","ChevronRightIcon","Flex","Text","styled","Box","boxMixin","SkeletonBox","PageLink","a","withConfig","displayName","componentId","Pagination","_ref","getHref","hasNextPage","onClick","onNext","_ref$pageCursors","pageCursors","around","first","last","previous","rest","_objectWithoutProperties","_excluded","handlePrevClick","event","cursor","page","handleNextClick","nextPage","createElement","PaginationContainer","NextPrevButton","disabled","pr","mr","height","width","Fragment","Page","pageCursor","alignItems","p","color","map","key","pl","ml","_ref2","_ref2$pageCursor","isCurrent","_excluded2","handleClick","href","_extends","borderRadius","display","_ref3","children","_excluded3","py","style","opacity","pointerEvents","attrs","as","variant","PaginationSkeleton"],"sources":["../../../../src/elements/Pagination/Pagination.tsx"],"sourcesContent":["import React, { FC } from \"react\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport styled from \"styled-components\"\nimport { Box, boxMixin, BoxProps } from \"../Box\"\nimport { SkeletonBox } from \"../Skeleton\"\n\ninterface PageCursor {\n  cursor: string\n  isCurrent: boolean\n  page: number\n}\n\nexport interface PageCursors {\n  around: PageCursor[]\n  first: PageCursor\n  last: PageCursor\n  previous: PageCursor\n}\n\nexport const PageLink = styled.a<BoxProps>`\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ${boxMixin}\n`\n\nexport interface PaginationProps extends FlexProps {\n  getHref?: (page: number) => string\n  hasNextPage: boolean\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  onNext?: (event: React.MouseEvent, page: number) => void\n  pageCursors: PageCursors\n  scrollTo?: string\n}\n\n/** Pagination */\nexport const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({\n  getHref,\n  hasNextPage,\n  onClick,\n  onNext,\n  pageCursors: { around, first, last, previous },\n  ...rest\n}) => {\n  const handlePrevClick = (event: React.MouseEvent) => {\n    if (previous) {\n      onClick && onClick(previous.cursor, previous.page, event)\n    }\n  }\n\n  const handleNextClick = (event: React.MouseEvent) => {\n    onNext && onNext(event, nextPage)\n  }\n\n  const nextPage = (previous?.page || 0) + 2\n\n  return (\n    <PaginationContainer {...rest}>\n      <NextPrevButton\n        data-testid=\"prev\"\n        aria-label=\"Previous\"\n        getHref={getHref}\n        onClick={handlePrevClick}\n        page={previous?.page}\n        disabled={!previous}\n        pr={0.5}\n      >\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <Flex>\n        {first && (\n          <>\n            <Page onClick={onClick} pageCursor={first} getHref={getHref} />\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n          </>\n        )}\n\n        {around.map((pageCursor) => {\n          return (\n            <Page\n              getHref={getHref}\n              key={pageCursor.page}\n              onClick={onClick}\n              pageCursor={pageCursor}\n            />\n          )\n        })}\n\n        {last && (\n          <>\n            <Flex alignItems=\"center\" p={0.5} color=\"mono60\">\n              …\n            </Flex>\n\n            <Page onClick={onClick} pageCursor={last} getHref={getHref} />\n          </>\n        )}\n      </Flex>\n\n      <NextPrevButton\n        data-testid=\"next\"\n        getHref={getHref}\n        onClick={handleNextClick}\n        page={nextPage}\n        disabled={!hasNextPage}\n        pl={0.5}\n      >\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n\ninterface PageProps extends BoxProps {\n  getHref?: (page: number) => string\n  onClick?: (cursor: string, page: number, event: React.MouseEvent) => void\n  pageCursor: PageCursor\n}\n\nconst Page: React.FC<React.PropsWithChildren<PageProps>> = ({\n  getHref,\n  onClick,\n  pageCursor: { cursor, isCurrent, page },\n  ...rest\n}) => {\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n  ) => {\n    onClick && onClick(cursor, page, event)\n  }\n\n  const href = page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  return (\n    <PageLink\n      href={href}\n      onClick={handleClick}\n      borderRadius={2}\n      display=\"flex\"\n      alignItems=\"center\"\n      p={0.5}\n      {...(isCurrent\n        ? { color: \"mono100\", \"aria-current\": \"page\" }\n        : { color: \"mono60\" })}\n      {...rest}\n    >\n      {page}\n    </PageLink>\n  )\n}\n\nexport interface NextPrevButtonProps extends BoxProps {\n  disabled: boolean\n  getHref?: (page: number) => string\n  onClick?: (event: React.MouseEvent) => void\n  page?: number\n}\n\nconst NextPrevButton: React.FC<\n  React.PropsWithChildren<NextPrevButtonProps>\n> = ({ disabled, getHref, onClick, page, children, ...rest }) => {\n  const href =\n    !disabled && page && typeof getHref !== \"undefined\" ? getHref(page) : \"\"\n\n  if (disabled) {\n    return (\n      <Flex\n        display=\"flex\"\n        alignItems=\"center\"\n        color=\"mono30\"\n        py={0.5}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    )\n  }\n\n  return (\n    <PageLink\n      href={href}\n      onClick={onClick}\n      display=\"flex\"\n      alignItems=\"center\"\n      py={0.5}\n      style={\n        !disabled\n          ? {\n              opacity: 1,\n              pointerEvents: \"inherit\",\n            }\n          : {\n              opacity: 0.1,\n              pointerEvents: \"none\",\n            }\n      }\n      {...rest}\n    >\n      {children}\n    </PageLink>\n  )\n}\n\nconst PaginationContainer = styled(Text).attrs({\n  as: \"nav\",\n  \"aria-label\": \"Pagination\",\n  variant: \"sm\",\n})`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n`\n\nexport const PaginationSkeleton: FC<React.PropsWithChildren<unknown>> = () => {\n  return (\n    <PaginationContainer aria-hidden>\n      <NextPrevButton disabled pr={0.5}>\n        <ChevronLeftIcon mr={0.5} height={12} width={12} />\n\n        <span>Prev</span>\n      </NextPrevButton>\n\n      <SkeletonBox width={100}>\n        <Box opacity={0}>0</Box>\n      </SkeletonBox>\n\n      <NextPrevButton disabled pl={0.5}>\n        <span>Next</span>\n\n        <ChevronRightIcon ml={0.5} height={12} width={12} />\n      </NextPrevButton>\n    </PaginationContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/elements/PasswordInput/PasswordInput.js

@@ -9,7 +9,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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, { useState } from "react";
-import { InputProps } from "../Input";
 import { LabeledInput } from "../LabeledInput";
 import { Clickable } from "../Clickable";
 import ShowIcon from "@artsy/icons/ShowIcon";

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":["React","useState","InputProps","LabeledInput","Clickable","ShowIcon","HideIcon","PasswordInput","_ref","_ref$defaultVisibilit","defaultVisibility","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","visibility","setVisibility","handleClick","prevVisibility","createElement","_extends","type","label","onClick","height","displayName"],"sources":["../../../../src/elements/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Clickable } from \"../Clickable\"\nimport ShowIcon from \"@artsy/icons/ShowIcon\"\nimport HideIcon from \"@artsy/icons/HideIcon\"\n\nexport interface PasswordInputProps extends InputProps {\n  defaultVisibility?: boolean\n}\n\nexport const PasswordInput: React.FC<React.PropsWithChildren<PasswordInputProps>> = ({\n  defaultVisibility = false,\n  ...rest\n}) => {\n  const [visibility, setVisibility] = useState(defaultVisibility)\n\n  const handleClick = () => {\n    setVisibility((prevVisibility) => !prevVisibility)\n  }\n\n  return (\n    <LabeledInput\n      type={visibility ? \"text\" : \"password\"}\n      label={\n        <Clickable onClick={handleClick} height=\"100%\">\n          {visibility ? <HideIcon /> : <ShowIcon />}\n        </Clickable>\n      }\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU;AACnB,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,OAAOC,QAAQ,MAAM,uBAAuB;AAM5C,OAAO,IAAMC,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAG3E;EAAA,IAAAC,qBAAA,GAAAD,IAAA,CAFJE,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IACtBE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,IAAAC,SAAA,GAAoCb,QAAQ,CAACS,iBAAiB,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAxDG,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAEhC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBD,aAAa,CAAC,UAACE,cAAc;MAAA,OAAK,CAACA,cAAc;IAAA,EAAC;EACpD,CAAC;EAED,oBACEpB,KAAA,CAAAqB,aAAA,CAAClB,YAAY,EAAAmB,QAAA;IACXC,IAAI,EAAEN,UAAU,GAAG,MAAM,GAAG,UAAW;IACvCO,KAAK,eACHxB,KAAA,CAAAqB,aAAA,CAACjB,SAAS;MAACqB,OAAO,EAAEN,WAAY;MAACO,MAAM,EAAC;IAAM,GAC3CT,UAAU,gBAAGjB,KAAA,CAAAqB,aAAA,CAACf,QAAQ,OAAG,gBAAGN,KAAA,CAAAqB,aAAA,CAAChB,QAAQ,OAAG;EAE5C,GACGM,IAAI,EACR;AAEN,CAAC;AArBYJ,aAAoE,CAAAoB,WAAA"}
+{"version":3,"file":"PasswordInput.js","names":["React","useState","LabeledInput","Clickable","ShowIcon","HideIcon","PasswordInput","_ref","_ref$defaultVisibilit","defaultVisibility","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","visibility","setVisibility","handleClick","prevVisibility","createElement","_extends","type","label","onClick","height","displayName"],"sources":["../../../../src/elements/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Clickable } from \"../Clickable\"\nimport ShowIcon from \"@artsy/icons/ShowIcon\"\nimport HideIcon from \"@artsy/icons/HideIcon\"\n\nexport interface PasswordInputProps extends InputProps {\n  defaultVisibility?: boolean\n}\n\nexport const PasswordInput: React.FC<React.PropsWithChildren<PasswordInputProps>> = ({\n  defaultVisibility = false,\n  ...rest\n}) => {\n  const [visibility, setVisibility] = useState(defaultVisibility)\n\n  const handleClick = () => {\n    setVisibility((prevVisibility) => !prevVisibility)\n  }\n\n  return (\n    <LabeledInput\n      type={visibility ? \"text\" : \"password\"}\n      label={\n        <Clickable onClick={handleClick} height=\"100%\">\n          {visibility ? <HideIcon /> : <ShowIcon />}\n        </Clickable>\n      }\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,OAAOC,QAAQ,MAAM,uBAAuB;AAM5C,OAAO,IAAMC,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAG3E;EAAA,IAAAC,qBAAA,GAAAD,IAAA,CAFJE,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IACtBE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,IAAAC,SAAA,GAAoCZ,QAAQ,CAACQ,iBAAiB,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAxDG,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAEhC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBD,aAAa,CAAC,UAACE,cAAc;MAAA,OAAK,CAACA,cAAc;IAAA,EAAC;EACpD,CAAC;EAED,oBACEnB,KAAA,CAAAoB,aAAA,CAAClB,YAAY,EAAAmB,QAAA;IACXC,IAAI,EAAEN,UAAU,GAAG,MAAM,GAAG,UAAW;IACvCO,KAAK,eACHvB,KAAA,CAAAoB,aAAA,CAACjB,SAAS;MAACqB,OAAO,EAAEN,WAAY;MAACO,MAAM,EAAC;IAAM,GAC3CT,UAAU,gBAAGhB,KAAA,CAAAoB,aAAA,CAACf,QAAQ,OAAG,gBAAGL,KAAA,CAAAoB,aAAA,CAAChB,QAAQ,OAAG;EAE5C,GACGM,IAAI,EACR;AAEN,CAAC;AArBYJ,aAAoE,CAAAoB,WAAA"}

package/dist/esm/elements/Pill/Pill.js

@@ -7,12 +7,10 @@ import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { css } from "styled-components";
 import CloseIcon from "@artsy/icons/CloseIcon";
-import { Clickable, ClickableProps } from "../Clickable";
+import { Clickable } from "../Clickable";
 import { Sup } from "../Sup";
 import { Text } from "../Text";
 import { PILL_VARIANTS } from "./tokens";
-import { BoxProps } from "../Box";
-import { ResponsiveValue } from "styled-system";
 export var PILL_VARIANT_NAMES = ["badge", "dotted", "default", "filter", "gray", "profile", "search"];
 
 /** PillProps */

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","names":["themeGet","React","forwardRef","styled","css","CloseIcon","Clickable","ClickableProps","Sup","Text","PILL_VARIANTS","BoxProps","ResponsiveValue","PILL_VARIANT_NAMES","Pill","_ref","forwardedRef","_rest$variant","children","Icon","_ref$iconPosition","iconPosition","rest","_objectWithoutProperties","_excluded","variant","compact","createElement","Container","_extends","ref","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","overflowEllipsis","Fragment","count","selected","width","height","displayName","defaultProps","withConfig","componentId","props","_props$variant","states","default","focus","hover","active","disabled","img"],"sources":["../../../../src/elements/Pill/Pill.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"badge\",\n  \"dotted\",\n  \"default\",\n  \"filter\",\n  \"gray\",\n  \"profile\",\n  \"search\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"active\"\n  | \"default\"\n  | \"disabled\"\n  | \"focus\"\n  | \"hover\"\n  | \"selected\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?:\n    | keyof JSX.IntrinsicElements\n    | React.ComponentType<React.PropsWithChildren<unknown>>\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces active state. This is for working with :active; not denoting a selected state */\n  active?: boolean\n  /** Forces selected state. Use this state to denote the selected state */\n  selected?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<\n    React.PropsWithChildren<BoxProps & { fill?: ResponsiveValue<string> }>\n  >\n  /** Optional: Icon positioning */\n  iconPosition?: \"left\" | \"right\"\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"badge\" | \"default\" | \"dotted\" | \"filter\" | \"gray\" | \"search\"\n        >\n      }\n    | {\n        /** `\"profile\"` pills have an optional `src` */\n        variant?: Extract<PillVariant, \"profile\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n        /** Optionally switch into a condensed form */\n        compact?: boolean\n      }\n    | {\n        /** `search` pills have an optional `count` */\n        variant?: Extract<PillVariant, \"search\">\n        /** Optional count */\n        count?: number\n      }\n  )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an profile entity (possibly in the context of a card).\n */\nexport const Pill = forwardRef<\n  HTMLAnchorElement & HTMLButtonElement,\n  PillProps\n>(({ children, Icon, iconPosition = \"left\", ...rest }, forwardedRef) => {\n  const variant =\n    rest.variant === \"profile\" && rest.compact\n      ? \"gray\"\n      : rest.variant ?? \"default\"\n\n  return (\n    <Container ref={forwardedRef as any} {...rest} variant={variant}>\n      {rest.variant === \"profile\" && rest.src && !rest.compact && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      {Icon && iconPosition === \"left\" && (\n        <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />\n      )}\n\n      <Text\n        variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n        overflowEllipsis\n      >\n        <span>{children}</span>\n\n        {rest.variant === \"search\" && \"count\" in rest && (\n          <>\n            {\" \"}\n            <Sup>{rest.count}</Sup>\n          </>\n        )}\n      </Text>\n\n      {Icon && iconPosition === \"right\" && (\n        <Icon fill=\"currentColor\" ml={0.5} mr={-0.5} />\n      )}\n\n      {((rest.variant === \"gray\" && rest.selected) ||\n        (rest.variant === \"filter\" && rest.selected) ||\n        (rest.variant === \"profile\" && rest.selected)) && (\n        <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n      )}\n    </Container>\n  )\n})\n\nPill.displayName = \"Pill\"\n\nPill.defaultProps = {\n  variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.mono15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n    return css`\n      ${states.default}\n      ${props.focus && states.focus}\n      ${props.hover && states.hover}\n      ${props.selected && states.selected}\n      ${props.active && states.active}\n      ${props.disabled && states.disabled}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${props.selected && states.selected}\n      }\n\n      &:active {\n        ${states.active}\n        ${props.selected && states.selected}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.disabled}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.mono30\")};\n  margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":"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"}
+{"version":3,"file":"Pill.js","names":["themeGet","React","forwardRef","styled","css","CloseIcon","Clickable","Sup","Text","PILL_VARIANTS","PILL_VARIANT_NAMES","Pill","_ref","forwardedRef","_rest$variant","children","Icon","_ref$iconPosition","iconPosition","rest","_objectWithoutProperties","_excluded","variant","compact","createElement","Container","_extends","ref","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","overflowEllipsis","Fragment","count","selected","width","height","displayName","defaultProps","withConfig","componentId","props","_props$variant","states","default","focus","hover","active","disabled","img"],"sources":["../../../../src/elements/Pill/Pill.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"badge\",\n  \"dotted\",\n  \"default\",\n  \"filter\",\n  \"gray\",\n  \"profile\",\n  \"search\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"active\"\n  | \"default\"\n  | \"disabled\"\n  | \"focus\"\n  | \"hover\"\n  | \"selected\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?:\n    | keyof JSX.IntrinsicElements\n    | React.ComponentType<React.PropsWithChildren<unknown>>\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces active state. This is for working with :active; not denoting a selected state */\n  active?: boolean\n  /** Forces selected state. Use this state to denote the selected state */\n  selected?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<\n    React.PropsWithChildren<BoxProps & { fill?: ResponsiveValue<string> }>\n  >\n  /** Optional: Icon positioning */\n  iconPosition?: \"left\" | \"right\"\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"badge\" | \"default\" | \"dotted\" | \"filter\" | \"gray\" | \"search\"\n        >\n      }\n    | {\n        /** `\"profile\"` pills have an optional `src` */\n        variant?: Extract<PillVariant, \"profile\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n        /** Optionally switch into a condensed form */\n        compact?: boolean\n      }\n    | {\n        /** `search` pills have an optional `count` */\n        variant?: Extract<PillVariant, \"search\">\n        /** Optional count */\n        count?: number\n      }\n  )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an profile entity (possibly in the context of a card).\n */\nexport const Pill = forwardRef<\n  HTMLAnchorElement & HTMLButtonElement,\n  PillProps\n>(({ children, Icon, iconPosition = \"left\", ...rest }, forwardedRef) => {\n  const variant =\n    rest.variant === \"profile\" && rest.compact\n      ? \"gray\"\n      : rest.variant ?? \"default\"\n\n  return (\n    <Container ref={forwardedRef as any} {...rest} variant={variant}>\n      {rest.variant === \"profile\" && rest.src && !rest.compact && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      {Icon && iconPosition === \"left\" && (\n        <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />\n      )}\n\n      <Text\n        variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n        overflowEllipsis\n      >\n        <span>{children}</span>\n\n        {rest.variant === \"search\" && \"count\" in rest && (\n          <>\n            {\" \"}\n            <Sup>{rest.count}</Sup>\n          </>\n        )}\n      </Text>\n\n      {Icon && iconPosition === \"right\" && (\n        <Icon fill=\"currentColor\" ml={0.5} mr={-0.5} />\n      )}\n\n      {((rest.variant === \"gray\" && rest.selected) ||\n        (rest.variant === \"filter\" && rest.selected) ||\n        (rest.variant === \"profile\" && rest.selected)) && (\n        <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n      )}\n    </Container>\n  )\n})\n\nPill.displayName = \"Pill\"\n\nPill.defaultProps = {\n  variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.mono15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n    return css`\n      ${states.default}\n      ${props.focus && states.focus}\n      ${props.hover && states.hover}\n      ${props.selected && states.selected}\n      ${props.active && states.active}\n      ${props.disabled && states.disabled}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${props.selected && states.selected}\n      }\n\n      &:active {\n        ${states.active}\n        ${props.selected && states.selected}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.disabled}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.mono30\")};\n  margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState } from "react";
 import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
-import { Pill, PillVariant, PILL_VARIANT_NAMES } from "./Pill";
+import { Pill, PILL_VARIANT_NAMES } from "./Pill";
 import { Box } from "../Box";
 import { Join } from "../Join";
 import GraphIcon from "@artsy/icons/GraphIcon";

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.story.js","names":["React","useState","Flex","Spacer","Pill","PillVariant","PILL_VARIANT_NAMES","Box","Join","GraphIcon","ChevronSmallDownIcon","styled","Popover","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Display","withConfig","displayName","componentId","Default","args","children","story","Variants","render","createElement","display","flexDirection","gap","map","variant","_extends","key","p","overflowX","includes","bg","color","separator","x","focus","hover","active","selected","disabled","LinkExample","as","href","LongExampleWithTruncation","maxWidth","SearchWithCount","flexWrap","count","ArtistWithImage","src","PillWithIcon","Icon","iconPosition","Interactive","_useState","_useState2","_slicedToArray","setSelected","onClick","prevActive","ProfileVariant","compact","PillWithPopover","placement","popover","Fragment","_ref","anchorRef","onVisible","ref"],"sources":["../../../../src/elements/Pill/Pill.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport GraphIcon from \"@artsy/icons/GraphIcon\"\nimport ChevronSmallDownIcon from \"@artsy/icons/ChevronSmallDownIcon\"\nimport styled from \"styled-components\"\nimport { Popover } from \"../Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Pill,\n  title: \"Components/Pill\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A pill-shaped button component with various visual variants for different use cases.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Default = {\n  args: {\n    children: \"Default Pill\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic pill component with default styling.\",\n      },\n    },\n  },\n}\n\nexport const Variants = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n      {PILL_VARIANT_NAMES.map((variant) => (\n        <Display\n          key={variant}\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(variant)\n            ? { bg: \"mono100\", color: \"mono0\" }\n            : { bg: \"mono0\", color: \"mono100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer x={2} />}>\n              <Pill variant={variant as PillVariant}>Default</Pill>\n              <Pill variant={variant as PillVariant} focus>\n                Focus\n              </Pill>\n              <Pill variant={variant as PillVariant} hover>\n                Hover\n              </Pill>\n              <Pill variant={variant as PillVariant} active>\n                Active\n              </Pill>\n              <Pill variant={variant as PillVariant} selected>\n                Selected\n              </Pill>\n              <Pill variant={variant as PillVariant} disabled>\n                Disabled\n              </Pill>\n            </Join>\n          </Flex>\n        </Display>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available pill variants with different interaction states.\",\n      },\n    },\n  },\n}\n\nexport const LinkExample = {\n  render: () => (\n    <Pill\n      variant=\"profile\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill rendered as a clickable link element.\",\n      },\n    },\n  },\n}\n\nexport const LongExampleWithTruncation = {\n  render: () => (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill with long text that gets truncated with ellipsis.\",\n      },\n    },\n  },\n}\n\nexport const SearchWithCount = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill variant=\"search\" count={123}>\n        Default\n      </Pill>\n      <Pill variant=\"search\" count={123} focus>\n        Focus\n      </Pill>\n      <Pill variant=\"search\" count={123} hover>\n        Hover\n      </Pill>\n      <Pill variant=\"search\" count={123} active>\n        Active\n      </Pill>\n      <Pill variant=\"search\" count={123} selected>\n        Selected\n      </Pill>\n      <Pill variant=\"search\" count={123} disabled>\n        Disabled\n      </Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Search variant pill with count indicator in different states.\",\n      },\n    },\n  },\n}\n\nexport const ArtistWithImage = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n      >\n        Default\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        focus\n      >\n        Focus\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        hover\n      >\n        Hover\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        selected\n      >\n        Selected\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        disabled\n      >\n        Disabled\n      </Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Profile variant pill with artist image in different states.\",\n      },\n    },\n  },\n}\n\nexport const PillWithIcon = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n      <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n        <Pill variant=\"badge\" Icon={GraphIcon}>\n          Badge with Icon\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} focus>\n          Focus\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} hover>\n          Hover\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} selected>\n          Selected\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} disabled>\n          Disabled\n        </Pill>\n      </Box>\n      <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n        <Pill\n          variant=\"default\"\n          Icon={ChevronSmallDownIcon}\n          iconPosition=\"right\"\n        >\n          With Right Icon\n        </Pill>\n        <Pill variant=\"search\" Icon={GraphIcon}>\n          Search with Icon\n        </Pill>\n        <Pill variant=\"filter\" Icon={GraphIcon}>\n          Filter with Icon\n        </Pill>\n        <Pill variant=\"dotted\" Icon={GraphIcon}>\n          Dotted with Icon\n        </Pill>\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pills with various icons and icon positions.\",\n      },\n    },\n  },\n}\n\nexport const Interactive = {\n  render: () => {\n    const [selected, setSelected] = useState(false)\n    return (\n      <Pill\n        selected={selected}\n        onClick={() => setSelected((prevActive) => !prevActive)}\n      >\n        Click to Toggle\n      </Pill>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Interactive pill that toggles selected state when clicked.\",\n      },\n    },\n  },\n}\n\nexport const ProfileVariant = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill variant=\"profile\" src=\"https://picsum.photos/seed/isa/60/60\">\n        Standard Profile\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        compact\n        src=\"https://picsum.photos/seed/isa/60/60\"\n      >\n        Compact Profile\n      </Pill>\n      <Pill variant=\"profile\">Profile without Image</Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Profile variant pills with different configurations.\",\n      },\n    },\n  },\n}\n\nexport const PillWithPopover = {\n  render: () => (\n    <Popover placement=\"bottom\" popover={<>Popover Content</>}>\n      {({ anchorRef, onVisible }) => (\n        <Pill ref={anchorRef as any} onClick={() => onVisible()}>\n          Click for Popover\n        </Pill>\n      )}\n    </Popover>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill that triggers a popover when clicked.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pill.story.js","names":["React","useState","Flex","Spacer","Pill","PILL_VARIANT_NAMES","Box","Join","GraphIcon","ChevronSmallDownIcon","styled","Popover","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Display","withConfig","displayName","componentId","Default","args","children","story","Variants","render","createElement","display","flexDirection","gap","map","variant","_extends","key","p","overflowX","includes","bg","color","separator","x","focus","hover","active","selected","disabled","LinkExample","as","href","LongExampleWithTruncation","maxWidth","SearchWithCount","flexWrap","count","ArtistWithImage","src","PillWithIcon","Icon","iconPosition","Interactive","_useState","_useState2","_slicedToArray","setSelected","onClick","prevActive","ProfileVariant","compact","PillWithPopover","placement","popover","Fragment","_ref","anchorRef","onVisible","ref"],"sources":["../../../../src/elements/Pill/Pill.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport GraphIcon from \"@artsy/icons/GraphIcon\"\nimport ChevronSmallDownIcon from \"@artsy/icons/ChevronSmallDownIcon\"\nimport styled from \"styled-components\"\nimport { Popover } from \"../Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Pill,\n  title: \"Components/Pill\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A pill-shaped button component with various visual variants for different use cases.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Default = {\n  args: {\n    children: \"Default Pill\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic pill component with default styling.\",\n      },\n    },\n  },\n}\n\nexport const Variants = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n      {PILL_VARIANT_NAMES.map((variant) => (\n        <Display\n          key={variant}\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(variant)\n            ? { bg: \"mono100\", color: \"mono0\" }\n            : { bg: \"mono0\", color: \"mono100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer x={2} />}>\n              <Pill variant={variant as PillVariant}>Default</Pill>\n              <Pill variant={variant as PillVariant} focus>\n                Focus\n              </Pill>\n              <Pill variant={variant as PillVariant} hover>\n                Hover\n              </Pill>\n              <Pill variant={variant as PillVariant} active>\n                Active\n              </Pill>\n              <Pill variant={variant as PillVariant} selected>\n                Selected\n              </Pill>\n              <Pill variant={variant as PillVariant} disabled>\n                Disabled\n              </Pill>\n            </Join>\n          </Flex>\n        </Display>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available pill variants with different interaction states.\",\n      },\n    },\n  },\n}\n\nexport const LinkExample = {\n  render: () => (\n    <Pill\n      variant=\"profile\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill rendered as a clickable link element.\",\n      },\n    },\n  },\n}\n\nexport const LongExampleWithTruncation = {\n  render: () => (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill with long text that gets truncated with ellipsis.\",\n      },\n    },\n  },\n}\n\nexport const SearchWithCount = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill variant=\"search\" count={123}>\n        Default\n      </Pill>\n      <Pill variant=\"search\" count={123} focus>\n        Focus\n      </Pill>\n      <Pill variant=\"search\" count={123} hover>\n        Hover\n      </Pill>\n      <Pill variant=\"search\" count={123} active>\n        Active\n      </Pill>\n      <Pill variant=\"search\" count={123} selected>\n        Selected\n      </Pill>\n      <Pill variant=\"search\" count={123} disabled>\n        Disabled\n      </Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Search variant pill with count indicator in different states.\",\n      },\n    },\n  },\n}\n\nexport const ArtistWithImage = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n      >\n        Default\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        focus\n      >\n        Focus\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        hover\n      >\n        Hover\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        selected\n      >\n        Selected\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n        disabled\n      >\n        Disabled\n      </Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Profile variant pill with artist image in different states.\",\n      },\n    },\n  },\n}\n\nexport const PillWithIcon = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={2}>\n      <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n        <Pill variant=\"badge\" Icon={GraphIcon}>\n          Badge with Icon\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} focus>\n          Focus\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} hover>\n          Hover\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} selected>\n          Selected\n        </Pill>\n        <Pill variant=\"badge\" Icon={GraphIcon} disabled>\n          Disabled\n        </Pill>\n      </Box>\n      <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n        <Pill\n          variant=\"default\"\n          Icon={ChevronSmallDownIcon}\n          iconPosition=\"right\"\n        >\n          With Right Icon\n        </Pill>\n        <Pill variant=\"search\" Icon={GraphIcon}>\n          Search with Icon\n        </Pill>\n        <Pill variant=\"filter\" Icon={GraphIcon}>\n          Filter with Icon\n        </Pill>\n        <Pill variant=\"dotted\" Icon={GraphIcon}>\n          Dotted with Icon\n        </Pill>\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pills with various icons and icon positions.\",\n      },\n    },\n  },\n}\n\nexport const Interactive = {\n  render: () => {\n    const [selected, setSelected] = useState(false)\n    return (\n      <Pill\n        selected={selected}\n        onClick={() => setSelected((prevActive) => !prevActive)}\n      >\n        Click to Toggle\n      </Pill>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Interactive pill that toggles selected state when clicked.\",\n      },\n    },\n  },\n}\n\nexport const ProfileVariant = {\n  render: () => (\n    <Box display=\"flex\" gap={2} flexWrap=\"wrap\">\n      <Pill variant=\"profile\" src=\"https://picsum.photos/seed/isa/60/60\">\n        Standard Profile\n      </Pill>\n      <Pill\n        variant=\"profile\"\n        compact\n        src=\"https://picsum.photos/seed/isa/60/60\"\n      >\n        Compact Profile\n      </Pill>\n      <Pill variant=\"profile\">Profile without Image</Pill>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Profile variant pills with different configurations.\",\n      },\n    },\n  },\n}\n\nexport const PillWithPopover = {\n  render: () => (\n    <Popover placement=\"bottom\" popover={<>Popover Content</>}>\n      {({ anchorRef, onVisible }) => (\n        <Pill ref={anchorRef as any} onClick={() => onVisible()}>\n          Click for Popover\n        </Pill>\n      )}\n    </Popover>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Pill that triggers a popover when clicked.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

@@ -5,9 +5,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { themeGet } from "@styled-system/theme-get";
-import { css, Interpolation } from "styled-components";
+import { css } from "styled-components";
 import { Sup } from "../Sup";
-import { PillState, PillVariant } from "./Pill";
 var DEFAULT_STATES = {
   default: css(["border-radius:15px;height:30px;padding:0 ", ";"], themeGet("space.2")),
   focus: css(["background-color:", ";border-color:", ";color:", ";text-decoration:underline;"], themeGet("colors.mono5"), themeGet("colors.mono5"), themeGet("colors.blue100")),

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","Interpolation","Sup","PillState","PillVariant","DEFAULT_STATES","default","focus","hover","active","selected","disabled","PILL_VARIANTS","dotted","_objectSpread","search","filter","badge","profile","gray"],"sources":["../../../../src/elements/Pill/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, Interpolation } from \"styled-components\"\nimport { Sup } from \"../Sup\"\nimport { PillState, PillVariant } from \"./Pill\"\n\nconst DEFAULT_STATES = {\n  default: css`\n    border-radius: 15px;\n    height: 30px;\n    padding: 0 ${themeGet(\"space.2\")};\n  `,\n  focus: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n  `,\n  hover: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n  `,\n  active: css`\n    border-color: ${themeGet(\"colors.blue150\")};\n    background-color: ${themeGet(\"colors.blue150\")};\n    color: ${themeGet(\"colors.mono0\")};\n    text-decoration: underline;\n  `,\n  selected: css`\n    border-color: ${themeGet(\"colors.blue100\")};\n    background-color: ${themeGet(\"colors.blue100\")};\n    color: ${themeGet(\"colors.mono0\")};\n  `,\n  disabled: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n  `,\n}\n\nexport const PILL_VARIANTS: Record<\n  PillVariant,\n  Record<PillState, Interpolation<any>[]>\n> = {\n  dotted: {\n    ...DEFAULT_STATES,\n    default: css`\n      ${DEFAULT_STATES.default}\n      border-style: dashed;\n    `,\n  },\n\n  default: DEFAULT_STATES,\n\n  search: {\n    ...DEFAULT_STATES,\n    default: css`\n      ${DEFAULT_STATES.default}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.blue100\")};\n        transition: color 0.25s ease;\n        display: none;\n      }\n\n      @media (min-width: ${themeGet(\"breakpoints.0\")}) {\n        height: 40px;\n        border-radius: 20px;\n\n        ${Sup} {\n          display: inline;\n        }\n      }\n    `,\n    focus: css`\n      ${DEFAULT_STATES.focus}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n    `,\n    hover: css`\n      ${DEFAULT_STATES.hover}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n\n      ${Sup} {\n        color: ${themeGet(\"colors.blue100\")};\n      }\n    `,\n    active: css`\n      ${DEFAULT_STATES.active}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono0\")};\n      }\n    `,\n    selected: css`\n      ${DEFAULT_STATES.selected}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono0\")};\n      }\n    `,\n    disabled: css`\n      ${DEFAULT_STATES.disabled}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono60\")};\n      }\n    `,\n  },\n\n  filter: {\n    default: css`\n      height: 30px;\n      padding: 0 ${themeGet(\"space.1\")};\n    `,\n    focus: css`\n      text-decoration: underline;\n    `,\n    hover: css`\n      color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      /* Same as default state */\n    `,\n    disabled: css`\n      border-color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n\n  badge: {\n    default: css`\n      border-radius: 15px;\n      height: 30px;\n      padding: 0 15px;\n      background-color: ${themeGet(\"colors.blue10\")};\n      border-color: ${themeGet(\"colors.blue10\")};\n      color: ${themeGet(\"colors.blue100\")};\n    `,\n    hover: css`\n      background-color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    focus: css`\n      background-color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.blue10\")};\n      border-color: ${themeGet(\"colors.blue10\")};\n      color: ${themeGet(\"colors.blue100\")};\n    `,\n  },\n\n  profile: {\n    ...DEFAULT_STATES,\n    default: css`\n      border-radius: 25px;\n      height: 50px;\n      padding: 0 ${themeGet(\"space.2\")} 0 ${themeGet(\"space.2\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n\n  gray: {\n    default: css`\n      border-radius: 15px;\n      height: 30px;\n      padding: 0 15px;\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n    `,\n    hover: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    focus: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","Sup","DEFAULT_STATES","default","focus","hover","active","selected","disabled","PILL_VARIANTS","dotted","_objectSpread","search","filter","badge","profile","gray"],"sources":["../../../../src/elements/Pill/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, Interpolation } from \"styled-components\"\nimport { Sup } from \"../Sup\"\nimport { PillState, PillVariant } from \"./Pill\"\n\nconst DEFAULT_STATES = {\n  default: css`\n    border-radius: 15px;\n    height: 30px;\n    padding: 0 ${themeGet(\"space.2\")};\n  `,\n  focus: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n  `,\n  hover: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n  `,\n  active: css`\n    border-color: ${themeGet(\"colors.blue150\")};\n    background-color: ${themeGet(\"colors.blue150\")};\n    color: ${themeGet(\"colors.mono0\")};\n    text-decoration: underline;\n  `,\n  selected: css`\n    border-color: ${themeGet(\"colors.blue100\")};\n    background-color: ${themeGet(\"colors.blue100\")};\n    color: ${themeGet(\"colors.mono0\")};\n  `,\n  disabled: css`\n    background-color: ${themeGet(\"colors.mono5\")};\n    border-color: ${themeGet(\"colors.mono5\")};\n    color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n  `,\n}\n\nexport const PILL_VARIANTS: Record<\n  PillVariant,\n  Record<PillState, Interpolation<any>[]>\n> = {\n  dotted: {\n    ...DEFAULT_STATES,\n    default: css`\n      ${DEFAULT_STATES.default}\n      border-style: dashed;\n    `,\n  },\n\n  default: DEFAULT_STATES,\n\n  search: {\n    ...DEFAULT_STATES,\n    default: css`\n      ${DEFAULT_STATES.default}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.blue100\")};\n        transition: color 0.25s ease;\n        display: none;\n      }\n\n      @media (min-width: ${themeGet(\"breakpoints.0\")}) {\n        height: 40px;\n        border-radius: 20px;\n\n        ${Sup} {\n          display: inline;\n        }\n      }\n    `,\n    focus: css`\n      ${DEFAULT_STATES.focus}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n    `,\n    hover: css`\n      ${DEFAULT_STATES.hover}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n\n      ${Sup} {\n        color: ${themeGet(\"colors.blue100\")};\n      }\n    `,\n    active: css`\n      ${DEFAULT_STATES.active}\n      text-decoration: none;\n\n      span {\n        text-decoration: underline;\n      }\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono0\")};\n      }\n    `,\n    selected: css`\n      ${DEFAULT_STATES.selected}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono0\")};\n      }\n    `,\n    disabled: css`\n      ${DEFAULT_STATES.disabled}\n\n      ${Sup} {\n        color: ${themeGet(\"colors.mono60\")};\n      }\n    `,\n  },\n\n  filter: {\n    default: css`\n      height: 30px;\n      padding: 0 ${themeGet(\"space.1\")};\n    `,\n    focus: css`\n      text-decoration: underline;\n    `,\n    hover: css`\n      color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      /* Same as default state */\n    `,\n    disabled: css`\n      border-color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n\n  badge: {\n    default: css`\n      border-radius: 15px;\n      height: 30px;\n      padding: 0 15px;\n      background-color: ${themeGet(\"colors.blue10\")};\n      border-color: ${themeGet(\"colors.blue10\")};\n      color: ${themeGet(\"colors.blue100\")};\n    `,\n    hover: css`\n      background-color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    focus: css`\n      background-color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.blue150\")};\n      border-color: ${themeGet(\"colors.blue150\")};\n      color: ${themeGet(\"colors.mono0\")};\n      text-decoration: underline;\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.blue10\")};\n      border-color: ${themeGet(\"colors.blue10\")};\n      color: ${themeGet(\"colors.blue100\")};\n    `,\n  },\n\n  profile: {\n    ...DEFAULT_STATES,\n    default: css`\n      border-radius: 25px;\n      height: 50px;\n      padding: 0 ${themeGet(\"space.2\")} 0 ${themeGet(\"space.2\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n\n  gray: {\n    default: css`\n      border-radius: 15px;\n      height: 30px;\n      padding: 0 15px;\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n    `,\n    hover: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    focus: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    `,\n    active: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono100\")};\n      text-decoration: underline;\n    `,\n    selected: css`\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n    `,\n    disabled: css`\n      background-color: ${themeGet(\"colors.mono5\")};\n      border-color: ${themeGet(\"colors.mono5\")};\n      color: ${themeGet(\"colors.mono60\")};\n    `,\n  },\n}\n"],"mappings":";;;;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAuB,mBAAmB;AACtD,SAASC,GAAG;AAGZ,IAAMC,cAAc,GAAG;EACrBC,OAAO,EAAEH,GAAG,qDAGGD,QAAQ,CAAC,SAAS,CAAC,CACjC;EACDK,KAAK,EAAEJ,GAAG,oFACYD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;EACDM,KAAK,EAAEL,GAAG,oFACYD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;EACDO,MAAM,EAAEN,GAAG,oFACOD,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC,EACrCA,QAAQ,CAAC,cAAc,CAAC,CAElC;EACDQ,QAAQ,EAAEP,GAAG,0DACKD,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC,EACrCA,QAAQ,CAAC,cAAc,CAAC,CAClC;EACDS,QAAQ,EAAER,GAAG,+EACSD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,eAAe,CAAC;AAGtC,CAAC;AAED,OAAO,IAAMU,aAGZ,GAAG;EACFC,MAAM,EAAAC,aAAA,CAAAA,aAAA,KACDT,cAAc;IACjBC,OAAO,EAAEH,GAAG,gCACRE,cAAc,CAACC,OAAO;EAEzB,EACF;EAEDA,OAAO,EAAED,cAAc;EAEvBU,MAAM,EAAAD,aAAA,CAAAA,aAAA,KACDT,cAAc;IACjBC,OAAO,EAAEH,GAAG,mJACRE,cAAc,CAACC,OAAO,EAEtBF,GAAG,EACMF,QAAQ,CAAC,gBAAgB,CAAC,EAKhBA,QAAQ,CAAC,eAAe,CAAC,EAI1CE,GAAG,CAIR;IACDG,KAAK,EAAEJ,GAAG,iEACNE,cAAc,CAACE,KAAK,CAMvB;IACDC,KAAK,EAAEL,GAAG,kFACNE,cAAc,CAACG,KAAK,EAOpBJ,GAAG,EACMF,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;IACDO,MAAM,EAAEN,GAAG,kFACPE,cAAc,CAACI,MAAM,EAOrBL,GAAG,EACMF,QAAQ,CAAC,cAAc,CAAC,CAEpC;IACDQ,QAAQ,EAAEP,GAAG,6BACTE,cAAc,CAACK,QAAQ,EAEvBN,GAAG,EACMF,QAAQ,CAAC,cAAc,CAAC,CAEpC;IACDS,QAAQ,EAAER,GAAG,6BACTE,cAAc,CAACM,QAAQ,EAEvBP,GAAG,EACMF,QAAQ,CAAC,eAAe,CAAC;EAErC,EACF;EAEDc,MAAM,EAAE;IACNV,OAAO,EAAEH,GAAG,kCAEGD,QAAQ,CAAC,SAAS,CAAC,CACjC;IACDK,KAAK,EAAEJ,GAAG,gCAET;IACDK,KAAK,EAAEL,GAAG,8DACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,CAE3C;IACDO,MAAM,EAAEN,GAAG,8DACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,CAE3C;IACDQ,QAAQ,EAAEP,GAAG,MAEZ;IACDQ,QAAQ,EAAER,GAAG,yBACKD,QAAQ,CAAC,eAAe,CAAC;EAE7C,CAAC;EAEDe,KAAK,EAAE;IACLX,OAAO,EAAEH,GAAG,wGAIUD,QAAQ,CAAC,eAAe,CAAC,EAC7BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,gBAAgB,CAAC,CACpC;IACDM,KAAK,EAAEL,GAAG,oFACYD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAElC;IACDK,KAAK,EAAEJ,GAAG,oFACYD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAElC;IACDO,MAAM,EAAEN,GAAG,oFACWD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAElC;IACDQ,QAAQ,EAAEP,GAAG,oFACSD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAElC;IACDS,QAAQ,EAAER,GAAG,0DACSD,QAAQ,CAAC,eAAe,CAAC,EAC7BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,gBAAgB,CAAC;EAEvC,CAAC;EAEDgB,OAAO,EAAAJ,aAAA,CAAAA,aAAA,KACFT,cAAc;IACjBC,OAAO,EAAEH,GAAG,oGAGGD,QAAQ,CAAC,SAAS,CAAC,EAAMA,QAAQ,CAAC,SAAS,CAAC,EACrCA,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,CACzC;IACDO,MAAM,EAAEN,GAAG,oFACWD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;IACDQ,QAAQ,EAAEP,GAAG,4EACKD,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,gBAAgB,CAAC,EACfA,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,CACzC;IACDS,QAAQ,EAAER,GAAG,0DACSD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,eAAe,CAAC;EACnC,EACF;EAEDiB,IAAI,EAAE;IACJb,OAAO,EAAEH,GAAG,wGAIUD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CACpC;IACDM,KAAK,EAAEL,GAAG,oFACYD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;IACDK,KAAK,EAAEJ,GAAG,oFACYD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;IACDO,MAAM,EAAEN,GAAG,oFACWD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,gBAAgB,CAAC,CAEpC;IACDQ,QAAQ,EAAEP,GAAG,4EACKD,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,gBAAgB,CAAC,EACfA,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,CACzC;IACDS,QAAQ,EAAER,GAAG,0DACSD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,eAAe,CAAC;EAEtC;AACF,CAAC"}

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

@@ -11,10 +11,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { FC, useEffect, useMemo, useState, useCallback } from "react";
+import React, { useEffect, useMemo, useState, useCallback } from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
-import { Position } from "../../utils";
 import { useResizeObserver } from "../../utils/useResizeObserver";
 import { Box } from "../Box";
 import { themeGet } from "@styled-system/theme-get";