@artsy/palette 31.3.1 → 31.4.1

package/dist/elements/AutocompleteInput/AutocompleteInput.d.ts

@@ -8,6 +8,7 @@ export interface AutocompleteInputOptionType {
 export interface AutocompleteInputProps<T extends AutocompleteInputOptionType> extends Omit<InputProps, "onSelect" | "onSubmit"> {
     defaultValue?: string;
     loading?: boolean;
+    header?: React.ReactNode;
     footer?: React.ReactNode;
     /** on <enter> when no option is selected */
     onSubmit?(query: string): void;
@@ -21,4 +22,4 @@ export interface AutocompleteInputProps<T extends AutocompleteInputOptionType> e
     options: T[];
 }
 /** AutocompleteInput */
-export declare const AutocompleteInput: <T extends AutocompleteInputOptionType>({ defaultValue, id, loading, footer, onSubmit, onSelect, onChange, onClear, onClose, onKeyDown, height, renderOption, options, ...rest }: AutocompleteInputProps<T>) => JSX.Element;
+export declare const AutocompleteInput: <T extends AutocompleteInputOptionType>({ defaultValue, id, loading, header, footer, onSubmit, onSelect, onChange, onClear, onClose, onKeyDown, height, renderOption, options, ...rest }: AutocompleteInputProps<T>) => JSX.Element;

package/dist/elements/AutocompleteInput/AutocompleteInput.js

@@ -39,7 +39,7 @@ var _AutocompleteInputOption = require("./AutocompleteInputOption");
 
 var _AutocompleteInputOptionLabel = require("./AutocompleteInputOptionLabel");
 
-var _excluded = ["defaultValue", "id", "loading", "footer", "onSubmit", "onSelect", "onChange", "onClear", "onClose", "onKeyDown", "height", "renderOption", "options"];
+var _excluded = ["defaultValue", "id", "loading", "header", "footer", "onSubmit", "onSelect", "onChange", "onClear", "onClose", "onKeyDown", "height", "renderOption", "options"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -110,6 +110,7 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
       defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       id = _ref.id,
       loading = _ref.loading,
+      header = _ref.header,
       footer = _ref.footer,
       onSubmit = _ref.onSubmit,
       onSelect = _ref.onSelect,
@@ -389,7 +390,7 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
     ref: tooltipRef,
     role: "listbox",
     width: width
-  }, /*#__PURE__*/_react.default.createElement(AutocompleteInputOptions, null, optionsWithRefs.map(function (_ref3, i) {
+  }, header, /*#__PURE__*/_react.default.createElement(AutocompleteInputOptions, null, optionsWithRefs.map(function (_ref3, i) {
     var option = _ref3.option,
         ref = _ref3.ref;
     return /*#__PURE__*/_react.default.createElement(_AutocompleteInputOption.AutocompleteInputOption, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.tsx"],"names":["reducer","state","action","type","open","query","payload","AutocompleteInput","defaultValue","id","loading","footer","onSubmit","onSelect","onChange","onClear","onClose","onKeyDown","height","renderOption","option","options","rest","inputRef","containerRef","boxProps","inputProps","dispatch","optionsWithRefs","map","ref","resetUI","setTimeout","current","focus","reset","handleSelect","index","text","list","waitForInteractive","onEnter","element","i","event","preventDefault","stopPropagation","set","isDropdownVisible","length","position","offset","active","anchorRef","tooltipRef","width","handleFocus","handleMouseDown","handleMouseEnter","cursor","interactive","handleChange","value","currentTarget","handleClearOrSubmit","handleFocusChange","focused","containsFocusRef","handleInputKeydown","key","blur","handleContainerKeydown","staged","AutocompleteInputDropdown","Box","DROP_SHADOW","AutocompleteInputOptions"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { Spinner } from \"..\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport SearchIcon from \"@artsy/icons/SearchIcon\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { usePosition, useContainsFocus } from \"../../utils\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { AutocompleteInputOption } from \"./AutocompleteInputOption\"\nimport { AutocompleteInputOptionLabel } from \"./AutocompleteInputOptionLabel\"\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  defaultValue?: string\n  loading?: boolean\n  footer?: React.ReactNode\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  renderOption?(\n    option: T,\n    i: number\n  ): React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  options: T[]\n}\n\n/** AutocompleteInput */\nexport const AutocompleteInput = <T extends AutocompleteInputOptionType>({\n  defaultValue = \"\",\n  id,\n  loading,\n  footer,\n  onSubmit,\n  onSelect,\n  onChange,\n  onClear,\n  onClose,\n  onKeyDown,\n  height,\n  renderOption = (option) => <AutocompleteInputOptionLabel {...option} />,\n  options,\n  ...rest\n}: AutocompleteInputProps<T>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const containerRef = 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    position: \"bottom\",\n    offset: 10,\n    active: isDropdownVisible,\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 handleMouseEnter = (i: number) => () => {\n    set({ cursor: i, interactive: true })\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  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = optionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, optionsWithRefs])\n\n  const handleFocusChange = useCallback(\n    (focused: boolean) => {\n      if (focused || !isDropdownVisible) return\n\n      dispatch({ type: \"CLOSE\" })\n      reset()\n      onClose?.()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onClose, isDropdownVisible]\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  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) 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=\"black60\" aria-hidden />\n            </Clickable>\n          ) : (\n            <SearchIcon fill=\"black60\" aria-hidden />\n          )\n        }\n        value={staged?.text ?? state.query}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleInputKeydown}\n        autoComplete=\"off\"\n        height={height}\n        {...inputProps}\n      />\n\n      {isDropdownVisible && (\n        <AutocompleteInputDropdown\n          ref={tooltipRef as any}\n          role=\"listbox\"\n          width={width}\n        >\n          <AutocompleteInputOptions>\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                  selected={i === index}\n                  tabIndex={-1}\n                >\n                  {renderOption(option, i)}\n                </AutocompleteInputOption>\n              )\n            })}\n          </AutocompleteInputOptions>\n\n          {footer}\n        </AutocompleteInputDropdown>\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 AutocompleteInputDropdown = styled(Box)`\n  box-shadow: ${DROP_SHADOW};\n  z-index: 1;\n`\n\nconst AutocompleteInputOptions = styled(Box)`\n  /* 308 = Roughly, 5.5 default sized options  */\n  max-height: 308px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"file":"AutocompleteInput.js"}
+{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.tsx"],"names":["reducer","state","action","type","open","query","payload","AutocompleteInput","defaultValue","id","loading","header","footer","onSubmit","onSelect","onChange","onClear","onClose","onKeyDown","height","renderOption","option","options","rest","inputRef","containerRef","boxProps","inputProps","dispatch","optionsWithRefs","map","ref","resetUI","setTimeout","current","focus","reset","handleSelect","index","text","list","waitForInteractive","onEnter","element","i","event","preventDefault","stopPropagation","set","isDropdownVisible","length","position","offset","active","anchorRef","tooltipRef","width","handleFocus","handleMouseDown","handleMouseEnter","cursor","interactive","handleChange","value","currentTarget","handleClearOrSubmit","handleFocusChange","focused","containsFocusRef","handleInputKeydown","key","blur","handleContainerKeydown","staged","AutocompleteInputDropdown","Box","DROP_SHADOW","AutocompleteInputOptions"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { Spinner } from \"..\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport SearchIcon from \"@artsy/icons/SearchIcon\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { usePosition, useContainsFocus } from \"../../utils\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { AutocompleteInputOption } from \"./AutocompleteInputOption\"\nimport { AutocompleteInputOptionLabel } from \"./AutocompleteInputOptionLabel\"\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  defaultValue?: string\n  loading?: boolean\n  header?: React.ReactNode\n  footer?: React.ReactNode\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  renderOption?(\n    option: T,\n    i: number\n  ): React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  options: T[]\n}\n\n/** AutocompleteInput */\nexport const AutocompleteInput = <T extends AutocompleteInputOptionType>({\n  defaultValue = \"\",\n  id,\n  loading,\n  header,\n  footer,\n  onSubmit,\n  onSelect,\n  onChange,\n  onClear,\n  onClose,\n  onKeyDown,\n  height,\n  renderOption = (option) => <AutocompleteInputOptionLabel {...option} />,\n  options,\n  ...rest\n}: AutocompleteInputProps<T>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const containerRef = 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    position: \"bottom\",\n    offset: 10,\n    active: isDropdownVisible,\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 handleMouseEnter = (i: number) => () => {\n    set({ cursor: i, interactive: true })\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  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = optionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, optionsWithRefs])\n\n  const handleFocusChange = useCallback(\n    (focused: boolean) => {\n      if (focused || !isDropdownVisible) return\n\n      dispatch({ type: \"CLOSE\" })\n      reset()\n      onClose?.()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onClose, isDropdownVisible]\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  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) 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=\"black60\" aria-hidden />\n            </Clickable>\n          ) : (\n            <SearchIcon fill=\"black60\" aria-hidden />\n          )\n        }\n        value={staged?.text ?? state.query}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleInputKeydown}\n        autoComplete=\"off\"\n        height={height}\n        {...inputProps}\n      />\n\n      {isDropdownVisible && (\n        <AutocompleteInputDropdown\n          ref={tooltipRef as any}\n          role=\"listbox\"\n          width={width}\n        >\n          {header}\n          <AutocompleteInputOptions>\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                  selected={i === index}\n                  tabIndex={-1}\n                >\n                  {renderOption(option, i)}\n                </AutocompleteInputOption>\n              )\n            })}\n          </AutocompleteInputOptions>\n\n          {footer}\n        </AutocompleteInputDropdown>\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 AutocompleteInputDropdown = styled(Box)`\n  box-shadow: ${DROP_SHADOW};\n  z-index: 1;\n`\n\nconst AutocompleteInputOptions = styled(Box)`\n  /* 308 = Roughly, 5.5 default sized options  */\n  max-height: 308px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"file":"AutocompleteInput.js"}

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

@@ -125,6 +125,22 @@ var Default = function Default() {
       }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
         variant: "xs"
       }, "Footer"))
+    }, {
+      options: [OPTIONS[0], OPTIONS[1]],
+      header: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        px: 2,
+        py: 1,
+        bg: "black10"
+      }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs"
+      }, "Header")),
+      footer: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        px: 2,
+        py: 1,
+        bg: "black10"
+      }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs"
+      }, "Footer"))
     }]
   }, /*#__PURE__*/_react.default.createElement(_AutocompleteInput.AutocompleteInput, {
     placeholder: "Search",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.story.tsx"],"names":["title","OPTIONS","text","value","subtitle","Default","loading","options","height","map","option","renderOption","footer","Demo","query","setQuery","handleChange","event","target","i","displayQuery","borderBottom","borderColor"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { AutocompleteInput, AutocompleteInputProps } from \"./AutocompleteInput\"\n\nexport default {\n  title: \"Components/AutocompleteInput\",\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  return (\n    <States<Partial<AutocompleteInputProps<typeof OPTIONS[number]>>>\n      states={[\n        {},\n        { loading: true },\n        { options: [], height: 40 },\n        {\n          options: [\n            ...OPTIONS,\n            ...OPTIONS.map((option) => ({\n              ...option,\n              text: `Another ${option.text}`,\n              value: `another-${option.value}`,\n            })),\n          ],\n          renderOption: (option) => (\n            <Box px={2} py={1}>\n              <Text variant=\"sm-display\">{option.text}</Text>\n              <Text variant=\"xs\" color=\"black60\">\n                {option.subtitle}\n              </Text>\n            </Box>\n          ),\n        },\n        {\n          options: [\n            ...OPTIONS,\n            ...OPTIONS.map((option) => ({\n              ...option,\n              text: `Another ${option.text}`,\n              value: `another-${option.value}`,\n            })),\n          ],\n          footer: (\n            <Box px={2} py={1} bg=\"black10\">\n              <Text variant=\"xs\">Footer</Text>\n            </Box>\n          ),\n        },\n        {\n          options: [OPTIONS[0], OPTIONS[1]],\n          footer: (\n            <Box px={2} py={1} bg=\"black10\">\n              <Text variant=\"xs\">Footer</Text>\n            </Box>\n          ),\n        },\n      ]}\n    >\n      <AutocompleteInput\n        placeholder=\"Search\"\n        options={OPTIONS}\n        onSelect={action(\"onSelect\")}\n        onSubmit={action(\"onSubmit\")}\n        onClose={action(\"onClose\")}\n      />\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [query, setQuery] = useState(\"\")\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  return (\n    <AutocompleteInput\n      placeholder=\"Begin typing...\"\n      options={[...(query ? [{ text: query, value: query }] : []), ...OPTIONS]}\n      onChange={handleChange}\n      onSelect={action(\"onSelect\")}\n      onSubmit={action(\"onSubmit\")}\n      onClose={action(\"onClose\")}\n      renderOption={(option, i) => {\n        const displayQuery = i === 0 && query !== \"\"\n\n        return (\n          <Box\n            px={2}\n            py={1}\n            {...(displayQuery\n              ? { borderBottom: \"1px solid\", borderColor: \"black10\" }\n              : {})}\n          >\n            <Text variant=\"sm-display\">\n              {displayQuery\n                ? `See full results for “${option.text}”`\n                : option.text}\n            </Text>\n\n            {\"subtitle\" in option && (\n              <Text variant=\"xs\" color=\"black60\">\n                {option.subtitle}\n              </Text>\n            )}\n          </Box>\n        )\n      }}\n    />\n  )\n}\n"],"file":"AutocompleteInput.story.js"}
+{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.story.tsx"],"names":["title","OPTIONS","text","value","subtitle","Default","loading","options","height","map","option","renderOption","footer","header","Demo","query","setQuery","handleChange","event","target","i","displayQuery","borderBottom","borderColor"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { AutocompleteInput, AutocompleteInputProps } from \"./AutocompleteInput\"\n\nexport default {\n  title: \"Components/AutocompleteInput\",\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  return (\n    <States<Partial<AutocompleteInputProps<typeof OPTIONS[number]>>>\n      states={[\n        {},\n        { loading: true },\n        { options: [], height: 40 },\n        {\n          options: [\n            ...OPTIONS,\n            ...OPTIONS.map((option) => ({\n              ...option,\n              text: `Another ${option.text}`,\n              value: `another-${option.value}`,\n            })),\n          ],\n          renderOption: (option) => (\n            <Box px={2} py={1}>\n              <Text variant=\"sm-display\">{option.text}</Text>\n              <Text variant=\"xs\" color=\"black60\">\n                {option.subtitle}\n              </Text>\n            </Box>\n          ),\n        },\n        {\n          options: [\n            ...OPTIONS,\n            ...OPTIONS.map((option) => ({\n              ...option,\n              text: `Another ${option.text}`,\n              value: `another-${option.value}`,\n            })),\n          ],\n          footer: (\n            <Box px={2} py={1} bg=\"black10\">\n              <Text variant=\"xs\">Footer</Text>\n            </Box>\n          ),\n        },\n        {\n          options: [OPTIONS[0], OPTIONS[1]],\n          footer: (\n            <Box px={2} py={1} bg=\"black10\">\n              <Text variant=\"xs\">Footer</Text>\n            </Box>\n          ),\n        },\n        {\n          options: [OPTIONS[0], OPTIONS[1]],\n          header: (\n            <Box px={2} py={1} bg=\"black10\">\n              <Text variant=\"xs\">Header</Text>\n            </Box>\n          ),\n          footer: (\n            <Box px={2} py={1} bg=\"black10\">\n              <Text variant=\"xs\">Footer</Text>\n            </Box>\n          ),\n        },\n      ]}\n    >\n      <AutocompleteInput\n        placeholder=\"Search\"\n        options={OPTIONS}\n        onSelect={action(\"onSelect\")}\n        onSubmit={action(\"onSubmit\")}\n        onClose={action(\"onClose\")}\n      />\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [query, setQuery] = useState(\"\")\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  return (\n    <AutocompleteInput\n      placeholder=\"Begin typing...\"\n      options={[...(query ? [{ text: query, value: query }] : []), ...OPTIONS]}\n      onChange={handleChange}\n      onSelect={action(\"onSelect\")}\n      onSubmit={action(\"onSubmit\")}\n      onClose={action(\"onClose\")}\n      renderOption={(option, i) => {\n        const displayQuery = i === 0 && query !== \"\"\n\n        return (\n          <Box\n            px={2}\n            py={1}\n            {...(displayQuery\n              ? { borderBottom: \"1px solid\", borderColor: \"black10\" }\n              : {})}\n          >\n            <Text variant=\"sm-display\">\n              {displayQuery\n                ? `See full results for “${option.text}”`\n                : option.text}\n            </Text>\n\n            {\"subtitle\" in option && (\n              <Text variant=\"xs\" color=\"black60\">\n                {option.subtitle}\n              </Text>\n            )}\n          </Box>\n        )\n      }}\n    />\n  )\n}\n"],"file":"AutocompleteInput.story.js"}

package/dist/elements/ReadMore/ReadMore.js

@@ -17,7 +17,7 @@ var _Clickable = require("../Clickable");
 
 var _Text = require("../Text");
 
-var _excluded = ["children"];
+var _Box = require("../Box");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,58 +37,22 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _extends() { _extends = Object.assign || 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; }
-
-var ReadMoreOrLessLink = function ReadMoreOrLessLink(_ref) {
-  var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, _extends({
-    "aria-expanded": "false",
-    cursor: "pointer",
-    textDecoration: "underline"
-  }, rest), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs",
-    fontWeight: "bold"
-  }, children)));
-};
-
-ReadMoreOrLessLink.displayName = "ReadMoreOrLessLink";
-
-var Container = _styledComponents.default.div.withConfig({
-  displayName: "ReadMore__Container",
-  componentId: "sc-1bqy0ya-0"
-})(["cursor:pointer;> span{display:", ";}> span > *:last-child{display:inherit;}"], function (_ref2) {
-  var isExpanded = _ref2.isExpanded;
-  return isExpanded ? "block" : "inline";
-});
-
-Container.displayName = "Container";
-var HTML_TAG_REGEX = /(<([^>]+)>)/gi;
-
 /** ReadMore */
-var ReadMore = function ReadMore(_ref3) {
-  var expandedHTML = _ref3.content,
-      disabled = _ref3.disabled,
-      isExpanded = _ref3.isExpanded,
-      _ref3$maxChars = _ref3.maxChars,
-      maxChars = _ref3$maxChars === void 0 ? Infinity : _ref3$maxChars,
-      onReadLessClicked = _ref3.onReadLessClicked,
-      onReadMoreClicked = _ref3.onReadMoreClicked;
+var ReadMore = function ReadMore(_ref) {
+  var expandedHTML = _ref.content,
+      disabled = _ref.disabled,
+      isExpanded = _ref.isExpanded,
+      _ref$maxChars = _ref.maxChars,
+      maxChars = _ref$maxChars === void 0 ? Infinity : _ref$maxChars,
+      onReadLessClicked = _ref.onReadLessClicked,
+      onReadMoreClicked = _ref.onReadMoreClicked;
 
   var _useState = (0, _react.useState)(!!isExpanded),
       _useState2 = _slicedToArray(_useState, 2),
       expanded = _useState2[0],
       setExpanded = _useState2[1];
 
-  if (typeof expandedHTML !== "string") {
-    return null;
-  }
-
+  if (typeof expandedHTML !== "string") return null;
   var charCount = expandedHTML.replace(HTML_TAG_REGEX, "").length;
   var truncatedHTML = (0, _truncHtml.default)(expandedHTML, maxChars).html;
   var visible = charCount > maxChars;
@@ -110,15 +74,42 @@ var ReadMore = function ReadMore(_ref3) {
   }
 
   return /*#__PURE__*/_react.default.createElement(Container, {
-    onClick: handleClick,
-    isExpanded: expanded
+    "aria-expanded": expanded
+  }, expanded ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    dangerouslySetInnerHTML: {
+      __html: expandedHTML
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+    cursor: "pointer",
+    textDecoration: "underline",
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "xs",
+    fontWeight: "bold"
+  }, "Read less"))) : /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+    onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement("span", {
     dangerouslySetInnerHTML: {
-      __html: expanded ? expandedHTML : truncatedHTML
+      __html: truncatedHTML
     }
-  }), /*#__PURE__*/_react.default.createElement(ReadMoreOrLessLink, null, expanded ? "Read less" : "Read more"));
+  }), " ", /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    as: "span",
+    variant: "xs",
+    fontWeight: "bold",
+    style: {
+      textDecoration: "underline"
+    }
+  }, "Read more")));
 };
 
 exports.ReadMore = ReadMore;
 ReadMore.displayName = "ReadMore";
+
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "ReadMore__Container",
+  componentId: "sc-1bqy0ya-0"
+})(["> * > span > *:last-child{display:inherit;}"]);
+
+Container.displayName = "Container";
+var HTML_TAG_REGEX = /(<([^>]+)>)/gi;
 //# sourceMappingURL=ReadMore.js.map

package/dist/elements/ReadMore/ReadMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ReadMore/ReadMore.tsx"],"names":["ReadMoreOrLessLink","children","rest","displayName","Container","styled","div","isExpanded","HTML_TAG_REGEX","ReadMore","expandedHTML","content","disabled","maxChars","Infinity","onReadLessClicked","onReadMoreClicked","expanded","setExpanded","charCount","replace","length","truncatedHTML","html","visible","handleClick","expandedState","__html"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA+C,OAG/C;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,sBACE,4DACG,GADH,eAEE,6BAAC,oBAAD;AACE,qBAAc,OADhB;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,cAAc,EAAC;AAHjB,KAIMA,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,UAAU,EAAC;AAA9B,KACGD,QADH,CANF,CAFF,CADF;AAeD,CAnBD;;AAqBAD,kBAAkB,CAACG,WAAnB,GAAiC,oBAAjC;;AAEA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oFAIA;AAAA,MAAGC,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,OAAH,GAAa,QAA5C;AAAA,CAJA,CAAf;;AAYAH,SAAS,CAACD,WAAV,GAAwB,WAAxB;AAEA,IAAMK,cAAc,GAAG,eAAvB;;AAWA;AACO,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,QAO3C;AAAA,MANKC,YAML,SANJC,OAMI;AAAA,MALJC,QAKI,SALJA,QAKI;AAAA,MAJJL,UAII,SAJJA,UAII;AAAA,6BAHJM,QAGI;AAAA,MAHJA,QAGI,+BAHOC,QAGP;AAAA,MAFJC,iBAEI,SAFJA,iBAEI;AAAA,MADJC,iBACI,SADJA,iBACI;;AACJ,kBAAgC,qBAAS,CAAC,CAACT,UAAX,CAAhC;AAAA;AAAA,MAAOU,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAI,OAAOR,YAAP,KAAwB,QAA5B,EAAsC;AACpC,WAAO,IAAP;AACD;;AACD,MAAMS,SAAS,GAAGT,YAAY,CAACU,OAAb,CAAqBZ,cAArB,EAAqC,EAArC,EAAyCa,MAA3D;AAEA,MAAMC,aAAa,GAAG,wBAASZ,YAAT,EAAuBG,QAAvB,EAAiCU,IAAvD;AAEA,MAAMC,OAAO,GAAGL,SAAS,GAAGN,QAA5B;;AAEA,MAAMY,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,QAAJ,EAAc;AACdM,IAAAA,WAAW,CAAC,UAACQ,aAAD;AAAA,aAAmB,CAACA,aAApB;AAAA,KAAD,CAAX;AAEAT,IAAAA,QAAQ,GACJF,iBAAiB,IAAIA,iBAAiB,EADlC,GAEJC,iBAAiB,IAAIA,iBAAiB,EAF1C;AAGD,GAPD;;AASA,MAAI,CAACQ,OAAL,EAAc;AACZ,wBACE;AACE,MAAA,uBAAuB,EAAE;AACvBG,QAAAA,MAAM,EAAEjB;AADe;AAD3B,MADF;AAOD;;AAED,sBACE,6BAAC,SAAD;AAAW,IAAA,OAAO,EAAEe,WAApB;AAAiC,IAAA,UAAU,EAAER;AAA7C,kBACE;AACE,IAAA,uBAAuB,EAAE;AACvBU,MAAAA,MAAM,EAAEV,QAAQ,GAAGP,YAAH,GAAkBY;AADX;AAD3B,IADF,eAOE,6BAAC,kBAAD,QACGL,QAAQ,GAAG,WAAH,GAAiB,WAD5B,CAPF,CADF;AAaD,CAnDM;;;AAAMR,Q","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport truncate from \"trunc-html\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nconst ReadMoreOrLessLink: React.FC<ClickableProps> = ({\n  children,\n  ...rest\n}) => {\n  return (\n    <>\n      {\" \"}\n      <Clickable\n        aria-expanded=\"false\"\n        cursor=\"pointer\"\n        textDecoration=\"underline\"\n        {...rest}\n      >\n        <Text variant=\"xs\" fontWeight=\"bold\">\n          {children}\n        </Text>\n      </Clickable>\n    </>\n  )\n}\n\nReadMoreOrLessLink.displayName = \"ReadMoreOrLessLink\"\n\nconst Container = styled.div<{ isExpanded: boolean }>`\n  cursor: pointer;\n\n  > span {\n    display: ${({ isExpanded }) => (isExpanded ? \"block\" : \"inline\")};\n  }\n\n  > span > *:last-child {\n    display: inherit;\n  }\n`\n\nContainer.displayName = \"Container\"\n\nconst HTML_TAG_REGEX = /(<([^>]+)>)/gi\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  isExpanded?: boolean\n  maxChars?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<ReadMoreProps> = ({\n  content: expandedHTML,\n  disabled,\n  isExpanded,\n  maxChars = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  const [expanded, setExpanded] = useState(!!isExpanded)\n\n  if (typeof expandedHTML !== \"string\") {\n    return null\n  }\n  const charCount = expandedHTML.replace(HTML_TAG_REGEX, \"\").length\n\n  const truncatedHTML = truncate(expandedHTML, maxChars).html\n\n  const visible = charCount > maxChars\n\n  const handleClick = () => {\n    if (disabled) return\n    setExpanded((expandedState) => !expandedState)\n\n    expanded\n      ? onReadLessClicked && onReadLessClicked()\n      : onReadMoreClicked && onReadMoreClicked()\n  }\n\n  if (!visible) {\n    return (\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expandedHTML,\n        }}\n      />\n    )\n  }\n\n  return (\n    <Container onClick={handleClick} isExpanded={expanded}>\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expanded ? expandedHTML : truncatedHTML,\n        }}\n      />\n\n      <ReadMoreOrLessLink>\n        {expanded ? \"Read less\" : \"Read more\"}\n      </ReadMoreOrLessLink>\n    </Container>\n  )\n}\n"],"file":"ReadMore.js"}
+{"version":3,"sources":["../../../src/elements/ReadMore/ReadMore.tsx"],"names":["ReadMore","expandedHTML","content","disabled","isExpanded","maxChars","Infinity","onReadLessClicked","onReadMoreClicked","expanded","setExpanded","charCount","replace","HTML_TAG_REGEX","length","truncatedHTML","html","visible","handleClick","expandedState","__html","textDecoration","Container","styled","div","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA;AACO,IAAMA,QAAiC,GAAG,SAApCA,QAAoC,OAO3C;AAAA,MANKC,YAML,QANJC,OAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHOC,QAGP;AAAA,MAFJC,iBAEI,QAFJA,iBAEI;AAAA,MADJC,iBACI,QADJA,iBACI;;AACJ,kBAAgC,qBAAS,CAAC,CAACJ,UAAX,CAAhC;AAAA;AAAA,MAAOK,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAI,OAAOT,YAAP,KAAwB,QAA5B,EAAsC,OAAO,IAAP;AAEtC,MAAMU,SAAS,GAAGV,YAAY,CAACW,OAAb,CAAqBC,cAArB,EAAqC,EAArC,EAAyCC,MAA3D;AAEA,MAAMC,aAAa,GAAG,wBAASd,YAAT,EAAuBI,QAAvB,EAAiCW,IAAvD;AAEA,MAAMC,OAAO,GAAGN,SAAS,GAAGN,QAA5B;;AAEA,MAAMa,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIf,QAAJ,EAAc;AACdO,IAAAA,WAAW,CAAC,UAACS,aAAD;AAAA,aAAmB,CAACA,aAApB;AAAA,KAAD,CAAX;AAEAV,IAAAA,QAAQ,GACJF,iBAAiB,IAAIA,iBAAiB,EADlC,GAEJC,iBAAiB,IAAIA,iBAAiB,EAF1C;AAGD,GAPD;;AASA,MAAI,CAACS,OAAL,EAAc;AACZ,wBACE;AACE,MAAA,uBAAuB,EAAE;AACvBG,QAAAA,MAAM,EAAEnB;AADe;AAD3B,MADF;AAOD;;AAED,sBACE,6BAAC,SAAD;AAAW,qBAAeQ;AAA1B,KACGA,QAAQ,gBACP,yEACE,6BAAC,QAAD;AAAK,IAAA,uBAAuB,EAAE;AAAEW,MAAAA,MAAM,EAAEnB;AAAV;AAA9B,IADF,eAGE,6BAAC,oBAAD;AACE,IAAA,MAAM,EAAC,SADT;AAEE,IAAA,cAAc,EAAC,WAFjB;AAGE,IAAA,OAAO,EAAEiB;AAHX,kBAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,UAAU,EAAC;AAA9B,iBALF,CAHF,CADO,gBAeP,6BAAC,oBAAD;AAAW,IAAA,OAAO,EAAEA;AAApB,kBACE;AAAM,IAAA,uBAAuB,EAAE;AAAEE,MAAAA,MAAM,EAAEL;AAAV;AAA/B,IADF,EAC+D,GAD/D,eAEE,6BAAC,UAAD;AACE,IAAA,EAAE,EAAC,MADL;AAEE,IAAA,OAAO,EAAC,IAFV;AAGE,IAAA,UAAU,EAAC,MAHb;AAIE,IAAA,KAAK,EAAE;AAAEM,MAAAA,cAAc,EAAE;AAAlB;AAJT,iBAFF,CAhBJ,CADF;AA+BD,CApEM;;;AAAMrB,Q;;AAsEb,IAAMsB,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,mDAAf;;AAMAF,SAAS,CAACG,WAAV,GAAwB,WAAxB;AAEA,IAAMZ,cAAc,GAAG,eAAvB","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport truncate from \"trunc-html\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  isExpanded?: boolean\n  maxChars?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<ReadMoreProps> = ({\n  content: expandedHTML,\n  disabled,\n  isExpanded,\n  maxChars = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  const [expanded, setExpanded] = useState(!!isExpanded)\n\n  if (typeof expandedHTML !== \"string\") return null\n\n  const charCount = expandedHTML.replace(HTML_TAG_REGEX, \"\").length\n\n  const truncatedHTML = truncate(expandedHTML, maxChars).html\n\n  const visible = charCount > maxChars\n\n  const handleClick = () => {\n    if (disabled) return\n    setExpanded((expandedState) => !expandedState)\n\n    expanded\n      ? onReadLessClicked && onReadLessClicked()\n      : onReadMoreClicked && onReadMoreClicked()\n  }\n\n  if (!visible) {\n    return (\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expandedHTML,\n        }}\n      />\n    )\n  }\n\n  return (\n    <Container aria-expanded={expanded}>\n      {expanded ? (\n        <>\n          <Box dangerouslySetInnerHTML={{ __html: expandedHTML }} />\n\n          <Clickable\n            cursor=\"pointer\"\n            textDecoration=\"underline\"\n            onClick={handleClick}\n          >\n            <Text variant=\"xs\" fontWeight=\"bold\">\n              Read less\n            </Text>\n          </Clickable>\n        </>\n      ) : (\n        <Clickable onClick={handleClick}>\n          <span dangerouslySetInnerHTML={{ __html: truncatedHTML }} />{\" \"}\n          <Text\n            as=\"span\"\n            variant=\"xs\"\n            fontWeight=\"bold\"\n            style={{ textDecoration: \"underline\" }}\n          >\n            Read more\n          </Text>\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nconst Container = styled.div`\n  > * > span > *:last-child {\n    display: inherit;\n  }\n`\n\nContainer.displayName = \"Container\"\n\nconst HTML_TAG_REGEX = /(<([^>]+)>)/gi\n"],"file":"ReadMore.js"}

package/dist/elements/ReadMore/ReadMore.story.js

@@ -60,7 +60,7 @@ AsString.story = {
 var CharacterCapWithHtml = function CharacterCapWithHtml() {
   return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
-    content: "<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate{\" \"}\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>"
+    content: "<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>"
   });
 };
 
@@ -73,7 +73,7 @@ CharacterCapWithHtml.story = {
 var WithCustomizableTypography = function WithCustomizableTypography() {
   return /*#__PURE__*/_react.default.createElement(_HTML.HTML, null, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
-    content: "\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
+    content: "\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
   }));
 };
 
@@ -88,7 +88,7 @@ var WithCustomizableTypography2 = function WithCustomizableTypography2() {
     variant: "lg"
   }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
-    content: "<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
+    content: "<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
   }));
 };
 

package/dist/elements/ReadMore/ReadMore.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"names":["title","WithCharacterCap","story","name","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","WithCustomizableTypography2","CharacterCapWithHtmlDisabled"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AACpC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AAcD,CAfM;;;AAAMA,gB;AAiBbA,gBAAgB,CAACC,KAAjB,GAAyB;AACvBC,EAAAA,IAAI,EAAE;AADiB,CAAzB;;AAIO,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AAChC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AASD,CAVM;;;AAAMA,Y;AAYbA,YAAY,CAACF,KAAb,GAAqB;AACnBC,EAAAA,IAAI,EAAE;AADa,CAArB;;AAIO,IAAME,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO,EAAC;AAFV,IADF;AAMD,CAPM;;;AAAMA,Q;AASbA,QAAQ,CAACH,KAAT,GAAiB;AACfC,EAAAA,IAAI,EAAE;AADS,CAAjB;;AAIO,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACxC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AA0BD,CA3BM;;;AAAMA,oB;AA6BbA,oBAAoB,CAACJ,KAArB,GAA6B;AAC3BC,EAAAA,IAAI,EAAE;AADqB,CAA7B;;AAIO,IAAMI,0BAA0B,GAAG,SAA7BA,0BAA6B,GAAM;AAC9C,sBACE,6BAAC,UAAD,qBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF,CADF;AA8BD,CA/BM;;;AAAMA,0B;AAiCbA,0BAA0B,CAACL,KAA3B,GAAmC;AACjCC,EAAAA,IAAI,EAAE;AAD2B,CAAnC;;AAIO,IAAMK,2BAA2B,GAAG,SAA9BA,2BAA8B,GAAM;AAC/C,sBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,kBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF,CADF;AA6BD,CA9BM;;;AAAMA,2B;AAgCbA,2BAA2B,CAACN,KAA5B,GAAoC;AAClCC,EAAAA,IAAI,EAAE;AAD4B,CAApC;;AAIO,IAAMM,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAM;AAChD,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,MADV;AAEE,IAAA,QAAQ,EAAE,GAFZ;AAGE,IAAA,OAAO;AAHT,IADF;AAeD,CAhBM;;;AAAMA,4B;AAkBbA,4BAA4B,CAACP,KAA7B,GAAqC;AACnCC,EAAAA,IAAI,EAAE;AAD6B,CAArC","sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\n\nexport default {\n  title: \"Components/ReadMore\",\n}\n\nexport const WithCharacterCap = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nWithCharacterCap.story = {\n  name: \"With character cap\",\n}\n\nexport const ShortContent = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`}\n    />\n  )\n}\n\nShortContent.story = {\n  name: \"Short content\",\n}\n\nexport const AsString = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content=\"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\"\n    />\n  )\n}\n\nAsString.story = {\n  name: \"As string\",\n}\n\nexport const CharacterCapWithHtml = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate{\" \"}\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`}\n    />\n  )\n}\n\nCharacterCapWithHtml.story = {\n  name: \"Character cap with HTML\",\n}\n\nexport const WithCustomizableTypography = () => {\n  return (\n    <HTML>\n      <ReadMore\n        maxChars={300}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography.story = {\n  name: \"With customizable typography\",\n}\n\nexport const WithCustomizableTypography2 = () => {\n  return (\n    <HTML variant=\"lg\">\n      <ReadMore\n        maxChars={300}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography2.story = {\n  name: \"With customizable typography (2)\",\n}\n\nexport const CharacterCapWithHtmlDisabled = () => {\n  return (\n    <ReadMore\n      disabled\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nCharacterCapWithHtmlDisabled.story = {\n  name: \"Character cap with html (disabled)\",\n}\n"],"file":"ReadMore.story.js"}
+{"version":3,"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"names":["title","WithCharacterCap","story","name","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","WithCustomizableTypography2","CharacterCapWithHtmlDisabled"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AACpC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AAcD,CAfM;;;AAAMA,gB;AAiBbA,gBAAgB,CAACC,KAAjB,GAAyB;AACvBC,EAAAA,IAAI,EAAE;AADiB,CAAzB;;AAIO,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AAChC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AASD,CAVM;;;AAAMA,Y;AAYbA,YAAY,CAACF,KAAb,GAAqB;AACnBC,EAAAA,IAAI,EAAE;AADa,CAArB;;AAIO,IAAME,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO,EAAC;AAFV,IADF;AAMD,CAPM;;;AAAMA,Q;AASbA,QAAQ,CAACH,KAAT,GAAiB;AACfC,EAAAA,IAAI,EAAE;AADS,CAAjB;;AAIO,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACxC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AA0BD,CA3BM;;;AAAMA,oB;AA6BbA,oBAAoB,CAACJ,KAArB,GAA6B;AAC3BC,EAAAA,IAAI,EAAE;AADqB,CAA7B;;AAIO,IAAMI,0BAA0B,GAAG,SAA7BA,0BAA6B,GAAM;AAC9C,sBACE,6BAAC,UAAD,qBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF,CADF;AA8BD,CA/BM;;;AAAMA,0B;AAiCbA,0BAA0B,CAACL,KAA3B,GAAmC;AACjCC,EAAAA,IAAI,EAAE;AAD2B,CAAnC;;AAIO,IAAMK,2BAA2B,GAAG,SAA9BA,2BAA8B,GAAM;AAC/C,sBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,kBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF,CADF;AA6BD,CA9BM;;;AAAMA,2B;AAgCbA,2BAA2B,CAACN,KAA5B,GAAoC;AAClCC,EAAAA,IAAI,EAAE;AAD4B,CAApC;;AAIO,IAAMM,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAM;AAChD,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,MADV;AAEE,IAAA,QAAQ,EAAE,GAFZ;AAGE,IAAA,OAAO;AAHT,IADF;AAeD,CAhBM;;;AAAMA,4B;AAkBbA,4BAA4B,CAACP,KAA7B,GAAqC;AACnCC,EAAAA,IAAI,EAAE;AAD6B,CAArC","sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\n\nexport default {\n  title: \"Components/ReadMore\",\n}\n\nexport const WithCharacterCap = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nWithCharacterCap.story = {\n  name: \"With character cap\",\n}\n\nexport const ShortContent = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`}\n    />\n  )\n}\n\nShortContent.story = {\n  name: \"Short content\",\n}\n\nexport const AsString = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content=\"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\"\n    />\n  )\n}\n\nAsString.story = {\n  name: \"As string\",\n}\n\nexport const CharacterCapWithHtml = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`}\n    />\n  )\n}\n\nCharacterCapWithHtml.story = {\n  name: \"Character cap with HTML\",\n}\n\nexport const WithCustomizableTypography = () => {\n  return (\n    <HTML>\n      <ReadMore\n        maxChars={300}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography.story = {\n  name: \"With customizable typography\",\n}\n\nexport const WithCustomizableTypography2 = () => {\n  return (\n    <HTML variant=\"lg\">\n      <ReadMore\n        maxChars={300}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography2.story = {\n  name: \"With customizable typography (2)\",\n}\n\nexport const CharacterCapWithHtmlDisabled = () => {\n  return (\n    <ReadMore\n      disabled\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nCharacterCapWithHtmlDisabled.story = {\n  name: \"Character cap with html (disabled)\",\n}\n"],"file":"ReadMore.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "31.3.1",
+  "version": "31.4.1",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -180,5 +180,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "56b06aba842ad4d4d1cc5b541e50273c4acbcf96"
+  "gitHead": "ffa2c198375e7853516cae20d7f6002db48b4b5c"
 }