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

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","css","isText","Box","Flex","Text","Check","CHECK_STATES","CHECKBOX_STATES","Checkbox","_ref","_ref$selected","selected","children","error","disabled","hover","focus","onSelect","onClick","rest","_objectWithoutProperties","_excluded","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","createElement","Container","_extends","display","alignItems","tabIndex","onKeyPress","role","flex","variant","lineHeight","displayName","withConfig","componentId","props","default","resting"],"sources":["../../../../src/elements/Checkbox/Checkbox.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { isText } from \"../../helpers/isText\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Check } from \"./Check\"\nimport { CHECK_STATES, CHECKBOX_STATES } from \"./tokens\"\n\nexport interface CheckboxProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable checkbox interactions */\n  disabled?: boolean\n  /** Select the checkbox on render */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Used to force the checkbox into the visual hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A checkbox */\nexport const Checkbox: React.FC<React.PropsWithChildren<CheckboxProps>> = ({\n  selected = false,\n  children,\n  error,\n  disabled,\n  hover,\n  focus,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick !== undefined) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"checkbox\"\n      aria-checked={selected}\n      selected={selected}\n      hover={hover}\n      focus={focus}\n      disabled={disabled}\n      error={error}\n      {...rest}\n    >\n      <Check\n        selected={selected}\n        error={error}\n        disabled={disabled}\n        focus={focus}\n        hover={hover}\n      />\n\n      <Flex alignItems=\"center\" flex={1}>\n        {isText(children) ? (\n          <Text variant=\"sm-display\" lineHeight={1}>\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n  error?: boolean\n}>`\n  user-select: none;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? CHECKBOX_STATES.selected : CHECKBOX_STATES.default}\n      ${props.focus && CHECKBOX_STATES.focus}\n      ${props.hover && CHECKBOX_STATES.hover}\n      ${props.disabled && CHECKBOX_STATES.disabled}\n      ${props.error && CHECKBOX_STATES.error}\n\n      &:hover {\n        ${!props.error &&\n        css`\n          ${CHECKBOX_STATES.hover}\n\n          // Check\n          > div:first-of-type {\n            ${props.selected\n              ? CHECK_STATES.hover.selected\n              : CHECK_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus-visible {\n        ${CHECKBOX_STATES.focus}\n\n        // Check\n         > div:first-of-type {\n          ${props.selected\n            ? CHECK_STATES.focus.selected\n            : CHECK_STATES.focus.resting}\n        }\n      }\n\n      &:disabled {\n        ${CHECKBOX_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","styled","css","isText","Box","BoxProps","Flex","Text","Check","CHECK_STATES","CHECKBOX_STATES","Checkbox","_ref","_ref$selected","selected","children","error","disabled","hover","focus","onSelect","onClick","rest","_objectWithoutProperties","_excluded","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","createElement","Container","_extends","display","alignItems","tabIndex","onKeyPress","role","flex","variant","lineHeight","displayName","withConfig","componentId","props","default","resting"],"sources":["../../../../src/elements/Checkbox/Checkbox.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { isText } from \"../../helpers/isText\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Check } from \"./Check\"\nimport { CHECK_STATES, CHECKBOX_STATES } from \"./tokens\"\n\nexport interface CheckboxProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable checkbox interactions */\n  disabled?: boolean\n  /** Select the checkbox on render */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Used to force the checkbox into the visual hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A checkbox */\nexport const Checkbox: React.FC<React.PropsWithChildren<CheckboxProps>> = ({\n  selected = false,\n  children,\n  error,\n  disabled,\n  hover,\n  focus,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick !== undefined) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"checkbox\"\n      aria-checked={selected}\n      selected={selected}\n      hover={hover}\n      focus={focus}\n      disabled={disabled}\n      error={error}\n      {...rest}\n    >\n      <Check\n        selected={selected}\n        error={error}\n        disabled={disabled}\n        focus={focus}\n        hover={hover}\n      />\n\n      <Flex alignItems=\"center\" flex={1}>\n        {isText(children) ? (\n          <Text variant=\"sm-display\" lineHeight={1}>\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n  error?: boolean\n}>`\n  user-select: none;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? CHECKBOX_STATES.selected : CHECKBOX_STATES.default}\n      ${props.focus && CHECKBOX_STATES.focus}\n      ${props.hover && CHECKBOX_STATES.hover}\n      ${props.disabled && CHECKBOX_STATES.disabled}\n      ${props.error && CHECKBOX_STATES.error}\n\n      &:hover {\n        ${!props.error &&\n        css`\n          ${CHECKBOX_STATES.hover}\n\n          // Check\n          > div:first-of-type {\n            ${props.selected\n              ? CHECK_STATES.hover.selected\n              : CHECK_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus-visible {\n        ${CHECKBOX_STATES.focus}\n\n        // Check\n         > div:first-of-type {\n          ${props.selected\n            ? CHECK_STATES.focus.selected\n            : CHECK_STATES.focus.resting}\n        }\n      }\n\n      &:disabled {\n        ${CHECKBOX_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"mappings":"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"}

package/dist/esm/elements/CleanTag/CleanTag.js

@@ -23,7 +23,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import React from "react";
+import React, { ComponentClass, FunctionComponent } from "react";
 
 /**
  * The default set of props to remove from components rendered by styled-components

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

@@ -1 +1 @@
-{"version":3,"file":"CleanTag.js","names":["React","omitProps","omit","obj","arguments","length","undefined","keys","next","key","indexOf","tagName","tag","displayName","tagBuilder","TagComponent","forwardRef","_ref","_ref$is","is","BaseTag","_ref$omitFromProps","omitFromProps","props","_objectWithoutProperties","_excluded","ref","createElement","_objectSpread","concat","_toConsumableArray","DefaultTag","CleanTag","as"],"sources":["../../../../src/elements/CleanTag/CleanTag.tsx"],"sourcesContent":["/**\n * Derived from @jxnblk's clean-tag\n * https://github.com/styled-system/extras/tree/master/packages/clean-tag\n *\n * The MIT License (MIT)\n * Copyright (c) 2017-2019 Brent Jackson\n * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\nimport React, { ComponentClass, FunctionComponent } from \"react\"\n\n/**\n * The default set of props to remove from components rendered by styled-components\n */\nexport const omitProps = [\n  \"backgroundColor\",\n  \"bg\",\n  \"borderRadius\",\n  \"color\",\n  \"display\",\n  \"fontFamily\",\n  \"fontSize\",\n  \"fontStyle\",\n  \"fontWeight\",\n  \"height\",\n  \"letterSpacing\",\n  \"lineHeight\",\n  \"m\",\n  \"maxHeight\",\n  \"maxWidth\",\n  \"mb\",\n  \"minHeight\",\n  \"minWidth\",\n  \"ml\",\n  \"mr\",\n  \"mt\",\n  \"mx\",\n  \"my\",\n  \"p\",\n  \"pb\",\n  \"pl\",\n  \"pr\",\n  \"pt\",\n  \"px\",\n  \"py\",\n  \"textAlign\",\n  \"theme\",\n  \"width\",\n]\n\n/**\n * Removes entries from an object based on a list of keys\n */\nexport const omit = (obj: object = {}, keys: string[]) => {\n  const next = {}\n  for (const key in obj) {\n    if (keys.indexOf(key) > -1) continue\n    next[key] = obj[key]\n  }\n  return next\n}\n\ntype ComponentSpecifier = string | FunctionComponent<React.PropsWithChildren<any>> | ComponentClass<any>\n\nexport interface TagProps {\n  omitFromProps?: string[]\n  is?: ComponentSpecifier\n}\n\nconst tagName = tag =>\n  typeof tag === \"string\" ? tag : tag.displayName || \"Tag\"\n\nfunction tagBuilder(tag: ComponentSpecifier = \"div\") {\n  const TagComponent = React.forwardRef<any, TagProps>(\n    ({ is: BaseTag = tag, omitFromProps = [], ...props } = {}, ref) =>\n      props\n        ? React.createElement(BaseTag, {\n            ref,\n            ...omit(props, [...omitFromProps, ...omitProps]),\n          })\n        : React.createElement(BaseTag, { ref })\n  )\n  TagComponent.displayName = `Clean.${tagName(tag)}`\n  return TagComponent\n}\n\nconst DefaultTag = tagBuilder()\n\n/**\n * An element to be used to prevent unwanted props from passing through\n * styled-components to the DOM\n *\n * @example\n *\n * const Component = styled(Tag)`\n *   ${borderRadius};\n * `\n *\n * const Component2 = styled(Tag.as('span'))`\n *  ${background};\n * `\n */\nexport const CleanTag: typeof DefaultTag & {\n  as?: typeof tagBuilder\n} = DefaultTag\n\nCleanTag.as = tagBuilder\n"],"mappings":"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"}
+{"version":3,"file":"CleanTag.js","names":["React","ComponentClass","FunctionComponent","omitProps","omit","obj","arguments","length","undefined","keys","next","key","indexOf","tagName","tag","displayName","tagBuilder","TagComponent","forwardRef","_ref","_ref$is","is","BaseTag","_ref$omitFromProps","omitFromProps","props","_objectWithoutProperties","_excluded","ref","createElement","_objectSpread","concat","_toConsumableArray","DefaultTag","CleanTag","as"],"sources":["../../../../src/elements/CleanTag/CleanTag.tsx"],"sourcesContent":["/**\n * Derived from @jxnblk's clean-tag\n * https://github.com/styled-system/extras/tree/master/packages/clean-tag\n *\n * The MIT License (MIT)\n * Copyright (c) 2017-2019 Brent Jackson\n * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\nimport React, { ComponentClass, FunctionComponent } from \"react\"\n\n/**\n * The default set of props to remove from components rendered by styled-components\n */\nexport const omitProps = [\n  \"backgroundColor\",\n  \"bg\",\n  \"borderRadius\",\n  \"color\",\n  \"display\",\n  \"fontFamily\",\n  \"fontSize\",\n  \"fontStyle\",\n  \"fontWeight\",\n  \"height\",\n  \"letterSpacing\",\n  \"lineHeight\",\n  \"m\",\n  \"maxHeight\",\n  \"maxWidth\",\n  \"mb\",\n  \"minHeight\",\n  \"minWidth\",\n  \"ml\",\n  \"mr\",\n  \"mt\",\n  \"mx\",\n  \"my\",\n  \"p\",\n  \"pb\",\n  \"pl\",\n  \"pr\",\n  \"pt\",\n  \"px\",\n  \"py\",\n  \"textAlign\",\n  \"theme\",\n  \"width\",\n]\n\n/**\n * Removes entries from an object based on a list of keys\n */\nexport const omit = (obj: object = {}, keys: string[]) => {\n  const next = {}\n  for (const key in obj) {\n    if (keys.indexOf(key) > -1) continue\n    next[key] = obj[key]\n  }\n  return next\n}\n\ntype ComponentSpecifier = string | FunctionComponent<React.PropsWithChildren<any>> | ComponentClass<any>\n\nexport interface TagProps {\n  omitFromProps?: string[]\n  is?: ComponentSpecifier\n}\n\nconst tagName = tag =>\n  typeof tag === \"string\" ? tag : tag.displayName || \"Tag\"\n\nfunction tagBuilder(tag: ComponentSpecifier = \"div\") {\n  const TagComponent = React.forwardRef<any, TagProps>(\n    ({ is: BaseTag = tag, omitFromProps = [], ...props } = {}, ref) =>\n      props\n        ? React.createElement(BaseTag, {\n            ref,\n            ...omit(props, [...omitFromProps, ...omitProps]),\n          })\n        : React.createElement(BaseTag, { ref })\n  )\n  TagComponent.displayName = `Clean.${tagName(tag)}`\n  return TagComponent\n}\n\nconst DefaultTag = tagBuilder()\n\n/**\n * An element to be used to prevent unwanted props from passing through\n * styled-components to the DOM\n *\n * @example\n *\n * const Component = styled(Tag)`\n *   ${borderRadius};\n * `\n *\n * const Component2 = styled(Tag.as('span'))`\n *  ${background};\n * `\n */\nexport const CleanTag: typeof DefaultTag & {\n  as?: typeof tagBuilder\n} = DefaultTag\n\nCleanTag.as = tagBuilder\n"],"mappings":"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"}

package/dist/esm/elements/Clickable/Clickable.js

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
-import { compose, system } from "styled-system";
+import { compose, ResponsiveValue, system } from "styled-system";
 import { splitProps } from "../../utils/splitProps";
-import { boxMixin } from "../Box";
+import { boxMixin, BoxProps } from "../Box";
 var cursor = system({
   cursor: true
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Clickable.js","names":["styled","compose","system","splitProps","boxMixin","cursor","textDecoration","clickableMixin","Clickable","button","withConfig","displayName","componentId","defaultProps","type","splitClickableProps"],"sources":["../../../../src/elements/Clickable/Clickable.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  BoxProps & {\n    cursor?: ResponsiveValue<string>\n    textDecoration?: ResponsiveValue<string>\n  }\n\nconst clickableMixin = compose(boxMixin, cursor, textDecoration)\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n\n  ${clickableMixin}\n\n  &:disabled {\n    cursor: default;\n  }\n`\n\nClickable.defaultProps = {\n  cursor: \"pointer\",\n  type: \"button\",\n}\n\nexport const splitClickableProps = splitProps<ClickableProps>(clickableMixin)\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAmBC,MAAM,QAAQ,eAAe;AAChE,SAASC,UAAU;AACnB,SAASC,QAAQ;AAEjB,IAAMC,MAAM,GAAGH,MAAM,CAAC;EAAEG,MAAM,EAAE;AAAK,CAAC,CAAC;AACvC,IAAMC,cAAc,GAAGJ,MAAM,CAAC;EAAEI,cAAc,EAAE;AAAK,CAAC,CAAC;;AAEvD;;AAOA,IAAMC,cAAc,GAAGN,OAAO,CAACG,QAAQ,EAAEC,MAAM,EAAEC,cAAc,CAAC;;AAEhE;AACA;AACA;AACA;AACA,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gKAUlCL,cAAc,CAKjB;AAEDC,SAAS,CAACK,YAAY,GAAG;EACvBR,MAAM,EAAE,SAAS;EACjBS,IAAI,EAAE;AACR,CAAC;AAED,OAAO,IAAMC,mBAAmB,GAAGZ,UAAU,CAAiBI,cAAc,CAAC"}
+{"version":3,"file":"Clickable.js","names":["React","styled","compose","ResponsiveValue","system","splitProps","boxMixin","BoxProps","cursor","textDecoration","clickableMixin","Clickable","button","withConfig","displayName","componentId","defaultProps","type","splitClickableProps"],"sources":["../../../../src/elements/Clickable/Clickable.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  BoxProps & {\n    cursor?: ResponsiveValue<string>\n    textDecoration?: ResponsiveValue<string>\n  }\n\nconst clickableMixin = compose(boxMixin, cursor, textDecoration)\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n\n  ${clickableMixin}\n\n  &:disabled {\n    cursor: default;\n  }\n`\n\nClickable.defaultProps = {\n  cursor: \"pointer\",\n  type: \"button\",\n}\n\nexport const splitClickableProps = splitProps<ClickableProps>(clickableMixin)\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAEC,eAAe,EAAEC,MAAM,QAAQ,eAAe;AAChE,SAASC,UAAU;AACnB,SAASC,QAAQ,EAAEC,QAAQ;AAE3B,IAAMC,MAAM,GAAGJ,MAAM,CAAC;EAAEI,MAAM,EAAE;AAAK,CAAC,CAAC;AACvC,IAAMC,cAAc,GAAGL,MAAM,CAAC;EAAEK,cAAc,EAAE;AAAK,CAAC,CAAC;;AAEvD;;AAOA,IAAMC,cAAc,GAAGR,OAAO,CAACI,QAAQ,EAAEE,MAAM,EAAEC,cAAc,CAAC;;AAEhE;AACA;AACA;AACA;AACA,OAAO,IAAME,SAAS,GAAGV,MAAM,CAACW,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gKAUlCL,cAAc,CAKjB;AAEDC,SAAS,CAACK,YAAY,GAAG;EACvBR,MAAM,EAAE,SAAS;EACjBS,IAAI,EAAE;AACR,CAAC;AAED,OAAO,IAAMC,mBAAmB,GAAGb,UAAU,CAAiBK,cAAc,CAAC"}

package/dist/esm/elements/Drawer/Drawer.js

@@ -1,5 +1,5 @@
 import { themeGet } from "@styled-system/theme-get";
-import React from "react";
+import React, { FC } from "react";
 import { FocusOn } from "react-focus-on";
 import styled, { css } from "styled-components";
 import { zIndex } from "styled-system";

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["themeGet","React","FocusOn","styled","css","zIndex","usePortal","Box","Flex","Drawer","_ref","children","_ref$anchor","anchor","_ref$zIndex","DEFAULT_DRAWER_Z_INDEX","open","onClose","_usePortal","createPortal","createElement","Container","style","pointerEvents","transform","Focus","onClickOutside","enabled","onEscapeKey","Content","backgroundColor","height","width","overflowX","overflowY","transition","concat","Overlay","display","onClick","opacity","withConfig","displayName","componentId","props"],"sources":["../../../../src/elements/Drawer/Drawer.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { FC } from \"react\"\nimport { FocusOn } from \"react-focus-on\"\nimport styled, { css } from \"styled-components\"\nimport { zIndex } from \"styled-system\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport interface DrawerProps {\n  open: boolean\n  anchor?: \"left\" | \"right\"\n  zIndex?: number\n  onClose?(): void\n}\n\nexport const Drawer: FC<React.PropsWithChildren<DrawerProps>> = ({\n  children,\n  anchor = \"right\",\n  zIndex = DEFAULT_DRAWER_Z_INDEX,\n  open,\n  onClose,\n}) => {\n  const { createPortal } = usePortal()\n\n  return createPortal(\n    <Container\n      zIndex={zIndex}\n      anchor={anchor}\n      style={{\n        pointerEvents: open ? \"auto\" : \"none\",\n        transform: open ? \"translateX(0)\" : \"none\",\n      }}\n    >\n      <Focus onClickOutside={onClose} enabled={open} onEscapeKey={onClose}>\n        <Content\n          backgroundColor=\"mono0\"\n          height=\"100%\"\n          width={[\"100%\", \"auto\"]}\n          overflowX=\"hidden\"\n          overflowY=\"scroll\"\n          anchor={anchor}\n          zIndex={zIndex}\n          transition={\n            open\n              ? \"transform .6s cubic-bezier(0.190, 1.000, 0.220, 1.000)\" // easeOutExpo\n              : \"transform 1s cubic-bezier(0.075, 0.820, 0.165, 1.000)\" // easeOutCirc\n          }\n          style={{\n            transform: open\n              ? \"none\"\n              : `translateX(${anchor === \"left\" ? \"-110%\" : \"110%\"})`,\n          }}\n        >\n          {children}\n        </Content>\n      </Focus>\n\n      <Overlay\n        display={[\"none\", \"flex\"]}\n        onClick={onClose}\n        data-testid=\"drawer-overlay\"\n        width=\"inherit\"\n        style={{\n          opacity: open ? 1 : 0,\n        }}\n      />\n    </Container>\n  )\n}\n\nconst DEFAULT_DRAWER_Z_INDEX = 1\n\nconst Content = styled(Box)<\n  Pick<DrawerProps, \"anchor\"> & { transition: string }\n>`\n  position: absolute;\n  top: 0;\n  -webkit-overflow-scrolling: touch;\n\n  ${(props) => css`\n    transition: ${props.transition};\n  `}\n\n  ${(props) => css`\n    ${props.anchor === \"left\" ? \"left: 0;\" : \"right: 0;\"}\n  `};\n`\n\nconst Overlay = styled(Box)`\n  height: 100%;\n  background: ${themeGet(\"effects.backdrop\")};\n  transition: opacity 150ms linear 50ms;\n`\n\nconst Container = styled(Flex)<Pick<DrawerProps, \"anchor\">>`\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  ${zIndex}\n  position: fixed;\n\n  ${(props) => {\n    return css`\n      flex-direction: ${props.anchor === \"left\" ? \"row\" : \"row-reverse\"};\n    `\n  }}\n`\n\nconst Focus = styled(FocusOn)`\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n`\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":["themeGet","React","FC","FocusOn","styled","css","zIndex","usePortal","Box","Flex","Drawer","_ref","children","_ref$anchor","anchor","_ref$zIndex","DEFAULT_DRAWER_Z_INDEX","open","onClose","_usePortal","createPortal","createElement","Container","style","pointerEvents","transform","Focus","onClickOutside","enabled","onEscapeKey","Content","backgroundColor","height","width","overflowX","overflowY","transition","concat","Overlay","display","onClick","opacity","withConfig","displayName","componentId","props"],"sources":["../../../../src/elements/Drawer/Drawer.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { FC } from \"react\"\nimport { FocusOn } from \"react-focus-on\"\nimport styled, { css } from \"styled-components\"\nimport { zIndex } from \"styled-system\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport interface DrawerProps {\n  open: boolean\n  anchor?: \"left\" | \"right\"\n  zIndex?: number\n  onClose?(): void\n}\n\nexport const Drawer: FC<React.PropsWithChildren<DrawerProps>> = ({\n  children,\n  anchor = \"right\",\n  zIndex = DEFAULT_DRAWER_Z_INDEX,\n  open,\n  onClose,\n}) => {\n  const { createPortal } = usePortal()\n\n  return createPortal(\n    <Container\n      zIndex={zIndex}\n      anchor={anchor}\n      style={{\n        pointerEvents: open ? \"auto\" : \"none\",\n        transform: open ? \"translateX(0)\" : \"none\",\n      }}\n    >\n      <Focus onClickOutside={onClose} enabled={open} onEscapeKey={onClose}>\n        <Content\n          backgroundColor=\"mono0\"\n          height=\"100%\"\n          width={[\"100%\", \"auto\"]}\n          overflowX=\"hidden\"\n          overflowY=\"scroll\"\n          anchor={anchor}\n          zIndex={zIndex}\n          transition={\n            open\n              ? \"transform .6s cubic-bezier(0.190, 1.000, 0.220, 1.000)\" // easeOutExpo\n              : \"transform 1s cubic-bezier(0.075, 0.820, 0.165, 1.000)\" // easeOutCirc\n          }\n          style={{\n            transform: open\n              ? \"none\"\n              : `translateX(${anchor === \"left\" ? \"-110%\" : \"110%\"})`,\n          }}\n        >\n          {children}\n        </Content>\n      </Focus>\n\n      <Overlay\n        display={[\"none\", \"flex\"]}\n        onClick={onClose}\n        data-testid=\"drawer-overlay\"\n        width=\"inherit\"\n        style={{\n          opacity: open ? 1 : 0,\n        }}\n      />\n    </Container>\n  )\n}\n\nconst DEFAULT_DRAWER_Z_INDEX = 1\n\nconst Content = styled(Box)<\n  Pick<DrawerProps, \"anchor\"> & { transition: string }\n>`\n  position: absolute;\n  top: 0;\n  -webkit-overflow-scrolling: touch;\n\n  ${(props) => css`\n    transition: ${props.transition};\n  `}\n\n  ${(props) => css`\n    ${props.anchor === \"left\" ? \"left: 0;\" : \"right: 0;\"}\n  `};\n`\n\nconst Overlay = styled(Box)`\n  height: 100%;\n  background: ${themeGet(\"effects.backdrop\")};\n  transition: opacity 150ms linear 50ms;\n`\n\nconst Container = styled(Flex)<Pick<DrawerProps, \"anchor\">>`\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  ${zIndex}\n  position: fixed;\n\n  ${(props) => {\n    return css`\n      flex-direction: ${props.anchor === \"left\" ? \"row\" : \"row-reverse\"};\n    `\n  }}\n`\n\nconst Focus = styled(FocusOn)`\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n`\n"],"mappings":"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"}

package/dist/esm/elements/Dropdown/Dropdown.js

@@ -16,9 +16,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
-import { calculateMaxHeight, usePosition } from "../../utils";
+import { calculateMaxHeight, Position, usePosition } from "../../utils";
 import { usePortal } from "../../utils/usePortal";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { FocusOn } from "react-focus-on";
 import { themeGet } from "@styled-system/theme-get";
 import { debounce } from "es-toolkit";

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","styled","calculateMaxHeight","usePosition","usePortal","Box","FocusOn","themeGet","debounce","Dropdown","_ref","_ref$placement","placement","_ref$visible","visible","_visible","keepInDOM","children","_ref$offset","offset","dropdown","_ref$dropdownZIndex","dropdownZIndex","openDropdownByClick","_ref$transition","transition","_transition","_ref$flip","flip","_ref$returnFocus","returnFocus","_ref$delay","delay","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setVisible","timeoutRef","setVisibility","_ref2","_ref2$isPointer","isPointer","defaultDelay","finalDelay","current","clearTimeout","setTimeout","activeRef","pointerRef","onVisible","onHide","onToggleVisibility","_usePosition","position","active","padding","anchorRef","panelRef","tooltipRef","isFlipped","state","handleKeyDown","event","key","handleKeyUp","document","activeElement","contains","handleClick","target","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","_useState3","_useState4","setTransition","requestAnimationFrame","translation","_defineProperty","handlePointerVisible","handlePointerHide","anchorProps","_objectSpread","onClick","onMouseEnter","onMouseLeave","_usePortal","createPortal","focusEnabled","_useState5","_useState6","maxHeight","setMaxHeight","calculate","nextMaxHeight","anchorRect","getBoundingClientRect","window","passive","createElement","Fragment","Container","_extends","tabIndex","ref","zIndex","display","style","visibility","Panel","opacity","transform","noIsolation","enabled","onClickOutside","Pane","withConfig","displayName","componentId","_ref7","_ref8","concat"],"sources":["../../../../src/elements/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { calculateMaxHeight, Position, usePosition } from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box, BoxProps } from \"../Box\"\nimport { FocusOn } from \"react-focus-on\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { debounce } from \"es-toolkit\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\ntype Children =\n  | React.ReactNode\n  | ((dropdownActions: DropdownActions) => React.ReactNode)\n\nexport interface DropdownProps extends Omit<BoxProps, \"children\"> {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  /** Whether or not we should animate the dropdown transition */\n  transition?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Custom zIndex to assign to the dropdown panel */\n  dropdownZIndex?: number\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: Children\n  /** Optionally disable flipping (default: `true`) */\n  flip?: boolean\n  /** Whether to return focus to the previous element when the dropdown closes (default: `true`) */\n  returnFocus?: boolean\n  /** Delay in milliseconds before showing the dropdown on hover (ignored when openDropdownByClick is true) */\n  delay?: number\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown = ({\n  placement = \"bottom\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  dropdownZIndex = 1,\n  openDropdownByClick,\n  transition: _transition = true,\n  flip = true,\n  returnFocus = true,\n  delay = 0,\n  ...rest\n}: DropdownProps) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  // We need to keep the pointer state in sync with the visibility state, else we\n  // wind up with focus isolation out of sync.\n  const setVisibility = useCallback(\n    ({\n      visible,\n      isPointer = false,\n    }: {\n      visible: boolean\n      isPointer?: boolean\n    }) => {\n      // Use custom delay when opening via pointer interaction (hover), but only if not using click mode\n      const defaultDelay = _transition ? (visible ? 50 : 150) : visible ? 1 : 50\n      const finalDelay =\n        visible && isPointer && !openDropdownByClick ? delay : defaultDelay\n\n      timeoutRef.current && clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => {\n        if (!visible && activeRef.current) return\n        pointerRef.current = isPointer\n        setVisible(visible)\n      }, finalDelay)\n    },\n    [_transition, delay, openDropdownByClick]\n  )\n\n  const onVisible = () => {\n    setVisibility({ visible: true })\n  }\n\n  const onHide = useCallback(() => {\n    setVisibility({ visible: false })\n  }, [setVisibility])\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n    flip,\n    padding: offset,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick, onHide])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      setTransition(visible)\n    })\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const pointerRef = useRef(false)\n\n  const handlePointerVisible = () => {\n    setVisibility({ visible: true, isPointer: true })\n  }\n\n  const handlePointerHide = () => {\n    setVisibility({ visible: false, isPointer: false })\n  }\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: handlePointerVisible,\n          onMouseLeave: handlePointerHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n\n  const isPointer = !openDropdownByClick && pointerRef.current\n  const focusEnabled = visible && !isPointer\n\n  const [maxHeight, setMaxHeight] = useState(0)\n\n  useEffect(() => {\n    const calculate = debounce(() => {\n      if (!anchorRef.current) return\n\n      const nextMaxHeight = calculateMaxHeight({\n        anchorRect: anchorRef.current.getBoundingClientRect(),\n        position: placement,\n        offset,\n      })\n\n      setMaxHeight(nextMaxHeight)\n    }, 500)\n\n    window.addEventListener(\"resize\", calculate, { passive: true })\n    window.addEventListener(\"scroll\", calculate, { passive: true })\n    calculate()\n\n    return () => {\n      window.removeEventListener(\"resize\", calculate)\n      window.removeEventListener(\"scroll\", calculate)\n    }\n  }, [anchorRef, offset, placement, visible])\n\n  return (\n    <>\n      {(children as any)?.({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {(visible || keepInDOM) &&\n        createPortal(\n          <Container\n            aria-label=\"Press escape to close\"\n            tabIndex={0}\n            ref={panelRef as any}\n            zIndex={dropdownZIndex}\n            display=\"inline-block\"\n            placement={placement}\n            style={{\n              ...(keepInDOM\n                ? { visibility: visible ? \"visible\" : \"hidden\" }\n                : {}),\n            }}\n            {...(openDropdownByClick\n              ? {}\n              : {\n                  onMouseEnter: handleMouseEnter,\n                  onMouseLeave: handleMouseLeave,\n                })}\n            maxHeight={maxHeight + offset}\n            {...padding}\n            {...rest}\n          >\n            <Panel\n              transition={_transition}\n              maxHeight={maxHeight}\n              style={\n                transition\n                  ? // In\n                    { opacity: 1, transform: \"translate(0)\" }\n                  : // Out\n                    {\n                      opacity: 0,\n                      transform: translation,\n                    }\n              }\n            >\n              <FocusOn\n                noIsolation\n                enabled={focusEnabled}\n                onClickOutside={onHide}\n                returnFocus={returnFocus}\n              >\n                <Pane maxHeight={maxHeight}>\n                  {typeof dropdown === \"function\"\n                    ? (dropdown as any)({\n                        onVisible,\n                        onHide,\n                        setVisible,\n                        visible,\n                      })\n                    : dropdown}\n                </Pane>\n              </FocusOn>\n            </Panel>\n          </Container>\n        )}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)<{ transition: boolean; maxHeight: number }>`\n  transition: ${({ transition }) =>\n    transition ? \"opacity 250ms ease-out, transform 250ms ease-out\" : \"none\"};\n`\n\nconst Pane = styled(Box)`\n  > div {\n    max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : \"100vh\")};\n    box-shadow: ${themeGet(\"effects.flatShadow\")};\n    background-color: ${themeGet(\"colors.mono0\")};\n    border: 1px solid ${themeGet(\"colors.mono10\")};\n    overflow-y: auto;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","styled","calculateMaxHeight","Position","usePosition","usePortal","Box","BoxProps","FocusOn","themeGet","debounce","Dropdown","_ref","_ref$placement","placement","_ref$visible","visible","_visible","keepInDOM","children","_ref$offset","offset","dropdown","_ref$dropdownZIndex","dropdownZIndex","openDropdownByClick","_ref$transition","transition","_transition","_ref$flip","flip","_ref$returnFocus","returnFocus","_ref$delay","delay","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setVisible","timeoutRef","setVisibility","_ref2","_ref2$isPointer","isPointer","defaultDelay","finalDelay","current","clearTimeout","setTimeout","activeRef","pointerRef","onVisible","onHide","onToggleVisibility","_usePosition","position","active","padding","anchorRef","panelRef","tooltipRef","isFlipped","state","handleKeyDown","event","key","handleKeyUp","document","activeElement","contains","handleClick","target","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","_useState3","_useState4","setTransition","requestAnimationFrame","translation","_defineProperty","handlePointerVisible","handlePointerHide","anchorProps","_objectSpread","onClick","onMouseEnter","onMouseLeave","_usePortal","createPortal","focusEnabled","_useState5","_useState6","maxHeight","setMaxHeight","calculate","nextMaxHeight","anchorRect","getBoundingClientRect","window","passive","createElement","Fragment","Container","_extends","tabIndex","ref","zIndex","display","style","visibility","Panel","opacity","transform","noIsolation","enabled","onClickOutside","Pane","withConfig","displayName","componentId","_ref7","_ref8","concat"],"sources":["../../../../src/elements/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { calculateMaxHeight, Position, usePosition } from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box, BoxProps } from \"../Box\"\nimport { FocusOn } from \"react-focus-on\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { debounce } from \"es-toolkit\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\ntype Children =\n  | React.ReactNode\n  | ((dropdownActions: DropdownActions) => React.ReactNode)\n\nexport interface DropdownProps extends Omit<BoxProps, \"children\"> {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  /** Whether or not we should animate the dropdown transition */\n  transition?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Custom zIndex to assign to the dropdown panel */\n  dropdownZIndex?: number\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: Children\n  /** Optionally disable flipping (default: `true`) */\n  flip?: boolean\n  /** Whether to return focus to the previous element when the dropdown closes (default: `true`) */\n  returnFocus?: boolean\n  /** Delay in milliseconds before showing the dropdown on hover (ignored when openDropdownByClick is true) */\n  delay?: number\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown = ({\n  placement = \"bottom\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  dropdownZIndex = 1,\n  openDropdownByClick,\n  transition: _transition = true,\n  flip = true,\n  returnFocus = true,\n  delay = 0,\n  ...rest\n}: DropdownProps) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  // We need to keep the pointer state in sync with the visibility state, else we\n  // wind up with focus isolation out of sync.\n  const setVisibility = useCallback(\n    ({\n      visible,\n      isPointer = false,\n    }: {\n      visible: boolean\n      isPointer?: boolean\n    }) => {\n      // Use custom delay when opening via pointer interaction (hover), but only if not using click mode\n      const defaultDelay = _transition ? (visible ? 50 : 150) : visible ? 1 : 50\n      const finalDelay =\n        visible && isPointer && !openDropdownByClick ? delay : defaultDelay\n\n      timeoutRef.current && clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => {\n        if (!visible && activeRef.current) return\n        pointerRef.current = isPointer\n        setVisible(visible)\n      }, finalDelay)\n    },\n    [_transition, delay, openDropdownByClick]\n  )\n\n  const onVisible = () => {\n    setVisibility({ visible: true })\n  }\n\n  const onHide = useCallback(() => {\n    setVisibility({ visible: false })\n  }, [setVisibility])\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n    flip,\n    padding: offset,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick, onHide])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      setTransition(visible)\n    })\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const pointerRef = useRef(false)\n\n  const handlePointerVisible = () => {\n    setVisibility({ visible: true, isPointer: true })\n  }\n\n  const handlePointerHide = () => {\n    setVisibility({ visible: false, isPointer: false })\n  }\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: handlePointerVisible,\n          onMouseLeave: handlePointerHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n\n  const isPointer = !openDropdownByClick && pointerRef.current\n  const focusEnabled = visible && !isPointer\n\n  const [maxHeight, setMaxHeight] = useState(0)\n\n  useEffect(() => {\n    const calculate = debounce(() => {\n      if (!anchorRef.current) return\n\n      const nextMaxHeight = calculateMaxHeight({\n        anchorRect: anchorRef.current.getBoundingClientRect(),\n        position: placement,\n        offset,\n      })\n\n      setMaxHeight(nextMaxHeight)\n    }, 500)\n\n    window.addEventListener(\"resize\", calculate, { passive: true })\n    window.addEventListener(\"scroll\", calculate, { passive: true })\n    calculate()\n\n    return () => {\n      window.removeEventListener(\"resize\", calculate)\n      window.removeEventListener(\"scroll\", calculate)\n    }\n  }, [anchorRef, offset, placement, visible])\n\n  return (\n    <>\n      {(children as any)?.({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {(visible || keepInDOM) &&\n        createPortal(\n          <Container\n            aria-label=\"Press escape to close\"\n            tabIndex={0}\n            ref={panelRef as any}\n            zIndex={dropdownZIndex}\n            display=\"inline-block\"\n            placement={placement}\n            style={{\n              ...(keepInDOM\n                ? { visibility: visible ? \"visible\" : \"hidden\" }\n                : {}),\n            }}\n            {...(openDropdownByClick\n              ? {}\n              : {\n                  onMouseEnter: handleMouseEnter,\n                  onMouseLeave: handleMouseLeave,\n                })}\n            maxHeight={maxHeight + offset}\n            {...padding}\n            {...rest}\n          >\n            <Panel\n              transition={_transition}\n              maxHeight={maxHeight}\n              style={\n                transition\n                  ? // In\n                    { opacity: 1, transform: \"translate(0)\" }\n                  : // Out\n                    {\n                      opacity: 0,\n                      transform: translation,\n                    }\n              }\n            >\n              <FocusOn\n                noIsolation\n                enabled={focusEnabled}\n                onClickOutside={onHide}\n                returnFocus={returnFocus}\n              >\n                <Pane maxHeight={maxHeight}>\n                  {typeof dropdown === \"function\"\n                    ? (dropdown as any)({\n                        onVisible,\n                        onHide,\n                        setVisible,\n                        visible,\n                      })\n                    : dropdown}\n                </Pane>\n              </FocusOn>\n            </Panel>\n          </Container>\n        )}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)<{ transition: boolean; maxHeight: number }>`\n  transition: ${({ transition }) =>\n    transition ? \"opacity 250ms ease-out, transform 250ms ease-out\" : \"none\"};\n`\n\nconst Pane = styled(Box)`\n  > div {\n    max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : \"100vh\")};\n    box-shadow: ${themeGet(\"effects.flatShadow\")};\n    background-color: ${themeGet(\"colors.mono0\")};\n    border: 1px solid ${themeGet(\"colors.mono10\")};\n    overflow-y: auto;\n  }\n`\n"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useEffect, useState } from "react";
+import { Position } from "../../utils";
 import { Box } from "../Box";
 import { Button } from "../Button";
 import { Text } from "../Text";

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.story.js","names":["React","useEffect","useState","Box","Button","Text","Dropdown","Clickable","Flex","Pill","ChevronSmallDownIcon","Spacer","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","placement","dropdown","createElement","width","p","as","display","variant","href","children","_ref","anchorRef","anchorProps","textAlign","_extends","ref","size","chromatic","disable","KeepInDOM","keepInDOM","_ref2","ChangeDimensions","render","_useState","_useState2","_slicedToArray","height","setHeight","setInterval","Math","floor","random","_ref3","FocusOrder","py","px","_ref4","mr","_ref5","OpenDropdownByClick","openDropdownByClick","_ref6","FilterExample","_ref7","Icon","iconPosition","OverflowingContent","Array","fill","map","_","i","key","_useState3","_useState4","setPlacement","Fragment","bg","y","mb","selected","onClick","alignItems","justifyContent","_ref8","DisabledTransition","num","concat","transition","_ref9","ReturnFocusDefault","color","tabIndex","_ref10","story","ReturnFocusDisabled","returnFocus","alert","_ref11","CustomDelay","gap","delay","_ref12","_ref13","_ref14"],"sources":["../../../../src/elements/Dropdown/Dropdown.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Position } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { Dropdown } from \"./Dropdown\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Pill } from \"../Pill\"\nimport ChevronSmallDownIcon from \"@artsy/icons/ChevronSmallDownIcon\"\nimport { Spacer } from \"../Spacer\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Dropdown,\n  title: \"Components/Dropdown\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A dropdown component that renders content in a positioned overlay with various placement options and interaction modes.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    placement: \"bottom\",\n    dropdown: (\n      <Box width={300} p={2}>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          One\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          Two\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          Three\n        </Text>\n      </Box>\n    ),\n    children: ({ anchorRef, anchorProps }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          {...anchorProps}\n        >\n          Hover to display dropdown\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const KeepInDOM = {\n  args: {\n    placement: \"bottom\",\n    keepInDOM: true,\n    dropdown: (\n      <Text p={2} variant=\"xs\">\n        Content remains in DOM\n      </Text>\n    ),\n    children: ({ anchorRef, anchorProps }) => (\n      <Button\n        ref={anchorRef}\n        variant=\"secondaryBlack\"\n        size=\"small\"\n        {...anchorProps}\n      >\n        Hover to display dropdown\n      </Button>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const ChangeDimensions = {\n  render: () => {\n    const [height, setHeight] = useState(10)\n\n    useEffect(() => {\n      setInterval(() => {\n        setHeight(Math.floor(Math.random() * 100))\n      }, 1000)\n    }, [])\n\n    return (\n      <Dropdown\n        placement=\"bottom\"\n        dropdown={<Box height={height} width={300} />}\n      >\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              {...anchorProps}\n            >\n              Hover to display dropdown\n            </Button>\n          )\n        }}\n      </Dropdown>\n    )\n  },\n}\n\nexport const FocusOrder = {\n  render: () => {\n    const dropdown = (\n      <Text variant=\"sm-display\">\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          First\n        </Clickable>\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          Second\n        </Clickable>\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          Third\n        </Clickable>\n      </Text>\n    )\n\n    return (\n      <Flex>\n        <Dropdown dropdown={dropdown} placement=\"bottom\">\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                {...anchorProps}\n              >\n                First Parent\n              </Button>\n            )\n          }}\n        </Dropdown>\n\n        <Dropdown dropdown={dropdown} placement=\"bottom\">\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                Second Parent\n              </Button>\n            )\n          }}\n        </Dropdown>\n      </Flex>\n    )\n  },\n}\n\nexport const OpenDropdownByClick = {\n  render: () => {\n    const dropdown = (\n      <Text variant=\"sm-display\">\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          First\n        </Clickable>\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          Second\n        </Clickable>\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          Third\n        </Clickable>\n      </Text>\n    )\n\n    return (\n      <Flex>\n        <Dropdown dropdown={dropdown} openDropdownByClick>\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                {...anchorProps}\n              >\n                Click to display dropdown\n              </Button>\n            )\n          }}\n        </Dropdown>\n      </Flex>\n    )\n  },\n}\n\nexport const FilterExample = {\n  render: () => {\n    return (\n      <Dropdown\n        dropdown={\n          <Box p={1}>\n            <Text variant=\"xs\">Example content</Text>\n          </Box>\n        }\n        placement=\"bottom-start\"\n        openDropdownByClick\n      >\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Pill\n              ref={anchorRef as any}\n              Icon={ChevronSmallDownIcon}\n              iconPosition=\"right\"\n              {...anchorProps}\n            >\n              Example\n            </Pill>\n          )\n        }}\n      </Dropdown>\n    )\n  },\n}\n\nexport const OverflowingContent = {\n  render: () => {\n    const dropdown = (\n      <Text variant=\"sm-display\">\n        {new Array(100).fill(null).map((_, i) => (\n          <Clickable key={i} display=\"block\" width=\"100%\" py={1} px={2}>\n            Item {i}\n          </Clickable>\n        ))}\n      </Text>\n    )\n\n    const [placement, setPlacement] = useState<Position>(\"bottom\")\n\n    return (\n      <>\n        <Box height={200} bg=\"mono10\" />\n\n        <Spacer y={2} />\n\n        {[\"bottom\", \"top\", \"left\", \"right\"].map((p) => {\n          return (\n            <Pill\n              key={p}\n              size=\"small\"\n              mr={1}\n              mb={1}\n              selected={placement === p}\n              onClick={() => setPlacement(p as Position)}\n            >\n              {p}\n            </Pill>\n          )\n        })}\n\n        <Spacer y={2} />\n\n        <Flex alignItems=\"center\" justifyContent=\"center\">\n          <Dropdown\n            dropdown={dropdown}\n            openDropdownByClick\n            placement={placement}\n          >\n            {({ anchorRef, anchorProps }) => {\n              return (\n                <Button\n                  ref={anchorRef}\n                  variant=\"secondaryBlack\"\n                  size=\"small\"\n                  {...anchorProps}\n                >\n                  Click to display dropdown\n                </Button>\n              )\n            }}\n          </Dropdown>\n        </Flex>\n\n        <Spacer y={2} />\n\n        <Box height={5000} bg=\"mono10\" />\n      </>\n    )\n  },\n}\n\nexport const DisabledTransition = {\n  render: () => {\n    return (\n      <Flex>\n        {[1, 2, 3].map((num) => {\n          const dropdown = (\n            <Text\n              variant=\"sm-display\"\n              width=\"100vw\"\n              bg={`color-b${num}00`}\n              p={2}\n            >\n              <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n                Panel {num}: First Item\n              </Clickable>\n              <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n                Panel {num}: Second Item\n              </Clickable>\n              <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n                Panel {num}: Third Item\n              </Clickable>\n            </Text>\n          )\n\n          return (\n            <Dropdown\n              key={num}\n              dropdown={dropdown}\n              transition={false}\n              placement=\"bottom\"\n            >\n              {({ anchorRef, anchorProps }) => {\n                return (\n                  <Button\n                    ref={anchorRef}\n                    variant=\"secondaryBlack\"\n                    size=\"small\"\n                    mr={1}\n                    {...anchorProps}\n                  >\n                    Hover for dropdown {num}\n                  </Button>\n                )\n              }}\n            </Dropdown>\n          )\n        })}\n      </Flex>\n    )\n  },\n}\n\nexport const ReturnFocusDefault = {\n  args: {\n    placement: \"bottom\",\n    openDropdownByClick: true,\n    dropdown: (\n      <Box width={200} p={2}>\n        <Text variant=\"sm\" mb={1}>\n          Try this:\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          1. Click button to open dropdown\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          2. Press Tab to focus on links\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          3. Press Escape to close\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          4. Notice focus returns to button\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\" tabIndex={0} mb={1}>\n          Focusable Link 1\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\" tabIndex={0}>\n          Focusable Link 2\n        </Text>\n      </Box>\n    ),\n    children: ({ anchorRef, anchorProps }) => (\n      <Button\n        ref={anchorRef}\n        variant=\"secondaryBlack\"\n        size=\"small\"\n        {...anchorProps}\n      >\n        Click me (returnFocus=true)\n      </Button>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Default behavior with `returnFocus=true`. When you close the dropdown (Escape key or click outside), focus returns to the trigger button for better accessibility.\",\n      },\n    },\n    chromatic: { disable: true },\n  },\n}\n\nexport const ReturnFocusDisabled = {\n  args: {\n    placement: \"bottom\",\n    openDropdownByClick: true,\n    returnFocus: false,\n    dropdown: (\n      <Box width={200} p={2}>\n        <Text variant=\"sm\" mb={1}>\n          Try this:\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          1. Click button to open dropdown\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          2. Press Tab to focus on button\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          3. Press Escape to close\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          4. Focus stays where it was\n        </Text>\n        <Button\n          variant=\"primaryBlack\"\n          size=\"small\"\n          onClick={() => {\n            alert(\"Modal opened! Focus should not return to dropdown trigger.\")\n          }}\n        >\n          Open Modal\n        </Button>\n      </Box>\n    ),\n    children: ({ anchorRef, anchorProps }) => (\n      <Button\n        ref={anchorRef}\n        variant=\"secondaryBlack\"\n        size=\"small\"\n        {...anchorProps}\n      >\n        Click me (returnFocus=false)\n      </Button>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"With `returnFocus=false`, focus does not return to the trigger when the dropdown closes. This is useful when the dropdown opens a modal or navigates to another page, where returning focus would be disruptive.\",\n      },\n    },\n    chromatic: { disable: true },\n  },\n}\n\nexport const CustomDelay = {\n  render: () => {\n    const dropdown = (\n      <Box width={250} p={2}>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          One\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          Two\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          Three\n        </Text>\n      </Box>\n    )\n\n    return (\n      <Flex gap={2}>\n        <Dropdown dropdown={dropdown} placement=\"bottom\" delay={0}>\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                No delay (default)\n              </Button>\n            )\n          }}\n        </Dropdown>\n\n        <Dropdown dropdown={dropdown} placement=\"bottom\" delay={500}>\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"primaryBlack\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                500ms delay\n              </Button>\n            )\n          }}\n        </Dropdown>\n\n        <Dropdown dropdown={dropdown} placement=\"bottom\" delay={1000}>\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"tertiary\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                1000ms delay\n              </Button>\n            )\n          }}\n        </Dropdown>\n      </Flex>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"The `delay` prop allows you to configure how long to wait before showing the dropdown on hover. This is useful for preventing accidental triggers. The delay is ignored when `openDropdownByClick` is true.\",\n      },\n    },\n    chromatic: { disable: true },\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.story.js","names":["React","useEffect","useState","Position","Box","Button","Text","Dropdown","Clickable","Flex","Pill","ChevronSmallDownIcon","Spacer","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","placement","dropdown","createElement","width","p","as","display","variant","href","children","_ref","anchorRef","anchorProps","textAlign","_extends","ref","size","chromatic","disable","KeepInDOM","keepInDOM","_ref2","ChangeDimensions","render","_useState","_useState2","_slicedToArray","height","setHeight","setInterval","Math","floor","random","_ref3","FocusOrder","py","px","_ref4","mr","_ref5","OpenDropdownByClick","openDropdownByClick","_ref6","FilterExample","_ref7","Icon","iconPosition","OverflowingContent","Array","fill","map","_","i","key","_useState3","_useState4","setPlacement","Fragment","bg","y","mb","selected","onClick","alignItems","justifyContent","_ref8","DisabledTransition","num","concat","transition","_ref9","ReturnFocusDefault","color","tabIndex","_ref10","story","ReturnFocusDisabled","returnFocus","alert","_ref11","CustomDelay","gap","delay","_ref12","_ref13","_ref14"],"sources":["../../../../src/elements/Dropdown/Dropdown.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Position } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { Dropdown } from \"./Dropdown\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Pill } from \"../Pill\"\nimport ChevronSmallDownIcon from \"@artsy/icons/ChevronSmallDownIcon\"\nimport { Spacer } from \"../Spacer\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Dropdown,\n  title: \"Components/Dropdown\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A dropdown component that renders content in a positioned overlay with various placement options and interaction modes.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    placement: \"bottom\",\n    dropdown: (\n      <Box width={300} p={2}>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          One\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          Two\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          Three\n        </Text>\n      </Box>\n    ),\n    children: ({ anchorRef, anchorProps }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          {...anchorProps}\n        >\n          Hover to display dropdown\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const KeepInDOM = {\n  args: {\n    placement: \"bottom\",\n    keepInDOM: true,\n    dropdown: (\n      <Text p={2} variant=\"xs\">\n        Content remains in DOM\n      </Text>\n    ),\n    children: ({ anchorRef, anchorProps }) => (\n      <Button\n        ref={anchorRef}\n        variant=\"secondaryBlack\"\n        size=\"small\"\n        {...anchorProps}\n      >\n        Hover to display dropdown\n      </Button>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const ChangeDimensions = {\n  render: () => {\n    const [height, setHeight] = useState(10)\n\n    useEffect(() => {\n      setInterval(() => {\n        setHeight(Math.floor(Math.random() * 100))\n      }, 1000)\n    }, [])\n\n    return (\n      <Dropdown\n        placement=\"bottom\"\n        dropdown={<Box height={height} width={300} />}\n      >\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              {...anchorProps}\n            >\n              Hover to display dropdown\n            </Button>\n          )\n        }}\n      </Dropdown>\n    )\n  },\n}\n\nexport const FocusOrder = {\n  render: () => {\n    const dropdown = (\n      <Text variant=\"sm-display\">\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          First\n        </Clickable>\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          Second\n        </Clickable>\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          Third\n        </Clickable>\n      </Text>\n    )\n\n    return (\n      <Flex>\n        <Dropdown dropdown={dropdown} placement=\"bottom\">\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                {...anchorProps}\n              >\n                First Parent\n              </Button>\n            )\n          }}\n        </Dropdown>\n\n        <Dropdown dropdown={dropdown} placement=\"bottom\">\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                Second Parent\n              </Button>\n            )\n          }}\n        </Dropdown>\n      </Flex>\n    )\n  },\n}\n\nexport const OpenDropdownByClick = {\n  render: () => {\n    const dropdown = (\n      <Text variant=\"sm-display\">\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          First\n        </Clickable>\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          Second\n        </Clickable>\n        <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n          Third\n        </Clickable>\n      </Text>\n    )\n\n    return (\n      <Flex>\n        <Dropdown dropdown={dropdown} openDropdownByClick>\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                {...anchorProps}\n              >\n                Click to display dropdown\n              </Button>\n            )\n          }}\n        </Dropdown>\n      </Flex>\n    )\n  },\n}\n\nexport const FilterExample = {\n  render: () => {\n    return (\n      <Dropdown\n        dropdown={\n          <Box p={1}>\n            <Text variant=\"xs\">Example content</Text>\n          </Box>\n        }\n        placement=\"bottom-start\"\n        openDropdownByClick\n      >\n        {({ anchorRef, anchorProps }) => {\n          return (\n            <Pill\n              ref={anchorRef as any}\n              Icon={ChevronSmallDownIcon}\n              iconPosition=\"right\"\n              {...anchorProps}\n            >\n              Example\n            </Pill>\n          )\n        }}\n      </Dropdown>\n    )\n  },\n}\n\nexport const OverflowingContent = {\n  render: () => {\n    const dropdown = (\n      <Text variant=\"sm-display\">\n        {new Array(100).fill(null).map((_, i) => (\n          <Clickable key={i} display=\"block\" width=\"100%\" py={1} px={2}>\n            Item {i}\n          </Clickable>\n        ))}\n      </Text>\n    )\n\n    const [placement, setPlacement] = useState<Position>(\"bottom\")\n\n    return (\n      <>\n        <Box height={200} bg=\"mono10\" />\n\n        <Spacer y={2} />\n\n        {[\"bottom\", \"top\", \"left\", \"right\"].map((p) => {\n          return (\n            <Pill\n              key={p}\n              size=\"small\"\n              mr={1}\n              mb={1}\n              selected={placement === p}\n              onClick={() => setPlacement(p as Position)}\n            >\n              {p}\n            </Pill>\n          )\n        })}\n\n        <Spacer y={2} />\n\n        <Flex alignItems=\"center\" justifyContent=\"center\">\n          <Dropdown\n            dropdown={dropdown}\n            openDropdownByClick\n            placement={placement}\n          >\n            {({ anchorRef, anchorProps }) => {\n              return (\n                <Button\n                  ref={anchorRef}\n                  variant=\"secondaryBlack\"\n                  size=\"small\"\n                  {...anchorProps}\n                >\n                  Click to display dropdown\n                </Button>\n              )\n            }}\n          </Dropdown>\n        </Flex>\n\n        <Spacer y={2} />\n\n        <Box height={5000} bg=\"mono10\" />\n      </>\n    )\n  },\n}\n\nexport const DisabledTransition = {\n  render: () => {\n    return (\n      <Flex>\n        {[1, 2, 3].map((num) => {\n          const dropdown = (\n            <Text\n              variant=\"sm-display\"\n              width=\"100vw\"\n              bg={`color-b${num}00`}\n              p={2}\n            >\n              <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n                Panel {num}: First Item\n              </Clickable>\n              <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n                Panel {num}: Second Item\n              </Clickable>\n              <Clickable display=\"block\" width=\"100%\" py={1} px={2}>\n                Panel {num}: Third Item\n              </Clickable>\n            </Text>\n          )\n\n          return (\n            <Dropdown\n              key={num}\n              dropdown={dropdown}\n              transition={false}\n              placement=\"bottom\"\n            >\n              {({ anchorRef, anchorProps }) => {\n                return (\n                  <Button\n                    ref={anchorRef}\n                    variant=\"secondaryBlack\"\n                    size=\"small\"\n                    mr={1}\n                    {...anchorProps}\n                  >\n                    Hover for dropdown {num}\n                  </Button>\n                )\n              }}\n            </Dropdown>\n          )\n        })}\n      </Flex>\n    )\n  },\n}\n\nexport const ReturnFocusDefault = {\n  args: {\n    placement: \"bottom\",\n    openDropdownByClick: true,\n    dropdown: (\n      <Box width={200} p={2}>\n        <Text variant=\"sm\" mb={1}>\n          Try this:\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          1. Click button to open dropdown\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          2. Press Tab to focus on links\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          3. Press Escape to close\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          4. Notice focus returns to button\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\" tabIndex={0} mb={1}>\n          Focusable Link 1\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\" tabIndex={0}>\n          Focusable Link 2\n        </Text>\n      </Box>\n    ),\n    children: ({ anchorRef, anchorProps }) => (\n      <Button\n        ref={anchorRef}\n        variant=\"secondaryBlack\"\n        size=\"small\"\n        {...anchorProps}\n      >\n        Click me (returnFocus=true)\n      </Button>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Default behavior with `returnFocus=true`. When you close the dropdown (Escape key or click outside), focus returns to the trigger button for better accessibility.\",\n      },\n    },\n    chromatic: { disable: true },\n  },\n}\n\nexport const ReturnFocusDisabled = {\n  args: {\n    placement: \"bottom\",\n    openDropdownByClick: true,\n    returnFocus: false,\n    dropdown: (\n      <Box width={200} p={2}>\n        <Text variant=\"sm\" mb={1}>\n          Try this:\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          1. Click button to open dropdown\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          2. Press Tab to focus on button\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          3. Press Escape to close\n        </Text>\n        <Text variant=\"xs\" color=\"mono60\" mb={2}>\n          4. Focus stays where it was\n        </Text>\n        <Button\n          variant=\"primaryBlack\"\n          size=\"small\"\n          onClick={() => {\n            alert(\"Modal opened! Focus should not return to dropdown trigger.\")\n          }}\n        >\n          Open Modal\n        </Button>\n      </Box>\n    ),\n    children: ({ anchorRef, anchorProps }) => (\n      <Button\n        ref={anchorRef}\n        variant=\"secondaryBlack\"\n        size=\"small\"\n        {...anchorProps}\n      >\n        Click me (returnFocus=false)\n      </Button>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"With `returnFocus=false`, focus does not return to the trigger when the dropdown closes. This is useful when the dropdown opens a modal or navigates to another page, where returning focus would be disruptive.\",\n      },\n    },\n    chromatic: { disable: true },\n  },\n}\n\nexport const CustomDelay = {\n  render: () => {\n    const dropdown = (\n      <Box width={250} p={2}>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          One\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          Two\n        </Text>\n        <Text as=\"a\" display=\"block\" variant=\"sm\" href=\"#\">\n          Three\n        </Text>\n      </Box>\n    )\n\n    return (\n      <Flex gap={2}>\n        <Dropdown dropdown={dropdown} placement=\"bottom\" delay={0}>\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                No delay (default)\n              </Button>\n            )\n          }}\n        </Dropdown>\n\n        <Dropdown dropdown={dropdown} placement=\"bottom\" delay={500}>\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"primaryBlack\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                500ms delay\n              </Button>\n            )\n          }}\n        </Dropdown>\n\n        <Dropdown dropdown={dropdown} placement=\"bottom\" delay={1000}>\n          {({ anchorRef, anchorProps }) => {\n            return (\n              <Button\n                ref={anchorRef}\n                variant=\"tertiary\"\n                size=\"small\"\n                {...anchorProps}\n              >\n                1000ms delay\n              </Button>\n            )\n          }}\n        </Dropdown>\n      </Flex>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"The `delay` prop allows you to configure how long to wait before showing the dropdown on hover. This is useful for preventing accidental triggers. The delay is ignored when `openDropdownByClick` is true.\",\n      },\n    },\n    chromatic: { disable: true },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/EntityHeader/EntityHeader.js

@@ -3,8 +3,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
-import { Label } from "../Label";
-import { Flex } from "../Flex";
+import { Label, LabelProps } from "../Label";
+import { Flex, FlexProps } from "../Flex";
+import { ImageProps } from "../Image";
 import { Avatar } from "../Avatar";
 import { Text } from "../Text";
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"EntityHeader.js","names":["React","Label","Flex","Avatar","Text","EntityHeader","_ref","name","href","meta","initials","imageUrl","image","smallVariant","FollowButton","labels","rest","_objectWithoutProperties","_excluded","createElement","_extends","alignItems","justifyContent","as","style","textDecoration","mr","size","src","flexDirection","variant","map","label","i","Fragment","key","color","displayName"],"sources":["../../../../src/elements/EntityHeader/EntityHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport { Label, LabelProps } from \"../Label\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { ImageProps } from \"../Image\"\nimport { Avatar } from \"../Avatar\"\nimport { Text } from \"../Text\"\n\nexport interface EntityHeaderProps extends FlexProps {\n  href?: string\n  /** @deprecated: use `image` instead */\n  imageUrl?: string\n  /** Pass props to the underlying `Image` in `Avatar` */\n  image?: Omit<Partial<ImageProps>, \"size\">\n  initials?: string\n  meta?: string\n  name: string\n  labels?: LabelProps[]\n  smallVariant?: boolean\n  FollowButton?: JSX.Element\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void\n}\n/**\n * Component that is used as entity header that is paired with rich information about the entity.\n * @deprecated: Use EntityHeader fragment container patterns within Force instead\n */\n\nexport const EntityHeader: React.FC<\n  React.PropsWithChildren<EntityHeaderProps>\n> = ({\n  name,\n  href,\n  meta,\n  initials,\n  imageUrl,\n  image,\n  smallVariant,\n  FollowButton,\n  labels,\n  ...rest\n}) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"space-between\" {...rest}>\n      <Flex\n        alignItems=\"center\"\n        {...(href ? { as: \"a\", href, style: { textDecoration: \"none\" } } : {})}\n      >\n        {(imageUrl || image || initials) && (\n          <Flex mr={1}>\n            <Avatar\n              size={smallVariant ? \"xxs\" : \"xs\"}\n              src={imageUrl}\n              initials={initials}\n              {...(image ?? {})}\n            />\n          </Flex>\n        )}\n\n        <Flex flexDirection=\"column\" mr={1}>\n          <Text variant=\"sm-display\">{name}</Text>\n\n          <Text variant=\"sm-display\">\n            {labels?.map((label, i) => (\n              <React.Fragment key={i}>\n                <Label {...label} />{\" \"}\n              </React.Fragment>\n            ))}\n          </Text>\n\n          {meta && (\n            <Text variant=\"xs\" color=\"mono60\">\n              {meta}\n            </Text>\n          )}\n        </Flex>\n      </Flex>\n\n      {FollowButton}\n    </Flex>\n  )\n}\n\nEntityHeader.displayName = \"EntityHeader\"\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK;AACd,SAASC,IAAI;AAEb,SAASC,MAAM;AACf,SAASC,IAAI;AAgBb;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,YAEZ,GAAG,SAFSA,YAEZA,CAAAC,IAAA,EAWK;EAAA,IAVJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,YAAY,GAAAP,IAAA,CAAZO,YAAY;IACZC,YAAY,GAAAR,IAAA,CAAZQ,YAAY;IACZC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACHC,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,oBACElB,KAAA,CAAAmB,aAAA,CAACjB,IAAI,EAAAkB,QAAA;IAACC,UAAU,EAAC,QAAQ;IAACC,cAAc,EAAC;EAAe,GAAKN,IAAI,gBAC/DhB,KAAA,CAAAmB,aAAA,CAACjB,IAAI,EAAAkB,QAAA;IACHC,UAAU,EAAC;EAAQ,GACdb,IAAI,GAAG;IAAEe,EAAE,EAAE,GAAG;IAAEf,IAAI,EAAJA,IAAI;IAAEgB,KAAK,EAAE;MAAEC,cAAc,EAAE;IAAO;EAAE,CAAC,GAAG,CAAC,CAAC,GAEpE,CAACd,QAAQ,IAAIC,KAAK,IAAIF,QAAQ,kBAC7BV,KAAA,CAAAmB,aAAA,CAACjB,IAAI;IAACwB,EAAE,EAAE;EAAE,gBACV1B,KAAA,CAAAmB,aAAA,CAAChB,MAAM,EAAAiB,QAAA;IACLO,IAAI,EAAEd,YAAY,GAAG,KAAK,GAAG,IAAK;IAClCe,GAAG,EAAEjB,QAAS;IACdD,QAAQ,EAAEA;EAAS,GACdE,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,EAChB,CAEL,eAEDZ,KAAA,CAAAmB,aAAA,CAACjB,IAAI;IAAC2B,aAAa,EAAC,QAAQ;IAACH,EAAE,EAAE;EAAE,gBACjC1B,KAAA,CAAAmB,aAAA,CAACf,IAAI;IAAC0B,OAAO,EAAC;EAAY,GAAEvB,IAAI,CAAQ,eAExCP,KAAA,CAAAmB,aAAA,CAACf,IAAI;IAAC0B,OAAO,EAAC;EAAY,GACvBf,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEgB,GAAG,CAAC,UAACC,KAAK,EAAEC,CAAC;IAAA,oBACpBjC,KAAA,CAAAmB,aAAA,CAACnB,KAAK,CAACkC,QAAQ;MAACC,GAAG,EAAEF;IAAE,gBACrBjC,KAAA,CAAAmB,aAAA,CAAClB,KAAK,EAAK+B,KAAK,CAAI,EAAC,GAAG,CACT;EAAA,CAClB,CAAC,CACG,EAENvB,IAAI,iBACHT,KAAA,CAAAmB,aAAA,CAACf,IAAI;IAAC0B,OAAO,EAAC,IAAI;IAACM,KAAK,EAAC;EAAQ,GAC9B3B,IAAI,CAER,CACI,CACF,EAENK,YAAY,CACR;AAEX,CAAC;AArDYT,YAEZ,CAAAgC,WAAA;AAqDDhC,YAAY,CAACgC,WAAW,GAAG,cAAc"}
+{"version":3,"file":"EntityHeader.js","names":["React","Label","LabelProps","Flex","FlexProps","ImageProps","Avatar","Text","EntityHeader","_ref","name","href","meta","initials","imageUrl","image","smallVariant","FollowButton","labels","rest","_objectWithoutProperties","_excluded","createElement","_extends","alignItems","justifyContent","as","style","textDecoration","mr","size","src","flexDirection","variant","map","label","i","Fragment","key","color","displayName"],"sources":["../../../../src/elements/EntityHeader/EntityHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport { Label, LabelProps } from \"../Label\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { ImageProps } from \"../Image\"\nimport { Avatar } from \"../Avatar\"\nimport { Text } from \"../Text\"\n\nexport interface EntityHeaderProps extends FlexProps {\n  href?: string\n  /** @deprecated: use `image` instead */\n  imageUrl?: string\n  /** Pass props to the underlying `Image` in `Avatar` */\n  image?: Omit<Partial<ImageProps>, \"size\">\n  initials?: string\n  meta?: string\n  name: string\n  labels?: LabelProps[]\n  smallVariant?: boolean\n  FollowButton?: JSX.Element\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void\n}\n/**\n * Component that is used as entity header that is paired with rich information about the entity.\n * @deprecated: Use EntityHeader fragment container patterns within Force instead\n */\n\nexport const EntityHeader: React.FC<\n  React.PropsWithChildren<EntityHeaderProps>\n> = ({\n  name,\n  href,\n  meta,\n  initials,\n  imageUrl,\n  image,\n  smallVariant,\n  FollowButton,\n  labels,\n  ...rest\n}) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"space-between\" {...rest}>\n      <Flex\n        alignItems=\"center\"\n        {...(href ? { as: \"a\", href, style: { textDecoration: \"none\" } } : {})}\n      >\n        {(imageUrl || image || initials) && (\n          <Flex mr={1}>\n            <Avatar\n              size={smallVariant ? \"xxs\" : \"xs\"}\n              src={imageUrl}\n              initials={initials}\n              {...(image ?? {})}\n            />\n          </Flex>\n        )}\n\n        <Flex flexDirection=\"column\" mr={1}>\n          <Text variant=\"sm-display\">{name}</Text>\n\n          <Text variant=\"sm-display\">\n            {labels?.map((label, i) => (\n              <React.Fragment key={i}>\n                <Label {...label} />{\" \"}\n              </React.Fragment>\n            ))}\n          </Text>\n\n          {meta && (\n            <Text variant=\"xs\" color=\"mono60\">\n              {meta}\n            </Text>\n          )}\n        </Flex>\n      </Flex>\n\n      {FollowButton}\n    </Flex>\n  )\n}\n\nEntityHeader.displayName = \"EntityHeader\"\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,UAAU;AAC1B,SAASC,IAAI,EAAEC,SAAS;AACxB,SAASC,UAAU;AACnB,SAASC,MAAM;AACf,SAASC,IAAI;AAgBb;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,YAEZ,GAAG,SAFSA,YAEZA,CAAAC,IAAA,EAWK;EAAA,IAVJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,YAAY,GAAAP,IAAA,CAAZO,YAAY;IACZC,YAAY,GAAAR,IAAA,CAAZQ,YAAY;IACZC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACHC,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,oBACErB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,EAAAoB,QAAA;IAACC,UAAU,EAAC,QAAQ;IAACC,cAAc,EAAC;EAAe,GAAKN,IAAI,gBAC/DnB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,EAAAoB,QAAA;IACHC,UAAU,EAAC;EAAQ,GACdb,IAAI,GAAG;IAAEe,EAAE,EAAE,GAAG;IAAEf,IAAI,EAAJA,IAAI;IAAEgB,KAAK,EAAE;MAAEC,cAAc,EAAE;IAAO;EAAE,CAAC,GAAG,CAAC,CAAC,GAEpE,CAACd,QAAQ,IAAIC,KAAK,IAAIF,QAAQ,kBAC7Bb,KAAA,CAAAsB,aAAA,CAACnB,IAAI;IAAC0B,EAAE,EAAE;EAAE,gBACV7B,KAAA,CAAAsB,aAAA,CAAChB,MAAM,EAAAiB,QAAA;IACLO,IAAI,EAAEd,YAAY,GAAG,KAAK,GAAG,IAAK;IAClCe,GAAG,EAAEjB,QAAS;IACdD,QAAQ,EAAEA;EAAS,GACdE,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,EAChB,CAEL,eAEDf,KAAA,CAAAsB,aAAA,CAACnB,IAAI;IAAC6B,aAAa,EAAC,QAAQ;IAACH,EAAE,EAAE;EAAE,gBACjC7B,KAAA,CAAAsB,aAAA,CAACf,IAAI;IAAC0B,OAAO,EAAC;EAAY,GAAEvB,IAAI,CAAQ,eAExCV,KAAA,CAAAsB,aAAA,CAACf,IAAI;IAAC0B,OAAO,EAAC;EAAY,GACvBf,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEgB,GAAG,CAAC,UAACC,KAAK,EAAEC,CAAC;IAAA,oBACpBpC,KAAA,CAAAsB,aAAA,CAACtB,KAAK,CAACqC,QAAQ;MAACC,GAAG,EAAEF;IAAE,gBACrBpC,KAAA,CAAAsB,aAAA,CAACrB,KAAK,EAAKkC,KAAK,CAAI,EAAC,GAAG,CACT;EAAA,CAClB,CAAC,CACG,EAENvB,IAAI,iBACHZ,KAAA,CAAAsB,aAAA,CAACf,IAAI;IAAC0B,OAAO,EAAC,IAAI;IAACM,KAAK,EAAC;EAAQ,GAC9B3B,IAAI,CAER,CACI,CACF,EAENK,YAAY,CACR;AAEX,CAAC;AArDYT,YAEZ,CAAAgC,WAAA;AAqDDhC,YAAY,CAACgC,WAAW,GAAG,cAAc"}

package/dist/esm/elements/Expandable/Expandable.js

@@ -13,7 +13,7 @@ import { isText } from "../../helpers/isText";
 import ChevronUpIcon from "@artsy/icons/ChevronUpIcon";
 import ChevronDownIcon from "@artsy/icons/ChevronDownIcon";
 import { Box, splitBoxProps } from "../Box";
-import { Clickable } from "../Clickable";
+import { Clickable, ClickableProps } from "../Clickable";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Expandable.js","names":["React","useEffect","useState","isText","ChevronUpIcon","ChevronDownIcon","Box","splitBoxProps","Clickable","Flex","Text","Expandable","_ref","label","expandedProp","expanded","children","disabled","onClick","onToggle","_ref$borderColor","borderColor","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setExpanded","undefined","_splitBoxProps","_splitBoxProps2","boxProps","clickableProps","handleClick","event","prevExpanded","isExpanded","createElement","_extends","width","display","alignItems","justifyContent","borderTop","pt","pb","flex","variant","Fragment","height","ml","mr","overflow","style","visibility","displayName"],"sources":["../../../../src/elements/Expandable/Expandable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport ChevronUpIcon from \"@artsy/icons/ChevronUpIcon\"\nimport ChevronDownIcon from \"@artsy/icons/ChevronDownIcon\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\ntype ChildrenFunction = (props: {\n  setExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  expanded: boolean\n}) => React.ReactNode\n\nexport interface ExpandableProps extends Omit<ClickableProps, \"children\"> {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode | ChildrenFunction\n  onToggle?: (isExpanded: boolean) => void\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable = ({\n  label,\n  expanded: expandedProp,\n  children,\n  disabled,\n  onClick,\n  onToggle,\n  borderColor = \"mono60\",\n  ...rest\n}: ExpandableProps) => {\n  const [expanded, setExpanded] = useState(expandedProp)\n\n  useEffect(() => {\n    if (expandedProp !== undefined) {\n      setExpanded(expandedProp)\n    }\n  }, [expandedProp])\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => {\n      const isExpanded = !prevExpanded\n      onToggle && onToggle(isExpanded)\n      return isExpanded\n    })\n\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor={borderColor}\n        pt={2}\n        pb={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <>\n            {expanded ? (\n              <ChevronUpIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <ChevronDownIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            )}\n          </>\n        )}\n      </Clickable>\n\n      <Box\n        overflow=\"hidden\"\n        height={expanded ? \"auto\" : \"0px\"}\n        style={{ visibility: expanded ? \"visible\" : \"hidden\" }}\n      >\n        {typeof children === \"function\"\n          ? (children as ChildrenFunction)({ setExpanded, expanded: !!expanded })\n          : children}\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Expandable.js","names":["React","useEffect","useState","isText","ChevronUpIcon","ChevronDownIcon","Box","splitBoxProps","Clickable","ClickableProps","Flex","Text","Expandable","_ref","label","expandedProp","expanded","children","disabled","onClick","onToggle","_ref$borderColor","borderColor","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","setExpanded","undefined","_splitBoxProps","_splitBoxProps2","boxProps","clickableProps","handleClick","event","prevExpanded","isExpanded","createElement","_extends","width","display","alignItems","justifyContent","borderTop","pt","pb","flex","variant","Fragment","height","ml","mr","overflow","style","visibility","displayName"],"sources":["../../../../src/elements/Expandable/Expandable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport ChevronUpIcon from \"@artsy/icons/ChevronUpIcon\"\nimport ChevronDownIcon from \"@artsy/icons/ChevronDownIcon\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\ntype ChildrenFunction = (props: {\n  setExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  expanded: boolean\n}) => React.ReactNode\n\nexport interface ExpandableProps extends Omit<ClickableProps, \"children\"> {\n  label?: string | JSX.Element\n  expanded?: boolean\n  children: React.ReactNode | ChildrenFunction\n  onToggle?: (isExpanded: boolean) => void\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable = ({\n  label,\n  expanded: expandedProp,\n  children,\n  disabled,\n  onClick,\n  onToggle,\n  borderColor = \"mono60\",\n  ...rest\n}: ExpandableProps) => {\n  const [expanded, setExpanded] = useState(expandedProp)\n\n  useEffect(() => {\n    if (expandedProp !== undefined) {\n      setExpanded(expandedProp)\n    }\n  }, [expandedProp])\n\n  const [boxProps, clickableProps] = splitBoxProps(rest)\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    setExpanded((prevExpanded) => {\n      const isExpanded = !prevExpanded\n      onToggle && onToggle(isExpanded)\n      return isExpanded\n    })\n\n    onClick && onClick(event)\n  }\n\n  return (\n    <Box {...boxProps}>\n      <Clickable\n        width=\"100%\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        borderTop=\"1px solid\"\n        borderColor={borderColor}\n        pt={2}\n        pb={1}\n        disabled={disabled}\n        aria-expanded={expanded}\n        onClick={handleClick}\n        {...clickableProps}\n      >\n        <Flex flex={1} display=\"flex\" alignItems=\"center\">\n          {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n        </Flex>\n\n        {!disabled && (\n          <>\n            {expanded ? (\n              <ChevronUpIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <ChevronDownIcon\n                width={14}\n                height={14}\n                ml={1}\n                mr={1}\n                aria-hidden=\"true\"\n              />\n            )}\n          </>\n        )}\n      </Clickable>\n\n      <Box\n        overflow=\"hidden\"\n        height={expanded ? \"auto\" : \"0px\"}\n        style={{ visibility: expanded ? \"visible\" : \"hidden\" }}\n      >\n        {typeof children === \"function\"\n          ? (children as ChildrenFunction)({ setExpanded, expanded: !!expanded })\n          : children}\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/elements/FilterSelect/Components/FilterInput.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from "react";
 import CloseStrokeIcon from "@artsy/icons/CloseStrokeIcon";
 import SearchIcon from "@artsy/icons/SearchIcon";
+import { InputProps } from "../../Input";
 import { LabeledInput } from "../../LabeledInput";
 import { Clickable } from "../../Clickable";
 import { useRef } from "react";

package/dist/esm/elements/FilterSelect/Components/FilterInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterInput.js","names":["React","CloseStrokeIcon","SearchIcon","LabeledInput","Clickable","useRef","useFilterSelectContext","FilterInput","props","_useFilterSelectConte","query","setQuery","placeholder","ref","handleChange","event","target","value","handleClick","_ref$current","current","focus","createElement","_extends","role","label","display","onClick","style","pointerEvents","onChange","displayName"],"sources":["../../../../../src/elements/FilterSelect/Components/FilterInput.tsx"],"sourcesContent":["import * as React from \"react\"\nimport CloseStrokeIcon from \"@artsy/icons/CloseStrokeIcon\"\nimport SearchIcon from \"@artsy/icons/SearchIcon\"\nimport { InputProps } from \"../../Input\"\nimport { LabeledInput } from \"../../LabeledInput\"\nimport { Clickable } from \"../../Clickable\"\nimport { useRef } from \"react\"\nimport { useFilterSelectContext } from \"./FilterSelectContext\"\n\nexport type FilterInputProps = InputProps\n\nexport const FilterInput: React.FC<React.PropsWithChildren<InputProps>> = (\n  props\n) => {\n  const { query, setQuery, placeholder } = useFilterSelectContext()\n  const ref = useRef<HTMLInputElement | null>(null)\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  const handleClick = () => {\n    setQuery(\"\")\n    ref.current?.focus()\n  }\n\n  return (\n    <LabeledInput\n      ref={ref}\n      role=\"search\"\n      label={\n        query !== \"\" ? (\n          // Active state\n          <Clickable\n            display=\"flex\"\n            onClick={handleClick}\n            aria-label=\"Clear search input\"\n          >\n            <CloseStrokeIcon />\n          </Clickable>\n        ) : (\n          // Resting state\n          <SearchIcon style={{ pointerEvents: \"none\" }} />\n        )\n      }\n      onChange={handleChange}\n      value={query}\n      placeholder={placeholder}\n      {...props}\n    />\n  )\n}\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,OAAOC,UAAU,MAAM,yBAAyB;AAEhD,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,SAASC,MAAM,QAAQ,OAAO;AAC9B,SAASC,sBAAsB;AAI/B,OAAO,IAAMC,WAA0D,GAAG,SAA7DA,WAA0DA,CACrEC,KAAK,EACF;EACH,IAAAC,qBAAA,GAAyCH,sBAAsB,EAAE;IAAzDI,KAAK,GAAAD,qBAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,qBAAA,CAARE,QAAQ;IAAEC,WAAW,GAAAH,qBAAA,CAAXG,WAAW;EACpC,IAAMC,GAAG,GAAGR,MAAM,CAA0B,IAAI,CAAC;EAEjD,IAAMS,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAA0C,EAAK;IACnEJ,QAAQ,CAACI,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EAC9B,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IAAA,IAAAC,YAAA;IACxBR,QAAQ,CAAC,EAAE,CAAC;IACZ,CAAAQ,YAAA,GAAAN,GAAG,CAACO,OAAO,cAAAD,YAAA,uBAAXA,YAAA,CAAaE,KAAK,EAAE;EACtB,CAAC;EAED,oBACErB,KAAA,CAAAsB,aAAA,CAACnB,YAAY,EAAAoB,QAAA;IACXV,GAAG,EAAEA,GAAI;IACTW,IAAI,EAAC,QAAQ;IACbC,KAAK,EACHf,KAAK,KAAK,EAAE;IAAA;IACV;IACAV,KAAA,CAAAsB,aAAA,CAAClB,SAAS;MACRsB,OAAO,EAAC,MAAM;MACdC,OAAO,EAAET,WAAY;MACrB,cAAW;IAAoB,gBAE/BlB,KAAA,CAAAsB,aAAA,CAACrB,eAAe,OAAG,CACT;IAAA;IAEZ;IACAD,KAAA,CAAAsB,aAAA,CAACpB,UAAU;MAAC0B,KAAK,EAAE;QAAEC,aAAa,EAAE;MAAO;IAAE,EAEhD;IACDC,QAAQ,EAAEhB,YAAa;IACvBG,KAAK,EAAEP,KAAM;IACbE,WAAW,EAAEA;EAAY,GACrBJ,KAAK,EACT;AAEN,CAAC;AAxCYD,WAA0D,CAAAwB,WAAA"}
+{"version":3,"file":"FilterInput.js","names":["React","CloseStrokeIcon","SearchIcon","InputProps","LabeledInput","Clickable","useRef","useFilterSelectContext","FilterInput","props","_useFilterSelectConte","query","setQuery","placeholder","ref","handleChange","event","target","value","handleClick","_ref$current","current","focus","createElement","_extends","role","label","display","onClick","style","pointerEvents","onChange","displayName"],"sources":["../../../../../src/elements/FilterSelect/Components/FilterInput.tsx"],"sourcesContent":["import * as React from \"react\"\nimport CloseStrokeIcon from \"@artsy/icons/CloseStrokeIcon\"\nimport SearchIcon from \"@artsy/icons/SearchIcon\"\nimport { InputProps } from \"../../Input\"\nimport { LabeledInput } from \"../../LabeledInput\"\nimport { Clickable } from \"../../Clickable\"\nimport { useRef } from \"react\"\nimport { useFilterSelectContext } from \"./FilterSelectContext\"\n\nexport type FilterInputProps = InputProps\n\nexport const FilterInput: React.FC<React.PropsWithChildren<InputProps>> = (\n  props\n) => {\n  const { query, setQuery, placeholder } = useFilterSelectContext()\n  const ref = useRef<HTMLInputElement | null>(null)\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  const handleClick = () => {\n    setQuery(\"\")\n    ref.current?.focus()\n  }\n\n  return (\n    <LabeledInput\n      ref={ref}\n      role=\"search\"\n      label={\n        query !== \"\" ? (\n          // Active state\n          <Clickable\n            display=\"flex\"\n            onClick={handleClick}\n            aria-label=\"Clear search input\"\n          >\n            <CloseStrokeIcon />\n          </Clickable>\n        ) : (\n          // Resting state\n          <SearchIcon style={{ pointerEvents: \"none\" }} />\n        )\n      }\n      onChange={handleChange}\n      value={query}\n      placeholder={placeholder}\n      {...props}\n    />\n  )\n}\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,OAAOC,UAAU,MAAM,yBAAyB;AAChD,SAASC,UAAU;AACnB,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,SAASC,MAAM,QAAQ,OAAO;AAC9B,SAASC,sBAAsB;AAI/B,OAAO,IAAMC,WAA0D,GAAG,SAA7DA,WAA0DA,CACrEC,KAAK,EACF;EACH,IAAAC,qBAAA,GAAyCH,sBAAsB,EAAE;IAAzDI,KAAK,GAAAD,qBAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,qBAAA,CAARE,QAAQ;IAAEC,WAAW,GAAAH,qBAAA,CAAXG,WAAW;EACpC,IAAMC,GAAG,GAAGR,MAAM,CAA0B,IAAI,CAAC;EAEjD,IAAMS,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAA0C,EAAK;IACnEJ,QAAQ,CAACI,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EAC9B,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IAAA,IAAAC,YAAA;IACxBR,QAAQ,CAAC,EAAE,CAAC;IACZ,CAAAQ,YAAA,GAAAN,GAAG,CAACO,OAAO,cAAAD,YAAA,uBAAXA,YAAA,CAAaE,KAAK,EAAE;EACtB,CAAC;EAED,oBACEtB,KAAA,CAAAuB,aAAA,CAACnB,YAAY,EAAAoB,QAAA;IACXV,GAAG,EAAEA,GAAI;IACTW,IAAI,EAAC,QAAQ;IACbC,KAAK,EACHf,KAAK,KAAK,EAAE;IAAA;IACV;IACAX,KAAA,CAAAuB,aAAA,CAAClB,SAAS;MACRsB,OAAO,EAAC,MAAM;MACdC,OAAO,EAAET,WAAY;MACrB,cAAW;IAAoB,gBAE/BnB,KAAA,CAAAuB,aAAA,CAACtB,eAAe,OAAG,CACT;IAAA;IAEZ;IACAD,KAAA,CAAAuB,aAAA,CAACrB,UAAU;MAAC2B,KAAK,EAAE;QAAEC,aAAa,EAAE;MAAO;IAAE,EAEhD;IACDC,QAAQ,EAAEhB,YAAa;IACvBG,KAAK,EAAEP,KAAM;IACbE,WAAW,EAAEA;EAAY,GACrBJ,KAAK,EACT;AAEN,CAAC;AAxCYD,WAA0D,CAAAwB,WAAA"}