ekm-ui 0.3.41 → 0.3.45

package/dist/stacked-list-item.d.ts

@@ -11,5 +11,8 @@ type Props = {
     icon?: JSX.Element;
 };
 declare function StackedListItem({ id, title, text, avatarShow, avatarColor, avatarBorder, children, badgeText, badgeColor, icon, }: Props): JSX.Element;
+declare namespace StackedListItem {
+    var displayName: string;
+}
 
 export { StackedListItem };

package/dist/stacked-list-item.mjs

@@ -1,9 +1,9 @@
-export { a as StackedListItem } from './chunk-NQ2DHV6K.mjs';
-import './chunk-XFCPRHEY.mjs';
+export { a as StackedListItem } from './chunk-FISQAAMO.mjs';
+import './chunk-Q365BFES.mjs';
 import './chunk-EHJJX6ZZ.mjs';
-import './chunk-ZFBRBOQI.mjs';
-import './chunk-45QX7OUO.mjs';
-import './chunk-QWPN2UNV.mjs';
+import './chunk-ZJATBQ3X.mjs';
+import './chunk-S7N5VK35.mjs';
+import './chunk-N7RKCR3X.mjs';
 import './chunk-ASCPOK5F.mjs';
 import './chunk-25FJ277C.mjs';
 import './chunk-FAFXVD4P.mjs';
@@ -13,37 +13,37 @@ import './chunk-VPLCWU7T.mjs';
 import './chunk-PPMW7YAZ.mjs';
 import './chunk-5CGIKL2Y.mjs';
 import './chunk-NTGEZMHP.mjs';
-import './chunk-7X4WYXA2.mjs';
-import './chunk-RMX72FR3.mjs';
+import './chunk-WFRV27QA.mjs';
+import './chunk-5FPVCRAI.mjs';
 import './chunk-2IL2LP47.mjs';
-import './chunk-IKPLDZJI.mjs';
-import './chunk-N4UVO5CM.mjs';
+import './chunk-ZHCGY4YB.mjs';
+import './chunk-5DQUZENZ.mjs';
 import './chunk-ZWJSMASL.mjs';
 import './chunk-OT256LE6.mjs';
-import './chunk-AHKENQVI.mjs';
+import './chunk-W3DRXKTC.mjs';
 import './chunk-WMFTYTMD.mjs';
 import './chunk-EWNPNF2B.mjs';
-import './chunk-OZK25XNR.mjs';
+import './chunk-NEJOZRKV.mjs';
 import './chunk-XGHRMSFX.mjs';
 import './chunk-ZT7KDTGF.mjs';
 import './chunk-IEHJB2LC.mjs';
 import './chunk-FRIXS4BL.mjs';
-import './chunk-QOVVHEU2.mjs';
+import './chunk-HEKVJKLH.mjs';
 import './chunk-D6H235SZ.mjs';
 import './chunk-PJMH47GY.mjs';
 import './chunk-KAQJAKQH.mjs';
 import './chunk-DZABAR36.mjs';
-import './chunk-7Q4BF7BT.mjs';
+import './chunk-XUXHB434.mjs';
 import './chunk-F6ZWBNIM.mjs';
 import './chunk-PT4DPY4L.mjs';
 import './chunk-4SFCR75V.mjs';
 import './chunk-WLJEFSES.mjs';
-import './chunk-QRNTMHBL.mjs';
+import './chunk-VQ3MZS4J.mjs';
 import './chunk-JACXLYPD.mjs';
-import './chunk-TWLN46WO.mjs';
+import './chunk-KEIDXVZB.mjs';
 import './chunk-O3QYDTAF.mjs';
 import './chunk-YJKULMWM.mjs';
-import './chunk-ZI635H5Y.mjs';
+import './chunk-3LINEESX.mjs';
 import './chunk-JCWSMIVA.mjs';
 import './chunk-SAXGEQRG.mjs';
 import './chunk-S6EYHLVB.mjs';

package/dist/table-header/table-header.d.ts

@@ -45,6 +45,7 @@ declare namespace TableHeader {
         /** Optional return call triggered when the optional header checkbox is clicked */
         checkboxCallback: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    var displayName: string;
 }
 
 export { TableHeader };

package/dist/table-header/table-header.mjs

@@ -1,4 +1,4 @@
-export { a as TableHeader } from '../chunk-45QX7OUO.mjs';
+export { a as TableHeader } from '../chunk-S7N5VK35.mjs';
 import '../chunk-PUJZGK7Y.mjs';
 import '../chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map

package/dist/text-row.d.ts

@@ -6,5 +6,8 @@ type Props = {
     className?: string;
 };
 declare function TextRow({ children, title, text, border, className }: Props): JSX.Element;
+declare namespace TextRow {
+    var displayName: string;
+}
 
 export { TextRow };

package/dist/text-row.mjs

@@ -1,4 +1,4 @@
-export { a as TextRow } from './chunk-RMX72FR3.mjs';
+export { a as TextRow } from './chunk-5FPVCRAI.mjs';
 import './chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=text-row.mjs.map

package/dist/textinput.mjs

@@ -1,4 +1,4 @@
-export { a as TextInput } from './chunk-N4UVO5CM.mjs';
+export { a as TextInput } from './chunk-5DQUZENZ.mjs';
 import './chunk-PUJZGK7Y.mjs';
 import './chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map

package/dist/toast/index.d.ts

@@ -4,6 +4,9 @@ declare const ToastContext: react.Context<((toast: ToastEvent) => void) | undefi
 declare function ToastProvider({ children }: {
     children: React.ReactNode;
 }): JSX.Element;
+declare namespace ToastProvider {
+    var displayName: string;
+}
 type ToastEvent = {
     type: "success" | "error" | "warning" | "info";
     text: string;

package/dist/toast/index.mjs

@@ -1,4 +1,4 @@
-export { a as ToastContext, b as ToastProvider, c as useToast } from '../chunk-QWPN2UNV.mjs';
+export { a as ToastContext, b as ToastProvider, c as useToast } from '../chunk-N7RKCR3X.mjs';
 import '../chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.41",
+  "version": "0.3.45",
   "sideEffects": [
     "**/*.css"
   ],

package/src/alert-banner.tsx

@@ -96,3 +96,5 @@ AlertBanner.propTypes = {
     children: PropTypes.node.isRequired,
 }
 
+AlertBanner.displayName = "AlertBanner"
+

package/src/badge.tsx

@@ -1,66 +1,52 @@
 //@ts-nocheck
-import { variantProps } from "classname-variants/react";
-import PropTypes from "prop-types";
+import { variantProps } from 'classname-variants/react'
+import PropTypes from 'prop-types'
+import { twMerge } from 'tailwind-merge'
 
 const badgeProps = variantProps({
-  base: "flex h-fit items-center gap-1 font-semibold rounded px-2 py-0.5",
+  base: 'flex h-fit items-center gap-1 font-semibold rounded px-2 py-0.5',
   variants: {
     color: {
-      info: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
-      gray: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600",
-      failure:
-        "bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300",
-      success:
-        "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300",
-      warning:
-        "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300",
-      indigo:
-        "bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300",
-      purple:
-        "bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300",
-      pink: "bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300",
-      blue: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
-      cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
-      dark: "bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200 group-hover:bg-gray-500 dark:group-hover:bg-gray-700",
-      light:
-        "bg-gray-200 text-gray-800 dark:bg-gray-400 dark:text-gray-900 group-hover:bg-gray-300 dark:group-hover:bg-gray-500",
-      green:
-        "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300",
-      lime: "bg-lime-100 text-lime-800 dark:bg-lime-200 dark:text-lime-900 group-hover:bg-lime-200 dark:group-hover:bg-lime-300",
-      red: "bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300",
-      teal: "bg-teal-100 text-teal-800 dark:bg-teal-200 dark:text-teal-900 group-hover:bg-teal-200 dark:group-hover:bg-teal-300",
-      yellow:
-        "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300",
+      info: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300',
+      gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600',
+      failure: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
+      success: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
+      warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
+      indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300',
+      purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300',
+      pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300',
+      blue: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300',
+      cyan: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300',
+      dark: 'bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200 group-hover:bg-gray-500 dark:group-hover:bg-gray-700',
+      light: 'bg-gray-200 text-gray-800 dark:bg-gray-400 dark:text-gray-900 group-hover:bg-gray-300 dark:group-hover:bg-gray-500',
+      green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
+      lime: 'bg-lime-100 text-lime-800 dark:bg-lime-200 dark:text-lime-900 group-hover:bg-lime-200 dark:group-hover:bg-lime-300',
+      red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
+      teal: 'bg-teal-100 text-teal-800 dark:bg-teal-200 dark:text-teal-900 group-hover:bg-teal-200 dark:group-hover:bg-teal-300',
+      yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
     },
     size: {
-      xs: "p-1 text-xs",
-      sm: "p-1.5 text-sm",
+      xs: 'p-1 text-xs',
+      sm: 'p-1.5 text-sm',
     },
   },
-});
+})
 
-export function Badge({
-  color = "gray",
-  size = "xs",
-  icon,
-  children,
-  ...props
-}) {
+export function Badge({ color = 'gray', size = 'xs', className, children }) {
   return (
-    <span {...badgeProps({ color, size, icon })} {...props}>
-      {icon && icon}
-      {children}
-    </span>
-  );
+    <div className={twMerge('flex p-4', className)}>
+      <span {...badgeProps({ color, size })}>{children}</span>
+    </div>
+  )
 }
 
 Badge.propTypes = {
   /** String for color of badge */
   color: PropTypes.string,
   /** String to determine the size of the badge. "xs, sm" */
-  size: PropTypes.oneOf(["xs", "sm"]),
-  /** Boolean to change styling of badge for having an Icon */
-  icon: PropTypes.element,
-};
+  size: PropTypes.oneOf(['xs', 'sm']),
+  /** Additional classes */
+  className: PropTypes.string,
+}
 
-Badge.displayName = "Badge";
+Badge.displayName = 'Badge'

package/src/color-picker.tsx

@@ -67,4 +67,6 @@ export function ColorPicker({
   );
 }
 
+ColorPicker.displayName = "ColorPicker"
+
 

package/src/drag-and-drop.tsx

@@ -226,3 +226,5 @@ DragAndDrop.propTypes = {
   /** Returns when the file picker button is clicked */
   pickerCallback: PropTypes.func,
 };
+
+DragAndDrop.displayName = "DragAndDrop"

package/src/drawer.tsx

@@ -74,3 +74,5 @@ export function Drawer({ show, onClose, children, title }: Props) {
     </div>
   );
 }
+
+Drawer.displayName = "Drawer"

package/src/file-picker/file-picker.tsx

@@ -376,6 +376,8 @@ FilePicker.propTypes = {
   callback: PropTypes.func.isRequired,
 }
 
+FilePicker.displayName = "FilePicker"
+
 // HELPER FUNCTIONAL COMPONENTS FOR FILE PICKER
 function EmptyPlaceholder() {
   return (

package/src/form-row.tsx

@@ -37,3 +37,5 @@ export function FormRow({
     </div>
   );
 }
+
+FormRow.displayName = "FormRow"

package/src/index.tsx

@@ -48,5 +48,6 @@ export { FilePicker } from "./file-picker/file-picker";
 export { ToggleSwitch } from "./toggleswitch";
 export { Card } from "./card";
 export { ProgressBar } from "./progress-bar";
+export { EkmLogo } from "./ekm-logo";
 
 import "./styles.css";

package/src/page-header.tsx

@@ -39,3 +39,5 @@ export function PageHeader({ children, title, text, breadcrumbs }: Props) {
     </div>
   )
 }
+
+PageHeader.displayName = "PageHeader"

package/src/search/search.tsx

@@ -1,110 +1,143 @@
 //@ts-nocheck
-import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react'
-import PropTypes from 'prop-types'
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import PropTypes from "prop-types";
 
 function useDebounceEffect(effect, delay, deps) {
-  const instanceRef = useRef(0)
-  const handlerRef = useRef(null)
-  const callback = useCallback(effect, deps)
+  const instanceRef = useRef(0);
+  const handlerRef = useRef(null);
+  const callback = useCallback(effect, deps);
 
   useEffect(() => {
     if (instanceRef.current === 0) {
-      instanceRef.current = 1
+      instanceRef.current = 1;
     } else {
       handlerRef.current = setTimeout(() => {
-        callback()
-      }, delay)
+        callback();
+      }, delay);
     }
     return () => {
-      clearTimeout(handlerRef.current)
-    }
-  }, [callback, delay])
+      clearTimeout(handlerRef.current);
+    };
+  }, [callback, delay]);
 }
 
 export const Search = forwardRef(function Search(
-  { id, categories = [], delay = 1500, placeholder = 'Enter a keyword to search...', callback, disabled = false, initialValue = '' },
-  reference,
+  {
+    id,
+    categories = [],
+    delay = 1500,
+    placeholder = "Enter a keyword to search...",
+    callback,
+    disabled = false,
+    initialValue = "",
+  },
+  reference
 ) {
   // Create state based on config
   const [state, setState] = useState({
     text: null,
     category: categories?.length > 0 ? categories[0] : null,
-  })
-  const [currentSearchValue, setCurrentSearchValue] = useState(initialValue)
-  const [hidden, setHidden] = useState(true)
+  });
+  const [currentSearchValue, setCurrentSearchValue] = useState(initialValue);
+  const [hidden, setHidden] = useState(true);
 
   useImperativeHandle(reference, () => ({
     clear: () => {
-      setCurrentSearchValue('')
-      setState({ ...state, text: '' })
+      setCurrentSearchValue("");
+      setState({ ...state, text: "" });
     },
     removeFocus: () => {
-      document.getElementById(`${id}-search-input`).blur()
+      document.getElementById(`${id}-search-input`).blur();
     },
-  }))
+  }));
 
   const handleSearchChange = (e) => {
-    setCurrentSearchValue(e.target.value)
-    setState({ ...state, text: e.target.value })
-  }
+    setCurrentSearchValue(e.target.value);
+    setState({ ...state, text: e.target.value });
+  };
 
   const handleTypeChange = (e, selection) => {
-    e.preventDefault()
-    setState({ ...state, category: selection })
-    setHidden(true)
-  }
+    e.preventDefault();
+    setState({ ...state, category: selection });
+    setHidden(true);
+  };
 
   const handleKeyDown = (e) => {
     if ((e.charCode || e.keyCode) === 13) {
-      e.preventDefault()
+      e.preventDefault();
     }
-  }
+  };
 
   useDebounceEffect(
     () => {
-      callback(state)
+      callback(state);
     },
     delay,
-    [state.text, state.category],
-  )
+    [state.text, state.category]
+  );
   useEffect(() => {
-    if (initialValue !== currentSearchValue) setCurrentSearchValue(initialValue)
-  }, [initialValue])
+    if (initialValue !== currentSearchValue)
+      setCurrentSearchValue(initialValue);
+  }, [initialValue]);
 
-  const ref = useRef(null)
+  const ref = useRef(null);
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
-        setHidden(true)
+        setHidden(true);
       }
-    }
+    };
 
-    document.addEventListener('click', handleClickOutside, true)
+    document.addEventListener("click", handleClickOutside, true);
     return () => {
-      document.removeEventListener('click', handleClickOutside, true)
-    }
-  }, [])
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, []);
 
   const renderDropdown = () => (
     <>
       <button
         id={`${id}-dropdown-button`}
         data-dropdown-toggle="dropdown"
-        className="absolute top-0 right-0 p-2.5 flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 dark:border-gray-700 dark:text-white rounded-r-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+        className="absolute right-0 top-0 z-10 inline-flex flex-shrink-0 items-center rounded-r-lg border border-gray-300 bg-white p-2.5 px-4 py-2.5 text-center text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800"
         type="button"
         onClick={() => setHidden(!hidden)}
       >
         {state.category.display}
-        <svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4" />
+        <svg
+          className="ml-2.5 h-2.5 w-2.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 10 6"
+        >
+          <path
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="m1 1 4 4 4-4"
+          />
         </svg>
       </button>
       <div
         id={`${id}-dropdown`}
         ref={ref}
-        className={`z-10 ${hidden ? 'hidden' : ''} absolute right-0 bg-white divide-y divide-gray-100 rounded-r-lg shadow w-44 dark:bg-gray-700`}
+        className={`z-10 ${
+          hidden ? "hidden" : ""
+        } absolute right-0 w-44 divide-y divide-gray-100 rounded-r-lg bg-white shadow dark:bg-gray-700`}
       >
-        <ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdown-button">
+        <ul
+          className="py-2 text-sm text-gray-700 dark:text-gray-200"
+          aria-labelledby="dropdown-button"
+        >
           {(categories || []).map((x) => {
             return (
               <li key={`gst-${x.display}`}>
@@ -116,12 +149,12 @@ export const Search = forwardRef(function Search(
                   {x.display}
                 </a>
               </li>
-            )
+            );
           })}
         </ul>
       </div>
     </>
-  )
+  );
 
   return (
     <div className="flex">
@@ -136,13 +169,13 @@ export const Search = forwardRef(function Search(
           onKeyDown={handleKeyDown}
           disabled={disabled}
           id={`${id}-search-input`}
-          className="block p-2.5 w-full text-sm text-gray-900 rounded-lg bg-gray-50  border-r-gray-300  border-r-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
+          className="block w-full rounded-lg border border-r-2 border-gray-300 border-r-gray-300  bg-gray-50  p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500"
         />
         {categories?.length > 0 && renderDropdown()}
       </div>
     </div>
-  )
-})
+  );
+});
 
 Search.propTypes = {
   /** Optional List of categories that the search term can be applied to. If supplied
@@ -157,8 +190,9 @@ Search.propTypes = {
       /**
        * The value set when the item is selected.
        */
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    }),
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+    })
   ),
   /**
    * The delay between requests made to the server when typing in milliseconds.
@@ -182,4 +216,6 @@ Search.propTypes = {
    * If not set, the search bar will just be empty.
    */
   initialValue: PropTypes.string,
-}
+};
+
+Search.displayName = "Search";

package/src/select.tsx

@@ -1,7 +1,7 @@
 //@ts-nocheck
-
 import { forwardRef } from "react";
 import PropTypes from "prop-types";
+
 export const Select = forwardRef(function Select(props, ref) {
   return (
     <>
@@ -57,4 +57,4 @@ Select.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-
+Select.displayName = "Select";

package/src/sort/sort.tsx

@@ -79,3 +79,5 @@ Sort.propTypes = {
   /** Returns{ display, value, name, sort, count} */
   callback: PropTypes.func.isRequired,
 }
+
+Sort.displayName = "Sort"

package/src/stacked-list-item.tsx

@@ -76,3 +76,5 @@ export function StackedListItem({
     </li>
   );
 }
+
+StackedListItem.displayName = "StackedListItem"

package/src/table-header/table-header.tsx

@@ -285,3 +285,5 @@ TableHeader.propTypes = {
   /** Optional return call triggered when the optional header checkbox is clicked */
   checkboxCallback: PropTypes.func,
 };
+
+TableHeader.displayName = "TableHeader";

package/src/text-row.tsx

@@ -22,3 +22,5 @@ export function TextRow({ children, title, text, border, className }: Props) {
     </div>
   );
 }
+
+TextRow.displayName = "TextRow"