@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.js","names":["CloseIcon","SearchIcon","composeRefs","themeGet","React","createRef","useCallback","useEffect","useMemo","useReducer","useRef","styled","useKeyboardListNavigation","useClickOutside","useContainsFocus","usePosition","useMouseActivity","useWidthOf","Box","splitBoxProps","Clickable","LabeledInput","Spinner","VisuallyHidden","AutocompleteInputOption","AutocompleteInputOptionLabel","reducer","state","action","type","_objectSpread","open","query","payload","AutocompleteInput","_ref","_staged$text","_ref$clamp","clamp","_ref$defaultValue","defaultValue","_ref$dropdownMaxHeigh","dropdownMaxHeight","dropdownMinWidth","_ref$flip","flip","footer","forwardedRef","forwardRef","header","height","id","loading","onChange","onClear","onClose","onKeyDown","onSelect","onSubmit","options","_ref$renderOption","renderOption","option","createElement","rest","_objectWithoutProperties","_excluded","inputRef","containerRef","headerRef","footerRef","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useReducer","_useReducer2","dispatch","optionsWithRefs","map","ref","resetUI","setTimeout","_inputRef$current","current","focus","reset","handleSelect","index","_inputRef$current2","text","_useKeyboardListNavig","list","waitForInteractive","onEnter","_ref2","element","i","event","preventDefault","stopPropagation","set","isDropdownVisible","length","_usePosition","active","key","offset","position","anchorRef","tooltipRef","_useWidthOf","width","handleFocus","handleMouseDown","handleClick","_useMouseActivity","lastMouseMoveTimestamp","handleMouseEnter","now","performance","cursor","interactive","handleChange","value","currentTarget","handleClearOrSubmit","_inputRef$current3","handleClose","ignoreFocusChangeRef","ignoreFocusChange","onMouseDown","onMouseUp","_optionsWithRefs$inde","_optionsWithRefs$inde2","el","isPointerInteraction","preventScroll","scrollIntoView","block","_unused","handleFocusChange","focused","_useContainsFocus","containsFocusRef","onClickOutside","when","handleInputKeydown","_inputRef$current4","blur","handleContainerKeydown","_inputRef$current5","_inputRef$current6","staged","_extends","role","concat","label","size","onClick","display","alignItems","fill","onFocus","autoComplete","AutocompleteInputDropdownContainer","minWidth","pt","AutocompleteInputDropdown","AutocompleteInputOptions","maxHeight","_ref3","onMouseEnter","tabIndex","displayName","withConfig","componentId"],"sources":["../../../../src/elements/AutocompleteInput/AutocompleteInput.tsx"],"sourcesContent":["import CloseIcon from \"@artsy/icons/CloseIcon\"\nimport SearchIcon from \"@artsy/icons/SearchIcon\"\nimport composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { ResponsiveValue } from \"styled-system\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { useClickOutside, useContainsFocus, usePosition } from \"../../utils\"\nimport { useMouseActivity } from \"../../utils/useMouseActivity\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Spinner } from \"../Spinner\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { AutocompleteInputOption } from \"./AutocompleteInputOption\"\nimport { AutocompleteInputOptionLabel } from \"./AutocompleteInputOptionLabel\"\n\nexport interface AutocompleteFooterActions {\n  /** Call to close dropdown */\n  onClose(): void\n}\n\n/** Base option type — can be expanded */\nexport interface AutocompleteInputOptionType {\n  text: string\n  value: string\n}\n\ninterface State {\n  open: boolean\n  query: string\n}\n\ntype Action =\n  | { type: \"OPEN\" }\n  | { type: \"CLOSE\" }\n  | { type: \"CLEAR\" }\n  | { type: \"CHANGE\"; payload: { query: string } }\n  | { type: \"SELECT\"; payload: { query: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"OPEN\":\n      return { ...state, open: true }\n    case \"CLOSE\":\n      return { ...state, open: false }\n    case \"CLEAR\":\n      return { ...state, query: \"\" }\n    case \"CHANGE\":\n      return { ...state, query: action.payload.query, open: true }\n    case \"SELECT\":\n      return { ...state, query: action.payload.query, open: false }\n  }\n}\n\nexport interface AutocompleteInputProps<T extends AutocompleteInputOptionType>\n  extends Omit<InputProps, \"onSelect\" | \"onSubmit\"> {\n  /** Optionally enable clamping (default: `false`) */\n  clamp?: boolean\n  defaultValue?: string\n  dropdownMaxHeight?: ResponsiveValue<string | number>\n  dropdownMinWidth?: ResponsiveValue<string | number>\n  loading?: boolean\n  header?: React.ReactNode\n  /** Optionally disable flipping (default: `true`) */\n  flip?: boolean\n  footer?:\n    | React.ReactNode\n    | ((dropdownActions: AutocompleteFooterActions) => React.ReactNode)\n  /** Ref to the input; workaround generics */\n  forwardRef?: React.Ref<HTMLInputElement>\n  /** on <enter> when no option is selected */\n  onSubmit?(query: string): void\n  /** on <click> or <enter> when an option is selected */\n  onSelect?(option: T, index: number): void\n  /** on <click> of the 'x' (clear) button */\n  onClear?(): void\n  /** Callback that runs when options are hidden */\n  onClose?(): void\n  options: T[]\n  renderOption?(\n    option: T,\n    i: number\n  ): React.ReactElement<any, string | React.JSXElementConstructor<any>>\n}\n\n/** AutocompleteInput */\nexport const AutocompleteInput = <T extends AutocompleteInputOptionType>({\n  clamp = false,\n  defaultValue = \"\",\n  dropdownMaxHeight = 308, // 308 = roughly 5.5 options\n  dropdownMinWidth,\n  flip = true,\n  footer,\n  forwardRef: forwardedRef,\n  header,\n  height,\n  id,\n  loading,\n  onChange,\n  onClear,\n  onClose,\n  onKeyDown,\n  onSelect,\n  onSubmit,\n  options,\n  renderOption = (option) => <AutocompleteInputOptionLabel {...option} />,\n  ...rest\n}: AutocompleteInputProps<T>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const headerRef = useRef<HTMLDivElement | null>(null)\n  const footerRef = useRef<HTMLDivElement | null>(null)\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const [state, dispatch] = useReducer(reducer, {\n    open: false,\n    query: defaultValue,\n  })\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const resetUI = () => {\n    setTimeout(() => {\n      inputRef.current?.focus()\n      reset()\n      dispatch({ type: \"CLOSE\" })\n    }, 100)\n  }\n\n  const handleSelect = (option: T, index: number) => {\n    dispatch({ type: \"SELECT\", payload: { query: option.text } })\n    inputRef.current?.focus()\n    onSelect?.(option, index)\n  }\n\n  const { index, reset, set } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: options,\n    waitForInteractive: true,\n    onEnter: ({ element: option, index: i, event }) => {\n      event.preventDefault()\n      event.stopPropagation()\n      handleSelect(option, i)\n      resetUI()\n    },\n  })\n\n  const isDropdownVisible = state.open && options.length > 0\n\n  // Reset keyboard navigation when options change\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(reset, [options])\n\n  // Reset keyboard navigation when query is empty\n  useEffect(() => {\n    if (state.query === \"\") reset()\n  }, [reset, state.query])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    active: isDropdownVisible,\n    clamp,\n    flip,\n    key: options.length,\n    offset: 0,\n    position: \"bottom\",\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  const handleFocus = () => {\n    reset()\n    dispatch({ type: \"OPEN\" })\n  }\n\n  const handleMouseDown = (option: T, i: number) => () => {\n    handleSelect(option, i)\n    resetUI()\n  }\n\n  const handleClick = () => {\n    dispatch({ type: \"OPEN\" })\n  }\n\n  // Records the latest mouse movement and, inside the `handleMouseEnter` callback,\n  // only treat the event as genuine if the mouse has moved very recently.\n  // Otherwise, the event is presumed to have been triggered by scrolling and is ignored.\n  const { lastMouseMoveTimestamp } = useMouseActivity()\n\n  const handleMouseEnter = (i: number) => () => {\n    const now = performance.now()\n\n    // 50ms mouse move window\n    if (now - lastMouseMoveTimestamp.current < 50) {\n      set({ cursor: i, interactive: true })\n    }\n  }\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      currentTarget: { value },\n    } = event\n\n    dispatch({ type: \"CHANGE\", payload: { query: value } })\n    onChange?.(event)\n  }\n\n  const handleClearOrSubmit = () => {\n    if (state.query === \"\") {\n      onSubmit?.(state.query)\n      return\n    }\n\n    dispatch({ type: \"CLEAR\" })\n    inputRef.current?.focus()\n    onClear?.()\n  }\n\n  const handleClose = useCallback(() => {\n    dispatch({ type: \"CLOSE\" })\n    reset()\n    onClose?.()\n  }, [onClose, reset])\n\n  const ignoreFocusChangeRef = useRef<boolean>(false)\n  const ignoreFocusChange = {\n    onMouseDown: () => (ignoreFocusChangeRef.current = true),\n    onMouseUp: () => (ignoreFocusChangeRef.current = false),\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const el = optionsWithRefs[index]?.ref?.current\n    if (!el) return\n\n    const isPointerInteraction =\n      performance.now() - lastMouseMoveTimestamp.current < 50\n\n    if (isPointerInteraction) {\n      // Pointer interactions should not cause scroll\n      el.focus({ preventScroll: true })\n      return\n    }\n\n    // Keyboard navigation: focus and ensure visibility\n    el.focus({ preventScroll: true })\n    try {\n      el.scrollIntoView({ block: \"nearest\" })\n    } catch {}\n  }, [index, optionsWithRefs])\n\n  const handleFocusChange = useCallback(\n    (focused: boolean) => {\n      if (ignoreFocusChangeRef.current || focused || !isDropdownVisible) return\n\n      handleClose()\n    },\n\n    [isDropdownVisible, handleClose]\n  )\n\n  // Handle closing the dropdown when clicking outside of the input\n  // or when focus leaves the input completely\n  const { ref: containsFocusRef } = useContainsFocus({\n    onChange: handleFocusChange,\n  })\n\n  useClickOutside({\n    ref: containsFocusRef,\n    onClickOutside: handleClose,\n    when: isDropdownVisible,\n    type: \"click\",\n  })\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      // Handle <Enter> when nothing is selected\n      case \"Enter\":\n        if (state.query !== \"\" && index === -1) {\n          onSubmit?.(state.query)\n          resetUI()\n        }\n        return\n\n      // <Esc> to close dropdown\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n\n        return\n\n      default:\n        break\n    }\n\n    onKeyDown?.(event)\n  }\n\n  // Moves focus back to input when typing\n  const handleContainerKeydown = (\n    event: React.KeyboardEvent<HTMLDivElement>\n  ) => {\n    switch (event.key) {\n      case \"Alt\":\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n      case \"Control\":\n      case \"Enter\":\n      case \"Meta\":\n      case \"Shift\":\n      case \"Tab\":\n        // Ignore\n        return\n\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n        reset()\n\n        return\n\n      default:\n        inputRef.current?.focus()\n    }\n  }\n\n  // Option that is being hovered or keyed into\n  const staged = options[index]\n\n  return (\n    <Box\n      ref={composeRefs(containerRef, containsFocusRef) as any}\n      onKeyDown={handleContainerKeydown}\n      {...boxProps}\n    >\n      <LabeledInput\n        ref={composeRefs(inputRef, anchorRef, forwardedRef) as any}\n        role=\"combobox\"\n        aria-expanded={isDropdownVisible}\n        aria-autocomplete=\"list\"\n        {...(id ? { id, \"aria-describedby\": `${id}__assistiveHint` } : {})}\n        label={\n          loading ? (\n            <Box width={18}>\n              <Spinner size=\"small\" />\n            </Box>\n          ) : state.query ? (\n            <Clickable\n              onClick={handleClearOrSubmit}\n              height=\"100%\"\n              display=\"flex\"\n              alignItems=\"center\"\n              aria-label=\"Clear input\"\n            >\n              <CloseIcon fill=\"mono60\" aria-hidden />\n            </Clickable>\n          ) : (\n            <SearchIcon fill=\"mono60\" aria-hidden />\n          )\n        }\n        value={staged?.text ?? state.query}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleInputKeydown}\n        onClick={handleClick}\n        autoComplete=\"off\"\n        height={height}\n        {...inputProps}\n      />\n\n      {isDropdownVisible && (\n        <AutocompleteInputDropdownContainer\n          ref={tooltipRef as any}\n          role=\"listbox\"\n          width={width}\n          minWidth={200}\n          pt={1} // Gap in place of `offset` for `usePosition`\n        >\n          <AutocompleteInputDropdown minWidth={dropdownMinWidth}>\n            <div ref={headerRef} {...ignoreFocusChange}>\n              {header}\n            </div>\n\n            <AutocompleteInputOptions maxHeight={dropdownMaxHeight}>\n              {optionsWithRefs.map(({ option, ref }, i) => {\n                return (\n                  <AutocompleteInputOption\n                    key={i}\n                    ref={ref}\n                    role=\"option\"\n                    aria-selected={i === index}\n                    aria-posinset={i + 1}\n                    aria-setsize={options.length}\n                    onMouseDown={handleMouseDown(option, i)}\n                    onMouseEnter={handleMouseEnter(i)}\n                    tabIndex={-1}\n                  >\n                    {renderOption(option, i)}\n                  </AutocompleteInputOption>\n                )\n              })}\n            </AutocompleteInputOptions>\n\n            <div ref={footerRef} {...ignoreFocusChange}>\n              {typeof footer === \"function\"\n                ? footer({ onClose: handleClose })\n                : footer}\n            </div>\n          </AutocompleteInputDropdown>\n        </AutocompleteInputDropdownContainer>\n      )}\n\n      <VisuallyHidden {...(id ? { id: `${id}__assistiveHint` } : {})}>\n        When autocomplete results are available use up and down arrows to review\n        and enter to select. Touch device users, explore by touch or with swipe\n        gestures.\n      </VisuallyHidden>\n\n      {isDropdownVisible && (\n        <VisuallyHidden role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n          {options.length === 1\n            ? `1 result is available`\n            : `${options.length} results are available`}\n        </VisuallyHidden>\n      )}\n    </Box>\n  )\n}\n\nconst AutocompleteInputDropdownContainer = styled(Box)`\n  z-index: 1;\n`\n\nconst AutocompleteInputDropdown = styled(Box)`\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n`\n\nconst AutocompleteInputOptions = styled(Box)`\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"mappings":"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"}

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

@@ -0,0 +1,126 @@
+import { fn } from "@storybook/test";
+import { AutocompleteInput } from "./AutocompleteInput";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+import { Box } from "../Box/Box";
+import React from "react";
+import styled from "styled-components";
+export default {
+  title: "Components/AutocompleteInput",
+  component: AutocompleteInput,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "AutocompleteInput component provides a text input with dropdown suggestions. Supports custom option rendering, loading states, and keyboard navigation."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+var OPTIONS = [{
+  text: "Painting",
+  value: "painting",
+  subtitle: "An example subtitle"
+}, {
+  text: "Print",
+  value: "print",
+  subtitle: "An example subtitle"
+}, {
+  text: "Sculpture",
+  value: "sculpture",
+  subtitle: "An example subtitle"
+}, {
+  text: "Photography",
+  value: "photography",
+  subtitle: "An example subtitle"
+}, {
+  text: "Mixed Media",
+  value: "mixed-media",
+  subtitle: "An example subtitle"
+}];
+export var Default = {
+  args: {
+    title: "Search Medium",
+    placeholder: "Start typing...",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var WithTitle = {
+  args: {
+    title: "Artwork Category",
+    placeholder: "Select a category...",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var Required = {
+  args: {
+    title: "Required Field",
+    required: true,
+    placeholder: "This field is required",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var WithError = {
+  args: {
+    title: "Category",
+    error: "Please select a valid category",
+    placeholder: "Select category...",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var Loading = {
+  args: {
+    title: "Loading Categories",
+    loading: true,
+    placeholder: "Loading options...",
+    options: [],
+    onSelect: fn()
+  }
+};
+export var Disabled = {
+  args: {
+    title: "Disabled Input",
+    disabled: true,
+    placeholder: "Cannot select",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var WithDescription = {
+  args: {
+    title: "Category Selection",
+    description: "Choose the primary medium for this artwork",
+    placeholder: "Select medium...",
+    options: OPTIONS,
+    onSelect: fn()
+  }
+};
+export var EmptyOptions = {
+  args: {
+    title: "No Options",
+    placeholder: "No options available",
+    options: [],
+    onSelect: fn()
+  }
+};
+export var WithHoverableUnderlay = function WithHoverableUnderlay() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AutocompleteInput, {
+    title: "Search Medium",
+    placeholder: "Start typing...",
+    options: OPTIONS,
+    onSelect: fn()
+  }), /*#__PURE__*/React.createElement(Underlay, {
+    p: 2
+  }, "This should not turn red when moving from input to results"));
+};
+var Underlay = styled(Box).withConfig({
+  displayName: "AutocompleteInputstory__Underlay",
+  componentId: "sc-uqsb24-0"
+})(["&:hover{background-color:red;}"]);
+//# sourceMappingURL=AutocompleteInput.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.story.js","names":["fn","AutocompleteInput","STORYBOOK_PROPS_BLOCKLIST","Box","React","styled","title","component","tags","parameters","docs","description","controls","exclude","OPTIONS","text","value","subtitle","Default","args","placeholder","options","onSelect","WithTitle","Required","required","WithError","error","Loading","loading","Disabled","disabled","WithDescription","EmptyOptions","WithHoverableUnderlay","createElement","Fragment","Underlay","p","withConfig","displayName","componentId"],"sources":["../../../../src/elements/AutocompleteInput/AutocompleteInput.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport { AutocompleteInput } from \"./AutocompleteInput\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\nimport { Box } from \"../Box/Box\"\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nexport default {\n  title: \"Components/AutocompleteInput\",\n  component: AutocompleteInput,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"AutocompleteInput component provides a text input with dropdown suggestions. Supports custom option rendering, loading states, and keyboard navigation.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nconst OPTIONS = [\n  {\n    text: \"Painting\",\n    value: \"painting\",\n    subtitle: \"An example subtitle\",\n  },\n  { text: \"Print\", value: \"print\", subtitle: \"An example subtitle\" },\n  { text: \"Sculpture\", value: \"sculpture\", subtitle: \"An example subtitle\" },\n  {\n    text: \"Photography\",\n    value: \"photography\",\n    subtitle: \"An example subtitle\",\n  },\n  {\n    text: \"Mixed Media\",\n    value: \"mixed-media\",\n    subtitle: \"An example subtitle\",\n  },\n]\n\nexport const Default = {\n  args: {\n    title: \"Search Medium\",\n    placeholder: \"Start typing...\",\n    options: OPTIONS,\n    onSelect: fn(),\n  },\n}\n\nexport const WithTitle = {\n  args: {\n    title: \"Artwork Category\",\n    placeholder: \"Select a category...\",\n    options: OPTIONS,\n    onSelect: fn(),\n  },\n}\n\nexport const Required = {\n  args: {\n    title: \"Required Field\",\n    required: true,\n    placeholder: \"This field is required\",\n    options: OPTIONS,\n    onSelect: fn(),\n  },\n}\n\nexport const WithError = {\n  args: {\n    title: \"Category\",\n    error: \"Please select a valid category\",\n    placeholder: \"Select category...\",\n    options: OPTIONS,\n    onSelect: fn(),\n  },\n}\n\nexport const Loading = {\n  args: {\n    title: \"Loading Categories\",\n    loading: true,\n    placeholder: \"Loading options...\",\n    options: [],\n    onSelect: fn(),\n  },\n}\n\nexport const Disabled = {\n  args: {\n    title: \"Disabled Input\",\n    disabled: true,\n    placeholder: \"Cannot select\",\n    options: OPTIONS,\n    onSelect: fn(),\n  },\n}\n\nexport const WithDescription = {\n  args: {\n    title: \"Category Selection\",\n    description: \"Choose the primary medium for this artwork\",\n    placeholder: \"Select medium...\",\n    options: OPTIONS,\n    onSelect: fn(),\n  },\n}\n\nexport const EmptyOptions = {\n  args: {\n    title: \"No Options\",\n    placeholder: \"No options available\",\n    options: [],\n    onSelect: fn(),\n  },\n}\n\nexport const WithHoverableUnderlay = () => {\n  return (\n    <>\n      <AutocompleteInput\n        title=\"Search Medium\"\n        placeholder=\"Start typing...\"\n        options={OPTIONS}\n        onSelect={fn()}\n      />\n\n      <Underlay p={2}>\n        This should not turn red when moving from input to results\n      </Underlay>\n    </>\n  )\n}\n\nconst Underlay = styled(Box)`\n  &:hover {\n    background-color: red;\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/AutocompleteInput/AutocompleteInputOption.js

@@ -0,0 +1,24 @@
+var _excluded = ["children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import composeRefs from "@seznam/compose-react-refs";
+import { themeGet } from "@styled-system/theme-get";
+import React, { forwardRef, useRef } from "react";
+import styled from "styled-components";
+import { Clickable } from "../Clickable";
+export var AutocompleteInputOption = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef(null);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: composeRefs(ref, forwardedRef),
+    bg: "mono0"
+  }, rest), children);
+});
+AutocompleteInputOption.displayName = "AutocompleteInputOption";
+var Container = styled(Clickable).withConfig({
+  displayName: "AutocompleteInputOption__Container",
+  componentId: "sc-fz5j3u-0"
+})(["display:block;width:100%;&:focus,&:active{outline:0;background-color:", ";}"], themeGet("colors.mono5"));
+//# sourceMappingURL=AutocompleteInputOption.js.map

package/dist/esm/elements/AutocompleteInput/AutocompleteInputOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInputOption.js","names":["composeRefs","themeGet","React","forwardRef","useRef","styled","Clickable","AutocompleteInputOption","_ref","forwardedRef","children","rest","_objectWithoutProperties","_excluded","ref","createElement","Container","_extends","bg","displayName","withConfig","componentId"],"sources":["../../../../src/elements/AutocompleteInput/AutocompleteInputOption.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useRef } from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\nexport type AutocompleteInputOptionProps = ClickableProps\n\nexport const AutocompleteInputOption = forwardRef<\n  HTMLButtonElement,\n  AutocompleteInputOptionProps\n>(({ children, ...rest }, forwardedRef) => {\n  const ref = useRef<HTMLButtonElement | null>(null)\n\n  return (\n    <Container ref={composeRefs(ref, forwardedRef) as any} bg=\"mono0\" {...rest}>\n      {children}\n    </Container>\n  )\n})\n\nAutocompleteInputOption.displayName = \"AutocompleteInputOption\"\n\nconst Container = styled(Clickable)`\n  display: block;\n  width: 100%;\n\n  &:focus,\n  &:active {\n    outline: 0;\n    background-color: ${themeGet(\"colors.mono5\")};\n  }\n`\n"],"mappings":";;;;AAAA,OAAOA,WAAW,MAAM,4BAA4B;AACpD,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AACjD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS;AAIlB,OAAO,IAAMC,uBAAuB,gBAAGJ,UAAU,CAG/C,UAAAK,IAAA,EAAwBC,YAAY,EAAK;EAAA,IAAtCC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACpB,IAAMC,GAAG,GAAGV,MAAM,CAA2B,IAAI,CAAC;EAElD,oBACEF,KAAA,CAAAa,aAAA,CAACC,SAAS,EAAAC,QAAA;IAACH,GAAG,EAAEd,WAAW,CAACc,GAAG,EAAEL,YAAY,CAAS;IAACS,EAAE,EAAC;EAAO,GAAKP,IAAI,GACvED,QAAQ,CACC;AAEhB,CAAC,CAAC;AAEFH,uBAAuB,CAACY,WAAW,GAAG,yBAAyB;AAE/D,IAAMH,SAAS,GAAGX,MAAM,CAACC,SAAS,CAAC,CAAAc,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,oFAOXpB,QAAQ,CAAC,cAAc,CAAC,CAE/C"}

package/dist/esm/elements/AutocompleteInput/AutocompleteInputOptionLabel.js

@@ -0,0 +1,18 @@
+var _excluded = ["text"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import { Text } from "../Text";
+export var AutocompleteInputOptionLabel = function AutocompleteInputOptionLabel(_ref) {
+  var text = _ref.text,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    variant: "sm-display",
+    lineHeight: 1,
+    p: 2,
+    overflowEllipsis: true
+  }, rest), text);
+};
+AutocompleteInputOptionLabel.displayName = "AutocompleteInputOptionLabel";
+//# sourceMappingURL=AutocompleteInputOptionLabel.js.map

package/dist/esm/elements/AutocompleteInput/AutocompleteInputOptionLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInputOptionLabel.js","names":["React","Text","AutocompleteInputOptionLabel","_ref","text","rest","_objectWithoutProperties","_excluded","createElement","_extends","variant","lineHeight","p","overflowEllipsis","displayName"],"sources":["../../../../src/elements/AutocompleteInput/AutocompleteInputOptionLabel.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text, TextProps } from \"../Text\"\n\nexport interface AutocompleteInputOptionLabelProps extends TextProps {\n  text: string\n}\n\nexport const AutocompleteInputOptionLabel: React.FC<React.PropsWithChildren<AutocompleteInputOptionLabelProps>> = ({\n  text,\n  ...rest\n}) => {\n  return (\n    <Text variant=\"sm-display\" lineHeight={1} p={2} overflowEllipsis {...rest}>\n      {text}\n    </Text>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AAMb,OAAO,IAAMC,4BAAkG,GAAG,SAArGA,4BAAkGA,CAAAC,IAAA,EAGzG;EAAA,IAFJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACDC,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAEP,oBACEP,KAAA,CAAAQ,aAAA,CAACP,IAAI,EAAAQ,QAAA;IAACC,OAAO,EAAC,YAAY;IAACC,UAAU,EAAE,CAAE;IAACC,CAAC,EAAE,CAAE;IAACC,gBAAgB;EAAA,GAAKR,IAAI,GACtED,IAAI,CACA;AAEX,CAAC;AATYF,4BAAkG,CAAAY,WAAA"}

package/dist/esm/elements/AutocompleteInput/index.js

@@ -0,0 +1,4 @@
+export * from "./AutocompleteInput";
+export * from "./AutocompleteInputOption";
+export * from "./AutocompleteInputOptionLabel";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/AutocompleteInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/AutocompleteInput/index.ts"],"sourcesContent":["export * from \"./AutocompleteInput\"\nexport * from \"./AutocompleteInputOption\"\nexport * from \"./AutocompleteInputOptionLabel\"\n"],"mappings":"AAAA;AACA;AACA"}

package/dist/esm/elements/Avatar/Avatar.js

@@ -0,0 +1,99 @@
+var _excluded = ["src", "initials", "size", "lazyLoad"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useState } from "react";
+import { splitBoxProps } from "../Box";
+import { Flex } from "../Flex";
+import { Image } from "../Image";
+import { Text } from "../Text";
+var LENGTHS = {
+  xxs: 2,
+  xs: 2,
+  sm: 3,
+  md: 4
+};
+var TOKENS = {
+  fontWeight: "normal",
+  color: "mono100",
+  bg: "transparent",
+  xxs: {
+    diameter: 30,
+    variant: "xs"
+  },
+  xs: {
+    diameter: 45,
+    variant: "sm-display"
+  },
+  sm: {
+    diameter: 70,
+    variant: "md"
+  },
+  md: {
+    diameter: 100,
+    variant: "lg-display"
+  }
+};
+
+/** An circular Avatar component containing an image or initials */
+export var Avatar = function Avatar(_ref) {
+  var _TOKENS$size;
+  var src = _ref.src,
+    initials = _ref.initials,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$lazyLoad = _ref.lazyLoad,
+    lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState("OK"),
+    _useState2 = _slicedToArray(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var _splitBoxProps = splitBoxProps(rest),
+    _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+    boxProps = _splitBoxProps2[0],
+    imageProps = _splitBoxProps2[1];
+  var _ref2 = (_TOKENS$size = TOKENS[size]) !== null && _TOKENS$size !== void 0 ? _TOKENS$size : TOKENS.sm,
+    diameter = _ref2.diameter,
+    variant = _ref2.variant;
+  return /*#__PURE__*/React.createElement(Flex, _extends({
+    size: diameter,
+    bg: TOKENS.bg,
+    border: src ? "transparent" : "1px solid",
+    borderColor: "mono15",
+    borderRadius: "50%",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+    flexShrink: 0
+  }, boxProps), initials && /*#__PURE__*/React.createElement(Text, {
+    variant: variant,
+    fontWeight: TOKENS.fontWeight,
+    color: TOKENS.color,
+    lineHeight: 1
+  }, initials.slice(0, LENGTHS[size])), src && mode !== "Error" && /*#__PURE__*/React.createElement(Flex, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Image, _extends({
+    src: src,
+    width: "100%",
+    height: "100%",
+    lazyLoad: lazyLoad,
+    alt: initials !== null && initials !== void 0 ? initials : "",
+    onError: function onError() {
+      setMode("Error");
+    }
+  }, imageProps))));
+};
+Avatar.displayName = "Avatar";
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":["React","useState","splitBoxProps","Flex","Image","Text","LENGTHS","xxs","xs","sm","md","TOKENS","fontWeight","color","bg","diameter","variant","Avatar","_ref","_TOKENS$size","src","initials","_ref$size","size","_ref$lazyLoad","lazyLoad","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","mode","setMode","_splitBoxProps","_splitBoxProps2","boxProps","imageProps","_ref2","createElement","_extends","border","borderColor","borderRadius","alignItems","justifyContent","position","overflow","flexShrink","lineHeight","slice","top","left","width","height","alt","onError","displayName"],"sources":["../../../../src/elements/Avatar/Avatar.tsx"],"sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport React, { useState } from \"react\"\nimport { splitBoxProps } from \"../Box\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Text } from \"../Text\"\n\nexport interface AvatarProps extends FlexProps, Partial<ImageProps> {\n  /** If an image is missing, show initials instead */\n  initials?: string\n  /** The size of the Avatar */\n  size?: \"xxs\" | \"xs\" | \"sm\" | \"md\"\n}\n\nconst LENGTHS = {\n  xxs: 2,\n  xs: 2,\n  sm: 3,\n  md: 4,\n}\n\nconst TOKENS = {\n  fontWeight: \"normal\",\n  color: \"mono100\",\n  bg: \"transparent\",\n  xxs: {\n    diameter: 30,\n    variant: \"xs\" as TextVariant,\n  },\n  xs: {\n    diameter: 45,\n    variant: \"sm-display\" as TextVariant,\n  },\n  sm: {\n    diameter: 70,\n    variant: \"md\" as TextVariant,\n  },\n  md: {\n    diameter: 100,\n    variant: \"lg-display\" as TextVariant,\n  },\n}\n\n/** An circular Avatar component containing an image or initials */\nexport const Avatar: React.FC<React.PropsWithChildren<AvatarProps>> = ({\n  src,\n  initials,\n  size = \"md\",\n  lazyLoad = false,\n  ...rest\n}) => {\n  const [mode, setMode] = useState<\"OK\" | \"Error\">(\"OK\")\n\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  const { diameter, variant } = TOKENS[size] ?? TOKENS.sm\n\n  return (\n    <Flex\n      size={diameter}\n      bg={TOKENS.bg}\n      border={src ? \"transparent\" : \"1px solid\"}\n      borderColor=\"mono15\"\n      borderRadius=\"50%\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      flexShrink={0}\n      {...boxProps}\n    >\n      {initials && (\n        <Text\n          variant={variant}\n          fontWeight={TOKENS.fontWeight}\n          color={TOKENS.color}\n          lineHeight={1}\n        >\n          {initials.slice(0, LENGTHS[size])}\n        </Text>\n      )}\n\n      {src && mode !== \"Error\" && (\n        <Flex position=\"absolute\" top={0} left={0} width=\"100%\" height=\"100%\">\n          <Image\n            src={src}\n            width=\"100%\"\n            height=\"100%\"\n            lazyLoad={lazyLoad}\n            alt={initials ?? \"\"}\n            onError={() => {\n              setMode(\"Error\")\n            }}\n            {...imageProps}\n          />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+import { Avatar } from "./Avatar";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Avatar component displays user profile images or initials in various sizes. Supports lazy loading, fallback to initials when image fails to load, and responsive sizing."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  args: {
+    initials: "JD",
+    size: "md"
+  }
+};
+export var WithImageBasic = {
+  args: {
+    src: "https://picsum.photos/seed/example/110/110",
+    srcSet: "https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x",
+    initials: "JD",
+    size: "md",
+    lazyLoad: true
+  }
+};
+export var Small = {
+  args: {
+    initials: "SM",
+    size: "sm"
+  }
+};
+export var Large = {
+  args: {
+    initials: "LG",
+    size: "lg"
+  }
+};
+export var ExtraSmall = {
+  args: {
+    initials: "XS",
+    size: "xs"
+  }
+};
+export var ExtraExtraSmall = {
+  args: {
+    initials: "XX",
+    size: "xxs"
+  }
+};
+export var WithBrokenImage = {
+  args: {
+    src: "https://example.com/broken.jpg",
+    srcSet: "https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x",
+    initials: "TK",
+    size: "md"
+  }
+};
+export var WithLazyLoadBrokenImage = {
+  args: {
+    src: "https://example.com/broken.jpg",
+    srcSet: "https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x",
+    initials: "TK",
+    size: "md",
+    lazyLoad: true
+  }
+};
+export var LongInitials = {
+  args: {
+    initials: "LONGER",
+    size: "md"
+  }
+};
+//# sourceMappingURL=Avatar.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.story.js","names":["Avatar","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","initials","size","WithImageBasic","src","srcSet","lazyLoad","Small","Large","ExtraSmall","ExtraExtraSmall","WithBrokenImage","WithLazyLoadBrokenImage","LongInitials"],"sources":["../../../../src/elements/Avatar/Avatar.story.tsx"],"sourcesContent":["import { Avatar } from \"./Avatar\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Avatar\",\n  component: Avatar,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Avatar component displays user profile images or initials in various sizes. Supports lazy loading, fallback to initials when image fails to load, and responsive sizing.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    initials: \"JD\",\n    size: \"md\",\n  },\n}\n\nexport const WithImageBasic = {\n  args: {\n    src: \"https://picsum.photos/seed/example/110/110\",\n    srcSet:\n      \"https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x\",\n    initials: \"JD\",\n    size: \"md\",\n    lazyLoad: true,\n  },\n}\n\nexport const Small = {\n  args: {\n    initials: \"SM\",\n    size: \"sm\",\n  },\n}\n\nexport const Large = {\n  args: {\n    initials: \"LG\",\n    size: \"lg\",\n  },\n}\n\nexport const ExtraSmall = {\n  args: {\n    initials: \"XS\",\n    size: \"xs\",\n  },\n}\n\nexport const ExtraExtraSmall = {\n  args: {\n    initials: \"XX\",\n    size: \"xxs\",\n  },\n}\n\nexport const WithBrokenImage = {\n  args: {\n    src: \"https://example.com/broken.jpg\",\n    srcSet:\n      \"https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x\",\n    initials: \"TK\",\n    size: \"md\",\n  },\n}\n\nexport const WithLazyLoadBrokenImage = {\n  args: {\n    src: \"https://example.com/broken.jpg\",\n    srcSet:\n      \"https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x\",\n    initials: \"TK\",\n    size: \"md\",\n    lazyLoad: true,\n  },\n}\n\nexport const LongInitials = {\n  args: {\n    initials: \"LONGER\",\n    size: \"md\",\n  },\n}\n"],"mappings":"AAAA,SAASA,MAAM;AACf,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,mBAAmB;EAC1BC,SAAS,EAAEH,MAAM;EACjBI,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXJ,SAAS,EACP;MACJ,CAAC;MACDK,QAAQ,EAAE;QACRC,OAAO,EAAER;MACX;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAED,OAAO,IAAMC,cAAc,GAAG;EAC5BH,IAAI,EAAE;IACJI,GAAG,EAAE,4CAA4C;IACjDC,MAAM,EACJ,8FAA8F;IAChGJ,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE,IAAI;IACVI,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMC,KAAK,GAAG;EACnBP,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAED,OAAO,IAAMM,KAAK,GAAG;EACnBR,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAED,OAAO,IAAMO,UAAU,GAAG;EACxBT,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAED,OAAO,IAAMQ,eAAe,GAAG;EAC7BV,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAED,OAAO,IAAMS,eAAe,GAAG;EAC7BX,IAAI,EAAE;IACJI,GAAG,EAAE,gCAAgC;IACrCC,MAAM,EACJ,sEAAsE;IACxEJ,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAED,OAAO,IAAMU,uBAAuB,GAAG;EACrCZ,IAAI,EAAE;IACJI,GAAG,EAAE,gCAAgC;IACrCC,MAAM,EACJ,sEAAsE;IACxEJ,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE,IAAI;IACVI,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMO,YAAY,GAAG;EAC1Bb,IAAI,EAAE;IACJC,QAAQ,EAAE,QAAQ;IAClBC,IAAI,EAAE;EACR;AACF,CAAC"}

package/dist/esm/elements/Avatar/index.js

@@ -0,0 +1,2 @@
+export * from "./Avatar";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Avatar/index.tsx"],"sourcesContent":["export * from \"./Avatar\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Banner/Banner.js

@@ -0,0 +1,95 @@
+var _excluded = ["dismissable", "variant", "onClose", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useState } from "react";
+import styled from "styled-components";
+import { variant } from "styled-system";
+import CloseIcon from "@artsy/icons/CloseIcon";
+import { Clickable } from "../Clickable";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+/** A banner */
+export var Banner = function Banner(_ref) {
+  var _ref$dismissable = _ref.dismissable,
+    dismissable = _ref$dismissable === void 0 ? false : _ref$dismissable,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "defaultLight" : _ref$variant,
+    onClose = _ref.onClose,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dismissed = _useState2[0],
+    setDismissed = _useState2[1];
+  var handleClick = function handleClick() {
+    if (onClose) {
+      onClose();
+    }
+    setDismissed(true);
+  };
+  if (dismissed) return null;
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    position: "relative",
+    py: 1,
+    px: 4,
+    variant: variant
+  }, rest), /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    flex: 1
+  }, children), dismissable && /*#__PURE__*/React.createElement(Clickable, {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    p: 1,
+    display: "flex",
+    alignItems: "center",
+    color: "currentColor",
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    style: {
+      fill: "currentcolor"
+    }
+  })));
+};
+Banner.displayName = "Banner";
+export var BANNER_VARIANTS = {
+  defaultLight: {
+    backgroundColor: "mono10",
+    color: "mono100"
+  },
+  defaultDark: {
+    backgroundColor: "mono100",
+    color: "mono0"
+  },
+  success: {
+    backgroundColor: "green100",
+    color: "mono0"
+  },
+  error: {
+    backgroundColor: "red100",
+    color: "mono0"
+  },
+  brand: {
+    backgroundColor: "brand",
+    color: "mono0"
+  }
+};
+var Container = styled(Flex).withConfig({
+  displayName: "Banner__Container",
+  componentId: "sc-1bfmimv-0"
+})(["", ""], variant({
+  variants: BANNER_VARIANTS
+}));
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","names":["React","useState","styled","variant","CloseIcon","Clickable","Flex","Text","Banner","_ref","_ref$dismissable","dismissable","_ref$variant","onClose","children","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","dismissed","setDismissed","handleClick","createElement","Container","_extends","position","py","px","display","alignItems","justifyContent","textAlign","flex","top","right","bottom","p","color","onClick","style","fill","displayName","BANNER_VARIANTS","defaultLight","backgroundColor","defaultDark","success","error","brand","withConfig","componentId","variants"],"sources":["../../../../src/elements/Banner/Banner.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport type BannerVariant = keyof typeof BANNER_VARIANTS\n\nexport interface BannerProps extends FlexProps {\n  variant?: BannerVariant\n  dismissable?: boolean\n  onClose?: () => void\n}\n\n/** A banner */\nexport const Banner: React.FC<React.PropsWithChildren<BannerProps>> = ({\n  dismissable = false,\n  variant = \"defaultLight\",\n  onClose,\n  children,\n  ...rest\n}) => {\n  const [dismissed, setDismissed] = useState(false)\n\n  const handleClick = () => {\n    if (onClose) {\n      onClose()\n    }\n    setDismissed(true)\n  }\n\n  if (dismissed) return null\n\n  return (\n    <Container position=\"relative\" py={1} px={4} variant={variant} {...rest}>\n      <Text\n        variant=\"xs\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        textAlign=\"center\"\n        flex={1}\n      >\n        {children}\n      </Text>\n\n      {dismissable && (\n        <Clickable\n          position=\"absolute\"\n          top={0}\n          right={0}\n          bottom={0}\n          p={1}\n          display=\"flex\"\n          alignItems=\"center\"\n          color=\"currentColor\"\n          onClick={handleClick}\n        >\n          <CloseIcon style={{ fill: \"currentcolor\" }} />\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nexport const BANNER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"mono0\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"mono0\",\n  },\n  brand: {\n    backgroundColor: \"brand\",\n    color: \"mono0\",\n  },\n}\n\nconst Container = styled(Flex)<{ variant: BannerVariant }>`\n  ${variant({ variants: BANNER_VARIANTS })}\n`\n"],"mappings":"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"}