@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.1 → 10.7.0

package/dist/RichTextEditor/plugins/ToolbarPlugin.js

@@ -0,0 +1,227 @@
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isListNode, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND, } from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isHeadingNode } from '@lexical/rich-text';
+import { $isAtNodeEnd } from '@lexical/selection';
+import { $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Box } from '../../Box';
+import { Icon } from '../../Icon';
+import { theme } from '../../theme';
+const LowPriority = 1;
+function getSelectedNode(selection) {
+    const anchor = selection.anchor;
+    const focus = selection.focus;
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    if (anchorNode === focusNode) {
+        return anchorNode;
+    }
+    const isBackward = selection.isBackward();
+    if (isBackward) {
+        return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+    }
+    else {
+        return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+    }
+}
+export default function ToolbarPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const toolbarRef = useRef(null);
+    const [blockType, setBlockType] = useState('paragraph');
+    const [isLink, setIsLink] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [linkURL, setLinkURL] = useState('');
+    const [prevLinkURL, setPrevLinkURL] = useState('');
+    const formatBulletList = () => {
+        if (blockType !== 'ul') {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            const element = anchorNode.getKey() === 'root'
+                ? anchorNode
+                : anchorNode.getTopLevelElementOrThrow();
+            const elementKey = element.getKey();
+            const elementDOM = editor.getElementByKey(elementKey);
+            if (elementDOM !== null) {
+                if ($isListNode(element)) {
+                    const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                    const type = parentList ? parentList.getTag() : element.getTag();
+                    setBlockType(type);
+                }
+                else {
+                    const type = $isHeadingNode(element)
+                        ? element.getTag()
+                        : element.getType();
+                    setBlockType(type);
+                }
+            }
+            // Update text format
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            // Update links
+            const node = getSelectedNode(selection);
+            const parent = node.getParent();
+            if ($isLinkNode(parent)) {
+                setIsLink(true);
+                setLinkURL(parent.getURL());
+            }
+            else if ($isLinkNode(node)) {
+                setIsLink(true);
+                setLinkURL(node.getURL());
+            }
+            else {
+                setIsLink(false);
+                setLinkURL('');
+            }
+        }
+    }, [editor]);
+    const openNewWindow = (e) => {
+        e.stopPropagation();
+        try {
+            window.open(linkURL, '_blank');
+        }
+        catch (error) {
+            console.warn('Failed to open invalid URL: ', error);
+        }
+    };
+    const urlInputRef = useRef(null);
+    useEffect(() => {
+        if (prevLinkURL !== '' && isLink && urlInputRef.current) {
+            urlInputRef.current.focus();
+        }
+        setPrevLinkURL(linkURL);
+    }, [linkURL]);
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateToolbar();
+            return false;
+        }, LowPriority), editor.registerCommand(CAN_UNDO_COMMAND, () => {
+            return false;
+        }, LowPriority), editor.registerCommand(CAN_REDO_COMMAND, () => {
+            return false;
+        }, LowPriority));
+    }, [editor, updateToolbar]);
+    return (React.createElement(Toolbar, { className: "toolbar", ref: toolbarRef },
+        React.createElement(Bold, { onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+            }, "$active": isBold }, "B"),
+        React.createElement(Italic, { onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+            }, "$active": isItalic }, "i"),
+        React.createElement(EditorButton, { "$active": blockType === 'ul', onClick: () => formatBulletList() },
+            React.createElement(Icon, { render: "bullets" })),
+        React.createElement(Link, { "$active": isLink, onClick: () => !isLink
+                ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')
+                : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null) },
+            React.createElement(Box, { ml: { custom: '-4px' } },
+                React.createElement(Icon, { render: "link" })),
+            React.createElement(LinkInput, { tabIndex: -1, ref: urlInputRef, placeholder: "Enter url", value: linkURL, onChange: (e) => {
+                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value);
+                }, onClick: (e) => e.stopPropagation() }),
+            React.createElement(Box, { onClick: openNewWindow },
+                React.createElement(LinkOpen, { render: "new-window" })))));
+}
+const EditorButton = styled(Box) `
+  height: 40px;
+  width: 40px;
+  line-height: 50px;
+  padding: 12px;
+  border-radius: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: pointer;
+  background-color: ${theme.colors.custard};
+  flex-shrink: 0;
+
+  ${({ $active }) => $active &&
+    `
+    background-color: ${theme.colors.fairyFloss};
+  `}
+
+  :hover {
+    filter: brightness(0.95);
+
+    ${({ $active }) => $active &&
+    `
+      background-color: ${theme.colors.fairyFloss};
+    `}
+  }
+`;
+const Bold = styled(EditorButton) `
+  font-weight: 500;
+`;
+const Italic = styled(EditorButton) `
+  font-style: italic;
+  font-weight: 500;
+  text-indent: -4px;
+`;
+const Toolbar = styled(Box) `
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+`;
+const Link = styled(EditorButton) `
+  transition: width 0.3s;
+  ${({ $active }) => $active && `width: 360px;`}
+  justify-content: left;
+  overflow: hidden;
+  gap: 12px;
+  padding-right: 5px;
+  flex-shrink: 1;
+
+  ${({ $active }) => $active &&
+    `
+    background-color: ${theme.colors.fairyFloss};
+
+    :hover {
+      filter: none;
+    }
+  `}
+`;
+const LinkOpen = styled(Icon) `
+  background-color: ${theme.colors.marshmallowPink};
+  height: 32px;
+  width: 32px;
+  border-radius: 20px;
+  padding: 6px;
+
+  :hover {
+    background-color: ${theme.colors.lollipop};
+  }
+`;
+const LinkInput = styled.input `
+  width: inherit;
+  height: 32px;
+  border: none;
+  border-radius: 20px;
+  padding-left: 12px;
+  padding-right: 12px;
+  font-size: 16px;
+  min-width: 0;
+
+  :hover {
+    outline: 2px solid ${theme.colors.bubblegum};
+  }
+
+  :focus {
+    outline: 2px solid ${theme.colors.marshmallowPink};
+  }
+`;
+//# sourceMappingURL=ToolbarPlugin.js.map

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

@@ -0,0 +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 {\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 React, { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { theme } from '../../theme'\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: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    try {\n      window.open(linkURL, '_blank')\n    } catch (error) {\n      console.warn('Failed to open invalid URL: ', error)\n    }\n  }\n\n  const urlInputRef = useRef<HTMLInputElement | null>(null)\n\n  useEffect(() => {\n    if (prevLinkURL !== '' && isLink && urlInputRef.current) {\n      urlInputRef.current.focus()\n    }\n    setPrevLinkURL(linkURL)\n  }, [linkURL])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          updateToolbar()\n        })\n      }),\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          updateToolbar()\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_UNDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_REDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n    )\n  }, [editor, updateToolbar])\n\n  return (\n    <Toolbar className=\"toolbar\" ref={toolbarRef}>\n      <Bold\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n        }}\n        $active={isBold}\n      >\n        B\n      </Bold>\n      <Italic\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n        }}\n        $active={isItalic}\n      >\n        i\n      </Italic>\n      <EditorButton\n        $active={blockType === 'ul'}\n        onClick={() => formatBulletList()}\n      >\n        <Icon render=\"bullets\" />\n      </EditorButton>\n\n      <Link\n        $active={isLink}\n        onClick={() =>\n          !isLink\n            ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')\n            : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n        }\n      >\n        <Box ml={{ custom: '-4px' }}>\n          <Icon render=\"link\" />\n        </Box>\n        <LinkInput\n          tabIndex={-1}\n          ref={urlInputRef}\n          placeholder=\"Enter url\"\n          value={linkURL}\n          onChange={(e) => {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value)\n          }}\n          onClick={(e) => e.stopPropagation()}\n        />\n        <Box onClick={openNewWindow}>\n          <LinkOpen render=\"new-window\" />\n        </Box>\n      </Link>\n    </Toolbar>\n  )\n}\n\nconst EditorButton = styled(Box)<{ $active: boolean }>`\n  height: 40px;\n  width: 40px;\n  line-height: 50px;\n  padding: 12px;\n  border-radius: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  cursor: pointer;\n  background-color: ${theme.colors.custard};\n  flex-shrink: 0;\n\n  ${({ $active }) =>\n    $active &&\n    `\n    background-color: ${theme.colors.fairyFloss};\n  `}\n\n  :hover {\n    filter: brightness(0.95);\n\n    ${({ $active }) =>\n      $active &&\n      `\n      background-color: ${theme.colors.fairyFloss};\n    `}\n  }\n`\n\nconst Bold = styled(EditorButton)`\n  font-weight: 500;\n`\n\nconst Italic = styled(EditorButton)`\n  font-style: italic;\n  font-weight: 500;\n  text-indent: -4px;\n`\n\nconst Toolbar = styled(Box)`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n`\n\nconst Link = styled(EditorButton)`\n  transition: width 0.3s;\n  ${({ $active }) => $active && `width: 360px;`}\n  justify-content: left;\n  overflow: hidden;\n  gap: 12px;\n  padding-right: 5px;\n  flex-shrink: 1;\n\n  ${({ $active }) =>\n    $active &&\n    `\n    background-color: ${theme.colors.fairyFloss};\n\n    :hover {\n      filter: none;\n    }\n  `}\n`\n\nconst LinkOpen = styled(Icon)`\n  background-color: ${theme.colors.marshmallowPink};\n  height: 32px;\n  width: 32px;\n  border-radius: 20px;\n  padding: 6px;\n\n  :hover {\n    background-color: ${theme.colors.lollipop};\n  }\n`\n\nconst LinkInput = styled.input`\n  width: inherit;\n  height: 32px;\n  border: none;\n  border-radius: 20px;\n  padding-left: 12px;\n  padding-right: 12px;\n  font-size: 16px;\n  min-width: 0;\n\n  :hover {\n    outline: 2px solid ${theme.colors.bubblegum};\n  }\n\n  :focus {\n    outline: 2px solid ${theme.colors.marshmallowPink};\n  }\n`\n"]}

package/dist/RichTextEditor/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from './AutoLinkPlugin';

package/dist/RichTextEditor/plugins/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './AutoLinkPlugin'\n"]}

package/dist/RichTextEditor/utils.d.ts

@@ -0,0 +1,2 @@
+import { LexicalNode, RootNode } from 'lexical';
+export declare const appendNodes: (root: RootNode, nodes: LexicalNode[]) => void;

package/dist/RichTextEditor/utils.js

@@ -0,0 +1,15 @@
+import { $createParagraphNode } from 'lexical';
+export const appendNodes = (root, nodes) => {
+    nodes
+        .filter((node) => node.__type !== 'linebreak')
+        .map((node) => {
+        if (node.__type === 'text') {
+            const paragraphNode = $createParagraphNode();
+            paragraphNode.append(node);
+            return paragraphNode;
+        }
+        return node;
+    })
+        .forEach((node) => root.append(node));
+};
+//# sourceMappingURL=utils.js.map

package/dist/RichTextEditor/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/RichTextEditor/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAA;AAErE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAc,EAAE,KAAoB,EAAE,EAAE;IAClE,KAAK;SACF,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC;SAC7C,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACZ,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC3B,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAA;YAC5C,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YAC1B,OAAO,aAAa,CAAA;QACtB,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC,CAAC;SACD,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;AACzC,CAAC,CAAA","sourcesContent":["import { $createParagraphNode, LexicalNode, RootNode } from 'lexical'\n\nexport const appendNodes = (root: RootNode, nodes: LexicalNode[]) => {\n  nodes\n    .filter((node) => node.__type !== 'linebreak')\n    .map((node) => {\n      if (node.__type === 'text') {\n        const paragraphNode = $createParagraphNode()\n        paragraphNode.append(node)\n        return paragraphNode\n      }\n      return node\n    })\n    .forEach((node) => root.append(node))\n}\n"]}

package/dist/Row/Row.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Icons } from '../Icon/iconsList';
+import { Color } from '../theme';
+import { MarginProps } from '../utils/space';
+export type RowProps = {
+    iconLeft?: Icons;
+    iconLeftColor?: Color;
+    iconRight?: Icons;
+    iconRightColor?: Color;
+    handleClick?: () => void;
+    heading: string;
+    subHeading?: string;
+    type?: 'first' | 'last' | 'curved';
+    borderTop?: boolean;
+    borderBottom?: boolean;
+    boldHeading?: boolean;
+} & MarginProps;
+export declare const Row: FC<RowProps>;

package/dist/Row/Row.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme } from '../theme';
+export const Row = ({ iconLeft, iconLeftColor = 'liquorice', iconRight, iconRightColor = 'marzipan', handleClick, heading, subHeading, type, borderTop = true, borderBottom = true, boldHeading, ...marginProps }) => {
+    const windowWidth = screen.width;
+    return (React.createElement(Container, { "$type": type, "$iconLeft": iconLeft, "$borderTop": borderTop, "$borderBottom": borderBottom, "$iconRight": iconRight, onClick: handleClick, "$boldHeading": boldHeading, ...marginProps },
+        iconLeft && (React.createElement(Icon, { render: iconLeft, size: windowWidth > 768 ? 24 : 18, color: iconLeftColor })),
+        React.createElement(Box, null,
+            React.createElement(Text, { tag: "h1", typo: "base" }, heading),
+            React.createElement(Text, { tag: "p", typo: "desc-small", color: "sesame" }, subHeading)),
+        iconRight && (React.createElement(Icon, { className: "iconRight", render: iconRight, size: 24, rotate: iconRight === 'caret' ? -90 : 0, color: iconRightColor }))));
+};
+const Container = styled(Box)(({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading }) => css `
+    border-radius: ${($type === 'first' && `16px 16px 0 0`) ||
+    ($type === 'curved' && `16px`) ||
+    ($type === 'last' && `0 0 16px 16px`) ||
+    0};
+
+    border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'
+    ? `1px solid ${theme.colors.oatmeal}`
+    : 'none'};
+    border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'
+    ? `1px solid ${theme.colors.oatmeal}`
+    : 'none'};
+
+    background-color: ${theme.colors.custard};
+    display: grid;
+    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};
+    padding: 16px;
+    grid-gap: 16px;
+    align-items: center;
+
+    cursor: pointer;
+
+    h1 {
+      font-weight: ${$boldHeading && 500};
+    }
+
+    .iconRight {
+      justify-self: end;
+    }
+
+    @media (min-width: 768px) {
+      grid-gap: 24px;
+    }
+  `);
+//# sourceMappingURL=Row.js.map

package/dist/Row/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAiBvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,WAAW,EAC3B,SAAS,EACT,cAAc,GAAG,UAAU,EAC3B,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,aACD,IAAI,eACA,QAAQ,gBACP,SAAS,mBACN,YAAY,gBACf,SAAS,EACrB,OAAO,EAAE,WAAW,kBACN,WAAW,KACrB,WAAW;QAEd,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH;QACD,oBAAC,GAAG;YACF,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,IACvB,OAAO,CACH;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,IAC3C,UAAU,CACN,CACH;QACL,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,SAAS,EAAC,WAAW,EACrB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,cAAc,GACrB,CACH,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACnD,CAAC,KAAK,KAAK,OAAO,IAAI,eAAe,CAAC;IACvD,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC;IAC9B,CAAC,KAAK,KAAK,MAAM,IAAI,eAAe,CAAC;IACrC,CAAC;;kBAEa,UAAU,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,OAAO;IACjE,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,MAAM;qBACO,aAAa,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM;IACtE,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,MAAM;;wBAEU,KAAK,CAAC,MAAM,CAAC,OAAO;;6BAEf,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;;;;;;;;qBAQlD,YAAY,IAAI,GAAG;;;;;;;;;;GAUrC,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type RowProps = {\n  iconLeft?: Icons\n  iconLeftColor?: Color\n  iconRight?: Icons\n  iconRightColor?: Color\n  handleClick?: () => void\n  heading: string\n  subHeading?: string\n  type?: 'first' | 'last' | 'curved'\n  borderTop?: boolean\n  borderBottom?: boolean\n  boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n  iconLeft,\n  iconLeftColor = 'liquorice',\n  iconRight,\n  iconRightColor = 'marzipan',\n  handleClick,\n  heading,\n  subHeading,\n  type,\n  borderTop = true,\n  borderBottom = true,\n  boldHeading,\n  ...marginProps\n}) => {\n  const windowWidth = screen.width\n\n  return (\n    <Container\n      $type={type}\n      $iconLeft={iconLeft}\n      $borderTop={borderTop}\n      $borderBottom={borderBottom}\n      $iconRight={iconRight}\n      onClick={handleClick}\n      $boldHeading={boldHeading}\n      {...marginProps}\n    >\n      {iconLeft && (\n        <Icon\n          render={iconLeft}\n          size={windowWidth > 768 ? 24 : 18}\n          color={iconLeftColor}\n        />\n      )}\n      <Box>\n        <Text tag=\"h1\" typo=\"base\">\n          {heading}\n        </Text>\n        <Text tag=\"p\" typo=\"desc-small\" color=\"sesame\">\n          {subHeading}\n        </Text>\n      </Box>\n      {iconRight && (\n        <Icon\n          className=\"iconRight\"\n          render={iconRight}\n          size={24}\n          rotate={iconRight === 'caret' ? -90 : 0}\n          color={iconRightColor}\n        />\n      )}\n    </Container>\n  )\n}\n\ninterface IContainer {\n  $type?: 'first' | 'last' | 'curved'\n  $iconLeft?: string\n  $iconRight?: string\n  $borderTop: boolean\n  $borderBottom: boolean\n  $boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n  ({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading }) => 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.colors.oatmeal}`\n      : 'none'};\n    border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'\n      ? `1px solid ${theme.colors.oatmeal}`\n      : 'none'};\n\n    background-color: ${theme.colors.custard};\n    display: grid;\n    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n    padding: 16px;\n    grid-gap: 16px;\n    align-items: center;\n\n    cursor: pointer;\n\n    h1 {\n      font-weight: ${$boldHeading && 500};\n    }\n\n    .iconRight {\n      justify-self: end;\n    }\n\n    @media (min-width: 768px) {\n      grid-gap: 24px;\n    }\n  `,\n)\n"]}

package/dist/Row/index.d.ts

@@ -0,0 +1 @@
+export * from './Row';

package/dist/Row/index.js

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

package/dist/Row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Row/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA","sourcesContent":["export * from './Row'\n"]}

package/dist/SearchInput/SearchInput.d.ts

@@ -0,0 +1,50 @@
+import { IFuseOptions } from 'fuse.js';
+import React, { FocusEvent, ReactNode } from 'react';
+import { CommonFieldProps } from '../fields/commonFieldTypes';
+export type SearchInputItem = {
+    label: string;
+    value: string;
+    tags?: any[];
+};
+export interface SearchInputProps extends CommonFieldProps {
+    /** Optional input className */
+    name?: string;
+    /**  Optional placeholder text */
+    placeholder?: string;
+    /**  List of input items to search on*/
+    searchList: SearchInputItem[];
+    /**  callback to handle found item click */
+    onFound: (element: string) => void;
+    /**  optional callback to run when no results found */
+    onNotFound?: (searchTerm: string) => void;
+    /**  optional Component to render when no results found */
+    notFoundComponent?: (searchTerm: string) => ReactNode;
+    /**  optional boolean to show search icon */
+    showIcon?: boolean;
+    /**  optional boolean to show a clear search button */
+    clearSearch?: boolean;
+    /**  Optional callback to run on blur */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**  Optional default value for input */
+    value?: string;
+    /**  Optional boolean to move results to a realtive position */
+    resultsRelativePosition?: boolean;
+    /**  optional boolean to add border to results */
+    resultsBorder?: boolean;
+    /** optional boolean to enable fuzzy search via fuse.js */
+    enableFuzzySearch?: boolean;
+    /** optional config of fuzzy search
+     *  passing a value to this prop, automatically enables fuzzy search
+     */
+    fuzzySearchOptions?: IFuseOptions<SearchInputItem>;
+}
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Icons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").MarginProps & import("..").PaddingProps & import("../utils/flex").FlexProps & import("../utils/measure").MeasureProps & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType;
+    forwardedAs?: React.ElementType;
+} & React.RefAttributes<HTMLDivElement>, {
+    $clearSearch: boolean;
+}>> & string & Omit<React.ForwardRefExoticComponent<import("..").MarginProps & import("..").PaddingProps & import("../utils/flex").FlexProps & import("../utils/measure").MeasureProps & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType;
+    forwardedAs?: React.ElementType;
+} & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;

package/dist/SearchInput/SearchInput.js

@@ -0,0 +1,165 @@
+import Fuse from 'fuse.js';
+import React, { forwardRef, useMemo, useRef, useState, } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { IconStrict } from '../IconStrict';
+import { Field } from '../fields/Field';
+import { Input, StyledFrontIcon } from '../fields/components/CommonInput';
+import { useOnClickOutside } from '../hooks';
+import { theme } from '../theme';
+import { useUniqueId } from '../utils/id';
+import { useControllableState } from '../utils/useControlledState';
+import { SearchOptions } from './components/SearchOptions';
+const defaultFuzzySearchOptions = {
+    keys: [
+        {
+            name: 'label',
+            weight: 0.6,
+        },
+        {
+            name: 'tags',
+            weight: 0.4,
+        },
+    ],
+    findAllMatches: true,
+    minMatchCharLength: 1,
+    location: 0,
+    threshold: 0.45,
+    distance: 55,
+};
+export const SearchInput = forwardRef(function SearchInput({ id: idProp, name = 'search_input', className = '', placeholder, searchList, showIcon = false, renderAsTitle = false, value, onBlur, onFound, onNotFound, notFoundComponent, fallbackStyle, resultsRelativePosition = false, resultsBorder = true, enableFuzzySearch = false, fuzzySearchOptions, clearSearch, ...otherProps }, ref) {
+    const wrapperRef = useRef(null);
+    const id = useUniqueId(idProp);
+    const [showOptions, setShowOptions] = useState(false);
+    const [selectedValue, setSelectedValue] = useControllableState({
+        initialState: null,
+        stateProp: value,
+    });
+    const [searchQuery, setSearchQuery] = useState(null);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const selectedValueLabel = searchList.find((option) => option.label === selectedValue || option.value === selectedValue)?.label;
+    const handleBlur = () => {
+        if (selectedValue) {
+            setSearchQuery(selectedValueLabel ?? null);
+        }
+        else if (!selectedValue) {
+            setSearchQuery(null);
+        }
+    };
+    useOnClickOutside({
+        ref: wrapperRef,
+        callback: () => {
+            handleBlur();
+            setShowOptions(false);
+        },
+    });
+    const fuse = useMemo(() => {
+        return new Fuse(searchList, {
+            ...defaultFuzzySearchOptions,
+            ...fuzzySearchOptions,
+        });
+    }, [searchList]);
+    const filteredList = useMemo(() => {
+        if (searchQuery === null || searchQuery === '') {
+            return searchList;
+        }
+        if (enableFuzzySearch || !!fuzzySearchOptions) {
+            return fuse.search(searchQuery).map(({ item }) => item);
+        }
+        return searchList.filter(({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase()));
+    }, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions]);
+    const getDisplayedInputText = () => {
+        if (searchQuery !== null) {
+            return searchQuery;
+        }
+        if (selectedValue !== null) {
+            return selectedValueLabel || '';
+        }
+        return '';
+    };
+    const isSelected = selectedValue !== null;
+    const displayedInputText = getDisplayedInputText();
+    const updateSearchQuery = (query) => {
+        setSearchQuery(query);
+        setHighlightedIndex(-1);
+        if (query === null) {
+            setSelectedValue(null);
+            setShowOptions(false);
+        }
+        else {
+            setShowOptions(true);
+        }
+    };
+    const handleClick = () => {
+        setShowOptions(true);
+        if (searchQuery !== null) {
+            updateSearchQuery(searchQuery);
+            setShowOptions(true);
+        }
+        else if (selectedValue !== null && searchQuery === null) {
+            setSearchQuery(selectedValueLabel || null);
+            setShowOptions(true);
+        }
+    };
+    const handleInputChange = (event) => {
+        const nextValue = event.currentTarget.value;
+        updateSearchQuery(nextValue);
+    };
+    const handleSelect = (nextValue) => {
+        updateSearchQuery(null);
+        setSelectedValue(nextValue.label);
+        onFound(nextValue.value);
+    };
+    const handleClearSearch = () => {
+        updateSearchQuery(null);
+        setSelectedValue(null);
+        onFound('');
+    };
+    const handleCaretClick = () => {
+        setShowOptions(!showOptions);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' && highlightedIndex !== -1) {
+            event.preventDefault();
+            const focusedItem = filteredList[highlightedIndex];
+            handleSelect(focusedItem);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const nextIndex = (highlightedIndex + 1) % filteredList.length;
+            setHighlightedIndex(nextIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const prevIndex = (highlightedIndex - 1 + filteredList.length) % filteredList.length;
+            setHighlightedIndex(prevIndex);
+        }
+    };
+    const showClearSearchButton = !!clearSearch && (!!value || !!selectedValue || !!searchQuery);
+    return (React.createElement(Wrapper, { ref: wrapperRef },
+        React.createElement(Field, { className: className, renderAsTitle: renderAsTitle, htmlFor: id, ...otherProps },
+            React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
+                showIcon && React.createElement(StyledFrontIcon, { render: "search", color: "sesame" }),
+                React.createElement(Input, { id: id, name: name, ref: ref, placeholder: placeholder, "$error": otherProps.error, "$frontIcon": showIcon ? 'search' : undefined, "$fallbackStyle": fallbackStyle, autoComplete: "off", value: displayedInputText, onFocus: handleClick, onChange: handleInputChange, selected: isSelected, onClick: handleClick, onKeyDown: handleKeyDown, onBlur: (e) => {
+                        onBlur?.(e);
+                    } }),
+                React.createElement(Icons, { flex: true, alignItems: "center", gap: "8px", "$clearSearch": showClearSearchButton },
+                    showClearSearchButton && (React.createElement(IconStrict, { type: "button", render: "plus", rotate: 45, iconColor: "marzipan", title: "Clear search", handleClick: handleClearSearch, size: 24 })),
+                    React.createElement(Line, null),
+                    React.createElement(IconStrict, { type: "button", render: "caret", iconColor: "marzipan", rotate: showOptions ? 180 : 0, handleClick: handleCaretClick, size: 24 }))),
+            showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, selectedValue: selectedValue, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onKeyDown: handleKeyDown, searchTerm: searchQuery || '', onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder, onNotFound: onNotFound, notFoundComponent: notFoundComponent?.(searchQuery ?? '') })))));
+});
+const Wrapper = styled(Box) `
+  position: relative;
+`;
+const Line = styled(Box) `
+  background: ${theme.colors.oatmeal};
+  height: 24px;
+  width: 1px;
+`;
+export const Icons = styled(Box) `
+  position: relative;
+  right: ${({ $clearSearch }) => ($clearSearch ? '80px' : '48px')};
+  margin-right: ${({ $clearSearch }) => ($clearSearch ? '-80px' : '-48px')};
+`;
+//# sourceMappingURL=SearchInput.js.map

package/dist/SearchInput/SearchInput.js.map

@@ -0,0 +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 React, {\n  ChangeEvent,\n  FocusEvent,\n  ReactNode,\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Input, StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useOnClickOutside } from '../hooks'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { SearchOptions } from './components/SearchOptions'\n\nexport type SearchInputItem = {\n  label: string\n  value: string\n  tags?: any[]\n}\n\nexport interface SearchInputProps extends CommonFieldProps {\n  /** Optional input className */\n  name?: string\n  /**  Optional placeholder text */\n  placeholder?: string\n  /**  List of input items to search on*/\n  searchList: SearchInputItem[]\n  /**  callback to handle found item click */\n  onFound: (element: string) => void\n  /**  optional callback to run when no results found */\n  onNotFound?: (searchTerm: string) => void\n  /**  optional Component to render when no results found */\n  notFoundComponent?: (searchTerm: string) => ReactNode\n  /**  optional boolean to show search icon */\n  showIcon?: boolean\n  /**  optional boolean to show a clear search button */\n  clearSearch?: boolean\n  /**  Optional callback to run on blur */\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**  Optional default value for input */\n  value?: string\n  /**  Optional boolean to move results to a realtive position */\n  resultsRelativePosition?: boolean\n  /**  optional boolean to add border to results */\n  resultsBorder?: boolean\n  /** optional boolean to enable fuzzy search via fuse.js */\n  enableFuzzySearch?: boolean\n  /** optional config of fuzzy search\n   *  passing a value to this prop, automatically enables fuzzy search\n   */\n  fuzzySearchOptions?: IFuseOptions<SearchInputItem>\n}\n\nconst defaultFuzzySearchOptions = {\n  keys: [\n    {\n      name: 'label',\n      weight: 0.6,\n    },\n    {\n      name: 'tags',\n      weight: 0.4,\n    },\n  ],\n  findAllMatches: true,\n  minMatchCharLength: 1,\n  location: 0,\n  threshold: 0.45,\n  distance: 55,\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      id: idProp,\n      name = 'search_input',\n      className = '',\n      placeholder,\n      searchList,\n      showIcon = false,\n      renderAsTitle = false,\n      value,\n      onBlur,\n      onFound,\n      onNotFound,\n      notFoundComponent,\n      fallbackStyle,\n      resultsRelativePosition = false,\n      resultsBorder = true,\n      enableFuzzySearch = false,\n      fuzzySearchOptions,\n      clearSearch,\n      ...otherProps\n    },\n    ref,\n  ) {\n    const wrapperRef = useRef(null)\n    const id = useUniqueId(idProp)\n    const [showOptions, setShowOptions] = useState(false)\n    const [selectedValue, setSelectedValue] = useControllableState<\n      string | null\n    >({\n      initialState: null,\n      stateProp: value,\n    })\n    const [searchQuery, setSearchQuery] = useState<string | null>(null)\n    const [highlightedIndex, setHighlightedIndex] = useState(-1)\n\n    const selectedValueLabel = searchList.find(\n      (option) =>\n        option.label === selectedValue || option.value === selectedValue,\n    )?.label\n\n    const handleBlur = () => {\n      if (selectedValue) {\n        setSearchQuery(selectedValueLabel ?? null)\n      } else if (!selectedValue) {\n        setSearchQuery(null)\n      }\n    }\n\n    useOnClickOutside({\n      ref: wrapperRef,\n      callback: () => {\n        handleBlur()\n        setShowOptions(false)\n      },\n    })\n\n    const fuse = useMemo(() => {\n      return new Fuse(searchList, {\n        ...defaultFuzzySearchOptions,\n        ...fuzzySearchOptions,\n      })\n    }, [searchList])\n\n    const filteredList = useMemo(() => {\n      if (searchQuery === null || searchQuery === '') {\n        return searchList\n      }\n\n      if (enableFuzzySearch || !!fuzzySearchOptions) {\n        return fuse.search(searchQuery).map(({ item }) => item)\n      }\n\n      return searchList.filter(({ label }) =>\n        label.toLowerCase().includes(searchQuery.toLocaleLowerCase()),\n      )\n    }, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions])\n\n    const getDisplayedInputText = () => {\n      if (searchQuery !== null) {\n        return searchQuery\n      }\n      if (selectedValue !== null) {\n        return selectedValueLabel || ''\n      }\n      return ''\n    }\n\n    const isSelected = selectedValue !== null\n    const displayedInputText = getDisplayedInputText()\n\n    const updateSearchQuery = (query: string | null) => {\n      setSearchQuery(query)\n      setHighlightedIndex(-1)\n\n      if (query === null) {\n        setSelectedValue(null)\n        setShowOptions(false)\n      } else {\n        setShowOptions(true)\n      }\n    }\n\n    const handleClick = () => {\n      setShowOptions(true)\n      if (searchQuery !== null) {\n        updateSearchQuery(searchQuery)\n        setShowOptions(true)\n      } else if (selectedValue !== null && searchQuery === null) {\n        setSearchQuery(selectedValueLabel || null)\n        setShowOptions(true)\n      }\n    }\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {\n      const nextValue = event.currentTarget.value\n      updateSearchQuery(nextValue)\n    }\n\n    const handleSelect = (nextValue: SearchInputItem): void => {\n      updateSearchQuery(null)\n      setSelectedValue(nextValue.label)\n      onFound(nextValue.value)\n    }\n\n    const handleClearSearch = () => {\n      updateSearchQuery(null)\n      setSelectedValue(null)\n      onFound('')\n    }\n\n    const handleCaretClick = () => {\n      setShowOptions(!showOptions)\n    }\n\n    const handleKeyDown = (event: {\n      key: string\n      preventDefault: () => void\n    }) => {\n      if (event.key === 'Enter' && highlightedIndex !== -1) {\n        event.preventDefault()\n        const focusedItem = filteredList[highlightedIndex]\n        handleSelect(focusedItem)\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault()\n        const nextIndex = (highlightedIndex + 1) % filteredList.length\n        setHighlightedIndex(nextIndex)\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault()\n        const prevIndex =\n          (highlightedIndex - 1 + filteredList.length) % filteredList.length\n        setHighlightedIndex(prevIndex)\n      }\n    }\n\n    const showClearSearchButton =\n      !!clearSearch && (!!value || !!selectedValue || !!searchQuery)\n\n    return (\n      <Wrapper ref={wrapperRef}>\n        <Field\n          className={className}\n          renderAsTitle={renderAsTitle}\n          htmlFor={id}\n          {...otherProps}\n        >\n          <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n            {showIcon && <StyledFrontIcon render=\"search\" color=\"sesame\" />}\n            <Input\n              id={id}\n              name={name}\n              ref={ref}\n              placeholder={placeholder}\n              $error={otherProps.error}\n              $frontIcon={showIcon ? 'search' : undefined}\n              $fallbackStyle={fallbackStyle}\n              autoComplete=\"off\"\n              value={displayedInputText}\n              onFocus={handleClick}\n              onChange={handleInputChange}\n              selected={isSelected}\n              onClick={handleClick}\n              onKeyDown={handleKeyDown}\n              onBlur={(e) => {\n                onBlur?.(e)\n              }}\n            />\n            <Icons\n              flex\n              alignItems=\"center\"\n              gap=\"8px\"\n              $clearSearch={showClearSearchButton}\n            >\n              {showClearSearchButton && (\n                <IconStrict\n                  type=\"button\"\n                  render=\"plus\"\n                  rotate={45}\n                  iconColor=\"marzipan\"\n                  title=\"Clear search\"\n                  handleClick={handleClearSearch}\n                  size={24}\n                />\n              )}\n              <Line />\n              <IconStrict\n                type=\"button\"\n                render=\"caret\"\n                iconColor=\"marzipan\"\n                rotate={showOptions ? 180 : 0}\n                handleClick={handleCaretClick}\n                size={24}\n              />\n            </Icons>\n          </Box>\n\n          {showOptions && (\n            <SearchOptions\n              displayedList={filteredList}\n              selectedValue={selectedValue}\n              highlightedIndex={highlightedIndex}\n              setHighlightedIndex={setHighlightedIndex}\n              onKeyDown={handleKeyDown}\n              searchTerm={searchQuery || ''}\n              onSelect={handleSelect}\n              positionRelative={resultsRelativePosition}\n              resultsBorder={resultsBorder}\n              onNotFound={onNotFound}\n              notFoundComponent={notFoundComponent?.(searchQuery ?? '')}\n            />\n          )}\n        </Field>\n      </Wrapper>\n    )\n  },\n)\n\nconst Wrapper = styled(Box)`\n  position: relative;\n`\n\nconst Line = styled(Box)`\n  background: ${theme.colors.oatmeal};\n  height: 24px;\n  width: 1px;\n`\n\nexport const Icons = styled(Box)<{ $clearSearch: boolean }>`\n  position: relative;\n  right: ${({ $clearSearch }) => ($clearSearch ? '80px' : '48px')};\n  margin-right: ${({ $clearSearch }) => ($clearSearch ? '-80px' : '-48px')};\n`\n"]}