@mrshmllw/smores-react 9.6.0-crumbs-smol-input.1 → 9.7.0

package/dist/Dropdown/Dropdown.js

@@ -61,7 +61,7 @@ const StyledSelect = styled.select `
   background-color: ${({ $fallbackStyle }) => $fallbackStyle ? theme.colors.custard : theme.colors.cream};
 
   border-radius: 12px;
-  padding: 12px 12px;
+  padding: 18px 14px;
   border: 2px solid
     ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};
   height: auto;

package/dist/IconStrict/IconStrict.d.ts

@@ -1,4 +1,4 @@
-import { FC, FormEvent } from 'react';
+import { ButtonHTMLAttributes, FC, FormEvent } from 'react';
 import { Icons } from '../Icon/iconsList';
 import { Color } from '../theme';
 import { MarginProps } from '../utils/space';
@@ -18,7 +18,5 @@ export type IconStrictProps = {
     handleClick?: (e: FormEvent<HTMLButtonElement>) => void;
     /** rotation degrees */
     rotate?: number;
-    /** Title attribute */
-    title?: string;
-} & MarginProps;
+} & MarginProps & Partial<ButtonHTMLAttributes<HTMLButtonElement>>;
 export declare const IconStrict: FC<IconStrictProps>;

package/dist/IconStrict/IconStrict.js

@@ -22,15 +22,14 @@ const iconSizes = {
         padding: 3,
     },
 };
-export const IconStrict = ({ id, className = '', size = 16, render, iconColor, backgroundColor, rotate, handleClick, title, ...marginProps }) => (React.createElement(IconContainer, { id: id, forwardedAs: handleClick ? 'button' : 'div', className: className, "$size": size, title: title, ...marginProps, "$backgroundColor": backgroundColor, onClick: handleClick, onKeyDown: (e) => {
-        if (!handleClick)
-            return;
-        if (e.key === 'Enter') {
-            handleClick;
-        }
-    } },
-    React.createElement(Icon, { render: render, className: className, size: backgroundColor ? iconSizes[size].smallSize : size, color: iconColor, rotate: rotate, ...marginProps })));
+export const IconStrict = ({ id, className = '', size = 16, render, iconColor, backgroundColor, rotate, handleClick, title, ...otherProps }) => {
+    const isButton = !!handleClick;
+    const defaultLabel = isButton ? (title ? title : 'icon-button') : undefined;
+    return (React.createElement(IconContainer, { id: id, as: isButton ? 'button' : 'div', className: className, "$size": size, "$backgroundColor": backgroundColor, onClick: handleClick, title: defaultLabel, ...otherProps },
+        React.createElement(Icon, { render: render, size: backgroundColor ? iconSizes[size].smallSize : size, color: iconColor, rotate: rotate })));
+};
 const IconContainer = styled.div(({ $size, $backgroundColor, onClick }) => css `
+    position: relative;
     padding: ${$backgroundColor ? `${iconSizes[$size].padding}px` : 0};
     width: 100%;
     max-width: ${$size}px;

package/dist/IconStrict/IconStrict.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAuBzD,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC3C,SAAS,EAAE,SAAS,WACb,IAAI,EACX,KAAK,EAAE,KAAK,KACR,WAAW,sBACG,eAAe,EACjC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,CAAC,CAAkB,EAAE,EAAE;QAChC,IAAI,CAAC,WAAW;YAAE,OAAM;QACxB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,WAAW,CAAA;QACb,CAAC;IACH,CAAC;IAED,oBAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,KACV,WAAW,GACf,CACY,CACjB,CAAA;AAQD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;eAChC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;;iBAEpD,KAAK;cACR,KAAK;;wBAEK,gBAAgB;IAClC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC;IAChC,CAAC,CAAC,MAAM;cACA,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;MAEvC,OAAO;IACT;;0BAGI,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,MACnE;;;KAGD;;MAEC,iBAAiB;GACpB,CACF,CAAA"}
+{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAsBzD,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAA;IAC9B,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC3E,OAAO,CACL,oBAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC/B,SAAS,EAAE,SAAS,WACb,IAAI,sBACO,eAAe,EACjC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,YAAY,KACf,UAAU;QAEd,oBAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;eAEhC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;;iBAEpD,KAAK;cACR,KAAK;;wBAEK,gBAAgB;IAClC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC;IAChC,CAAC,CAAC,MAAM;cACA,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;MAEvC,OAAO;IACT;;0BAGI,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,MACnE;;;KAGD;;MAEC,iBAAiB;GACpB,CACF,CAAA"}

package/dist/Modal/Modal.js

@@ -10,7 +10,7 @@ export const Modal = ({ title = '', children, rightPanel, showModal = false, han
     const modalRef = useRef(null);
     useBodyScrollLock({ node: modalRef.current, showModal });
     return createPortal(React.createElement(Wrapper, { "$showModal": showModal, ref: modalRef },
-        React.createElement(Overlay, { onClick: () => closeOnOverlayClick && handleClick(), closeOnOverlayClick: closeOnOverlayClick }),
+        React.createElement(Overlay, { onClick: () => closeOnOverlayClick && handleClick(), "$closeOnOverlayClick": closeOnOverlayClick }),
         React.createElement(Container, { "$drawer": drawer, "$width": width || '460px', className: containerClass },
             React.createElement(Box, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
                 React.createElement(TitleElements, { flex: true, direction: "column" },
@@ -34,7 +34,7 @@ const Wrapper = styled(Box)(({ $showModal }) => css `
 const Overlay = styled.div `
   position: fixed;
   background: ${theme.colors.liquorice};
-  cursor: ${(props) => (props.closeOnOverlayClick ? 'pointer' : 'default')};
+  cursor: ${(props) => (props.$closeOnOverlayClick ? 'pointer' : 'default')};
   opacity: 0.4;
   top: 0;
   bottom: 0;

package/dist/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AA4B9D,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,EACd,eAAe,GAAG,QAAQ,CAAC,IAAI,EAC/B,mBAAmB,GAAG,IAAI,GAC3B,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE7C,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;IAExD,OAAO,YAAY,CACjB,oBAAC,OAAO,kBAAa,SAAS,EAAE,GAAG,EAAE,QAAQ;QAC3C,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,IAAI,WAAW,EAAE,EACnD,mBAAmB,EAAE,mBAAmB,GACxC;QACF,oBAAC,SAAS,eACC,MAAM,YACP,KAAK,IAAI,OAAO,EACxB,SAAS,EAAE,cAAc;YAEzB,oBAAC,GAAG,IACF,IAAI,QACJ,UAAU,EAAC,YAAY,EACvB,cAAc,EAAC,eAAe,EAC9B,EAAE,EAAC,KAAK;gBAER,oBAAC,aAAa,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;oBACpC,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,IAC7C,KAAK,CACD,CACO;gBAChB,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAE,KAAK;oBACrC,UAAU;oBACV,KAAK,IAAI,CACR,oBAAC,UAAU,IACT,MAAM,EAAC,OAAO,EACd,eAAe,EAAC,SAAS,EACzB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,EAAE,GACR,CACH,CACG,CACF;YACN,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,QAAQ,CACL,CACI,CACJ,EACV,eAAe,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;eACV,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;;;GASxC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAkC;;gBAE5C,KAAK,CAAC,MAAM,CAAC,SAAS;YAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;CAMzE,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAC1B,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;iBAKrB,MAAM;;;;;;MAMjB,OAAO,KAAK,IAAI;IAClB,GAAG,CAAA;;;;;;;;;;;;KAYF;GACF,CACF,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAEhC,CAAA"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/SearchInput/SearchInput.d.ts

@@ -18,9 +18,11 @@ export interface SearchInputProps extends CommonFieldProps {
     /**  optional callback to run when no results found */
     onNotFound?: (searchTerm: string) => void;
     /**  optional Component to render when no results found */
-    notFoundComponent?: ReactNode;
+    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 */
@@ -37,3 +39,14 @@ export interface SearchInputProps extends CommonFieldProps {
     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<Omit<import("..").MarginProps & import("..").PaddingProps & import("../utils/flex").FlexProps & import("../utils/measure").MeasureProps & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType | undefined;
+    forwardedAs?: React.ElementType | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, {
+    $clearSearch: boolean;
+}>> & string & Omit<React.ForwardRefExoticComponent<import("..").MarginProps & import("..").PaddingProps & import("../utils/flex").FlexProps & import("../utils/measure").MeasureProps & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType | undefined;
+    forwardedAs?: React.ElementType | undefined;
+} & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;

package/dist/SearchInput/SearchInput.js

@@ -1,20 +1,34 @@
 import Fuse from 'fuse.js';
-import React, { forwardRef, useMemo, useState, } from 'react';
+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: ['label', 'value'],
+    keys: [
+        {
+            name: 'label',
+            weight: 0.6,
+        },
+        {
+            name: 'tags',
+            weight: 0.4,
+        },
+    ],
     findAllMatches: true,
-    minMatchCharLength: 2,
+    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, ...otherProps }, ref) {
+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({
@@ -22,6 +36,23 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
         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,
@@ -42,7 +73,7 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
             return searchQuery;
         }
         if (selectedValue !== null) {
-            return (searchList.find((option) => option.label === selectedValue || option.value === selectedValue)?.label || '');
+            return selectedValueLabel || '';
         }
         return '';
     };
@@ -50,11 +81,24 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
     const displayedInputText = getDisplayedInputText();
     const updateSearchQuery = (query) => {
         setSearchQuery(query);
+        setHighlightedIndex(-1);
         if (query === null) {
+            setSelectedValue(null);
             setShowOptions(false);
         }
         else {
-            setShowOptions(2 <= query.length);
+            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) => {
@@ -66,15 +110,56 @@ 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);
+        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", 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 && 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

@@ -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":"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"}

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

@@ -5,7 +5,14 @@ type Option = {
 };
 type SearchOptionsProps = {
     displayedList: Array<Option>;
+    selectedValue: string | null;
+    highlightedIndex: number;
+    setHighlightedIndex: (arg: number) => void;
     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,19 +1,43 @@
-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, highlightedIndex, setHighlightedIndex, onSelect, onKeyDown, positionRelative, resultsBorder, onNotFound, searchTerm, notFoundComponent, }) => {
+    const itemRefs = useRef([]);
+    useEffect(() => {
+        itemRefs.current = displayedList.map((_, i) => itemRefs.current[i] ?? createRef());
+    }, [displayedList.length]);
+    useEffect(() => {
+        const focusedListItem = itemRefs?.current[highlightedIndex]?.current;
+        if (highlightedIndex >= 0 && focusedListItem) {
+            focusedListItem.scrollIntoView({
+                block: 'nearest',
+                inline: 'start',
+            });
+        }
+    }, [highlightedIndex]);
     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 || selectedValue === el.value;
+                return (React.createElement(ListButton, { key: el.label + '_list_item', "aria-label": el.label + '_list_item', ref: itemRefs.current[i], onClick: () => onSelect(el), "$isSelected": isSelected, "$showBg": highlightedIndex === i, onMouseEnter: () => {
+                        setHighlightedIndex(i);
+                    }, onFocus: () => {
+                        setHighlightedIndex(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;
-  overflow-y: hidden;
+  overflow: hidden;
+  margin: -16px;
+  padding: 16px;
   ${({ $positionRelative }) => !$positionRelative && 'position: absolute;'}
-  width: 100%;
+  width:  calc(100% + 32px);
   left: 0px;
   top: -8px;
 
@@ -27,14 +51,15 @@ 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};
+  box-shadow:
+    0px 10px 18px rgba(18, 18, 23, 0.03),
+    0px 5px 8px rgba(18, 18, 23, 0.04),
+    0px 2px 4px rgba(18, 18, 23, 0.04);
 
   li {
     padding: 16px 14px;
@@ -42,17 +67,28 @@ const ResultsList = styled.ul `
     font-size: 16px;
     color: ${theme.colors.liquorice};
     cursor: pointer;
+  }
+`;
+const ListButton = styled.li `
+  display: flex;
+  justify-content: space-between;
 
-    ${({ $resultsBorder }) => $resultsBorder && `border-bottom: 2px solid ${theme.colors.oatmeal};`}
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    outline: none;
+  }
 
-    &:last-child {
-      ${({ $resultsBorder }) => $resultsBorder && `border-bottom:none`}
-    }
+  ${({ $showBg }) => $showBg &&
+    css `
+      background-color: ${theme.colors.mascarpone};
+    `}
 
-    &:hover {
-      background-color: ${darken(0.1, theme.colors.custard)};
-    }
-  }
+  ${({ $isSelected }) => $isSelected &&
+    css `
+      background-color: ${theme.colors.custard};
+    `}
 `;
 const BoxWithPositionRelative = styled(Box) `
   position: relative;

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":"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"}

package/dist/Table/Table.d.ts

@@ -13,4 +13,4 @@ import { TableProps } from './types';
  * ## Improvements:
  * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
  */
-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;
+export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, hideTableHeader, }: TableProps<T>) => React.JSX.Element;

package/dist/Table/Table.js

@@ -16,12 +16,12 @@ import { StyledCell, StyledTable } from './components/commonComponents';
  * ## Improvements:
  * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
  */
-export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }) => {
+export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, hideTableHeader = false, }) => {
     const showActionsCell = expandable || rowActions;
     const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
     return (React.createElement(StyledTable, null,
-        React.createElement("thead", null,
-            React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline })),
+        !hideTableHeader && (React.createElement("thead", null,
+            React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline }))),
         React.createElement("tbody", null,
             data.length === 0 && (React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ? (noDataContent) : (React.createElement(Text, { align: "center" }, "No available data")))),
             data.length !== 0 &&

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,GACC,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACV;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI;QACR;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACd;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,eAAe,GAAG,KAAK,GACT,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACT,CAAC,eAAe,IAAI,CACnB;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI,CACT;QACD;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACd;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA"}

package/dist/Table/types.d.ts

@@ -84,6 +84,8 @@ interface CommonTableProps<T> {
     rowPadding?: string;
     /** The X padding for each row. */
     columnPadding?: string;
+    /** Hides the table header. Table defaults to always showing the header. */
+    hideTableHeader?: boolean;
 }
 export interface TableProps<T> extends CommonTableProps<T> {
     /** Array of data to be displayed in the table. */

package/dist/Textarea/Textarea.js

@@ -20,7 +20,7 @@ const StyledTextArea = styled.textarea `
   box-sizing: border-box;
   border-radius: 12px;
   width: 100%;
-  padding: 12px 12px;
+  padding: 18px 14px;
   color: ${theme.colors.liquorice};
   resize: ${({ $resize }) => $resize};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};

package/dist/fields/components/CommonInput.js

@@ -9,7 +9,7 @@ export const Input = styled.input `
   outline: none;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
   opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
-  padding: 12px 12px;
+  padding: 18px 14px;
   background-color: ${({ $fallbackStyle }) => $fallbackStyle ? theme.colors.custard : theme.colors.cream};
   border: 2px solid
     ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "9.6.0-crumbs-smol-input.1",
+  "version": "9.7.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.23.10",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
@@ -63,9 +63,8 @@
     "@types/node": "^20.1.2",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
-    "@types/testing-library__react": "^10.2.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^6.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
     "axe-playwright": "^2.0.1",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "eslint": "^8.57.0",