@mrshmllw/smores-react 9.4.1 → 9.6.0-crumbs-seach-input-ui.1

package/dist/SearchInput/SearchInput.js

@@ -1,12 +1,25 @@
-import React, { forwardRef, useMemo, useState, } from 'react';
+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';
-import Fuse from 'fuse.js';
-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, ...otherProps }, ref) {
+const defaultFuzzySearchOptions = {
+    keys: ['label', 'value'],
+    findAllMatches: true,
+    minMatchCharLength: 2,
+    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({
@@ -14,23 +27,26 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
         stateProp: value,
     });
     const [searchQuery, setSearchQuery] = useState(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    useOnClickOutside({
+        ref: wrapperRef,
+        callback: () => setShowOptions(false),
+    });
     const fuse = useMemo(() => {
-        const searchKeys = ['label', 'value'];
         return new Fuse(searchList, {
-            keys: searchKeys,
-            findAllMatches: true,
-            minMatchCharLength: 2,
+            ...defaultFuzzySearchOptions,
+            ...fuzzySearchOptions,
         });
     }, [searchList]);
     const filteredList = useMemo(() => {
         if (searchQuery === null || searchQuery === '') {
             return searchList;
         }
-        if (enableFuzzySearch) {
+        if (enableFuzzySearch || !!fuzzySearchOptions) {
             return fuse.search(searchQuery).map(({ item }) => item);
         }
         return searchList.filter(({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase()));
-    }, [searchQuery, enableFuzzySearch]);
+    }, [searchQuery, enableFuzzySearch, !!fuzzySearchOptions]);
     const getDisplayedInputText = () => {
         if (searchQuery !== null) {
             return searchQuery;
@@ -44,6 +60,7 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
     const displayedInputText = getDisplayedInputText();
     const updateSearchQuery = (query) => {
         setSearchQuery(query);
+        setFocusedIndex(-1);
         if (query === null) {
             setShowOptions(false);
         }
@@ -51,6 +68,16 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
             setShowOptions(2 <= query.length);
         }
     };
+    const handleClick = () => {
+        if (searchQuery !== null && 2 <= searchQuery.length) {
+            updateSearchQuery(searchQuery);
+            setShowOptions(true);
+        }
+        else if (selectedValue !== null && searchQuery === null) {
+            setSearchQuery(selectedValue);
+            setShowOptions(true);
+        }
+    };
     const handleInputChange = (event) => {
         const nextValue = event.currentTarget.value;
         updateSearchQuery(nextValue);
@@ -60,15 +87,49 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
         setSelectedValue(nextValue.label);
         onFound(nextValue.value);
     };
-    return (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, "$frontIcon": showIcon ? 'search' : undefined, "$fallbackStyle": fallbackStyle, autoComplete: "off", value: displayedInputText, onChange: handleInputChange, selected: isSelected, onBlur: (e) => {
-                    if (displayedInputText === '') {
-                        setSearchQuery(null);
-                    }
-                    onBlur?.(e);
-                } })),
-        showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, searchTerm: searchQuery || '', onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder, onNotFound: onNotFound, notFoundComponent: notFoundComponent }))));
+    const handleClearSearch = () => {
+        updateSearchQuery(null);
+        setSelectedValue(null);
+    };
+    const handleCaretClick = () => {
+        setShowOptions(!showOptions);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const nextIndex = (focusedIndex + 1) % filteredList.length;
+            setFocusedIndex(nextIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const prevIndex = (focusedIndex - 1 + filteredList.length) % filteredList.length;
+            setFocusedIndex(prevIndex);
+        }
+    };
+    return (React.createElement(Box, { 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) => {
+                        if (displayedInputText === '') {
+                            setSearchQuery(null);
+                        }
+                        onBlur?.(e);
+                    } }),
+                React.createElement(Icons, { flex: true, alignItems: "center", gap: "8px", "$clearSearch": !!clearSearch },
+                    clearSearch && (React.createElement(IconStrict, { render: "plus", rotate: 45, iconColor: "marzipan", handleClick: handleClearSearch, size: 24 })),
+                    React.createElement(Line, null),
+                    React.createElement(IconStrict, { render: "caret", iconColor: "marzipan", rotate: showOptions ? 180 : 0, handleClick: handleCaretClick, size: 24 }))),
+            showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, selectedValue: selectedValue, focusedIndex: focusedIndex, onKeyDown: handleKeyDown, searchTerm: searchQuery || '', onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder, onNotFound: onNotFound, notFoundComponent: notFoundComponent })))));
 });
+const Line = styled(Box) `
+  background: ${theme.colors.oatmeal};
+  height: 24px;
+  width: 1px;
+`;
+export const Icons = styled(Box) `
+  position: relative;
+  right: ${({ $clearSearch }) => ($clearSearch ? '78px' : '48px')};
+  margin-right: ${({ $clearSearch }) => ($clearSearch ? '-78px' : '-48px')};
+`;
 //# sourceMappingURL=SearchInput.js.map

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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"}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAsB,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAE,EAIZ,UAAU,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AA6C1D,MAAM,yBAAyB,GAAG;IAChC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,IAAI;IACpB,kBAAkB,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,EAAE;CACb,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,WAAW,EACX,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,uBAAuB,GAAG,KAAK,EAC/B,aAAa,GAAG,IAAI,EACpB,iBAAiB,GAAG,KAAK,EACzB,kBAAkB,EAClB,WAAW,EACX,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC/B,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,oBAAoB,CAE5D;QACA,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAA;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IACnE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;IAEpD,iBAAiB,CAAC;QAChB,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;KACtC,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE;YAC1B,GAAG,yBAAyB;YAC5B,GAAG,kBAAkB;SACtB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,EAAE,EAAE,CAAC;YAC/C,OAAO,UAAU,CAAA;QACnB,CAAC;QAED,IAAI,iBAAiB,IAAI,CAAC,CAAC,kBAAkB,EAAE,CAAC;YAC9C,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,CAAA;QACzD,CAAC;QAED,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAC,CAC9D,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAE1D,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACzB,OAAO,WAAW,CAAA;QACpB,CAAC;QAED,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC3B,OAAO,CACL,UAAU,CAAC,IAAI,CACb,CAAC,MAAM,EAAE,EAAE,CACT,MAAM,CAAC,KAAK,KAAK,aAAa,IAAI,MAAM,CAAC,KAAK,KAAK,aAAa,CACnE,EAAE,KAAK,IAAI,EAAE,CACf,CAAA;QACH,CAAC;QAED,OAAO,EAAE,CAAA;IACX,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,aAAa,KAAK,IAAI,CAAA;IACzC,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAA;IAElD,MAAM,iBAAiB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACjD,cAAc,CAAC,KAAK,CAAC,CAAA;QACrB,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA;QAEnB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,cAAc,CAAC,KAAK,CAAC,CAAA;QACvB,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,WAAW,KAAK,IAAI,IAAI,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,CAAC;YACpD,iBAAiB,CAAC,WAAW,CAAC,CAAA;YAC9B,cAAc,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC;aAAM,IAAI,aAAa,KAAK,IAAI,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YAC1D,cAAc,CAAC,aAAa,CAAC,CAAA;YAC7B,cAAc,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,KAAoC,EAAQ,EAAE;QACvE,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;QAC3C,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,SAA0B,EAAQ,EAAE;QACxD,iBAAiB,CAAC,IAAI,CAAC,CAAA;QACvB,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QACjC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAA;QACvB,gBAAgB,CAAC,IAAI,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,cAAc,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,CAAC,KAGtB,EAAE,EAAE;QACH,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,CAAA;YAC1D,eAAe,CAAC,SAAS,CAAC,CAAA;QAC5B,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,SAAS,GACb,CAAC,YAAY,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,MAAM,CAAA;YAChE,eAAe,CAAC,SAAS,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAE,UAAU;QAClB,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,EAAE,KACP,UAAU;YAEd,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY;gBACtD,QAAQ,IAAI,oBAAC,eAAe,IAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,GAAG;gBAC/D,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,YAChB,UAAU,CAAC,KAAK,gBACZ,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,oBAC3B,aAAa,EAC7B,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,iBAAiB,EAC3B,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;wBACZ,IAAI,kBAAkB,KAAK,EAAE,EAAE,CAAC;4BAC9B,cAAc,CAAC,IAAI,CAAC,CAAA;wBACtB,CAAC;wBACD,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;oBACb,CAAC,GACD;gBACF,oBAAC,KAAK,IACJ,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,KAAK,kBACK,CAAC,CAAC,WAAW;oBAE1B,WAAW,IAAI,CACd,oBAAC,UAAU,IACT,MAAM,EAAC,MAAM,EACb,MAAM,EAAE,EAAE,EACV,SAAS,EAAC,UAAU,EACpB,WAAW,EAAE,iBAAiB,EAC9B,IAAI,EAAE,EAAE,GACR,CACH;oBACD,oBAAC,IAAI,OAAG;oBACR,oBAAC,UAAU,IACT,MAAM,EAAC,OAAO,EACd,SAAS,EAAC,UAAU,EACpB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC7B,WAAW,EAAE,gBAAgB,EAC7B,IAAI,EAAE,EAAE,GACR,CACI,CACJ;YAEL,WAAW,IAAI,CACd,oBAAC,aAAa,IACZ,aAAa,EAAE,YAAY,EAC3B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,WAAW,IAAI,EAAE,EAC7B,QAAQ,EAAE,YAAY,EACtB,gBAAgB,EAAE,uBAAuB,EACzC,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CACK,CACJ,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;gBACR,KAAK,CAAC,MAAM,CAAC,OAAO;;;CAGnC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAA2B;;WAEhD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;kBAC/C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;CACzE,CAAA"}

package/dist/SearchInput/components/SearchOptions.d.ts

@@ -5,7 +5,13 @@ type Option = {
 };
 type SearchOptionsProps = {
     displayedList: Array<Option>;
+    selectedValue: string | null;
+    focusedIndex: number;
     onSelect: (option: Option) => void;
+    onKeyDown: (e: {
+        key: string;
+        preventDefault: () => void;
+    }) => void;
     positionRelative: boolean;
     resultsBorder: boolean;
     onNotFound?: (searchTerm: string) => void;

package/dist/SearchInput/components/SearchOptions.js

@@ -1,13 +1,28 @@
-import { darken } from 'polished';
-import React from 'react';
+import React, { createRef, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Box } from '../../Box';
+import { Icon } from '../../Icon';
 import { theme } from '../../theme';
 import { EmptyResults } from './EmptyResults';
-export const SearchOptions = ({ displayedList, onSelect, positionRelative, resultsBorder, onNotFound, searchTerm, notFoundComponent, }) => {
+export const SearchOptions = ({ displayedList, selectedValue, focusedIndex, onSelect, onKeyDown, positionRelative, resultsBorder, onNotFound, searchTerm, notFoundComponent, }) => {
+    const itemRefs = useRef([]);
+    useEffect(() => {
+        itemRefs.current = displayedList.map((_, i) => itemRefs.current[i] ?? createRef());
+    }, [displayedList.length]);
+    useEffect(() => {
+        const itemRef = itemRefs?.current[focusedIndex]?.current;
+        if (focusedIndex >= 0 && itemRef) {
+            itemRef.focus();
+        }
+    }, [focusedIndex]);
     return (React.createElement(BoxWithPositionRelative, null,
         React.createElement(StyledResultsContainer, { "$positionRelative": positionRelative },
-            React.createElement(ResultsList, { "$resultsBorder": resultsBorder }, displayedList.length ? (displayedList.map((el, i) => (React.createElement("li", { key: i, onClick: () => onSelect(el) }, el.label)))) : (React.createElement(EmptyResults, { onNotFound: onNotFound, searchTerm: searchTerm, notFoundComponent: notFoundComponent }))))));
+            React.createElement(ResultsList, { "$resultsBorder": resultsBorder, onKeyDown: onKeyDown }, displayedList.length ? (displayedList.map((el, i) => {
+                const isSelected = selectedValue === el.label;
+                return (React.createElement(ListButton, { type: "button", "aria-label": el.label + '_list_item', ref: itemRefs.current[i], key: i, onClick: () => onSelect(el), "$isSelected": isSelected || focusedIndex === i },
+                    el.label,
+                    isSelected && (React.createElement(Icon, { render: "tick", size: 16, color: "marshmallowPink" }))));
+            })) : (React.createElement(EmptyResults, { onNotFound: onNotFound, searchTerm: searchTerm, notFoundComponent: notFoundComponent }))))));
 };
 const StyledResultsContainer = styled.div `
   box-sizing: border-box;
@@ -27,14 +42,11 @@ const ResultsList = styled.ul `
   overflow-y: auto;
   padding: 0;
   margin: 0;
-  background-color: ${theme.colors.custard};
+  background-color: ${theme.colors.cream};
   border-radius: 12px;
   margin-top: 14px;
   z-index: 1000;
-  ${({ $resultsBorder }) => $resultsBorder &&
-    css `
-      border: 2px solid ${theme.colors.oatmeal};
-    `}
+  border: 1px solid ${theme.colors.oatmeal};
 
   li {
     padding: 16px 14px;
@@ -43,18 +55,41 @@ const ResultsList = styled.ul `
     color: ${theme.colors.liquorice};
     cursor: pointer;
 
-    ${({ $resultsBorder }) => $resultsBorder && `border-bottom: 2px solid ${theme.colors.oatmeal};`}
-
-    &:last-child {
-      ${({ $resultsBorder }) => $resultsBorder && `border-bottom:none`}
-    }
-
     &:hover {
-      background-color: ${darken(0.1, theme.colors.custard)};
+      background-color: ${theme.colors.mascarpone};
     }
   }
 `;
+const ListButton = styled.button `
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 14px;
+  box-sizing: border-box;
+  font-size: 16px;
+  width: 100%;
+  color: ${theme.colors.liquorice};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${theme.colors.mascarpone};
+  }
+
+  &:focus {
+    outline: none;
+    background-color: ${theme.colors.mascarpone};
+  }
+  &:focus-visible {
+    outline: none;
+    background-color: ${theme.colors.mascarpone};
+  }
+
+  ${({ $isSelected }) => $isSelected &&
+    css `
+      background-color: ${theme.colors.mascarpone};
+    `}
+`;
 const BoxWithPositionRelative = styled(Box) `
   position: relative;
+  filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.3));
 `;
 //# sourceMappingURL=SearchOptions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAiB7C,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,UAAU,EACV,iBAAiB,GAClB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,uBAAuB;QACtB,oBAAC,sBAAsB,yBAAoB,gBAAgB;YACzD,oBAAC,WAAW,sBAAiB,aAAa,IACvC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,IACpC,EAAE,CAAC,KAAK,CACN,CACN,CAAC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CACW,CACS,CACD,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAExC;;;IAGG,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,iBAAiB,IAAI,qBAAqB;;;;;;;;CAQzE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAE5B;;;;;;sBAMqB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;IAItC,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;0BACmB,KAAK,CAAC,MAAM,CAAC,OAAO;KACzC;;;;;;aAMQ,KAAK,CAAC,MAAM,CAAC,SAAS;;;MAG7B,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc,IAAI,4BAA4B,KAAK,CAAC,MAAM,CAAC,OAAO,GAAG;;;QAGnE,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,cAAc,IAAI,oBAAoB;;;;0BAI5C,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;CAG1D,CAAA;AAED,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1C,CAAA"}
+{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAoB7C,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,UAAU,EACV,iBAAiB,GAClB,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAuC,EAAE,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,GAAG,aAAa,CAAC,GAAG,CAClC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,SAAS,EAAqB,CAChE,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;QACxD,IAAI,YAAY,IAAI,CAAC,IAAI,OAAO,EAAE,CAAC;YACjC,OAAO,CAAC,KAAK,EAAE,CAAA;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,oBAAC,uBAAuB;QACtB,oBAAC,sBAAsB,yBAAoB,gBAAgB;YACzD,oBAAC,WAAW,sBAAiB,aAAa,EAAE,SAAS,EAAE,SAAS,IAC7D,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBAC1B,MAAM,UAAU,GAAG,aAAa,KAAK,EAAE,CAAC,KAAK,CAAA;gBAC7C,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAC,QAAQ,gBACD,EAAE,CAAC,KAAK,GAAG,YAAY,EACnC,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EACxB,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,iBACd,UAAU,IAAI,YAAY,KAAK,CAAC;oBAE5C,EAAE,CAAC,KAAK;oBACR,UAAU,IAAI,CACb,oBAAC,IAAI,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,iBAAiB,GAAG,CACzD,CACU,CACd,CAAA;YACH,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CACW,CACS,CACD,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAExC;;;IAGG,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,iBAAiB,IAAI,qBAAqB;;;;;;;;CAQzE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAE5B;;;;;;sBAMqB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;sBAIlB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;aAM7B,KAAK,CAAC,MAAM,CAAC,SAAS;;;;0BAIT,KAAK,CAAC,MAAM,CAAC,UAAU;;;CAGhD,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAA0B;;;;;;;WAO/C,KAAK,CAAC,MAAM,CAAC,SAAS;;;;wBAIT,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;wBAKvB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;wBAIvB,KAAK,CAAC,MAAM,CAAC,UAAU;;;IAG3C,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;0BACmB,KAAK,CAAC,MAAM,CAAC,UAAU;KAC5C;CACJ,CAAA;AAED,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAG1C,CAAA"}

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { Color } from '../theme';
+import React from 'react';
 export type SegmentedControlOption<T = string | number> = {
     label: string;
     /** value needs to be number or string */
@@ -31,5 +31,5 @@ export type SegmentedControlProps<T> = {
  * ### How do I pass state to the `SegmentedControl` component?
  * 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
  */
-export declare const SegmentedControl: <T>({ options, value, onChange, showTag, styles: { tagBorder, tagText, tagBg, selectedText, text, background, toggle, }, }: SegmentedControlProps<T>) => JSX.Element;
+export declare const SegmentedControl: <T>({ options, value, onChange, showTag, styles: { tagBorder, tagText, tagBg, selectedText, text, background, toggle, }, }: SegmentedControlProps<T>) => React.JSX.Element;
 export {};

package/dist/SegmentedControl/ToggleButton.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 type ToggleButtonProps<Value> = {
     name: string;
     value: Value;
@@ -7,5 +7,5 @@ type ToggleButtonProps<Value> = {
     isDisabled?: boolean;
     children: ReactNode;
 };
-export declare const ToggleButton: <Value>({ name, value, onChange, isSelected, isDisabled, children, }: ToggleButtonProps<Value>) => JSX.Element;
+export declare const ToggleButton: <Value>({ name, value, onChange, isSelected, isDisabled, children, }: ToggleButtonProps<Value>) => React.JSX.Element;
 export {};

package/dist/SegmentedControl/ToggleButton.js

@@ -1,6 +1,6 @@
-import { Box } from '../Box';
 import React from 'react';
 import styled, { css } from 'styled-components';
+import { Box } from '../Box';
 export const ToggleButton = ({ name, value, onChange, isSelected, isDisabled = false, children, }) => {
     return (React.createElement(Wrapper, { as: "label", "data-testId": `value-toggle-${value}`, isDisabled: isDisabled },
         React.createElement(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }),

package/dist/SegmentedControl/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAW/C,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,oBAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,KAAK,EAAE,EACpC,UAAU,EAAE,UAAU;QAEtB,oBAAC,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;QACD,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAyB;;IAEhD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA"}
+{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,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,oBAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,KAAK,EAAE,EACpC,UAAU,EAAE,UAAU;QAEtB,oBAAC,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;QACD,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAyB;;IAEhD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA"}

package/dist/Table/Table.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableProps } from './types';
 /**
  * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
@@ -35,4 +35,4 @@ import { TableProps } from './types';
  * @property {string} [columnPadding] - The X padding for each row.
  * @property {string} [noDataContent] - The text to show when there is no available data to map through.
  */
-export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }: TableProps<T>) => React.JSX.Element;

package/dist/Table/components/RowActions.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { RowActionsProps } from '../types';
-export declare const RowActions: <T extends object>({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }: RowActionsProps<T>) => JSX.Element;
+export declare const RowActions: <T extends object>({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }: RowActionsProps<T>) => React.JSX.Element;

package/dist/Table/components/TableHeader.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableHeaderProps } from '../types';
-export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }: TableHeaderProps<T>) => JSX.Element;
+export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }: TableHeaderProps<T>) => React.JSX.Element;

package/dist/Table/components/TableRow.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableRowProps } from '../types';
-export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }: TableRowProps<T>) => JSX.Element;
+export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }: TableRowProps<T>) => React.JSX.Element;

package/dist/Table/components/commonComponents.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TransientProps } from 'utils/utilTypes';
 import { TableStylesProps } from '../types';
-export declare const StyledTable: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>;
-export declare const StyledHeaderCell: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TransientProps<TableStylesProps>>>;
-export declare const StyledCell: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TransientProps<TableStylesProps>>>;
-export declare const StyledRow: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TransientProps<TableStylesProps>>>;
+export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TransientProps<TableStylesProps>>> & string;
+export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TransientProps<TableStylesProps>>> & string;
+export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TransientProps<TableStylesProps>>> & string;

package/dist/Toggle/Toggle.js

@@ -4,12 +4,12 @@ import { Box } from '../Box';
 import { theme } from '../theme';
 import { focusOutline } from '../utils/focusOutline';
 export const Toggle = ({ id, checked, onToggle, ...marginProps }) => {
-    return (React.createElement(Switch, { forwardedAs: "label", id: id, ...marginProps },
-        React.createElement(Checkbox, { type: "checkbox", checked: checked, onChange: onToggle, onKeyDown: (e) => {
+    return (React.createElement(Switch, { forwardedAs: "label", htmlFor: id, ...marginProps },
+        React.createElement(Checkbox, { id: id, type: "checkbox", checked: checked, onChange: onToggle, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     onToggle();
                 }
-            } }),
+            }, "aria-label": "toggle" }),
         React.createElement(Slider, null)));
 };
 const Switch = styled(Box) `

package/dist/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAYpD,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,MAAM,IAAC,WAAW,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,KAAM,WAAW;QACjD,oBAAC,QAAQ,IACP,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,QAAQ,EAAE,CAAA;gBACZ,CAAC;YACH,CAAC,GACD;QACF,oBAAC,MAAM,OAAG,CACH,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;sBAOJ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;wBAOlB,KAAK,CAAC,MAAM,CAAC,QAAQ;;;;;;;;;;wBAUrB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;CAI9C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAA;IACzB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,KAAK,CAAC,MAAM,CAAC,SAAS;;;;gBAI9B,MAAM;;;CAGrB,CAAA"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAYpD,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,MAAM,IAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,KAAM,WAAW;QACtD,oBAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,QAAQ,EAAE,CAAA;gBACZ,CAAC;YACH,CAAC,gBACU,QAAQ,GACnB;QACF,oBAAC,MAAM,OAAG,CACH,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;sBAOJ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;wBAOlB,KAAK,CAAC,MAAM,CAAC,QAAQ;;;;;;;;;;wBAUrB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;CAI9C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAA;IACzB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,KAAK,CAAC,MAAM,CAAC,SAAS;;;;gBAI9B,MAAM;;;CAGrB,CAAA"}

package/dist/Tooltip/Tooltip.d.ts

@@ -13,13 +13,13 @@ export interface TooltipProps {
     portalContainer?: Element | DocumentFragment;
 }
 export declare const Tooltip: FC<TooltipProps>;
-export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const Tip: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $showTip: boolean;
     $position: Position;
     $arrowPosition: ArrowPosition;
     $maxWidth?: number | undefined;
     $fallbackStyle?: boolean | undefined;
     $zIndex: number;
-}>>;
+}>> & string;
 export {};

package/dist/fields/Field/Field.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { CommonFieldProps } from '../commonFieldTypes';
 export interface FieldProps extends CommonFieldProps {
     htmlFor?: string;
     children: ReactNode;
 }
-export declare const Field: ({ children, ...fieldProps }: FieldProps) => JSX.Element;
+export declare const Field: ({ children, ...fieldProps }: FieldProps) => React.JSX.Element;

package/dist/fields/Fieldset/Fieldset.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { MarginProps } from '../../utils/space';
 import { CommonFieldProps } from '../commonFieldTypes';
 export type FieldsetProps = CommonFieldProps & MarginProps;
-export declare const Fieldset: ({ children, renderAsTitle, id, ...fieldProps }: FieldsetProps) => JSX.Element;
+export declare const Fieldset: ({ children, renderAsTitle, id, ...fieldProps }: FieldsetProps) => React.JSX.Element;

package/dist/fields/components/CommonInput.d.ts

@@ -13,19 +13,19 @@ interface IInput {
 interface SIcon {
     $disabled?: boolean;
 }
-export declare const Input: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, IInput>>;
-export declare const StyledFrontIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, IInput>> & string;
+export declare const StyledFrontIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
     className?: string | undefined;
     render: "search" | "link" | "at" | "filter" | "id" | "property" | "security" | "key" | "download" | "alert" | "location" | "copy" | "other" | "amex" | "axa" | "breakdown" | "earth" | "help-aboutus" | "injury" | "onfido" | "rac" | "renewal" | "stack" | "aa-inverted" | "accidental-damage" | "account-breakdown" | "account-mlp" | "activity-clipboard" | "add-ons" | "address-mta" | "album-audio" | "alert-engine" | "apple-pay" | "approved-file" | "breakdown-alt" | "cancel-bw" | "car-mta" | "car-repairs" | "car-replacement" | "car-usage" | "chat-bubble" | "checkout-with-text" | "circle-tick" | "claim-line" | "clipboard-check" | "close-panel" | "confused-blue" | "contact-email" | "dashboard-high" | "direct-debit" | "doc-download" | "doc-upload" | "edit-contact" | "edit-outline" | "email-filled" | "falling-items" | "file-badge-2" | "file-cabinet" | "fraud-alert" | "freezer-food" | "google-play-badge" | "help-buypolicy" | "help-center" | "help-idcheck" | "help-manage-policy" | "help-ncd" | "help-verification" | "home-excluded" | "house-tree" | "ios-store-badge" | "live-chat" | "live-chat2" | "log-out" | "manage-drivers" | "manage-policy" | "maximise-window" | "minus-circle" | "money-bag" | "money-heart" | "more-dots" | "new-window" | "no-excess" | "open-panel" | "out-of-home" | "padlock-outline" | "phone-filled" | "phone-outline" | "pin-code" | "plus-circle" | "policy-details" | "policy-doc" | "policy-docs" | "pound-bold" | "pound-filled-circle" | "pound-medium" | "pound-outline" | "pound-regular" | "question-help" | "refer-a-friend" | "reg-plate" | "renewal-line" | "repeat-charge" | "schedule-quote" | "send-message" | "shield-check" | "thumbs-up" | "tow-truck" | "trace-and-access" | "up-down" | "upload-documents" | "upload-email" | "wheel-flat" | "windscreen-repair" | "windscreen-replacement" | "aa" | "addons" | "arrow" | "bank" | "basket" | "bicycle" | "boost" | "briefcase" | "burger" | "bullets" | "calendar" | "camera" | "cancel" | "car" | "card" | "caret" | "caret-up" | "charge" | "chat" | "checkout" | "city" | "claim" | "clipboard" | "clock" | "collpase" | "confused" | "crop" | "cross" | "edit" | "engine" | "europe" | "excluded" | "expand" | "facebook" | "fence" | "file" | "fire" | "flag" | "folder" | "fuel" | "globe" | "gpay" | "house" | "inbox" | "included" | "info" | "instagram" | "intercom" | "intercom2" | "iphone" | "jewellery" | "laptop" | "leaks" | "lightbulb" | "linkedin" | "marshmallow" | "mastercard" | "maximise" | "medical" | "minimise" | "minus" | "mulsanne" | "notes" | "notification" | "padlock" | "people" | "person" | "photo" | "plus" | "policy" | "premfina" | "profile" | "prohibited" | "ravelin" | "refund" | "return" | "settings" | "shield" | "shopping" | "sofa" | "storm" | "stripe" | "subsidence" | "theft" | "tick" | "training" | "trash" | "twitter" | "upload" | "vandalism" | "village" | "visa" | "warning" | "watch" | "wave" | "wellbeing" | "windscreen";
     size?: number | undefined;
     color?: "onfido" | "rac" | "checkout" | "confused" | "facebook" | "intercom" | "premfina" | "ravelin" | "stripe" | "twitter" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "compareTheMarket" | "hometree" | undefined;
     rotate?: number | undefined;
-} & import("../..").MarginProps, SIcon>> & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledTrailingIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+} & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTrailingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
     className?: string | undefined;
     render: "search" | "link" | "at" | "filter" | "id" | "property" | "security" | "key" | "download" | "alert" | "location" | "copy" | "other" | "amex" | "axa" | "breakdown" | "earth" | "help-aboutus" | "injury" | "onfido" | "rac" | "renewal" | "stack" | "aa-inverted" | "accidental-damage" | "account-breakdown" | "account-mlp" | "activity-clipboard" | "add-ons" | "address-mta" | "album-audio" | "alert-engine" | "apple-pay" | "approved-file" | "breakdown-alt" | "cancel-bw" | "car-mta" | "car-repairs" | "car-replacement" | "car-usage" | "chat-bubble" | "checkout-with-text" | "circle-tick" | "claim-line" | "clipboard-check" | "close-panel" | "confused-blue" | "contact-email" | "dashboard-high" | "direct-debit" | "doc-download" | "doc-upload" | "edit-contact" | "edit-outline" | "email-filled" | "falling-items" | "file-badge-2" | "file-cabinet" | "fraud-alert" | "freezer-food" | "google-play-badge" | "help-buypolicy" | "help-center" | "help-idcheck" | "help-manage-policy" | "help-ncd" | "help-verification" | "home-excluded" | "house-tree" | "ios-store-badge" | "live-chat" | "live-chat2" | "log-out" | "manage-drivers" | "manage-policy" | "maximise-window" | "minus-circle" | "money-bag" | "money-heart" | "more-dots" | "new-window" | "no-excess" | "open-panel" | "out-of-home" | "padlock-outline" | "phone-filled" | "phone-outline" | "pin-code" | "plus-circle" | "policy-details" | "policy-doc" | "policy-docs" | "pound-bold" | "pound-filled-circle" | "pound-medium" | "pound-outline" | "pound-regular" | "question-help" | "refer-a-friend" | "reg-plate" | "renewal-line" | "repeat-charge" | "schedule-quote" | "send-message" | "shield-check" | "thumbs-up" | "tow-truck" | "trace-and-access" | "up-down" | "upload-documents" | "upload-email" | "wheel-flat" | "windscreen-repair" | "windscreen-replacement" | "aa" | "addons" | "arrow" | "bank" | "basket" | "bicycle" | "boost" | "briefcase" | "burger" | "bullets" | "calendar" | "camera" | "cancel" | "car" | "card" | "caret" | "caret-up" | "charge" | "chat" | "checkout" | "city" | "claim" | "clipboard" | "clock" | "collpase" | "confused" | "crop" | "cross" | "edit" | "engine" | "europe" | "excluded" | "expand" | "facebook" | "fence" | "file" | "fire" | "flag" | "folder" | "fuel" | "globe" | "gpay" | "house" | "inbox" | "included" | "info" | "instagram" | "intercom" | "intercom2" | "iphone" | "jewellery" | "laptop" | "leaks" | "lightbulb" | "linkedin" | "marshmallow" | "mastercard" | "maximise" | "medical" | "minimise" | "minus" | "mulsanne" | "notes" | "notification" | "padlock" | "people" | "person" | "photo" | "plus" | "policy" | "premfina" | "profile" | "prohibited" | "ravelin" | "refund" | "return" | "settings" | "shield" | "shopping" | "sofa" | "storm" | "stripe" | "subsidence" | "theft" | "tick" | "training" | "trash" | "twitter" | "upload" | "vandalism" | "village" | "visa" | "warning" | "watch" | "wave" | "wellbeing" | "windscreen";
     size?: number | undefined;
     color?: "onfido" | "rac" | "checkout" | "confused" | "facebook" | "intercom" | "premfina" | "ravelin" | "stripe" | "twitter" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "compareTheMarket" | "hometree" | undefined;
     rotate?: number | undefined;
-} & import("../..").MarginProps, SIcon>> & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
+} & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
 export {};

package/dist/fields/components/InternalField.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { CommonFieldProps } from '../commonFieldTypes';
 interface InternalFieldProps extends CommonFieldProps {
     children: ReactNode;
@@ -6,5 +6,5 @@ interface InternalFieldProps extends CommonFieldProps {
     htmlFor?: string;
     fieldType: 'field' | 'fieldset';
 }
-export declare const InternalField: ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }: InternalFieldProps) => JSX.Element;
+export declare const InternalField: ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }: InternalFieldProps) => React.JSX.Element;
 export {};

package/dist/fields/components/Placeholder.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const Placeholder: () => JSX.Element;
+import React from 'react';
+export declare const Placeholder: () => React.JSX.Element;

package/dist/hooks/useClickOutside/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/useClickOutside/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAGtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,GAAG,EACH,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,KAAiB,EAAE,EAAE;QACpB,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YACvE,OAAM;QACR,CAAC;QAED,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,EAED,CAAC,GAAG,EAAE,QAAQ,CAAC,CAChB,CAAA;IAED,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEzC,gBAAgB,CAAC;QACf,SAAS,EAAE,OAAO;QAClB,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,sBAAsB;QAChC,OAAO,EAAE,IAAI;KACd,CAAC,CAAA;IAEF,gBAAgB,CAAC;QACf,SAAS,EAAE,UAAU;QACrB,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,sBAAsB;QAChC,OAAO,EAAE,IAAI;KACd,CAAC,CAAA;AACJ,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/useClickOutside/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,GAAG,EACH,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,KAAiB,EAAE,EAAE;QACpB,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YACvE,OAAM;QACR,CAAC;QAED,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,EAED,CAAC,GAAG,EAAE,QAAQ,CAAC,CAChB,CAAA;IAED,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEzC,gBAAgB,CAAC;QACf,SAAS,EAAE,OAAO;QAClB,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,sBAAsB;QAChC,OAAO,EAAE,IAAI;KACd,CAAC,CAAA;IAEF,gBAAgB,CAAC;QACf,SAAS,EAAE,UAAU;QACrB,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,sBAAsB;QAChC,OAAO,EAAE,IAAI;KACd,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist/hooks/useKeyPress/index.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useKeyPress: (targetKey: string, ref: RefObject<HTMLInputElement>) => boolean;

package/dist/hooks/useKeyPress/index.js

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+export const useKeyPress = function (targetKey, ref) {
+    const [keyPressed, setKeyPressed] = useState(false);
+    const downHandler = ({ key }) => {
+        if (key === targetKey) {
+            setKeyPressed(true);
+        }
+    };
+    const upHandler = ({ key }) => {
+        if (key === targetKey) {
+            setKeyPressed(false);
+        }
+    };
+    React.useEffect(() => {
+        ref.current?.addEventListener('keydown', downHandler);
+        ref.current?.addEventListener('keyup', upHandler);
+        return () => {
+            ref.current?.removeEventListener('keydown', downHandler);
+            ref.current?.removeEventListener('keyup', upHandler);
+        };
+    });
+    return keyPressed;
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/useKeyPress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/useKeyPress/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,CAAC,MAAM,WAAW,GAAG,UACzB,SAAiB,EACjB,GAAgC;IAEhC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnD,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;QAC/C,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtB,aAAa,CAAC,IAAI,CAAC,CAAA;QACrB,CAAC;IACH,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;QAC7C,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtB,aAAa,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;QACrD,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAEjD,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;YACxD,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}