@mrshmllw/smores-react 16.2.13 → 16.2.15

package/dist/RichTextEditor/plugins/ToolbarPlugin.js

@@ -102,6 +102,7 @@ export default function ToolbarPlugin() {
         if (prevLinkURL !== '' && isLink && urlInputRef.current) {
             urlInputRef.current.focus();
         }
+        // oxlint-disable-next-line react/react-compiler
         setPrevLinkURL(linkURL);
     }, [linkURL]);
     useEffect(() => {
@@ -120,13 +121,13 @@ export default function ToolbarPlugin() {
     }, [editor, updateToolbar]);
     return (_jsxs(Toolbar, { className: "toolbar", ref: toolbarRef, children: [_jsx(Bold, { onClick: () => {
                     editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
-                }, "$active": isBold, children: "B" }), _jsx(Italic, { onClick: () => {
+                }, $active: isBold, children: "B" }), _jsx(Italic, { onClick: () => {
                     editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
-                }, "$active": isItalic, children: "i" }), _jsx(EditorButton, { "$active": blockType === 'ul', onClick: () => formatBulletList(), children: _jsx(IconContainer, { "$size": 24, children: _jsx(FontAwesomeIcon, { icon: faList }) }) }), _jsxs(Link, { "$active": isLink, onClick: () => !isLink
+                }, $active: isItalic, children: "i" }), _jsx(EditorButton, { $active: blockType === 'ul', onClick: () => formatBulletList(), children: _jsx(IconContainer, { $size: 24, children: _jsx(FontAwesomeIcon, { icon: faList }) }) }), _jsxs(Link, { $active: isLink, onClick: () => !isLink
                     ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')
-                    : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null), children: [_jsx(Box, { ml: { custom: '-4px' }, mt: { custom: '6px' }, children: _jsx(IconContainer, { "$size": 24, children: _jsx(FontAwesomeIcon, { icon: faLinkSimple }) }) }), _jsx(LinkInput, { tabIndex: -1, ref: urlInputRef, placeholder: "Enter url", value: linkURL, onChange: (e) => {
+                    : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null), children: [_jsx(Box, { ml: { custom: '-4px' }, mt: { custom: '6px' }, children: _jsx(IconContainer, { $size: 24, children: _jsx(FontAwesomeIcon, { icon: faLinkSimple }) }) }), _jsx(LinkInput, { tabIndex: -1, ref: urlInputRef, placeholder: "Enter url", value: linkURL, onChange: (e) => {
                             editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value);
-                        }, onClick: (e) => e.stopPropagation() }), _jsx(Box, { onClick: openNewWindow, children: _jsx(LinkOpen, { "$size": 24, children: _jsx(FontAwesomeIcon, { icon: faArrowUpRightFromSquare }) }) })] })] }));
+                        }, onClick: (e) => e.stopPropagation() }), _jsx(Box, { onClick: openNewWindow, children: _jsx(LinkOpen, { $size: 24, children: _jsx(FontAwesomeIcon, { icon: faArrowUpRightFromSquare }) }) })] })] }));
 }
 const EditorButton = styled(Box) `
   height: 40px;

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 { 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: ${({ theme }) => theme.space[150]};\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: ${({ theme }) => theme.space[100]};\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: ${({ theme }) => theme.space[150]};\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.neutral.subtle.base};\n  height: 32px;\n  width: 32px;\n  border-radius: 20px;\n  padding: 6px;\n\n  :hover {\n    background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.hover};\n  }\n`\n\nconst LinkInput = styled.input`\n  width: inherit;\n  height: 32px;\n  border: none;\n  border-radius: 20px;\n  padding-left: ${({ theme }) => theme.space[150]};\n  padding-right: ${({ theme }) => theme.space[150]};\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    // oxlint-disable-next-line react/react-compiler\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: ${({ theme }) => theme.space[150]};\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: ${({ theme }) => theme.space[100]};\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: ${({ theme }) => theme.space[150]};\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.neutral.subtle.base};\n  height: 32px;\n  width: 32px;\n  border-radius: 20px;\n  padding: 6px;\n\n  :hover {\n    background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.hover};\n  }\n`\n\nconst LinkInput = styled.input`\n  width: inherit;\n  height: 32px;\n  border: none;\n  border-radius: 20px;\n  padding-left: ${({ theme }) => theme.space[150]};\n  padding-right: ${({ theme }) => theme.space[150]};\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.js

@@ -8,9 +8,9 @@ export const Row = ({ iconLeft, iconLeftComponent, iconLeftColor = 'color.icon.b
     const windowWidth = screen.width;
     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 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":"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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: ${({ theme }) => theme.space[200]};\n    grid-gap: ${({ theme }) => theme.space[200]};\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: ${({ theme }) => theme.space[300]};\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: ${\n      ($type === 'first' && `16px 16px 0 0`) ||\n      ($type === 'curved' && `16px`) ||\n      ($type === 'last' && `0 0 16px 16px`) ||\n      0\n    };\n\n    border-top: ${\n      $borderTop && $type !== 'curved' && $type !== 'first'\n        ? `1px solid ${theme.color.border.subtle}`\n        : 'none'\n    };\n    border-bottom: ${\n      $borderBottom && $type !== 'curved' && $type !== 'last'\n        ? `1px solid ${theme.color.border.subtle}`\n        : 'none'\n    };\n\n    background-color: ${theme.color.surface.base[300]};\n    display: grid;\n    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n    padding: ${({ theme }) => theme.space[200]};\n    grid-gap: ${({ theme }) => theme.space[200]};\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: ${({ theme }) => theme.space[300]};\n    }\n  `,\n)\n"]}

package/dist/SearchInput/SearchInput.js

@@ -56,12 +56,14 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
             setShowOptions(false);
         },
     });
+    // oxlint-disable-next-line react/react-compiler
     const fuse = useMemo(() => {
         return new Fuse(searchList, {
             ...defaultFuzzySearchOptions,
             ...fuzzySearchOptions,
         });
     }, [searchList]);
+    // oxlint-disable-next-line react/react-compiler
     const filteredList = useMemo(() => {
         if (searchQuery === null || searchQuery === '') {
             return searchList;
@@ -70,6 +72,7 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
             return fuse.search(searchQuery).map(({ item }) => item);
         }
         return searchList.filter(({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase()));
+        // oxlint-disable-next-line react/react-compiler
     }, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions]);
     const getDisplayedInputText = () => {
         if (searchQuery !== null) {
@@ -139,9 +142,9 @@ 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(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) => {
+    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: "space.100", "$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: {
+                            } }), _jsxs(Icons, { flex: true, alignItems: "center", gap: "space.100", $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 ?? '') }))] }) }));
 });

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, { 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=\"space.100\"\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"]}
+{"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, { 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    // oxlint-disable-next-line react/react-compiler\n    const fuse = useMemo(() => {\n      return new Fuse(searchList, {\n        ...defaultFuzzySearchOptions,\n        ...fuzzySearchOptions,\n      })\n    }, [searchList])\n\n    // oxlint-disable-next-line react/react-compiler\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      // oxlint-disable-next-line react/react-compiler\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=\"space.100\"\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/SearchInput/components/SearchOptions.js

@@ -25,9 +25,11 @@ export const SearchOptions = ({ displayedList, selectedValue, highlightedIndex,
         }
         setHighlightedIndex(-1);
     }, [searchTerm, setHighlightedIndex]);
-    return (_jsx(BoxWithPositionRelative, { children: _jsx(StyledResultsContainer, { "$positionRelative": positionRelative, children: _jsx(ResultsList, { ref: resultsListRef, "$resultsBorder": resultsBorder, onKeyDown: onKeyDown, children: displayedList.length ? (displayedList.map((el, i) => {
+    return (_jsx(BoxWithPositionRelative, { children: _jsx(StyledResultsContainer, { $positionRelative: positionRelative, children: _jsx(ResultsList, { ref: resultsListRef, $resultsBorder: resultsBorder, onKeyDown: onKeyDown, children: displayedList.length ? (
+                // oxlint-disable-next-line react/react-compiler
+                displayedList.map((el, i) => {
                     const isSelected = selectedValue === el.label || selectedValue === el.value;
-                    return (_jsxs(ListButton, { "aria-label": el.label + '_list_item', ref: itemRefs.current[i], onClick: () => onSelect(el), "$isSelected": isSelected, "$showBg": highlightedIndex === i, onMouseEnter: () => {
+                    return (_jsxs(ListButton, { "aria-label": el.label + '_list_item', ref: itemRefs.current[i], onClick: () => onSelect(el), $isSelected: isSelected, $showBg: highlightedIndex === i, onMouseEnter: () => {
                             setHighlightedIndex(i);
                         }, onFocus: () => {
                             setHighlightedIndex(i);

package/dist/SearchInput/components/SearchOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, RefObject, createRef, useEffect, useRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from '../../utils/utilTypes'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { EmptyResults } from './EmptyResults'\n\ntype Option = {\n  label: string\n  value: string\n}\n\ntype SearchOptionsProps = {\n  displayedList: Array<Option>\n  selectedValue: string | null\n  highlightedIndex: number\n  setHighlightedIndex: (arg: number) => void\n  onSelect: (option: Option) => void\n  onKeyDown: (e: { key: string; preventDefault: () => void }) => void\n  positionRelative: boolean\n  resultsBorder: boolean\n  onNotFound?: (searchTerm: string) => void\n  searchTerm: string\n  notFoundComponent?: ReactNode\n}\n\nexport const SearchOptions: FC<SearchOptionsProps> = ({\n  displayedList,\n  selectedValue,\n  highlightedIndex,\n  setHighlightedIndex,\n  onSelect,\n  onKeyDown,\n  positionRelative,\n  resultsBorder,\n  onNotFound,\n  searchTerm,\n  notFoundComponent,\n}) => {\n  const itemRefs = useRef<RefObject<HTMLLIElement | null>[]>([])\n  const resultsListRef = useRef<HTMLUListElement>(null)\n\n  useEffect(() => {\n    itemRefs.current = displayedList.map(\n      (_, i) => itemRefs.current[i] ?? createRef<HTMLLIElement>(),\n    )\n  }, [displayedList.length])\n\n  useEffect(() => {\n    const focusedListItem = itemRefs?.current[highlightedIndex]?.current\n    if (highlightedIndex >= 0 && focusedListItem) {\n      focusedListItem.scrollIntoView({\n        block: 'nearest',\n        inline: 'start',\n      })\n    }\n  }, [highlightedIndex])\n\n  useEffect(() => {\n    if (resultsListRef.current) {\n      resultsListRef.current.scrollTop = 0\n    }\n    setHighlightedIndex(-1)\n  }, [searchTerm, setHighlightedIndex])\n\n  return (\n    <BoxWithPositionRelative>\n      <StyledResultsContainer $positionRelative={positionRelative}>\n        <ResultsList\n          ref={resultsListRef}\n          $resultsBorder={resultsBorder}\n          onKeyDown={onKeyDown}\n        >\n          {displayedList.length ? (\n            displayedList.map((el, i) => {\n              const isSelected =\n                selectedValue === el.label || selectedValue === el.value\n\n              return (\n                <ListButton\n                  key={el.label + '_list_item'}\n                  aria-label={el.label + '_list_item'}\n                  ref={itemRefs.current[i]}\n                  onClick={() => onSelect(el)}\n                  $isSelected={isSelected}\n                  $showBg={highlightedIndex === i}\n                  onMouseEnter={() => {\n                    setHighlightedIndex(i)\n                  }}\n                  onFocus={() => {\n                    setHighlightedIndex(i)\n                  }}\n                >\n                  {el.label}\n                  {isSelected && (\n                    <Icon\n                      render=\"tick\"\n                      size={16}\n                      color=\"color.surface.brand.300\"\n                    />\n                  )}\n                </ListButton>\n              )\n            })\n          ) : (\n            <EmptyResults\n              onNotFound={onNotFound}\n              searchTerm={searchTerm}\n              notFoundComponent={notFoundComponent}\n            />\n          )}\n        </ResultsList>\n      </StyledResultsContainer>\n    </BoxWithPositionRelative>\n  )\n}\n\nconst StyledResultsContainer = styled.div<\n  TransientProps<Pick<SearchOptionsProps, 'positionRelative'>>\n>`\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: -16px;\n  padding: ${({ theme }) => theme.space[200]};\n  ${({ $positionRelative }) => !$positionRelative && 'position: absolute;'}\n  width:  calc(100% + 32px);\n  left: 0px;\n  top: -8px;\n\n  ul {\n    max-height: 192px;\n  }\n`\n\nconst ResultsList = styled.ul<\n  TransientProps<Pick<SearchOptionsProps, 'resultsBorder'>>\n>`\n  position: relative;\n  list-style: none;\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n  background-color: ${({ theme }) => theme.color.background['000']};\n  border-radius: 12px;\n  margin-top: 14px;\n  z-index: 1000;\n  border: 1px solid ${({ theme }) => theme.color.border.subtle};\n  box-shadow:\n    0px 10px 18px rgba(18, 18, 23, 0.03),\n    0px 5px 8px rgba(18, 18, 23, 0.04),\n    0px 2px 4px rgba(18, 18, 23, 0.04);\n\n  li {\n    padding: 16px 14px;\n    box-sizing: border-box;\n    font-size: 16px;\n    color: ${({ theme }) => theme.color.text.base};\n    cursor: pointer;\n  }\n`\n\nconst ListButton = styled.li<{ $isSelected: boolean; $showBg: boolean }>`\n  display: flex;\n  justify-content: space-between;\n\n  &:focus {\n    outline: none;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${({ $showBg }) =>\n    $showBg &&\n    css`\n      background-color: ${({ theme }) => theme.color.background[200]};\n    `}\n\n  ${({ $isSelected }) =>\n    $isSelected &&\n    css`\n      background-color: ${({ theme }) => theme.color.surface.base[300]};\n    `}\n`\n\nconst BoxWithPositionRelative = styled(Box)`\n  position: relative;\n`\n"]}
+{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, RefObject, createRef, useEffect, useRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from '../../utils/utilTypes'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { EmptyResults } from './EmptyResults'\n\ntype Option = {\n  label: string\n  value: string\n}\n\ntype SearchOptionsProps = {\n  displayedList: Array<Option>\n  selectedValue: string | null\n  highlightedIndex: number\n  setHighlightedIndex: (arg: number) => void\n  onSelect: (option: Option) => void\n  onKeyDown: (e: { key: string; preventDefault: () => void }) => void\n  positionRelative: boolean\n  resultsBorder: boolean\n  onNotFound?: (searchTerm: string) => void\n  searchTerm: string\n  notFoundComponent?: ReactNode\n}\n\nexport const SearchOptions: FC<SearchOptionsProps> = ({\n  displayedList,\n  selectedValue,\n  highlightedIndex,\n  setHighlightedIndex,\n  onSelect,\n  onKeyDown,\n  positionRelative,\n  resultsBorder,\n  onNotFound,\n  searchTerm,\n  notFoundComponent,\n}) => {\n  const itemRefs = useRef<RefObject<HTMLLIElement | null>[]>([])\n  const resultsListRef = useRef<HTMLUListElement>(null)\n\n  useEffect(() => {\n    itemRefs.current = displayedList.map(\n      (_, i) => itemRefs.current[i] ?? createRef<HTMLLIElement>(),\n    )\n  }, [displayedList.length])\n\n  useEffect(() => {\n    const focusedListItem = itemRefs?.current[highlightedIndex]?.current\n    if (highlightedIndex >= 0 && focusedListItem) {\n      focusedListItem.scrollIntoView({\n        block: 'nearest',\n        inline: 'start',\n      })\n    }\n  }, [highlightedIndex])\n\n  useEffect(() => {\n    if (resultsListRef.current) {\n      resultsListRef.current.scrollTop = 0\n    }\n    setHighlightedIndex(-1)\n  }, [searchTerm, setHighlightedIndex])\n\n  return (\n    <BoxWithPositionRelative>\n      <StyledResultsContainer $positionRelative={positionRelative}>\n        <ResultsList\n          ref={resultsListRef}\n          $resultsBorder={resultsBorder}\n          onKeyDown={onKeyDown}\n        >\n          {displayedList.length ? (\n            // oxlint-disable-next-line react/react-compiler\n            displayedList.map((el, i) => {\n              const isSelected =\n                selectedValue === el.label || selectedValue === el.value\n\n              return (\n                <ListButton\n                  key={el.label + '_list_item'}\n                  aria-label={el.label + '_list_item'}\n                  ref={itemRefs.current[i]}\n                  onClick={() => onSelect(el)}\n                  $isSelected={isSelected}\n                  $showBg={highlightedIndex === i}\n                  onMouseEnter={() => {\n                    setHighlightedIndex(i)\n                  }}\n                  onFocus={() => {\n                    setHighlightedIndex(i)\n                  }}\n                >\n                  {el.label}\n                  {isSelected && (\n                    <Icon\n                      render=\"tick\"\n                      size={16}\n                      color=\"color.surface.brand.300\"\n                    />\n                  )}\n                </ListButton>\n              )\n            })\n          ) : (\n            <EmptyResults\n              onNotFound={onNotFound}\n              searchTerm={searchTerm}\n              notFoundComponent={notFoundComponent}\n            />\n          )}\n        </ResultsList>\n      </StyledResultsContainer>\n    </BoxWithPositionRelative>\n  )\n}\n\nconst StyledResultsContainer = styled.div<\n  TransientProps<Pick<SearchOptionsProps, 'positionRelative'>>\n>`\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: -16px;\n  padding: ${({ theme }) => theme.space[200]};\n  ${({ $positionRelative }) => !$positionRelative && 'position: absolute;'}\n  width:  calc(100% + 32px);\n  left: 0px;\n  top: -8px;\n\n  ul {\n    max-height: 192px;\n  }\n`\n\nconst ResultsList = styled.ul<\n  TransientProps<Pick<SearchOptionsProps, 'resultsBorder'>>\n>`\n  position: relative;\n  list-style: none;\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n  background-color: ${({ theme }) => theme.color.background['000']};\n  border-radius: 12px;\n  margin-top: 14px;\n  z-index: 1000;\n  border: 1px solid ${({ theme }) => theme.color.border.subtle};\n  box-shadow:\n    0px 10px 18px rgba(18, 18, 23, 0.03),\n    0px 5px 8px rgba(18, 18, 23, 0.04),\n    0px 2px 4px rgba(18, 18, 23, 0.04);\n\n  li {\n    padding: 16px 14px;\n    box-sizing: border-box;\n    font-size: 16px;\n    color: ${({ theme }) => theme.color.text.base};\n    cursor: pointer;\n  }\n`\n\nconst ListButton = styled.li<{ $isSelected: boolean; $showBg: boolean }>`\n  display: flex;\n  justify-content: space-between;\n\n  &:focus {\n    outline: none;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${({ $showBg }) =>\n    $showBg &&\n    css`\n      background-color: ${({ theme }) => theme.color.background[200]};\n    `}\n\n  ${({ $isSelected }) =>\n    $isSelected &&\n    css`\n      background-color: ${({ theme }) => theme.color.surface.base[300]};\n    `}\n`\n\nconst BoxWithPositionRelative = styled(Box)`\n  position: relative;\n`\n"]}

package/dist/SegmentedControl/SegmentedControl.js

@@ -15,10 +15,10 @@ export const SegmentedControl = ({ options, value, onChange, showTag, styles: {
     const resolvedBackgroundColor = background && resolveToThemeColor(background, theme);
     const resolvedToggleColor = toggle && resolveToThemeColor(toggle, theme);
     const resolvedSelectedTextColor = resolveToThemeColor(selectedText, theme);
-    return (_jsx(ToggleWrapper, { "$backgroundColor": resolvedBackgroundColor, "$fullWidth": fullWidth, children: _jsxs(IndicatorWrapper, { "$backgroundColor": resolvedBackgroundColor, children: [options.map((option) => {
+    return (_jsx(ToggleWrapper, { $backgroundColor: resolvedBackgroundColor, $fullWidth: fullWidth, children: _jsxs(IndicatorWrapper, { $backgroundColor: resolvedBackgroundColor, children: [options.map((option) => {
                     const isSelected = option.value === value;
-                    return (_jsx(ToggleButton, { name: "toggle-version-button", value: option.value, onChange: onChange, isSelected: isSelected, isDisabled: option.isDisabled, children: _jsxs(StyledWrapper, { children: [showTag && option.tag && (_jsx(StyledTag, { bgColor: getColorPath(tagBg), borderColor: getColorPath(tagBorder), color: getColorPath(tagText), label: option.tag })), _jsxs(Box, { flex: true, direction: "column", justifyContent: "center", alignItems: "center", children: [_jsx(StyledText, { "$isSelected": isSelected, "$selectedTextColor": resolvedSelectedTextColor, color: text, children: option.label }), option.secondaryLabel && (_jsx(Text, { color: isSelected ? selectedText : text, typo: "caption", children: option.secondaryLabel }))] })] }) }, option.label));
-                }), _jsx(ToggleIndicator, { "data-testid": "toggle-indicator", "$selectedIndex": options.findIndex((option) => option.value === value), "$sections": options.length, "$toggleColor": resolvedToggleColor })] }) }));
+                    return (_jsx(ToggleButton, { name: "toggle-version-button", value: option.value, onChange: onChange, isSelected: isSelected, isDisabled: option.isDisabled, children: _jsxs(StyledWrapper, { children: [showTag && option.tag && (_jsx(StyledTag, { bgColor: getColorPath(tagBg), borderColor: getColorPath(tagBorder), color: getColorPath(tagText), label: option.tag })), _jsxs(Box, { flex: true, direction: "column", justifyContent: "center", alignItems: "center", children: [_jsx(StyledText, { $isSelected: isSelected, $selectedTextColor: resolvedSelectedTextColor, color: text, children: option.label }), option.secondaryLabel && (_jsx(Text, { color: isSelected ? selectedText : text, typo: "caption", children: option.secondaryLabel }))] })] }) }, option.label));
+                }), _jsx(ToggleIndicator, { "data-testid": "toggle-indicator", $selectedIndex: options.findIndex((option) => option.value === value), $sections: options.length, $toggleColor: resolvedToggleColor })] }) }));
 };
 const BORDER_RADIUS = 1000;
 const StyledWrapper = styled(Box) `

package/dist/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Tag } from '../Tag'\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport {\n  ColorTypes,\n  getColorPath,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { ToggleButton } from './ToggleButton'\n\nexport type SegmentedControlOption<T = string | number> = {\n  label: string\n  secondaryLabel?: string\n  /** value needs to be number or string */\n  value: T\n  /** optional tag able to show in the toggle if showTag prop is passed */\n  tag?: string\n  isDisabled?: boolean\n}\n\ntype StylingOptions = {\n  toggle?: ColorTypes\n  background?: ColorTypes\n  text?: ColorTypes\n  selectedText?: ColorTypes\n  tagBg?: ColorTypes\n  tagBorder?: ColorTypes\n  tagText?: ColorTypes\n  fullWidth?: boolean\n}\n\nexport type SegmentedControlProps<T> = {\n  /** you can pass more than 2 options */\n  options: SegmentedControlOption<T>[]\n  value: T\n  onChange: (value: T) => void\n  /**  pass this prop if you want to show the tag in the toggle */\n  showTag?: boolean\n  /** pass a StylingOptions object with the needed styles if you want to style the SegmentedControl */\n  styles?: StylingOptions\n}\n\n/**\n * ### How do I pass state to the `SegmentedControl` component?\n * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component\n */\nexport const SegmentedControl = <T,>({\n  options,\n  value,\n  onChange,\n  showTag,\n  styles: {\n    tagBorder = 'color.surface.brand.300',\n    tagText = 'color.surface.base.000',\n    tagBg = 'color.surface.brand.300',\n    selectedText = 'color.surface.base.000',\n    text = 'color.text.base',\n    background = 'color.surface.base.300',\n    toggle = 'color.text.base',\n    fullWidth = false,\n  } = {},\n}: SegmentedControlProps<T>) => {\n  const theme = useTheme()\n\n  const resolvedBackgroundColor =\n    background && resolveToThemeColor(background, theme)\n  const resolvedToggleColor = toggle && resolveToThemeColor(toggle, theme)\n  const resolvedSelectedTextColor = resolveToThemeColor(selectedText, theme)\n\n  return (\n    <ToggleWrapper\n      $backgroundColor={resolvedBackgroundColor}\n      $fullWidth={fullWidth}\n    >\n      <IndicatorWrapper $backgroundColor={resolvedBackgroundColor}>\n        {options.map((option) => {\n          const isSelected = option.value === value\n\n          return (\n            <ToggleButton\n              key={option.label}\n              name=\"toggle-version-button\"\n              value={option.value}\n              onChange={onChange}\n              isSelected={isSelected}\n              isDisabled={option.isDisabled}\n            >\n              <StyledWrapper>\n                {showTag && option.tag && (\n                  <StyledTag\n                    bgColor={getColorPath(tagBg)}\n                    borderColor={getColorPath(tagBorder)}\n                    color={getColorPath(tagText)}\n                    label={option.tag}\n                  />\n                )}\n                <Box\n                  flex\n                  direction=\"column\"\n                  justifyContent=\"center\"\n                  alignItems=\"center\"\n                >\n                  <StyledText\n                    $isSelected={isSelected}\n                    $selectedTextColor={resolvedSelectedTextColor}\n                    color={text}\n                  >\n                    {option.label}\n                  </StyledText>\n                  {option.secondaryLabel && (\n                    <Text\n                      color={isSelected ? selectedText : text}\n                      typo=\"caption\"\n                    >\n                      {option.secondaryLabel}\n                    </Text>\n                  )}\n                </Box>\n              </StyledWrapper>\n            </ToggleButton>\n          )\n        })}\n\n        <ToggleIndicator\n          data-testid=\"toggle-indicator\"\n          $selectedIndex={options.findIndex((option) => option.value === value)}\n          $sections={options.length}\n          $toggleColor={resolvedToggleColor}\n        />\n      </IndicatorWrapper>\n    </ToggleWrapper>\n  )\n}\n\nconst BORDER_RADIUS = 1000\n\nconst StyledWrapper = styled(Box)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: ${({ theme }) => theme.space['050']};\n`\n\nconst StyledTag = styled(Tag)`\n  border-radius: 100px;\n`\n\nconst StyledText = styled(Text)<{\n  $isSelected: boolean\n  $selectedTextColor: string\n}>`\n  font-weight: ${oldTheme.font.weight.medium};\n  ${({ $isSelected, $selectedTextColor }) =>\n    $isSelected && `color: ${$selectedTextColor};`}\n  padding: 2px 0px;\n`\n\nconst ToggleWrapper = styled(Box)<{\n  $backgroundColor?: string\n  $fullWidth?: boolean\n}>`\n  padding: ${({ theme }) => theme.space['050']};\n  background-color: ${(p) => p.$backgroundColor};\n  border-radius: ${BORDER_RADIUS}px;\n\n  ${({ $fullWidth }) =>\n    $fullWidth &&\n    css`\n      width: 100%;\n    `}\n`\n\nconst IndicatorWrapper = styled(Box)<{ $backgroundColor?: string }>`\n  position: relative;\n  display: flex;\n  background-color: ${(p) => p.$backgroundColor};\n  border-radius: ${BORDER_RADIUS}px;\n`\n\nconst ToggleIndicator = styled(Box)<{\n  $selectedIndex: number\n  $sections: number\n  $toggleColor?: string\n}>`\n  background-color: ${(p) => p.$toggleColor};\n  border-radius: ${BORDER_RADIUS}px;\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n  width: ${(p) => `calc(100% / ${p.$sections})`};\n  transition: transform 0.4s;\n  transform: ${(p) => `translateX(${p.$selectedIndex * 100}%)`};\n`\n"]}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Tag } from '../Tag'\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport {\n  ColorTypes,\n  getColorPath,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { ToggleButton } from './ToggleButton'\n\nexport type SegmentedControlOption<T = string | number> = {\n  label: string\n  secondaryLabel?: string\n  /** value needs to be number or string */\n  value: T\n  /** optional tag able to show in the toggle if showTag prop is passed */\n  tag?: string\n  isDisabled?: boolean\n}\n\ntype StylingOptions = {\n  toggle?: ColorTypes\n  background?: ColorTypes\n  text?: ColorTypes\n  selectedText?: ColorTypes\n  tagBg?: ColorTypes\n  tagBorder?: ColorTypes\n  tagText?: ColorTypes\n  fullWidth?: boolean\n}\n\nexport type SegmentedControlProps<T> = {\n  /** you can pass more than 2 options */\n  options: SegmentedControlOption<T>[]\n  value: T\n  onChange: (value: T) => void\n  /**  pass this prop if you want to show the tag in the toggle */\n  showTag?: boolean\n  /** pass a StylingOptions object with the needed styles if you want to style the SegmentedControl */\n  styles?: StylingOptions\n}\n\n/**\n * ### How do I pass state to the `SegmentedControl` component?\n * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component\n */\nexport const SegmentedControl = <T,>({\n  options,\n  value,\n  onChange,\n  showTag,\n  styles: {\n    tagBorder = 'color.surface.brand.300',\n    tagText = 'color.surface.base.000',\n    tagBg = 'color.surface.brand.300',\n    selectedText = 'color.surface.base.000',\n    text = 'color.text.base',\n    background = 'color.surface.base.300',\n    toggle = 'color.text.base',\n    fullWidth = false,\n  } = {},\n}: SegmentedControlProps<T>) => {\n  const theme = useTheme()\n\n  const resolvedBackgroundColor =\n    background && resolveToThemeColor(background, theme)\n  const resolvedToggleColor = toggle && resolveToThemeColor(toggle, theme)\n  const resolvedSelectedTextColor = resolveToThemeColor(selectedText, theme)\n\n  return (\n    <ToggleWrapper\n      $backgroundColor={resolvedBackgroundColor}\n      $fullWidth={fullWidth}\n    >\n      <IndicatorWrapper $backgroundColor={resolvedBackgroundColor}>\n        {options.map((option) => {\n          const isSelected = option.value === value\n\n          return (\n            <ToggleButton\n              key={option.label}\n              name=\"toggle-version-button\"\n              value={option.value}\n              onChange={onChange}\n              isSelected={isSelected}\n              isDisabled={option.isDisabled}\n            >\n              <StyledWrapper>\n                {showTag && option.tag && (\n                  <StyledTag\n                    bgColor={getColorPath(tagBg)}\n                    borderColor={getColorPath(tagBorder)}\n                    color={getColorPath(tagText)}\n                    label={option.tag}\n                  />\n                )}\n                <Box\n                  flex\n                  direction=\"column\"\n                  justifyContent=\"center\"\n                  alignItems=\"center\"\n                >\n                  <StyledText\n                    $isSelected={isSelected}\n                    $selectedTextColor={resolvedSelectedTextColor}\n                    color={text}\n                  >\n                    {option.label}\n                  </StyledText>\n                  {option.secondaryLabel && (\n                    <Text\n                      color={isSelected ? selectedText : text}\n                      typo=\"caption\"\n                    >\n                      {option.secondaryLabel}\n                    </Text>\n                  )}\n                </Box>\n              </StyledWrapper>\n            </ToggleButton>\n          )\n        })}\n\n        <ToggleIndicator\n          data-testid=\"toggle-indicator\"\n          $selectedIndex={options.findIndex((option) => option.value === value)}\n          $sections={options.length}\n          $toggleColor={resolvedToggleColor}\n        />\n      </IndicatorWrapper>\n    </ToggleWrapper>\n  )\n}\n\nconst BORDER_RADIUS = 1000\n\nconst StyledWrapper = styled(Box)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: ${({ theme }) => theme.space['050']};\n`\n\nconst StyledTag = styled(Tag)`\n  border-radius: 100px;\n`\n\nconst StyledText = styled(Text)<{\n  $isSelected: boolean\n  $selectedTextColor: string\n}>`\n  font-weight: ${oldTheme.font.weight.medium};\n  ${({ $isSelected, $selectedTextColor }) =>\n    $isSelected && `color: ${$selectedTextColor};`}\n  padding: 2px 0px;\n`\n\nconst ToggleWrapper = styled(Box)<{\n  $backgroundColor?: string\n  $fullWidth?: boolean\n}>`\n  padding: ${({ theme }) => theme.space['050']};\n  background-color: ${(p) => p.$backgroundColor};\n  border-radius: ${BORDER_RADIUS}px;\n\n  ${({ $fullWidth }) =>\n    $fullWidth &&\n    css`\n      width: 100%;\n    `}\n`\n\nconst IndicatorWrapper = styled(Box)<{ $backgroundColor?: string }>`\n  position: relative;\n  display: flex;\n  background-color: ${(p) => p.$backgroundColor};\n  border-radius: ${BORDER_RADIUS}px;\n`\n\nconst ToggleIndicator = styled(Box)<{\n  $selectedIndex: number\n  $sections: number\n  $toggleColor?: string\n}>`\n  background-color: ${(p) => p.$toggleColor};\n  border-radius: ${BORDER_RADIUS}px;\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n  width: ${(p) => `calc(100% / ${p.$sections})`};\n  transition: transform 0.4s;\n  transform: ${(p) => `translateX(${p.$selectedIndex * 100}%)`};\n`\n"]}

package/dist/SegmentedControl/ToggleButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { Box } from '../Box';
 export const ToggleButton = ({ name, value, onChange, isSelected, isDisabled = false, children, }) => {
-    return (_jsxs(Wrapper, { as: "label", "data-testid": `value-toggle-${String(value)}`, "$isDisabled": isDisabled, children: [_jsx(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }), children] }));
+    return (_jsxs(Wrapper, { as: "label", "data-testid": `value-toggle-${String(value)}`, $isDisabled: isDisabled, children: [_jsx(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }), children] }));
 };
 const Wrapper = styled(Box) `
   cursor: pointer;

package/dist/SegmentedControl/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,MAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,iBAC/B,UAAU,aAEvB,KAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B,EACD,QAAQ,IACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0B;;IAEjD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA","sourcesContent":["import { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\n\ntype ToggleButtonProps<Value> = {\n  name: string\n  value: Value\n  onChange: (value: Value) => void\n  isSelected: boolean\n  isDisabled?: boolean\n  children: ReactNode\n}\n\nexport const ToggleButton = <Value,>({\n  name,\n  value,\n  onChange,\n  isSelected,\n  isDisabled = false,\n  children,\n}: ToggleButtonProps<Value>) => {\n  return (\n    <Wrapper\n      as=\"label\"\n      data-testid={`value-toggle-${String(value)}`}\n      $isDisabled={isDisabled}\n    >\n      <VisuallyHiddenInput\n        type=\"radio\"\n        name={name}\n        checked={isSelected}\n        onClick={() => onChange(value)}\n        onChange={() => onChange(value)}\n      />\n      {children}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)<{ $isDisabled: boolean }>`\n  cursor: pointer;\n  ${({ $isDisabled }) =>\n    $isDisabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.5;\n    `}\n  padding: 10px 14px;\n  transition: color 0.1s linear;\n  height: fit-content;\n  width: 100%;\n  align-content: center;\n  z-index: 3;\n`\n\nconst VisuallyHiddenInput = styled.input`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`\n"]}
+{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,MAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,EAC5C,WAAW,EAAE,UAAU,aAEvB,KAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B,EACD,QAAQ,IACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0B;;IAEjD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA","sourcesContent":["import { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\n\ntype ToggleButtonProps<Value> = {\n  name: string\n  value: Value\n  onChange: (value: Value) => void\n  isSelected: boolean\n  isDisabled?: boolean\n  children: ReactNode\n}\n\nexport const ToggleButton = <Value,>({\n  name,\n  value,\n  onChange,\n  isSelected,\n  isDisabled = false,\n  children,\n}: ToggleButtonProps<Value>) => {\n  return (\n    <Wrapper\n      as=\"label\"\n      data-testid={`value-toggle-${String(value)}`}\n      $isDisabled={isDisabled}\n    >\n      <VisuallyHiddenInput\n        type=\"radio\"\n        name={name}\n        checked={isSelected}\n        onClick={() => onChange(value)}\n        onChange={() => onChange(value)}\n      />\n      {children}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)<{ $isDisabled: boolean }>`\n  cursor: pointer;\n  ${({ $isDisabled }) =>\n    $isDisabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.5;\n    `}\n  padding: 10px 14px;\n  transition: color 0.1s linear;\n  height: fit-content;\n  width: 100%;\n  align-content: center;\n  z-index: 3;\n`\n\nconst VisuallyHiddenInput = styled.input`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`\n"]}

package/dist/SliderInput/SliderInput.js

@@ -5,7 +5,7 @@ import { margin } from '../utils/space';
 export const SliderInput = forwardRef(function SliderInput({ value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest }, ref) {
     return (_jsx(StyledSlider, { ref: ref, type: "range", min: min, max: max, step: step, value: value, onChange: (event) => {
             onChange(event.target.valueAsNumber);
-        }, "$m": m, "$mx": mx, "$my": my, "$ml": ml, "$mr": mr, "$mt": mt, "$mb": mb, ...rest }));
+        }, $m: m, $mx: mx, $my: my, $ml: ml, $mr: mr, $mt: mt, $mb: mb, ...rest }));
 });
 const StyledSlider = styled.input `
   outline: 0;

package/dist/SliderInput/SliderInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInput.js","sourceRoot":"","sources":["../../src/SliderInput/SliderInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAA;AACvD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAqC,MAAM,gBAAgB,CAAA;AAc1E,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EACvE,GAAG;IAEH,OAAO,CACL,KAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QACtC,CAAC,QACG,CAAC,SACA,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,KACH,IAAI,GACR,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAsB;;;;;;;;;gBASvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;IACtD,MAAM;;;;;;;;;;;;;;;;;oBAiBU,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;;4BAGlC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;2BAE9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;4BAElC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;0BAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;;CAGtE,CAAA","sourcesContent":["import { forwardRef, InputHTMLAttributes } from 'react'\nimport styled from 'styled-components'\nimport { margin, MarginProps, TransientMarginProps } from '../utils/space'\n\ntype SliderProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'value' | 'onChange'\n> &\n  MarginProps & {\n    onChange: (value: number) => void\n    value: number\n    min?: number\n    max?: number\n    step?: number\n  }\n\nexport const SliderInput = forwardRef<HTMLInputElement, SliderProps>(\n  function SliderInput(\n    { value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest },\n    ref,\n  ) {\n    return (\n      <StyledSlider\n        ref={ref}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onChange={(event) => {\n          onChange(event.target.valueAsNumber)\n        }}\n        $m={m}\n        $mx={mx}\n        $my={my}\n        $ml={ml}\n        $mr={mr}\n        $mt={mt}\n        $mb={mb}\n        {...rest}\n      />\n    )\n  },\n)\n\nconst StyledSlider = styled.input<TransientMarginProps>`\n  outline: 0;\n  border: 0;\n  padding: 0;\n  border-radius: 500px;\n  width: 100%;\n  //guard rail as we have a hard coded limit on progress bar length\n  max-width: 2000px;\n  transition: box-shadow 0.2s ease-in-out;\n  background: ${({ theme }) => theme.color.background[100]};\n  ${margin};\n\n  @media screen and (-webkit-min-device-pixel-ratio: 0) {\n    overflow: hidden;\n    height: 44px;\n    -webkit-appearance: none;\n\n    &::-webkit-slider-runnable-track {\n      height: 44px;\n      -webkit-appearance: none;\n      transition: box-shadow 0.2s ease-in-out;\n    }\n    &::-webkit-slider-thumb {\n      width: 44px;\n      -webkit-appearance: none;\n      height: 44px;\n      cursor: ew-resize;\n      background: ${({ theme }) => theme.color.background[100]};\n      box-shadow:\n      //handles the progress bar\n        -1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},\n        //added for the focus anim\n        inset 0 0 0 44px ${({ theme }) => theme.color.surface.brand[400]};\n      border-radius: 50%;\n      transition: box-shadow 0.2s ease-in-out;\n      position: relative;\n    }\n    &:active::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      background: ${({ theme }) => theme.color.background[100]};\n      box-shadow:\n        -1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},\n        inset 0 0 0 4px ${({ theme }) => theme.color.surface.brand[400]};\n    }\n  }\n`\n"]}
+{"version":3,"file":"SliderInput.js","sourceRoot":"","sources":["../../src/SliderInput/SliderInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAA;AACvD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAqC,MAAM,gBAAgB,CAAA;AAc1E,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EACvE,GAAG;IAEH,OAAO,CACL,KAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QACtC,CAAC,EACD,EAAE,EAAE,CAAC,EACL,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,EAAE,KACH,IAAI,GACR,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAsB;;;;;;;;;gBASvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;IACtD,MAAM;;;;;;;;;;;;;;;;;oBAiBU,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;;4BAGlC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;2BAE9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;4BAElC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;0BAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;;CAGtE,CAAA","sourcesContent":["import { forwardRef, InputHTMLAttributes } from 'react'\nimport styled from 'styled-components'\nimport { margin, MarginProps, TransientMarginProps } from '../utils/space'\n\ntype SliderProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'value' | 'onChange'\n> &\n  MarginProps & {\n    onChange: (value: number) => void\n    value: number\n    min?: number\n    max?: number\n    step?: number\n  }\n\nexport const SliderInput = forwardRef<HTMLInputElement, SliderProps>(\n  function SliderInput(\n    { value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest },\n    ref,\n  ) {\n    return (\n      <StyledSlider\n        ref={ref}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onChange={(event) => {\n          onChange(event.target.valueAsNumber)\n        }}\n        $m={m}\n        $mx={mx}\n        $my={my}\n        $ml={ml}\n        $mr={mr}\n        $mt={mt}\n        $mb={mb}\n        {...rest}\n      />\n    )\n  },\n)\n\nconst StyledSlider = styled.input<TransientMarginProps>`\n  outline: 0;\n  border: 0;\n  padding: 0;\n  border-radius: 500px;\n  width: 100%;\n  //guard rail as we have a hard coded limit on progress bar length\n  max-width: 2000px;\n  transition: box-shadow 0.2s ease-in-out;\n  background: ${({ theme }) => theme.color.background[100]};\n  ${margin};\n\n  @media screen and (-webkit-min-device-pixel-ratio: 0) {\n    overflow: hidden;\n    height: 44px;\n    -webkit-appearance: none;\n\n    &::-webkit-slider-runnable-track {\n      height: 44px;\n      -webkit-appearance: none;\n      transition: box-shadow 0.2s ease-in-out;\n    }\n    &::-webkit-slider-thumb {\n      width: 44px;\n      -webkit-appearance: none;\n      height: 44px;\n      cursor: ew-resize;\n      background: ${({ theme }) => theme.color.background[100]};\n      box-shadow:\n      //handles the progress bar\n        -1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},\n        //added for the focus anim\n        inset 0 0 0 44px ${({ theme }) => theme.color.surface.brand[400]};\n      border-radius: 50%;\n      transition: box-shadow 0.2s ease-in-out;\n      position: relative;\n    }\n    &:active::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      background: ${({ theme }) => theme.color.background[100]};\n      box-shadow:\n        -1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},\n        inset 0 0 0 4px ${({ theme }) => theme.color.surface.brand[400]};\n    }\n  }\n`\n"]}

package/dist/Snackbar/SnackbarContainer.js

@@ -18,6 +18,7 @@ export const SnackbarContainer = ({ children, portalContainer = document.body, }
         snackbarIdRef.current = +1;
         return newId;
     }, []);
+    // oxlint-disable-next-line react/react-compiler
     const addSnackbar = useCallback((snackbar) => {
         const newSnack = {
             ...snackbar,

package/dist/Snackbar/SnackbarContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContainer.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAEb,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQ7C,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,WAAW,EAAE,GAAG,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACzE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,iBAAiB,GAA+B,CAAC,EAC5D,QAAQ,EACR,eAAe,GAAG,QAAQ,CAAC,IAAI,GAChC,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAA;IAE1D,4BAA4B;IAC5B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,eAAe,aAAa,CAAC,OAAO,EAAE,CAAA;QACpD,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;QAC1B,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACxD,MAAM,QAAQ,GAAG;YACf,GAAG,QAAQ;YACX,EAAE,EAAE,UAAU,EAAE;SACjB,CAAA;QACD,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IACxC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IAClE,CAAC,CAAA;IAED,OAAO,CACL,MAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,WAAW;SACZ,aAEA,QAAQ,EACR,YAAY,CACX,KAAC,eAAe,cACb,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,KAAC,YAAY,OAEP,QAAQ,EACZ,WAAW,EAAE,cAAc,IAFtB,QAAQ,CAAC,EAAE,CAGhB,CACH,CAAC,GACc,EAClB,eAAe,CAChB,IACwB,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASjC,CAAA","sourcesContent":["import {\n  createContext,\n  FC,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport styled from 'styled-components'\nimport { SnackbarItem } from './SnackbarItem'\nimport {\n  CreateSnack,\n  Snackbar,\n  SnackbarContextType,\n  SnackbarContainerProps,\n} from './types'\n\nexport const SnackbarContext = createContext<SnackbarContextType>({\n  addSnackbar: () => {\n    throw new Error('Please add the SnackbarContainer to your application')\n  },\n})\n\nexport const useSnackbarContext = () => useContext(SnackbarContext)\n\nexport const SnackbarContainer: FC<SnackbarContainerProps> = ({\n  children,\n  portalContainer = document.body,\n}) => {\n  const snackbarIdRef = useRef(0)\n  const [snackbars, setSnackbars] = useState<Snackbar[]>([])\n\n  // create snackbar unique ID\n  const newSnackId = useCallback(() => {\n    const newId = `MM_SNACKBAR_${snackbarIdRef.current}`\n    snackbarIdRef.current = +1\n    return newId\n  }, [])\n\n  const addSnackbar = useCallback((snackbar: CreateSnack) => {\n    const newSnack = {\n      ...snackbar,\n      id: newSnackId(),\n    }\n    setSnackbars([...snackbars, newSnack])\n  }, [])\n\n  const deleteSnackbar = (id: string) => {\n    setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id))\n  }\n\n  return (\n    <SnackbarContext.Provider\n      value={{\n        addSnackbar,\n      }}\n    >\n      {children}\n      {createPortal(\n        <SnackbarWrapper>\n          {snackbars.map((snackbar) => (\n            <SnackbarItem\n              key={snackbar.id}\n              {...snackbar}\n              deleteSnack={deleteSnackbar}\n            />\n          ))}\n        </SnackbarWrapper>,\n        portalContainer,\n      )}\n    </SnackbarContext.Provider>\n  )\n}\n\nconst SnackbarWrapper = styled.div`\n  position: fixed;\n  bottom: 35px;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  width: 90%;\n  max-width: 875px;\n  z-index: 1000;\n`\n"]}
+{"version":3,"file":"SnackbarContainer.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAEb,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQ7C,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,WAAW,EAAE,GAAG,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACzE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,iBAAiB,GAA+B,CAAC,EAC5D,QAAQ,EACR,eAAe,GAAG,QAAQ,CAAC,IAAI,GAChC,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAA;IAE1D,4BAA4B;IAC5B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,eAAe,aAAa,CAAC,OAAO,EAAE,CAAA;QACpD,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;QAC1B,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,gDAAgD;IAChD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACxD,MAAM,QAAQ,GAAG;YACf,GAAG,QAAQ;YACX,EAAE,EAAE,UAAU,EAAE;SACjB,CAAA;QACD,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IACxC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IAClE,CAAC,CAAA;IAED,OAAO,CACL,MAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,WAAW;SACZ,aAEA,QAAQ,EACR,YAAY,CACX,KAAC,eAAe,cACb,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,KAAC,YAAY,OAEP,QAAQ,EACZ,WAAW,EAAE,cAAc,IAFtB,QAAQ,CAAC,EAAE,CAGhB,CACH,CAAC,GACc,EAClB,eAAe,CAChB,IACwB,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASjC,CAAA","sourcesContent":["import {\n  createContext,\n  FC,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport styled from 'styled-components'\nimport { SnackbarItem } from './SnackbarItem'\nimport {\n  CreateSnack,\n  Snackbar,\n  SnackbarContextType,\n  SnackbarContainerProps,\n} from './types'\n\nexport const SnackbarContext = createContext<SnackbarContextType>({\n  addSnackbar: () => {\n    throw new Error('Please add the SnackbarContainer to your application')\n  },\n})\n\nexport const useSnackbarContext = () => useContext(SnackbarContext)\n\nexport const SnackbarContainer: FC<SnackbarContainerProps> = ({\n  children,\n  portalContainer = document.body,\n}) => {\n  const snackbarIdRef = useRef(0)\n  const [snackbars, setSnackbars] = useState<Snackbar[]>([])\n\n  // create snackbar unique ID\n  const newSnackId = useCallback(() => {\n    const newId = `MM_SNACKBAR_${snackbarIdRef.current}`\n    snackbarIdRef.current = +1\n    return newId\n  }, [])\n\n  // oxlint-disable-next-line react/react-compiler\n  const addSnackbar = useCallback((snackbar: CreateSnack) => {\n    const newSnack = {\n      ...snackbar,\n      id: newSnackId(),\n    }\n    setSnackbars([...snackbars, newSnack])\n  }, [])\n\n  const deleteSnackbar = (id: string) => {\n    setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id))\n  }\n\n  return (\n    <SnackbarContext.Provider\n      value={{\n        addSnackbar,\n      }}\n    >\n      {children}\n      {createPortal(\n        <SnackbarWrapper>\n          {snackbars.map((snackbar) => (\n            <SnackbarItem\n              key={snackbar.id}\n              {...snackbar}\n              deleteSnack={deleteSnackbar}\n            />\n          ))}\n        </SnackbarWrapper>,\n        portalContainer,\n      )}\n    </SnackbarContext.Provider>\n  )\n}\n\nconst SnackbarWrapper = styled.div`\n  position: fixed;\n  bottom: 35px;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  width: 90%;\n  max-width: 875px;\n  z-index: 1000;\n`\n"]}

package/dist/Snackbar/SnackbarItem.js

@@ -10,8 +10,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, iconComponent, canManuallyClose, showCloseIcon, deleteSnack, }) => {
     useTimeout(() => deleteSnack(id), autoCloseTime * 1000);
     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: "space.150" })) : null;
-    return (_jsxs(SnackItem, { p: "space.200", mt: "space.200", 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 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: "space.150" })) : null;
+    return (_jsxs(SnackItem, { p: "space.200", mt: "space.200", 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,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,WAAW,GACd,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,SAAS,IACR,CAAC,EAAC,WAAW,EAEb,EAAE,EAAC,WAAW,EACd,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=\"space.150\"\n    />\n  ) : null\n\n  return (\n    <SnackItem\n      p=\"space.200\"\n      key={id}\n      mt=\"space.200\"\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"]}
+{"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,EAC9B,KAAK,EAAE,EAAE,EACT,UAAU,EAAE,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,WAAW,GACd,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,SAAS,IACR,CAAC,EAAC,WAAW,EAEb,EAAE,EAAC,WAAW,EACd,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,EAAC,KAAK,EAAE,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=\"space.150\"\n    />\n  ) : null\n\n  return (\n    <SnackItem\n      p=\"space.200\"\n      key={id}\n      mt=\"space.200\"\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/SupportMessage/SupportMessage.js

@@ -41,7 +41,7 @@ export const SupportMessage = ({ className, description, onClick, rightSideCompo
     const theme = useTheme();
     const resolveBackgroundColor = resolveToThemeColor(styles[type].backgroundColor, theme);
     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: "space.100", 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] }) }) }))] }));
+    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: "space.100", 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 Wrapper = styled(Box)(({ $backgroundColor, onClick }) => css `
     align-items: center;