@mrshmllw/smores-react 14.1.1 → 14.3.0

package/dist/RichTextEditor/plugins/ToolbarPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarPlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/ToolbarPlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { MouseEvent } from 'react'\nimport {\n  $isListNode,\n  INSERT_UNORDERED_LIST_COMMAND,\n  ListNode,\n  REMOVE_LIST_COMMAND,\n} from '@lexical/list'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $isHeadingNode } from '@lexical/rich-text'\nimport { $isAtNodeEnd } from '@lexical/selection'\nimport { $getNearestNodeOfType, mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  CAN_REDO_COMMAND,\n  CAN_UNDO_COMMAND,\n  FORMAT_TEXT_COMMAND,\n  RangeSelection,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\n\nconst LowPriority = 1\n\nfunction getSelectedNode(selection: RangeSelection) {\n  const anchor = selection.anchor\n  const focus = selection.focus\n  const anchorNode = selection.anchor.getNode()\n  const focusNode = selection.focus.getNode()\n  if (anchorNode === focusNode) {\n    return anchorNode\n  }\n  const isBackward = selection.isBackward()\n  if (isBackward) {\n    return $isAtNodeEnd(focus) ? anchorNode : focusNode\n  } else {\n    return $isAtNodeEnd(anchor) ? focusNode : anchorNode\n  }\n}\n\nexport default function ToolbarPlugin() {\n  const [editor] = useLexicalComposerContext()\n  const toolbarRef = useRef(null)\n  const [blockType, setBlockType] = useState('paragraph')\n  const [isLink, setIsLink] = useState(false)\n  const [isBold, setIsBold] = useState(false)\n  const [isItalic, setIsItalic] = useState(false)\n  const [linkURL, setLinkURL] = useState('')\n  const [prevLinkURL, setPrevLinkURL] = useState('')\n\n  const formatBulletList = () => {\n    if (blockType !== 'ul') {\n      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n    } else {\n      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)\n    }\n  }\n\n  const updateToolbar = useCallback(() => {\n    const selection = $getSelection()\n    if ($isRangeSelection(selection)) {\n      const anchorNode = selection.anchor.getNode()\n      const element =\n        anchorNode.getKey() === 'root'\n          ? anchorNode\n          : anchorNode.getTopLevelElementOrThrow()\n      const elementKey = element.getKey()\n      const elementDOM = editor.getElementByKey(elementKey)\n      if (elementDOM !== null) {\n        if ($isListNode(element)) {\n          const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n          const type = parentList ? parentList.getTag() : element.getTag()\n          setBlockType(type)\n        } else {\n          const type = $isHeadingNode(element)\n            ? element.getTag()\n            : element.getType()\n          setBlockType(type)\n        }\n      }\n      // Update text format\n      setIsBold(selection.hasFormat('bold'))\n      setIsItalic(selection.hasFormat('italic'))\n\n      // Update links\n      const node = getSelectedNode(selection)\n      const parent = node.getParent()\n      if ($isLinkNode(parent)) {\n        setIsLink(true)\n        setLinkURL(parent.getURL())\n      } else if ($isLinkNode(node)) {\n        setIsLink(true)\n        setLinkURL(node.getURL())\n      } else {\n        setIsLink(false)\n        setLinkURL('')\n      }\n    }\n  }, [editor])\n\n  const openNewWindow = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    try {\n      window.open(linkURL, '_blank')\n    } catch (error) {\n      console.warn('Failed to open invalid URL: ', error)\n    }\n  }\n\n  const urlInputRef = useRef<HTMLInputElement | null>(null)\n\n  useEffect(() => {\n    if (prevLinkURL !== '' && isLink && urlInputRef.current) {\n      urlInputRef.current.focus()\n    }\n    setPrevLinkURL(linkURL)\n  }, [linkURL])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          updateToolbar()\n        })\n      }),\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          updateToolbar()\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_UNDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_REDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n    )\n  }, [editor, updateToolbar])\n\n  return (\n    <Toolbar className=\"toolbar\" ref={toolbarRef}>\n      <Bold\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n        }}\n        $active={isBold}\n      >\n        B\n      </Bold>\n      <Italic\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n        }}\n        $active={isItalic}\n      >\n        i\n      </Italic>\n      <EditorButton\n        $active={blockType === 'ul'}\n        onClick={() => formatBulletList()}\n      >\n        <Icon render=\"bullets\" />\n      </EditorButton>\n\n      <Link\n        $active={isLink}\n        onClick={() =>\n          !isLink\n            ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')\n            : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n        }\n      >\n        <Box ml={{ custom: '-4px' }}>\n          <Icon render=\"link\" />\n        </Box>\n        <LinkInput\n          tabIndex={-1}\n          ref={urlInputRef}\n          placeholder=\"Enter url\"\n          value={linkURL}\n          onChange={(e) => {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value)\n          }}\n          onClick={(e) => e.stopPropagation()}\n        />\n        <Box onClick={openNewWindow}>\n          <LinkOpen render=\"new-window\" />\n        </Box>\n      </Link>\n    </Toolbar>\n  )\n}\n\nconst EditorButton = styled(Box)<{ $active: boolean }>`\n  height: 40px;\n  width: 40px;\n  line-height: 50px;\n  padding: 12px;\n  border-radius: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  cursor: pointer;\n  background-color: ${({ theme }) => theme.color.surface.base[300]};\n  flex-shrink: 0;\n\n  ${({ $active, theme }) =>\n    $active &&\n    `\n    background-color: ${theme.color.interactive.primary.hover};\n  `}\n`\n\nconst Bold = styled(EditorButton)`\n  font-weight: 500;\n`\n\nconst Italic = styled(EditorButton)`\n  font-style: italic;\n  font-weight: 500;\n  text-indent: -4px;\n`\n\nconst Toolbar = styled(Box)`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n`\n\nconst Link = styled(EditorButton)`\n  transition: width 0.3s;\n  ${({ $active }) => $active && `width: 360px;`}\n  justify-content: left;\n  overflow: hidden;\n  gap: 12px;\n  padding-right: 5px;\n  flex-shrink: 1;\n\n  ${({ $active, theme }) =>\n    $active &&\n    `\n    background-color: ${theme.color.interactive.primary.hover};\n\n    :hover {\n      filter: none;\n    }\n  `}\n`\n\nconst LinkOpen = styled(Icon)`\n  background-color: ${({ theme }) => theme.color.interactive.tertiary.base};\n  height: 32px;\n  width: 32px;\n  border-radius: 20px;\n  padding: 6px;\n\n  :hover {\n    background-color: ${({ theme }) => theme.color.interactive.tertiary.active};\n  }\n`\n\nconst LinkInput = styled.input`\n  width: inherit;\n  height: 32px;\n  border: none;\n  border-radius: 20px;\n  padding-left: 12px;\n  padding-right: 12px;\n  font-size: 16px;\n  min-width: 0;\n  background-color: white;\n\n  :hover {\n    outline: 2px solid ${({ theme }) => theme.color.surface.brand[200]};\n  }\n\n  :focus {\n    outline: 2px solid ${({ theme }) => theme.color.surface.brand[300]};\n  }\n`\n"]}
+{"version":3,"file":"ToolbarPlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/ToolbarPlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { MouseEvent } from 'react'\nimport {\n  $isListNode,\n  INSERT_UNORDERED_LIST_COMMAND,\n  ListNode,\n  REMOVE_LIST_COMMAND,\n} from '@lexical/list'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $isHeadingNode } from '@lexical/rich-text'\nimport { $isAtNodeEnd } from '@lexical/selection'\nimport { $getNearestNodeOfType, mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  CAN_REDO_COMMAND,\n  CAN_UNDO_COMMAND,\n  FORMAT_TEXT_COMMAND,\n  RangeSelection,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faArrowUpRightFromSquare,\n  faLinkSimple,\n  faList,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nconst LowPriority = 1\n\nfunction getSelectedNode(selection: RangeSelection) {\n  const anchor = selection.anchor\n  const focus = selection.focus\n  const anchorNode = selection.anchor.getNode()\n  const focusNode = selection.focus.getNode()\n  if (anchorNode === focusNode) {\n    return anchorNode\n  }\n  const isBackward = selection.isBackward()\n  if (isBackward) {\n    return $isAtNodeEnd(focus) ? anchorNode : focusNode\n  } else {\n    return $isAtNodeEnd(anchor) ? focusNode : anchorNode\n  }\n}\n\nexport default function ToolbarPlugin() {\n  const [editor] = useLexicalComposerContext()\n  const toolbarRef = useRef(null)\n  const [blockType, setBlockType] = useState('paragraph')\n  const [isLink, setIsLink] = useState(false)\n  const [isBold, setIsBold] = useState(false)\n  const [isItalic, setIsItalic] = useState(false)\n  const [linkURL, setLinkURL] = useState('')\n  const [prevLinkURL, setPrevLinkURL] = useState('')\n\n  const formatBulletList = () => {\n    if (blockType !== 'ul') {\n      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n    } else {\n      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)\n    }\n  }\n\n  const updateToolbar = useCallback(() => {\n    const selection = $getSelection()\n    if ($isRangeSelection(selection)) {\n      const anchorNode = selection.anchor.getNode()\n      const element =\n        anchorNode.getKey() === 'root'\n          ? anchorNode\n          : anchorNode.getTopLevelElementOrThrow()\n      const elementKey = element.getKey()\n      const elementDOM = editor.getElementByKey(elementKey)\n      if (elementDOM !== null) {\n        if ($isListNode(element)) {\n          const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n          const type = parentList ? parentList.getTag() : element.getTag()\n          setBlockType(type)\n        } else {\n          const type = $isHeadingNode(element)\n            ? element.getTag()\n            : element.getType()\n          setBlockType(type)\n        }\n      }\n      // Update text format\n      setIsBold(selection.hasFormat('bold'))\n      setIsItalic(selection.hasFormat('italic'))\n\n      // Update links\n      const node = getSelectedNode(selection)\n      const parent = node.getParent()\n      if ($isLinkNode(parent)) {\n        setIsLink(true)\n        setLinkURL(parent.getURL())\n      } else if ($isLinkNode(node)) {\n        setIsLink(true)\n        setLinkURL(node.getURL())\n      } else {\n        setIsLink(false)\n        setLinkURL('')\n      }\n    }\n  }, [editor])\n\n  const openNewWindow = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    try {\n      window.open(linkURL, '_blank')\n    } catch (error) {\n      console.warn('Failed to open invalid URL: ', error)\n    }\n  }\n\n  const urlInputRef = useRef<HTMLInputElement | null>(null)\n\n  useEffect(() => {\n    if (prevLinkURL !== '' && isLink && urlInputRef.current) {\n      urlInputRef.current.focus()\n    }\n    setPrevLinkURL(linkURL)\n  }, [linkURL])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          updateToolbar()\n        })\n      }),\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          updateToolbar()\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_UNDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_REDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n    )\n  }, [editor, updateToolbar])\n\n  return (\n    <Toolbar className=\"toolbar\" ref={toolbarRef}>\n      <Bold\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n        }}\n        $active={isBold}\n      >\n        B\n      </Bold>\n      <Italic\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n        }}\n        $active={isItalic}\n      >\n        i\n      </Italic>\n      <EditorButton\n        $active={blockType === 'ul'}\n        onClick={() => formatBulletList()}\n      >\n        <IconContainer $size={24}>\n          <FontAwesomeIcon icon={faList} />\n        </IconContainer>\n      </EditorButton>\n\n      <Link\n        $active={isLink}\n        onClick={() =>\n          !isLink\n            ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')\n            : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n        }\n      >\n        <Box ml={{ custom: '-4px' }} mt={{ custom: '6px' }}>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faLinkSimple} />\n          </IconContainer>\n        </Box>\n        <LinkInput\n          tabIndex={-1}\n          ref={urlInputRef}\n          placeholder=\"Enter url\"\n          value={linkURL}\n          onChange={(e) => {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value)\n          }}\n          onClick={(e) => e.stopPropagation()}\n        />\n        <Box onClick={openNewWindow}>\n          <LinkOpen $size={24}>\n            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />\n          </LinkOpen>\n        </Box>\n      </Link>\n    </Toolbar>\n  )\n}\n\nconst EditorButton = styled(Box)<{ $active: boolean }>`\n  height: 40px;\n  width: 40px;\n  line-height: 50px;\n  padding: 12px;\n  border-radius: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  cursor: pointer;\n  background-color: ${({ theme }) => theme.color.surface.base[300]};\n  flex-shrink: 0;\n\n  ${({ $active, theme }) =>\n    $active &&\n    `\n    background-color: ${theme.color.interactive.primary.hover};\n  `}\n`\n\nconst Bold = styled(EditorButton)`\n  font-weight: 500;\n`\n\nconst Italic = styled(EditorButton)`\n  font-style: italic;\n  font-weight: 500;\n  text-indent: -4px;\n`\n\nconst Toolbar = styled(Box)`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n`\n\nconst Link = styled(EditorButton)`\n  transition: width 0.3s;\n  ${({ $active }) => $active && `width: 360px;`}\n  justify-content: left;\n  overflow: hidden;\n  gap: 12px;\n  padding-right: 5px;\n  flex-shrink: 1;\n\n  ${({ $active, theme }) =>\n    $active &&\n    `\n    background-color: ${theme.color.interactive.primary.hover};\n\n    :hover {\n      filter: none;\n    }\n  `}\n`\n\nconst LinkOpen = styled(IconContainer)`\n  background-color: ${({ theme }) => theme.color.interactive.tertiary.base};\n  height: 32px;\n  width: 32px;\n  border-radius: 20px;\n  padding: 6px;\n\n  :hover {\n    background-color: ${({ theme }) => theme.color.interactive.tertiary.active};\n  }\n`\n\nconst LinkInput = styled.input`\n  width: inherit;\n  height: 32px;\n  border: none;\n  border-radius: 20px;\n  padding-left: 12px;\n  padding-right: 12px;\n  font-size: 16px;\n  min-width: 0;\n  background-color: white;\n\n  :hover {\n    outline: 2px solid ${({ theme }) => theme.color.surface.brand[200]};\n  }\n\n  :focus {\n    outline: 2px solid ${({ theme }) => theme.color.surface.brand[300]};\n  }\n`\n"]}

package/dist/Row/Row.d.ts

@@ -1,12 +1,14 @@
-import { FC } from 'react';
-import { Icons } from '../Icon/iconsList';
+import { FC, ReactNode } from 'react';
+import { Icons } from '../Icon';
 import { MarginProps } from '../utils/space';
 import { ColorTypes } from '../ThemeProvider/utils/colourMap';
 export type RowProps = {
     iconLeft?: Icons;
+    iconLeftComponent?: ReactNode;
     iconLeftColor?: ColorTypes;
     iconRight?: Icons;
     iconRightColor?: ColorTypes;
+    iconRightComponent?: ReactNode;
     handleClick?: () => void;
     heading: string;
     subHeading?: string;

package/dist/Row/Row.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
-export const Row = ({ iconLeft, iconLeftColor = 'color.icon.base', iconRight, iconRightColor = 'color.icon.nonEssential', handleClick, heading, subHeading, type, borderTop = true, borderBottom = true, boldHeading, ...marginProps }) => {
+import { IconContainer } from '../sharedStyles/shared.styles';
+export const Row = ({ iconLeft, iconLeftComponent, iconLeftColor = 'color.icon.base', iconRight, iconRightComponent, iconRightColor = 'color.icon.nonEssential', handleClick, heading, subHeading, type, borderTop = true, borderBottom = true, boldHeading, ...marginProps }) => {
     const windowWidth = screen.width;
-    return (_jsxs(Container, { "$type": type, "$iconLeft": iconLeft, "$borderTop": borderTop, "$borderBottom": borderBottom, "$iconRight": iconRight, onClick: handleClick, "$boldHeading": boldHeading, ...marginProps, children: [iconLeft && (_jsx(Icon, { render: iconLeft, size: windowWidth > 768 ? 24 : 18, color: iconLeftColor })), _jsxs(Box, { children: [_jsx(Text, { tag: "h1", typo: "body-regular", children: heading }), _jsx(Text, { tag: "p", typo: "body-small", color: "sesame", children: subHeading })] }), iconRight && (_jsx(Icon, { className: "iconRight", render: iconRight, size: 24, rotate: iconRight === 'caret' ? -90 : 0, color: iconRightColor }))] }));
+    const iconLeftSize = windowWidth > 768 ? 24 : 16;
+    const { color } = useTheme();
+    const iconLeftToRender = iconLeftComponent ? (_jsx(IconContainer, { "$size": iconLeftSize, color: color.icon.base, children: iconLeftComponent })) : iconLeft ? (_jsx(Icon, { render: iconLeft, size: iconLeftSize, color: iconLeftColor })) : null;
+    const iconRightToRender = iconRightComponent ? (_jsx(IconContainer, { "$size": 24, color: color.icon.nonEssential, children: iconRightComponent })) : iconRight ? (_jsx(Icon, { render: iconRight, size: 24, rotate: iconRight === 'caret' ? -90 : 0, color: iconRightColor })) : null;
+    return (_jsxs(Container, { "$type": type, "$iconLeft": Boolean(iconLeft || iconLeftComponent), "$borderTop": borderTop, "$borderBottom": borderBottom, "$iconRight": Boolean(iconRight || iconRightComponent), onClick: handleClick, "$boldHeading": boldHeading, ...marginProps, children: [iconLeftToRender, _jsxs(Box, { children: [_jsx(Text, { tag: "h1", typo: "body-regular", children: heading }), _jsx(Text, { tag: "p", typo: "body-small", color: "sesame", children: subHeading })] }), iconRightToRender] }));
 };
 const Container = styled(Box)(({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading, theme }) => css `
     border-radius: ${($type === 'first' && `16px 16px 0 0`) ||

package/dist/Row/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAkB9B,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,iBAAiB,EACjC,SAAS,EACT,cAAc,GAAG,yBAAyB,EAC1C,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,MAAC,SAAS,aACD,IAAI,eACA,QAAQ,gBACP,SAAS,mBACN,YAAY,gBACf,SAAS,EACrB,OAAO,EAAE,WAAW,kBACN,WAAW,KACrB,WAAW,aAEd,QAAQ,IAAI,CACX,KAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH,EACD,MAAC,GAAG,eACF,KAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,YAC/B,OAAO,GACH,EACP,KAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,YAC3C,UAAU,GACN,IACH,EACL,SAAS,IAAI,CACZ,KAAC,IAAI,IACH,SAAS,EAAC,WAAW,EACrB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,cAAc,GACrB,CACH,IACS,CACb,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBAC1D,CAAC,KAAK,KAAK,OAAO,IAAI,eAAe,CAAC;IACvD,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC;IAC9B,CAAC,KAAK,KAAK,MAAM,IAAI,eAAe,CAAC;IACrC,CAAC;;kBAEa,UAAU,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,OAAO;IACjE,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;IAC1C,CAAC,CAAC,MAAM;qBACO,aAAa,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM;IACtE,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;IAC1C,CAAC,CAAC,MAAM;;wBAEU,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;6BAExB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;;;;;;;;qBAQlD,YAAY,IAAI,GAAG;;;;;;;;;;GAUrC,CACF,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\n\nexport type RowProps = {\n  iconLeft?: Icons\n  iconLeftColor?: ColorTypes\n  iconRight?: Icons\n  iconRightColor?: ColorTypes\n  handleClick?: () => void\n  heading: string\n  subHeading?: string\n  type?: 'first' | 'last' | 'curved'\n  borderTop?: boolean\n  borderBottom?: boolean\n  boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n  iconLeft,\n  iconLeftColor = 'color.icon.base',\n  iconRight,\n  iconRightColor = 'color.icon.nonEssential',\n  handleClick,\n  heading,\n  subHeading,\n  type,\n  borderTop = true,\n  borderBottom = true,\n  boldHeading,\n  ...marginProps\n}) => {\n  const windowWidth = screen.width\n\n  return (\n    <Container\n      $type={type}\n      $iconLeft={iconLeft}\n      $borderTop={borderTop}\n      $borderBottom={borderBottom}\n      $iconRight={iconRight}\n      onClick={handleClick}\n      $boldHeading={boldHeading}\n      {...marginProps}\n    >\n      {iconLeft && (\n        <Icon\n          render={iconLeft}\n          size={windowWidth > 768 ? 24 : 18}\n          color={iconLeftColor}\n        />\n      )}\n      <Box>\n        <Text tag=\"h1\" typo=\"body-regular\">\n          {heading}\n        </Text>\n        <Text tag=\"p\" typo=\"body-small\" color=\"sesame\">\n          {subHeading}\n        </Text>\n      </Box>\n      {iconRight && (\n        <Icon\n          className=\"iconRight\"\n          render={iconRight}\n          size={24}\n          rotate={iconRight === 'caret' ? -90 : 0}\n          color={iconRightColor}\n        />\n      )}\n    </Container>\n  )\n}\n\ninterface IContainer {\n  $type?: 'first' | 'last' | 'curved'\n  $iconLeft?: string\n  $iconRight?: string\n  $borderTop: boolean\n  $borderBottom: boolean\n  $boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n  ({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading, theme }) => css`\n    border-radius: ${($type === 'first' && `16px 16px 0 0`) ||\n    ($type === 'curved' && `16px`) ||\n    ($type === 'last' && `0 0 16px 16px`) ||\n    0};\n\n    border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'\n      ? `1px solid ${theme.color.border.subtle}`\n      : 'none'};\n    border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'\n      ? `1px solid ${theme.color.border.subtle}`\n      : 'none'};\n\n    background-color: ${theme.color.surface.base[300]};\n    display: grid;\n    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n    padding: 16px;\n    grid-gap: 16px;\n    align-items: center;\n\n    cursor: pointer;\n\n    h1 {\n      font-weight: ${$boldHeading && 500};\n    }\n\n    .iconRight {\n      justify-self: end;\n    }\n\n    @media (min-width: 768px) {\n      grid-gap: 24px;\n    }\n  `,\n)\n"]}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type RowProps = {\n  iconLeft?: Icons\n  iconLeftComponent?: ReactNode\n  iconLeftColor?: ColorTypes\n  iconRight?: Icons\n  iconRightColor?: ColorTypes\n  iconRightComponent?: ReactNode\n  handleClick?: () => void\n  heading: string\n  subHeading?: string\n  type?: 'first' | 'last' | 'curved'\n  borderTop?: boolean\n  borderBottom?: boolean\n  boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n  iconLeft,\n  iconLeftComponent,\n  iconLeftColor = 'color.icon.base',\n  iconRight,\n  iconRightComponent,\n  iconRightColor = 'color.icon.nonEssential',\n  handleClick,\n  heading,\n  subHeading,\n  type,\n  borderTop = true,\n  borderBottom = true,\n  boldHeading,\n  ...marginProps\n}) => {\n  const windowWidth = screen.width\n  const iconLeftSize = windowWidth > 768 ? 24 : 16\n  const { color } = useTheme()\n\n  const iconLeftToRender = iconLeftComponent ? (\n    <IconContainer $size={iconLeftSize} color={color.icon.base}>\n      {iconLeftComponent}\n    </IconContainer>\n  ) : iconLeft ? (\n    <Icon render={iconLeft} size={iconLeftSize} color={iconLeftColor} />\n  ) : null\n\n  const iconRightToRender = iconRightComponent ? (\n    <IconContainer $size={24} color={color.icon.nonEssential}>\n      {iconRightComponent}\n    </IconContainer>\n  ) : iconRight ? (\n    <Icon\n      render={iconRight}\n      size={24}\n      rotate={iconRight === 'caret' ? -90 : 0}\n      color={iconRightColor}\n    />\n  ) : null\n\n  return (\n    <Container\n      $type={type}\n      $iconLeft={Boolean(iconLeft || iconLeftComponent)}\n      $borderTop={borderTop}\n      $borderBottom={borderBottom}\n      $iconRight={Boolean(iconRight || iconRightComponent)}\n      onClick={handleClick}\n      $boldHeading={boldHeading}\n      {...marginProps}\n    >\n      {iconLeftToRender}\n      <Box>\n        <Text tag=\"h1\" typo=\"body-regular\">\n          {heading}\n        </Text>\n        <Text tag=\"p\" typo=\"body-small\" color=\"sesame\">\n          {subHeading}\n        </Text>\n      </Box>\n      {iconRightToRender}\n    </Container>\n  )\n}\n\ninterface IContainer {\n  $type?: 'first' | 'last' | 'curved'\n  $iconLeft?: boolean\n  $iconRight?: boolean\n  $borderTop: boolean\n  $borderBottom: boolean\n  $boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n  ({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading, theme }) => css`\n    border-radius: ${($type === 'first' && `16px 16px 0 0`) ||\n    ($type === 'curved' && `16px`) ||\n    ($type === 'last' && `0 0 16px 16px`) ||\n    0};\n\n    border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'\n      ? `1px solid ${theme.color.border.subtle}`\n      : 'none'};\n    border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'\n      ? `1px solid ${theme.color.border.subtle}`\n      : 'none'};\n\n    background-color: ${theme.color.surface.base[300]};\n    display: grid;\n    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n    padding: 16px;\n    grid-gap: 16px;\n    align-items: center;\n\n    cursor: pointer;\n\n    h1 {\n      font-weight: ${$boldHeading && 500};\n    }\n\n    .iconRight {\n      justify-self: end;\n    }\n\n    @media (min-width: 768px) {\n      grid-gap: 24px;\n    }\n  `,\n)\n"]}

package/dist/SearchInput/SearchInput.d.ts

@@ -39,12 +39,3 @@ export interface SearchInputProps extends CommonFieldProps {
     fuzzySearchOptions?: IFuseOptions<SearchInputItem>;
 }
 export declare const SearchInput: import("react").ForwardRefExoticComponent<SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
-export declare const Icons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").MarginProps & import("..").PaddingProps & import("../utils/flex").FlexProps & import("../utils/measure").MeasureProps & import("react").HTMLAttributes<HTMLElement> & {
-    as?: import("react").ElementType;
-    forwardedAs?: import("react").ElementType;
-} & import("react").RefAttributes<HTMLDivElement>, {
-    $clearSearch: boolean;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").MarginProps & import("..").PaddingProps & import("../utils/flex").FlexProps & import("../utils/measure").MeasureProps & import("react").HTMLAttributes<HTMLElement> & {
-    as?: import("react").ElementType;
-    forwardedAs?: import("react").ElementType;
-} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/SearchInput/SearchInput.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Fuse from 'fuse.js';
 import { forwardRef, useMemo, useRef, useState, } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { Box } from '../Box';
-import { IconStrict } from '../IconStrict';
 import { Field } from '../fields/Field';
-import { Input, StyledFrontIcon } from '../fields/components/CommonInput';
+import { Input, InputLeadingIconContainer, } from '../fields/components/CommonInput';
 import { useOnClickOutside } from '../hooks';
 import { useUniqueId } from '../utils/id';
 import { useControllableState } from '../utils/useControlledState';
 import { SearchOptions } from './components/SearchOptions';
+import { IconContainer } from '../sharedStyles/shared.styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faXmark, faChevronDown, faSearch, } from '@awesome.me/kit-46ca99185c/icons/classic/regular';
 const defaultFuzzySearchOptions = {
     keys: [
         {
@@ -29,6 +31,7 @@ const defaultFuzzySearchOptions = {
 };
 export const SearchInput = forwardRef(function SearchInput({ id: idProp, name = 'search_input', className = '', placeholder, searchList, showIcon = false, renderAsTitle = false, value, onBlur, onFound, onNotFound, notFoundComponent, fallbackStyle, resultsRelativePosition = false, resultsBorder = true, enableFuzzySearch = false, fuzzySearchOptions, clearSearch, ...otherProps }, ref) {
     const wrapperRef = useRef(null);
+    const theme = useTheme();
     const id = useUniqueId(idProp);
     const [showOptions, setShowOptions] = useState(false);
     const [selectedValue, setSelectedValue] = useControllableState({
@@ -136,9 +139,11 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
         }
     };
     const showClearSearchButton = !!clearSearch && (!!value || !!selectedValue || !!searchQuery);
-    return (_jsx(Wrapper, { ref: wrapperRef, children: _jsxs(Field, { className: className, renderAsTitle: renderAsTitle, htmlFor: id, ...otherProps, children: [_jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [showIcon && _jsx(StyledFrontIcon, { render: "search", color: "sesame" }), _jsx(Input, { id: id, name: name, ref: ref, placeholder: placeholder, "$error": otherProps.error, "$frontIcon": showIcon ? 'search' : undefined, "$fallbackStyle": fallbackStyle, autoComplete: "off", value: displayedInputText, onFocus: handleClick, onChange: handleInputChange, selected: isSelected, onClick: handleClick, onKeyDown: handleKeyDown, onBlur: (e) => {
+    return (_jsx(Wrapper, { ref: wrapperRef, children: _jsxs(Field, { className: className, renderAsTitle: renderAsTitle, htmlFor: id, ...otherProps, children: [_jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [showIcon && (_jsx(InputLeadingIconContainer, { "$size": 20, children: _jsx(FontAwesomeIcon, { icon: faSearch, color: theme.color.text.subtle }) })), _jsx(Input, { id: id, name: name, ref: ref, placeholder: placeholder, "$error": otherProps.error, "$frontIcon": showIcon, "$fallbackStyle": fallbackStyle, autoComplete: "off", value: displayedInputText, onFocus: handleClick, onChange: handleInputChange, selected: isSelected, onClick: handleClick, onKeyDown: handleKeyDown, onBlur: (e) => {
                                 onBlur?.(e);
-                            } }), _jsxs(Icons, { flex: true, alignItems: "center", gap: "8px", "$clearSearch": showClearSearchButton, children: [showClearSearchButton && (_jsx(IconStrict, { type: "button", render: "plus", rotate: 45, iconColor: "color.illustration.neutral.400", title: "Clear search", handleClick: handleClearSearch, size: 24 })), _jsx(Line, {}), _jsx(IconStrict, { type: "button", render: "caret", iconColor: "color.illustration.neutral.400", rotate: showOptions ? 180 : 0, handleClick: handleCaretClick, size: 24 })] })] }), showOptions && (_jsx(SearchOptions, { displayedList: filteredList, selectedValue: selectedValue, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onKeyDown: handleKeyDown, searchTerm: searchQuery || '', onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder, onNotFound: onNotFound, notFoundComponent: notFoundComponent?.(searchQuery ?? '') }))] }) }));
+                            } }), _jsxs(Icons, { flex: true, alignItems: "center", gap: "8px", "$clearSearch": showClearSearchButton, children: [showClearSearchButton && (_jsx(IconContainer, { title: "Clear search", onClick: handleClearSearch, type: "button", as: "button", "$size": 20, style: { cursor: 'pointer' }, children: _jsx(FontAwesomeIcon, { icon: faXmark, color: theme.color.illustration.neutral[400] }) })), _jsx(Line, {}), _jsx(IconContainer, { type: "button", title: "icon-button", as: "button", onClick: handleCaretClick, "$size": 20, children: _jsx(FontAwesomeIcon, { style: {
+                                            rotate: showOptions ? '180deg' : '0deg',
+                                        }, icon: faChevronDown, color: theme.color.illustration.neutral[400] }) })] })] }), showOptions && (_jsx(SearchOptions, { displayedList: filteredList, selectedValue: selectedValue, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onKeyDown: handleKeyDown, searchTerm: searchQuery || '', onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder, onNotFound: onNotFound, notFoundComponent: notFoundComponent?.(searchQuery ?? '') }))] }) }));
 });
 const Wrapper = styled(Box) `
   position: relative;
@@ -148,7 +153,7 @@ const Line = styled(Box) `
   height: 24px;
   width: 1px;
 `;
-export const Icons = styled(Box) `
+const Icons = styled(Box) `
   position: relative;
   right: ${({ $clearSearch }) => ($clearSearch ? '80px' : '48px')};
   margin-right: ${({ $clearSearch }) => ($clearSearch ? '-80px' : '-48px')};

package/dist/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import Fuse, { IFuseOptions } from 'fuse.js'\nimport {\n  ChangeEvent,\n  FocusEvent,\n  ReactNode,\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Input, StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useOnClickOutside } from '../hooks'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { SearchOptions } from './components/SearchOptions'\n\nexport type SearchInputItem = {\n  label: string\n  value: string\n  tags?: any[]\n}\n\nexport interface SearchInputProps extends CommonFieldProps {\n  /** Optional input className */\n  name?: string\n  /**  Optional placeholder text */\n  placeholder?: string\n  /**  List of input items to search on*/\n  searchList: SearchInputItem[]\n  /**  callback to handle found item click */\n  onFound: (element: string) => void\n  /**  optional callback to run when no results found */\n  onNotFound?: (searchTerm: string) => void\n  /**  optional Component to render when no results found */\n  notFoundComponent?: (searchTerm: string) => ReactNode\n  /**  optional boolean to show search icon */\n  showIcon?: boolean\n  /**  optional boolean to show a clear search button */\n  clearSearch?: boolean\n  /**  Optional callback to run on blur */\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**  Optional default value for input */\n  value?: string\n  /**  Optional boolean to move results to a realtive position */\n  resultsRelativePosition?: boolean\n  /**  optional boolean to add border to results */\n  resultsBorder?: boolean\n  /** optional boolean to enable fuzzy search via fuse.js */\n  enableFuzzySearch?: boolean\n  /** optional config of fuzzy search\n   *  passing a value to this prop, automatically enables fuzzy search\n   */\n  fuzzySearchOptions?: IFuseOptions<SearchInputItem>\n}\n\nconst defaultFuzzySearchOptions = {\n  keys: [\n    {\n      name: 'label',\n      weight: 0.6,\n    },\n    {\n      name: 'tags',\n      weight: 0.4,\n    },\n  ],\n  findAllMatches: true,\n  minMatchCharLength: 1,\n  location: 0,\n  threshold: 0.45,\n  distance: 55,\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      id: idProp,\n      name = 'search_input',\n      className = '',\n      placeholder,\n      searchList,\n      showIcon = false,\n      renderAsTitle = false,\n      value,\n      onBlur,\n      onFound,\n      onNotFound,\n      notFoundComponent,\n      fallbackStyle,\n      resultsRelativePosition = false,\n      resultsBorder = true,\n      enableFuzzySearch = false,\n      fuzzySearchOptions,\n      clearSearch,\n      ...otherProps\n    },\n    ref,\n  ) {\n    const wrapperRef = useRef(null)\n    const id = useUniqueId(idProp)\n    const [showOptions, setShowOptions] = useState(false)\n    const [selectedValue, setSelectedValue] = useControllableState<\n      string | null\n    >({\n      initialState: null,\n      stateProp: value,\n    })\n    const [searchQuery, setSearchQuery] = useState<string | null>(null)\n    const [highlightedIndex, setHighlightedIndex] = useState(-1)\n\n    const selectedValueLabel = searchList.find(\n      (option) =>\n        option.label === selectedValue || option.value === selectedValue,\n    )?.label\n\n    const handleBlur = () => {\n      if (selectedValue) {\n        setSearchQuery(selectedValueLabel ?? null)\n      } else if (!selectedValue) {\n        setSearchQuery(null)\n      }\n    }\n\n    useOnClickOutside({\n      ref: wrapperRef,\n      callback: () => {\n        handleBlur()\n        setShowOptions(false)\n      },\n    })\n\n    const fuse = useMemo(() => {\n      return new Fuse(searchList, {\n        ...defaultFuzzySearchOptions,\n        ...fuzzySearchOptions,\n      })\n    }, [searchList])\n\n    const filteredList = useMemo(() => {\n      if (searchQuery === null || searchQuery === '') {\n        return searchList\n      }\n\n      if (enableFuzzySearch || !!fuzzySearchOptions) {\n        return fuse.search(searchQuery).map(({ item }) => item)\n      }\n\n      return searchList.filter(({ label }) =>\n        label.toLowerCase().includes(searchQuery.toLocaleLowerCase()),\n      )\n    }, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions])\n\n    const getDisplayedInputText = () => {\n      if (searchQuery !== null) {\n        return searchQuery\n      }\n      if (selectedValue !== null) {\n        return selectedValueLabel || ''\n      }\n      return ''\n    }\n\n    const isSelected = selectedValue !== null\n    const displayedInputText = getDisplayedInputText()\n\n    const updateSearchQuery = (query: string | null) => {\n      setSearchQuery(query)\n      setHighlightedIndex(-1)\n\n      if (query === null) {\n        setSelectedValue(null)\n        setShowOptions(false)\n      } else {\n        setShowOptions(true)\n      }\n    }\n\n    const handleClick = () => {\n      setShowOptions(true)\n      if (searchQuery !== null) {\n        updateSearchQuery(searchQuery)\n        setShowOptions(true)\n      } else if (selectedValue !== null && searchQuery === null) {\n        setSearchQuery(selectedValueLabel || null)\n        setShowOptions(true)\n      }\n    }\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {\n      const nextValue = event.currentTarget.value\n      updateSearchQuery(nextValue)\n    }\n\n    const handleSelect = (nextValue: SearchInputItem): void => {\n      updateSearchQuery(null)\n      setSelectedValue(nextValue.label)\n      onFound(nextValue.value)\n    }\n\n    const handleClearSearch = () => {\n      updateSearchQuery(null)\n      setSelectedValue(null)\n      onFound('')\n    }\n\n    const handleCaretClick = () => {\n      setShowOptions(!showOptions)\n    }\n\n    const handleKeyDown = (event: {\n      key: string\n      preventDefault: () => void\n    }) => {\n      if (event.key === 'Enter' && highlightedIndex !== -1) {\n        event.preventDefault()\n        const focusedItem = filteredList[highlightedIndex]\n        handleSelect(focusedItem)\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault()\n        const nextIndex = (highlightedIndex + 1) % filteredList.length\n        setHighlightedIndex(nextIndex)\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        const prevIndex =\n          (highlightedIndex - 1 + filteredList.length) % filteredList.length\n        setHighlightedIndex(prevIndex)\n      }\n    }\n\n    const showClearSearchButton =\n      !!clearSearch && (!!value || !!selectedValue || !!searchQuery)\n\n    return (\n      <Wrapper ref={wrapperRef}>\n        <Field\n          className={className}\n          renderAsTitle={renderAsTitle}\n          htmlFor={id}\n          {...otherProps}\n        >\n          <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n            {showIcon && <StyledFrontIcon render=\"search\" color=\"sesame\" />}\n            <Input\n              id={id}\n              name={name}\n              ref={ref}\n              placeholder={placeholder}\n              $error={otherProps.error}\n              $frontIcon={showIcon ? 'search' : undefined}\n              $fallbackStyle={fallbackStyle}\n              autoComplete=\"off\"\n              value={displayedInputText}\n              onFocus={handleClick}\n              onChange={handleInputChange}\n              selected={isSelected}\n              onClick={handleClick}\n              onKeyDown={handleKeyDown}\n              onBlur={(e) => {\n                onBlur?.(e)\n              }}\n            />\n            <Icons\n              flex\n              alignItems=\"center\"\n              gap=\"8px\"\n              $clearSearch={showClearSearchButton}\n            >\n              {showClearSearchButton && (\n                <IconStrict\n                  type=\"button\"\n                  render=\"plus\"\n                  rotate={45}\n                  iconColor=\"color.illustration.neutral.400\"\n                  title=\"Clear search\"\n                  handleClick={handleClearSearch}\n                  size={24}\n                />\n              )}\n              <Line />\n              <IconStrict\n                type=\"button\"\n                render=\"caret\"\n                iconColor=\"color.illustration.neutral.400\"\n                rotate={showOptions ? 180 : 0}\n                handleClick={handleCaretClick}\n                size={24}\n              />\n            </Icons>\n          </Box>\n\n          {showOptions && (\n            <SearchOptions\n              displayedList={filteredList}\n              selectedValue={selectedValue}\n              highlightedIndex={highlightedIndex}\n              setHighlightedIndex={setHighlightedIndex}\n              onKeyDown={handleKeyDown}\n              searchTerm={searchQuery || ''}\n              onSelect={handleSelect}\n              positionRelative={resultsRelativePosition}\n              resultsBorder={resultsBorder}\n              onNotFound={onNotFound}\n              notFoundComponent={notFoundComponent?.(searchQuery ?? '')}\n            />\n          )}\n        </Field>\n      </Wrapper>\n    )\n  },\n)\n\nconst Wrapper = styled(Box)`\n  position: relative;\n`\n\nconst Line = styled(Box)`\n  background: ${({ theme }) => theme.color.border.subtle};\n  height: 24px;\n  width: 1px;\n`\n\nexport const Icons = styled(Box)<{ $clearSearch: boolean }>`\n  position: relative;\n  right: ${({ $clearSearch }) => ($clearSearch ? '80px' : '48px')};\n  margin-right: ${({ $clearSearch }) => ($clearSearch ? '-80px' : '-48px')};\n`\n"]}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAsB,MAAM,SAAS,CAAA;AAC5C,OAAO,EAIL,UAAU,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EACL,KAAK,EACL,yBAAyB,GAC1B,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EACL,OAAO,EACP,aAAa,EACb,QAAQ,GACT,MAAM,kDAAkD,CAAA;AAyCzD,MAAM,yBAAyB,GAAG;IAChC,IAAI,EAAE;QACJ;YACE,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,GAAG;SACZ;QACD;YACE,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,GAAG;SACZ;KACF;IACD,cAAc,EAAE,IAAI;IACpB,kBAAkB,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,EAAE;CACb,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,WAAW,EACX,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,uBAAuB,GAAG,KAAK,EAC/B,aAAa,GAAG,IAAI,EACpB,iBAAiB,GAAG,KAAK,EACzB,kBAAkB,EAClB,WAAW,EACX,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC/B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,oBAAoB,CAE5D;QACA,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAA;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IACnE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;IAE5D,MAAM,kBAAkB,GAAG,UAAU,CAAC,IAAI,CACxC,CAAC,MAAM,EAAE,EAAE,CACT,MAAM,CAAC,KAAK,KAAK,aAAa,IAAI,MAAM,CAAC,KAAK,KAAK,aAAa,CACnE,EAAE,KAAK,CAAA;IAER,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,aAAa,EAAE,CAAC;YAClB,cAAc,CAAC,kBAAkB,IAAI,IAAI,CAAC,CAAA;QAC5C,CAAC;aAAM,IAAI,CAAC,aAAa,EAAE,CAAC;YAC1B,cAAc,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,CAAA;IAED,iBAAiB,CAAC;QAChB,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,GAAG,EAAE;YACb,UAAU,EAAE,CAAA;YACZ,cAAc,CAAC,KAAK,CAAC,CAAA;QACvB,CAAC;KACF,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE;YAC1B,GAAG,yBAAyB;YAC5B,GAAG,kBAAkB;SACtB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,EAAE,EAAE,CAAC;YAC/C,OAAO,UAAU,CAAA;QACnB,CAAC;QAED,IAAI,iBAAiB,IAAI,CAAC,CAAC,kBAAkB,EAAE,CAAC;YAC9C,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,CAAA;QACzD,CAAC;QAED,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAC,CAC9D,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAE1D,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACzB,OAAO,WAAW,CAAA;QACpB,CAAC;QACD,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC3B,OAAO,kBAAkB,IAAI,EAAE,CAAA;QACjC,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,aAAa,KAAK,IAAI,CAAA;IACzC,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAA;IAElD,MAAM,iBAAiB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACjD,cAAc,CAAC,KAAK,CAAC,CAAA;QACrB,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAA;QAEvB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAA;YACtB,cAAc,CAAC,KAAK,CAAC,CAAA;QACvB,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,cAAc,CAAC,IAAI,CAAC,CAAA;QACpB,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACzB,iBAAiB,CAAC,WAAW,CAAC,CAAA;YAC9B,cAAc,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC;aAAM,IAAI,aAAa,KAAK,IAAI,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YAC1D,cAAc,CAAC,kBAAkB,IAAI,IAAI,CAAC,CAAA;YAC1C,cAAc,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,KAAoC,EAAQ,EAAE;QACvE,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;QAC3C,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,SAA0B,EAAQ,EAAE;QACxD,iBAAiB,CAAC,IAAI,CAAC,CAAA;QACvB,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QACjC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAA;QACvB,gBAAgB,CAAC,IAAI,CAAC,CAAA;QACtB,OAAO,CAAC,EAAE,CAAC,CAAA;IACb,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,cAAc,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,CAAC,KAGtB,EAAE,EAAE;QACH,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,gBAAgB,KAAK,CAAC,CAAC,EAAE,CAAC;YACrD,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,WAAW,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAA;YAClD,YAAY,CAAC,WAAW,CAAC,CAAA;QAC3B,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACrC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,SAAS,GAAG,CAAC,gBAAgB,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,CAAA;YAC9D,mBAAmB,CAAC,SAAS,CAAC,CAAA;QAChC,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,SAAS,GACb,CAAC,gBAAgB,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,MAAM,CAAA;YACpE,mBAAmB,CAAC,SAAS,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,qBAAqB,GACzB,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IAEhE,OAAO,CACL,KAAC,OAAO,IAAC,GAAG,EAAE,UAAU,YACtB,MAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,EAAE,KACP,UAAU,aAEd,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,aACtD,QAAQ,IAAI,CACX,KAAC,yBAAyB,aAAQ,EAAE,YAClC,KAAC,eAAe,IACd,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAC9B,GACwB,CAC7B,EACD,KAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,YAChB,UAAU,CAAC,KAAK,gBACZ,QAAQ,oBACJ,aAAa,EAC7B,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,iBAAiB,EAC3B,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gCACZ,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;4BACb,CAAC,GACD,EACF,MAAC,KAAK,IACJ,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,KAAK,kBACK,qBAAqB,aAElC,qBAAqB,IAAI,CACxB,KAAC,aAAa,IACZ,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,iBAAiB,EAC1B,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,QAAQ,WACJ,EAAE,EACT,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAE5B,KAAC,eAAe,IACd,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,GAC5C,GACY,CACjB,EACD,KAAC,IAAI,KAAG,EACR,KAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,QAAQ,EACX,OAAO,EAAE,gBAAgB,WAClB,EAAE,YAET,KAAC,eAAe,IACd,KAAK,EAAE;4CACL,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;yCACxC,EACD,IAAI,EAAE,aAAa,EACnB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,GAC5C,GACY,IACV,IACJ,EAEL,WAAW,IAAI,CACd,KAAC,aAAa,IACZ,aAAa,EAAE,YAAY,EAC3B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,WAAW,IAAI,EAAE,EAC7B,QAAQ,EAAE,YAAY,EACtB,gBAAgB,EAAE,uBAAuB,EACzC,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,GACzD,CACH,IACK,GACA,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1B,CAAA;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;gBACR,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;CAGvD,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAA2B;;WAEzC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;kBAC/C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;CACzE,CAAA","sourcesContent":["import Fuse, { IFuseOptions } from 'fuse.js'\nimport {\n  ChangeEvent,\n  FocusEvent,\n  ReactNode,\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  Input,\n  InputLeadingIconContainer,\n} from '../fields/components/CommonInput'\nimport { useOnClickOutside } from '../hooks'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { SearchOptions } from './components/SearchOptions'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faXmark,\n  faChevronDown,\n  faSearch,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nexport type SearchInputItem = {\n  label: string\n  value: string\n  tags?: any[]\n}\n\nexport interface SearchInputProps extends CommonFieldProps {\n  /** Optional input className */\n  name?: string\n  /**  Optional placeholder text */\n  placeholder?: string\n  /**  List of input items to search on*/\n  searchList: SearchInputItem[]\n  /**  callback to handle found item click */\n  onFound: (element: string) => void\n  /**  optional callback to run when no results found */\n  onNotFound?: (searchTerm: string) => void\n  /**  optional Component to render when no results found */\n  notFoundComponent?: (searchTerm: string) => ReactNode\n  /**  optional boolean to show search icon */\n  showIcon?: boolean\n  /**  optional boolean to show a clear search button */\n  clearSearch?: boolean\n  /**  Optional callback to run on blur */\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**  Optional default value for input */\n  value?: string\n  /**  Optional boolean to move results to a realtive position */\n  resultsRelativePosition?: boolean\n  /**  optional boolean to add border to results */\n  resultsBorder?: boolean\n  /** optional boolean to enable fuzzy search via fuse.js */\n  enableFuzzySearch?: boolean\n  /** optional config of fuzzy search\n   *  passing a value to this prop, automatically enables fuzzy search\n   */\n  fuzzySearchOptions?: IFuseOptions<SearchInputItem>\n}\n\nconst defaultFuzzySearchOptions = {\n  keys: [\n    {\n      name: 'label',\n      weight: 0.6,\n    },\n    {\n      name: 'tags',\n      weight: 0.4,\n    },\n  ],\n  findAllMatches: true,\n  minMatchCharLength: 1,\n  location: 0,\n  threshold: 0.45,\n  distance: 55,\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      id: idProp,\n      name = 'search_input',\n      className = '',\n      placeholder,\n      searchList,\n      showIcon = false,\n      renderAsTitle = false,\n      value,\n      onBlur,\n      onFound,\n      onNotFound,\n      notFoundComponent,\n      fallbackStyle,\n      resultsRelativePosition = false,\n      resultsBorder = true,\n      enableFuzzySearch = false,\n      fuzzySearchOptions,\n      clearSearch,\n      ...otherProps\n    },\n    ref,\n  ) {\n    const wrapperRef = useRef(null)\n    const theme = useTheme()\n    const id = useUniqueId(idProp)\n    const [showOptions, setShowOptions] = useState(false)\n    const [selectedValue, setSelectedValue] = useControllableState<\n      string | null\n    >({\n      initialState: null,\n      stateProp: value,\n    })\n    const [searchQuery, setSearchQuery] = useState<string | null>(null)\n    const [highlightedIndex, setHighlightedIndex] = useState(-1)\n\n    const selectedValueLabel = searchList.find(\n      (option) =>\n        option.label === selectedValue || option.value === selectedValue,\n    )?.label\n\n    const handleBlur = () => {\n      if (selectedValue) {\n        setSearchQuery(selectedValueLabel ?? null)\n      } else if (!selectedValue) {\n        setSearchQuery(null)\n      }\n    }\n\n    useOnClickOutside({\n      ref: wrapperRef,\n      callback: () => {\n        handleBlur()\n        setShowOptions(false)\n      },\n    })\n\n    const fuse = useMemo(() => {\n      return new Fuse(searchList, {\n        ...defaultFuzzySearchOptions,\n        ...fuzzySearchOptions,\n      })\n    }, [searchList])\n\n    const filteredList = useMemo(() => {\n      if (searchQuery === null || searchQuery === '') {\n        return searchList\n      }\n\n      if (enableFuzzySearch || !!fuzzySearchOptions) {\n        return fuse.search(searchQuery).map(({ item }) => item)\n      }\n\n      return searchList.filter(({ label }) =>\n        label.toLowerCase().includes(searchQuery.toLocaleLowerCase()),\n      )\n    }, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions])\n\n    const getDisplayedInputText = () => {\n      if (searchQuery !== null) {\n        return searchQuery\n      }\n      if (selectedValue !== null) {\n        return selectedValueLabel || ''\n      }\n      return ''\n    }\n\n    const isSelected = selectedValue !== null\n    const displayedInputText = getDisplayedInputText()\n\n    const updateSearchQuery = (query: string | null) => {\n      setSearchQuery(query)\n      setHighlightedIndex(-1)\n\n      if (query === null) {\n        setSelectedValue(null)\n        setShowOptions(false)\n      } else {\n        setShowOptions(true)\n      }\n    }\n\n    const handleClick = () => {\n      setShowOptions(true)\n      if (searchQuery !== null) {\n        updateSearchQuery(searchQuery)\n        setShowOptions(true)\n      } else if (selectedValue !== null && searchQuery === null) {\n        setSearchQuery(selectedValueLabel || null)\n        setShowOptions(true)\n      }\n    }\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {\n      const nextValue = event.currentTarget.value\n      updateSearchQuery(nextValue)\n    }\n\n    const handleSelect = (nextValue: SearchInputItem): void => {\n      updateSearchQuery(null)\n      setSelectedValue(nextValue.label)\n      onFound(nextValue.value)\n    }\n\n    const handleClearSearch = () => {\n      updateSearchQuery(null)\n      setSelectedValue(null)\n      onFound('')\n    }\n\n    const handleCaretClick = () => {\n      setShowOptions(!showOptions)\n    }\n\n    const handleKeyDown = (event: {\n      key: string\n      preventDefault: () => void\n    }) => {\n      if (event.key === 'Enter' && highlightedIndex !== -1) {\n        event.preventDefault()\n        const focusedItem = filteredList[highlightedIndex]\n        handleSelect(focusedItem)\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault()\n        const nextIndex = (highlightedIndex + 1) % filteredList.length\n        setHighlightedIndex(nextIndex)\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        const prevIndex =\n          (highlightedIndex - 1 + filteredList.length) % filteredList.length\n        setHighlightedIndex(prevIndex)\n      }\n    }\n\n    const showClearSearchButton =\n      !!clearSearch && (!!value || !!selectedValue || !!searchQuery)\n\n    return (\n      <Wrapper ref={wrapperRef}>\n        <Field\n          className={className}\n          renderAsTitle={renderAsTitle}\n          htmlFor={id}\n          {...otherProps}\n        >\n          <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n            {showIcon && (\n              <InputLeadingIconContainer $size={20}>\n                <FontAwesomeIcon\n                  icon={faSearch}\n                  color={theme.color.text.subtle}\n                />\n              </InputLeadingIconContainer>\n            )}\n            <Input\n              id={id}\n              name={name}\n              ref={ref}\n              placeholder={placeholder}\n              $error={otherProps.error}\n              $frontIcon={showIcon}\n              $fallbackStyle={fallbackStyle}\n              autoComplete=\"off\"\n              value={displayedInputText}\n              onFocus={handleClick}\n              onChange={handleInputChange}\n              selected={isSelected}\n              onClick={handleClick}\n              onKeyDown={handleKeyDown}\n              onBlur={(e) => {\n                onBlur?.(e)\n              }}\n            />\n            <Icons\n              flex\n              alignItems=\"center\"\n              gap=\"8px\"\n              $clearSearch={showClearSearchButton}\n            >\n              {showClearSearchButton && (\n                <IconContainer\n                  title=\"Clear search\"\n                  onClick={handleClearSearch}\n                  type=\"button\"\n                  as=\"button\"\n                  $size={20}\n                  style={{ cursor: 'pointer' }}\n                >\n                  <FontAwesomeIcon\n                    icon={faXmark}\n                    color={theme.color.illustration.neutral[400]}\n                  />\n                </IconContainer>\n              )}\n              <Line />\n              <IconContainer\n                type=\"button\"\n                title=\"icon-button\"\n                as=\"button\"\n                onClick={handleCaretClick}\n                $size={20}\n              >\n                <FontAwesomeIcon\n                  style={{\n                    rotate: showOptions ? '180deg' : '0deg',\n                  }}\n                  icon={faChevronDown}\n                  color={theme.color.illustration.neutral[400]}\n                />\n              </IconContainer>\n            </Icons>\n          </Box>\n\n          {showOptions && (\n            <SearchOptions\n              displayedList={filteredList}\n              selectedValue={selectedValue}\n              highlightedIndex={highlightedIndex}\n              setHighlightedIndex={setHighlightedIndex}\n              onKeyDown={handleKeyDown}\n              searchTerm={searchQuery || ''}\n              onSelect={handleSelect}\n              positionRelative={resultsRelativePosition}\n              resultsBorder={resultsBorder}\n              onNotFound={onNotFound}\n              notFoundComponent={notFoundComponent?.(searchQuery ?? '')}\n            />\n          )}\n        </Field>\n      </Wrapper>\n    )\n  },\n)\n\nconst Wrapper = styled(Box)`\n  position: relative;\n`\n\nconst Line = styled(Box)`\n  background: ${({ theme }) => theme.color.border.subtle};\n  height: 24px;\n  width: 1px;\n`\n\nconst Icons = styled(Box)<{ $clearSearch: boolean }>`\n  position: relative;\n  right: ${({ $clearSearch }) => ($clearSearch ? '80px' : '48px')};\n  margin-right: ${({ $clearSearch }) => ($clearSearch ? '-80px' : '-48px')};\n`\n"]}

package/dist/Snackbar/SnackbarItem.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { Box } from '../Box';
 import { useTimeout } from '../hooks';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
-export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, canManuallyClose, showCloseIcon, deleteSnack, }) => {
+import { IconContainer } from '../sharedStyles/shared.styles';
+import { faXmark } from '@awesome.me/kit-46ca99185c/icons/classic/regular';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, iconComponent, canManuallyClose, showCloseIcon, deleteSnack, }) => {
     useTimeout(() => deleteSnack(id), autoCloseTime * 1000);
-    return (_jsxs(SnackItem, { p: "16px", mt: "16px", flex: true, justifyContent: "space-between", children: [_jsxs(Box, { flex: true, alignItems: "center", children: [leadingIcon && (_jsx(Icon, { mr: "12px", render: leadingIcon, size: 24, color: "color.surface.base.200" })), _jsx(Text, { typo: "body-small", color: "color.surface.base.200", children: message })] }), canManuallyClose && (_jsx(CloseButton, { onClick: () => deleteSnack(id), "aria-label": `close snackbar ${message}`, children: showCloseIcon ? (_jsx(Icon, { render: "cross", size: 16, color: "color.surface.base.200" })) : (_jsx(UnderlinedText, { tag: "span", typo: "headline-small", color: "color.surface.base.200", children: "Dismiss" })) }))] }, id));
+    const theme = useTheme();
+    const iconToRender = iconComponent ? (_jsx(IconContainer, { style: { marginRight: '24px' }, "$size": 24, "$iconColor": theme.color.surface.base[200], children: iconComponent })) : leadingIcon ? (_jsx(Icon, { render: leadingIcon, size: 24, color: "color.surface.base.200", mr: "12px" })) : null;
+    return (_jsxs(SnackItem, { p: "16px", mt: "16px", flex: true, justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _jsx(Text, { typo: "body-small", color: "color.surface.base.200", children: message })] }), canManuallyClose && (_jsx(CloseButton, { onClick: () => deleteSnack(id), "aria-label": `close snackbar ${message}`, children: showCloseIcon ? (_jsx(IconContainer, { as: "span", "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faXmark, color: theme.color.surface.base[200] }) })) : (_jsx(UnderlinedText, { tag: "span", typo: "headline-small", color: "color.surface.base.200", children: "Dismiss" })) }))] }, id));
 };
 const SnackItem = styled(Box) `
   border-radius: 16px;

package/dist/Snackbar/SnackbarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAO9B,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,WAAW,GACZ,EAAE,EAAE;IACH,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAEvD,OAAO,CACL,MAAC,SAAS,IAAC,CAAC,EAAC,MAAM,EAAU,EAAE,EAAC,MAAM,EAAC,IAAI,QAAC,cAAc,EAAC,eAAe,aACxE,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,aAC1B,WAAW,IAAI,CACd,KAAC,IAAI,IACH,EAAE,EAAC,MAAM,EACT,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,wBAAwB,GAC9B,CACH,EACD,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,wBAAwB,YACnD,OAAO,GACH,IACH,EACL,gBAAgB,IAAI,CACnB,KAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,gBAClB,kBAAkB,OAAO,EAAE,YAEtC,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,wBAAwB,GAAG,CACjE,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IACb,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,wBAGf,CAClB,GACW,CACf,KA/BsB,EAAE,CAgCf,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;sBAEP,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;CACjE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;CAEhC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { useTimeout } from '../hooks'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { Snackbar } from './types'\n\ninterface Props extends Snackbar {\n  deleteSnack: (id: string) => void\n}\n\nexport const SnackbarItem: FC<Props> = ({\n  autoCloseTime = 4,\n  id,\n  message,\n  leadingIcon,\n  canManuallyClose,\n  showCloseIcon,\n  deleteSnack,\n}) => {\n  useTimeout(() => deleteSnack(id), autoCloseTime * 1000)\n\n  return (\n    <SnackItem p=\"16px\" key={id} mt=\"16px\" flex justifyContent=\"space-between\">\n      <Box flex alignItems=\"center\">\n        {leadingIcon && (\n          <Icon\n            mr=\"12px\"\n            render={leadingIcon}\n            size={24}\n            color=\"color.surface.base.200\"\n          />\n        )}\n        <Text typo=\"body-small\" color=\"color.surface.base.200\">\n          {message}\n        </Text>\n      </Box>\n      {canManuallyClose && (\n        <CloseButton\n          onClick={() => deleteSnack(id)}\n          aria-label={`close snackbar ${message}`}\n        >\n          {showCloseIcon ? (\n            <Icon render=\"cross\" size={16} color=\"color.surface.base.200\" />\n          ) : (\n            <UnderlinedText\n              tag=\"span\"\n              typo=\"headline-small\"\n              color=\"color.surface.base.200\"\n            >\n              Dismiss\n            </UnderlinedText>\n          )}\n        </CloseButton>\n      )}\n    </SnackItem>\n  )\n}\n\nconst SnackItem = styled(Box)`\n  border-radius: 16px;\n  background-color: ${({ theme }) => theme.color.surface.base[900]};\n`\n\nconst CloseButton = styled.button`\n  cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n  text-decoration: underline;\n`\n"]}
+{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAMhE,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,WAAW,GACZ,EAAE,EAAE;IACH,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,IACZ,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,WACvB,EAAE,gBACG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,YAExC,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,KAAC,IAAI,IACH,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,wBAAwB,EAC9B,EAAE,EAAC,MAAM,GACT,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,SAAS,IACR,CAAC,EAAC,MAAM,EAER,EAAE,EAAC,MAAM,EACT,IAAI,QACJ,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,aAEnB,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,aAC1B,YAAY,EACb,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,wBAAwB,YACnD,OAAO,GACH,IACH,EACL,gBAAgB,IAAI,CACnB,KAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,gBAClB,kBAAkB,OAAO,EAAE,YAEtC,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,aAAa,IAAC,EAAE,EAAC,MAAM,WAAQ,EAAE,YAChC,KAAC,eAAe,IACd,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GACpC,GACY,CACjB,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IACb,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,wBAGf,CAClB,GACW,CACf,KAlCI,EAAE,CAmCG,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;sBAEP,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;CACjE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;CAEhC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { useTimeout } from '../hooks'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { Snackbar } from './types'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { faXmark } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\ninterface Props extends Snackbar {\n  deleteSnack: (id: string) => void\n}\n\nexport const SnackbarItem: FC<Props> = ({\n  autoCloseTime = 4,\n  id,\n  message,\n  leadingIcon,\n  iconComponent,\n  canManuallyClose,\n  showCloseIcon,\n  deleteSnack,\n}) => {\n  useTimeout(() => deleteSnack(id), autoCloseTime * 1000)\n\n  const theme = useTheme()\n  const iconToRender = iconComponent ? (\n    <IconContainer\n      style={{ marginRight: '24px' }}\n      $size={24}\n      $iconColor={theme.color.surface.base[200]}\n    >\n      {iconComponent}\n    </IconContainer>\n  ) : leadingIcon ? (\n    <Icon\n      render={leadingIcon}\n      size={24}\n      color=\"color.surface.base.200\"\n      mr=\"12px\"\n    />\n  ) : null\n\n  return (\n    <SnackItem\n      p=\"16px\"\n      key={id}\n      mt=\"16px\"\n      flex\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n    >\n      <Box flex alignItems=\"center\">\n        {iconToRender}\n        <Text typo=\"body-small\" color=\"color.surface.base.200\">\n          {message}\n        </Text>\n      </Box>\n      {canManuallyClose && (\n        <CloseButton\n          onClick={() => deleteSnack(id)}\n          aria-label={`close snackbar ${message}`}\n        >\n          {showCloseIcon ? (\n            <IconContainer as=\"span\" $size={16}>\n              <FontAwesomeIcon\n                icon={faXmark}\n                color={theme.color.surface.base[200]}\n              />\n            </IconContainer>\n          ) : (\n            <UnderlinedText\n              tag=\"span\"\n              typo=\"headline-small\"\n              color=\"color.surface.base.200\"\n            >\n              Dismiss\n            </UnderlinedText>\n          )}\n        </CloseButton>\n      )}\n    </SnackItem>\n  )\n}\n\nconst SnackItem = styled(Box)`\n  border-radius: 16px;\n  background-color: ${({ theme }) => theme.color.surface.base[900]};\n`\n\nconst CloseButton = styled.button`\n  cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n  text-decoration: underline;\n`\n"]}

package/dist/Snackbar/types.d.ts

@@ -1,10 +1,11 @@
-import { Icons } from '../Icon/iconsList';
+import { Icons } from '../Icon';
 import { ReactNode } from 'react';
 export interface Snackbar {
     id: string;
     message: string;
     autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10;
     leadingIcon?: Icons;
+    iconComponent?: ReactNode;
     canManuallyClose?: boolean;
     showCloseIcon?: boolean;
 }

package/dist/Snackbar/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Snackbar/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from '../Icon/iconsList'\nimport { ReactNode } from 'react'\n\nexport interface Snackbar {\n  id: string\n  message: string\n  autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n  leadingIcon?: Icons\n  canManuallyClose?: boolean\n  showCloseIcon?: boolean\n}\n\nexport type CreateSnack = Omit<Snackbar, 'id'>\n\nexport interface SnackbarContextType {\n  addSnackbar: (snackbar: CreateSnack) => void\n}\n\nexport interface SnackbarContainerProps {\n  children?: ReactNode\n  portalContainer?: Element | DocumentFragment\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Snackbar/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from '../Icon'\nimport { ReactNode } from 'react'\n\nexport interface Snackbar {\n  id: string\n  message: string\n  autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n  leadingIcon?: Icons\n  iconComponent?: ReactNode\n  canManuallyClose?: boolean\n  showCloseIcon?: boolean\n}\n\nexport type CreateSnack = Omit<Snackbar, 'id'>\n\nexport interface SnackbarContextType {\n  addSnackbar: (snackbar: CreateSnack) => void\n}\n\nexport interface SnackbarContainerProps {\n  children?: ReactNode\n  portalContainer?: Element | DocumentFragment\n}\n"]}

package/dist/SupportMessage/SupportMessage.js

@@ -2,46 +2,47 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { darken } from 'polished';
 import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
-import { Icon } from '../Icon';
 import { Text } from '../Text';
 import { theme as oldTheme } from '../theme';
 import { isReactElement } from '../utils/isReactElement';
 import { resolveToThemeColor } from '../ThemeProvider/utils/colourMap';
+import { faCircleCheck, faCircleExclamation, faCircleInfo, faTriangleExclamation, } from '@awesome.me/kit-46ca99185c/icons/classic/regular';
+import { IconContainer } from '../sharedStyles/shared.styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronRight } from '@awesome.me/kit-46ca99185c/icons/classic/solid';
 const styles = {
     info: {
         iconColor: 'color.icon.base',
         backgroundColor: 'color.illustration.neutral.300',
-        icon: 'info',
+        icon: faCircleInfo,
     },
     fallbackStyle: {
         iconColor: 'color.icon.base',
         backgroundColor: 'color.surface.base.100',
-        icon: 'info',
+        icon: faCircleInfo,
     },
     alert: {
         iconColor: 'extended1.100',
         backgroundColor: 'color.feedback.notice.100',
-        icon: 'alert',
+        icon: faTriangleExclamation,
     },
     warning: {
         iconColor: 'color.feedback.negative.200',
         backgroundColor: 'color.feedback.negative.100',
-        icon: 'warning',
+        icon: faCircleExclamation,
     },
     success: {
         iconColor: 'color.feedback.positive.200',
         backgroundColor: 'color.feedback.positive.100',
-        icon: 'circle-tick',
+        icon: faCircleCheck,
     },
 };
 export const SupportMessage = ({ className, description, onClick, rightSideComponent, type, title, ...marginProps }) => {
     const theme = useTheme();
     const resolveBackgroundColor = resolveToThemeColor(styles[type].backgroundColor, theme);
-    return (_jsxs(Wrapper, { className: className, "$backgroundColor": resolveBackgroundColor, onClick: onClick, ...marginProps, children: [_jsx(IconWrapper, { alignItems: "center", children: _jsx(Icon, { size: 20, render: styles[type].icon, color: styles[type].iconColor }) }), _jsxs(Box, { flex: true, direction: "column", mx: "8px", children: [title && _jsx(Title, { children: title }), isReactElement(description) ? (_jsx(DescriptionBox, { children: description })) : (_jsx(Description, { tag: "p", children: description }))] }), rightSideComponent, onClick && rightSideComponent === undefined && (_jsx(Box, { ml: { custom: 'auto' }, children: _jsx(Icon, { size: 16, render: "caret", color: "color.illustration.neutral.400", rotate: 270 }) }))] }));
+    const resolvedIconColor = resolveToThemeColor(styles[type].iconColor, theme);
+    return (_jsxs(Wrapper, { className: className, "$backgroundColor": resolveBackgroundColor, onClick: onClick, ...marginProps, children: [_jsx(IconContainer, { "$size": 20, style: { alignSelf: 'flex-start' }, children: _jsx(FontAwesomeIcon, { icon: styles[type].icon, color: resolvedIconColor }) }), _jsxs(Box, { flex: true, direction: "column", mx: "8px", children: [title && _jsx(Title, { children: title }), isReactElement(description) ? (_jsx(DescriptionBox, { children: description })) : (_jsx(Description, { tag: "p", children: description }))] }), rightSideComponent, onClick && rightSideComponent === undefined && (_jsx(Box, { ml: { custom: 'auto' }, children: _jsx(IconContainer, { "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faChevronRight, color: theme.color.illustration.neutral[400] }) }) }))] }));
 };
-const IconWrapper = styled(Box) `
-  align-self: flex-start;
-`;
 const Wrapper = styled(Box)(({ $backgroundColor, onClick }) => css `
     align-items: center;
     background-color: ${$backgroundColor};

package/dist/SupportMessage/SupportMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ntype StylesItem = {\n  iconColor: NewColor\n  backgroundColor: NewColor\n  icon: Icons\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.illustration.neutral.300',\n    icon: 'info',\n  },\n  fallbackStyle: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.surface.base.100',\n    icon: 'info',\n  },\n  alert: {\n    iconColor: 'extended1.100',\n    backgroundColor: 'color.feedback.notice.100',\n    icon: 'alert',\n  },\n  warning: {\n    iconColor: 'color.feedback.negative.200',\n    backgroundColor: 'color.feedback.negative.100',\n    icon: 'warning',\n  },\n  success: {\n    iconColor: 'color.feedback.positive.200',\n    backgroundColor: 'color.feedback.positive.100',\n    icon: 'circle-tick',\n  },\n}\n\ntype SupportMessageType =\n  | 'info'\n  | 'fallbackStyle'\n  | 'alert'\n  | 'warning'\n  | 'success'\n\nexport type SupportMessageProps = {\n  className?: string\n  description: string | ReactElement<any>\n  onClick?: MouseEventHandler\n  /**\n   * Right side content, usually an icon or a button\n   */\n  rightSideComponent?: ReactElement<any>\n  type: SupportMessageType\n  title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n  className,\n  description,\n  onClick,\n  rightSideComponent,\n  type,\n  title,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const resolveBackgroundColor = resolveToThemeColor(\n    styles[type].backgroundColor,\n    theme,\n  )\n\n  return (\n    <Wrapper\n      className={className}\n      $backgroundColor={resolveBackgroundColor}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconWrapper alignItems=\"center\">\n        <Icon\n          size={20}\n          render={styles[type].icon}\n          color={styles[type].iconColor}\n        />\n      </IconWrapper>\n      <Box flex direction=\"column\" mx=\"8px\">\n        {title && <Title>{title}</Title>}\n        {isReactElement(description) ? (\n          <DescriptionBox>{description}</DescriptionBox>\n        ) : (\n          <Description tag=\"p\">{description}</Description>\n        )}\n      </Box>\n      {rightSideComponent}\n      {onClick && rightSideComponent === undefined && (\n        <Box ml={{ custom: 'auto' }}>\n          <Icon\n            size={16}\n            render=\"caret\"\n            color=\"color.illustration.neutral.400\"\n            rotate={270}\n          />\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  $backgroundColor: string\n  onClick?: MouseEventHandler\n}\n\nconst IconWrapper = styled(Box)`\n  align-self: flex-start;\n`\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ $backgroundColor, onClick }) => css`\n    align-items: center;\n    background-color: ${$backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: 12px;\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${darken(0.1, $backgroundColor)};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ theme }) => theme.color.text.base};\n  line-height: 20.8px;\n  margin-bottom: 4px;\n`\n\nconst DescriptionBox = styled(Box)`\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  font-size: 14px;\n  line-height: 20px;\n`\n"]}
+{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\n\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport {\n  faCircleCheck,\n  faCircleExclamation,\n  faCircleInfo,\n  faTriangleExclamation,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronRight } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\n\ntype StylesItem = {\n  iconColor: NewColor\n  backgroundColor: NewColor\n  icon: IconDefinition\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.illustration.neutral.300',\n    icon: faCircleInfo,\n  },\n  fallbackStyle: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.surface.base.100',\n    icon: faCircleInfo,\n  },\n  alert: {\n    iconColor: 'extended1.100',\n    backgroundColor: 'color.feedback.notice.100',\n    icon: faTriangleExclamation,\n  },\n  warning: {\n    iconColor: 'color.feedback.negative.200',\n    backgroundColor: 'color.feedback.negative.100',\n    icon: faCircleExclamation,\n  },\n  success: {\n    iconColor: 'color.feedback.positive.200',\n    backgroundColor: 'color.feedback.positive.100',\n    icon: faCircleCheck,\n  },\n}\n\ntype SupportMessageType =\n  | 'info'\n  | 'fallbackStyle'\n  | 'alert'\n  | 'warning'\n  | 'success'\n\nexport type SupportMessageProps = {\n  className?: string\n  description: string | ReactElement<any>\n  onClick?: MouseEventHandler\n  /**\n   * Right side content, usually an icon or a button\n   */\n  rightSideComponent?: ReactElement<any>\n  type: SupportMessageType\n  title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n  className,\n  description,\n  onClick,\n  rightSideComponent,\n  type,\n  title,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const resolveBackgroundColor = resolveToThemeColor(\n    styles[type].backgroundColor,\n    theme,\n  )\n\n  const resolvedIconColor = resolveToThemeColor(styles[type].iconColor, theme)\n\n  return (\n    <Wrapper\n      className={className}\n      $backgroundColor={resolveBackgroundColor}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconContainer $size={20} style={{ alignSelf: 'flex-start' }}>\n        <FontAwesomeIcon icon={styles[type].icon} color={resolvedIconColor} />\n      </IconContainer>\n      <Box flex direction=\"column\" mx=\"8px\">\n        {title && <Title>{title}</Title>}\n        {isReactElement(description) ? (\n          <DescriptionBox>{description}</DescriptionBox>\n        ) : (\n          <Description tag=\"p\">{description}</Description>\n        )}\n      </Box>\n      {rightSideComponent}\n      {onClick && rightSideComponent === undefined && (\n        <Box ml={{ custom: 'auto' }}>\n          <IconContainer $size={16}>\n            <FontAwesomeIcon\n              icon={faChevronRight}\n              color={theme.color.illustration.neutral[400]}\n            />\n          </IconContainer>\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  $backgroundColor: string\n  onClick?: MouseEventHandler\n}\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ $backgroundColor, onClick }) => css`\n    align-items: center;\n    background-color: ${$backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: 12px;\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${darken(0.1, $backgroundColor)};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ theme }) => theme.color.text.base};\n  line-height: 20.8px;\n  margin-bottom: 4px;\n`\n\nconst DescriptionBox = styled(Box)`\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  font-size: 14px;\n  line-height: 20px;\n`\n"]}

package/dist/Table/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Table';
+export type * from './types';
 export * from './components/TableRow';

package/dist/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,uBAAuB,CAAA","sourcesContent":["export * from './Table'\nexport * from './components/TableRow'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,uBAAuB,CAAA","sourcesContent":["export * from './Table'\nexport type * from './types'\nexport * from './components/TableRow'\n"]}

package/dist/Tag/Tag.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { MarginProps } from '../utils/space';
-import { Icons } from 'Icon/iconsList';
+import { Icons } from '../Icon';
 import { ColorTypes } from '../ThemeProvider/utils/colourMap';
 export type TagProps = {
     label: string;
@@ -9,6 +9,7 @@ export type TagProps = {
     borderColor?: ColorTypes;
     className?: string;
     icon?: Icons;
+    iconComponent?: ReactNode;
     iconColor?: ColorTypes;
     onClick?: () => void;
 } & MarginProps;

package/dist/Tag/Tag.js

@@ -4,11 +4,13 @@ import { Box } from '../Box';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
 import { getColorPath, resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
-export const Tag = ({ label, color, borderColor, bgColor, className, icon, iconColor, onClick, ...marginProps }) => {
+import { IconContainer } from '../sharedStyles/shared.styles';
+export const Tag = ({ label, color, borderColor, bgColor, className, icon, iconComponent, iconColor, onClick, ...marginProps }) => {
     const theme = useTheme();
     const resolvedBGColor = resolveToThemeColor(bgColor, theme);
     const resolvedBorderColor = borderColor && resolveToThemeColor(borderColor, theme);
-    return (_jsxs(Wrapper, { "$bgColor": resolvedBGColor, className: className, "$borderColor": resolvedBorderColor, ...marginProps, alignContent: "center", justifyContent: "center", onClick: onClick, children: [icon && (_jsx(TagIcon, { render: icon, color: iconColor, size: 16, "data-testid": `tag-icon-${icon}` })), _jsx(TagText, { tag: "span", typo: "label", color: getColorPath(color), children: label })] }));
+    const iconToRender = iconComponent ? (_jsx(IconContainer, { "$size": 16, style: { paddingRight: '4px' }, children: iconComponent })) : icon ? (_jsx(TagIcon, { render: icon, color: iconColor, size: 16, "data-testid": `tag-icon-${icon}` })) : null;
+    return (_jsxs(Wrapper, { "$bgColor": resolvedBGColor, className: className, "$borderColor": resolvedBorderColor, ...marginProps, alignContent: "center", justifyContent: "center", onClick: onClick, children: [iconToRender, _jsx(TagText, { tag: "span", typo: "label", color: getColorPath(color), children: label })] }));
 };
 const Wrapper = styled(Box) `
   background-color: ${({ $bgColor }) => $bgColor};

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAazC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,SAAS,EACT,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC3D,MAAM,mBAAmB,GACvB,WAAW,IAAI,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAExD,OAAO,CACL,MAAC,OAAO,gBACI,eAAe,EACzB,SAAS,EAAE,SAAS,kBACN,mBAAmB,KAC7B,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,aAEf,IAAI,IAAI,CACP,KAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH,EACD,KAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,YACxD,KAAK,GACE,IACF,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,aAAa,YAAY,EAAE;;;;;;;;;CAS5E,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE3B,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Icon } from '../Icon'\nimport { Icons } from 'Icon/iconsList'\nimport {\n  ColorTypes,\n  getColorPath,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type TagProps = {\n  label: string\n  color: ColorTypes\n  bgColor: ColorTypes\n  borderColor?: ColorTypes\n  className?: string\n  icon?: Icons\n  iconColor?: ColorTypes\n  onClick?: () => void\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  icon,\n  iconColor,\n  onClick,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const resolvedBGColor = resolveToThemeColor(bgColor, theme)\n  const resolvedBorderColor =\n    borderColor && resolveToThemeColor(borderColor, theme)\n\n  return (\n    <Wrapper\n      $bgColor={resolvedBGColor}\n      className={className}\n      $borderColor={resolvedBorderColor}\n      {...marginProps}\n      alignContent=\"center\"\n      justifyContent=\"center\"\n      onClick={onClick}\n    >\n      {icon && (\n        <TagIcon\n          render={icon}\n          color={iconColor}\n          size={16}\n          data-testid={`tag-icon-${icon}`}\n        />\n      )}\n      <TagText tag=\"span\" typo=\"label\" color={getColorPath(color)}>\n        {label}\n      </TagText>\n    </Wrapper>\n  )\n}\n\ntype WrapperProps = TransientProps<{\n  bgColor: string\n  borderColor?: string\n}>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ $bgColor }) => $bgColor};\n  border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n  padding-right: 4px;\n`\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AACrC,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAc7D,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,aAAa,EACb,SAAS,EACT,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC3D,MAAM,mBAAmB,GACvB,WAAW,IAAI,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAExD,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,aAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YACrD,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,OAAO,gBACI,eAAe,EACzB,SAAS,EAAE,SAAS,kBACN,mBAAmB,KAC7B,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,aAEf,YAAY,EACb,KAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,YACxD,KAAK,GACE,IACF,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,aAAa,YAAY,EAAE;;;;;;;;;CAS5E,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE3B,CAAA","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Icon, Icons } from '../Icon'\nimport {\n  ColorTypes,\n  getColorPath,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type TagProps = {\n  label: string\n  color: ColorTypes\n  bgColor: ColorTypes\n  borderColor?: ColorTypes\n  className?: string\n  icon?: Icons\n  iconComponent?: ReactNode\n  iconColor?: ColorTypes\n  onClick?: () => void\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  icon,\n  iconComponent,\n  iconColor,\n  onClick,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const resolvedBGColor = resolveToThemeColor(bgColor, theme)\n  const resolvedBorderColor =\n    borderColor && resolveToThemeColor(borderColor, theme)\n\n  const iconToRender = iconComponent ? (\n    <IconContainer $size={16} style={{ paddingRight: '4px' }}>\n      {iconComponent}\n    </IconContainer>\n  ) : icon ? (\n    <TagIcon\n      render={icon}\n      color={iconColor}\n      size={16}\n      data-testid={`tag-icon-${icon}`}\n    />\n  ) : null\n\n  return (\n    <Wrapper\n      $bgColor={resolvedBGColor}\n      className={className}\n      $borderColor={resolvedBorderColor}\n      {...marginProps}\n      alignContent=\"center\"\n      justifyContent=\"center\"\n      onClick={onClick}\n    >\n      {iconToRender}\n      <TagText tag=\"span\" typo=\"label\" color={getColorPath(color)}>\n        {label}\n      </TagText>\n    </Wrapper>\n  )\n}\n\ntype WrapperProps = TransientProps<{\n  bgColor: string\n  borderColor?: string\n}>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ $bgColor }) => $bgColor};\n  border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n  padding-right: 4px;\n`\n"]}

package/dist/Tag/Tag.spec.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '../testUtils';
 import { it, expect } from 'vitest';
 import { Tag } from '../Tag';
+const CustomIcon = () => _jsx("span", { "data-testid": "tag-custom-icon" });
 describe('Tag Component', () => {
     it('renders snapshot test correctly', () => {
         const { container } = render(_jsx(Tag, { label: "Snapshot Test Tag", color: "color.illustration.neutral.400", bgColor: "extended1.20" }));
@@ -41,6 +42,15 @@ describe('Tag Component', () => {
             });
         });
     });
+    it('renders a custom icon component when provided', () => {
+        render(_jsx(Tag, { label: "Tag with Custom Icon", color: "apple", bgColor: "chia", icon: "flag", iconComponent: _jsx(CustomIcon, {}) }));
+        expect(screen.getByTestId('tag-custom-icon')).toBeInTheDocument();
+        expect(screen.queryByTestId('tag-icon-flag')).not.toBeInTheDocument();
+    });
+    it('renders without an icon when none is provided', () => {
+        const { container } = render(_jsx(Tag, { label: "Tag without Icon", color: "apple", bgColor: "chia" }));
+        expect(container.querySelector('[data-testid$="-icon"]')).toBeNull();
+    });
 });
 const testCases = [
     {