ekm-ui 0.3.74 → 0.3.78

package/dist/table-result-block.mjs

@@ -1,56 +1,56 @@
-export { e as TableResultBlock } from './chunk-HZTQAUGX.mjs';
-import './chunk-PPMW7YAZ.mjs';
-import './chunk-Q365BFES.mjs';
+export { e as TableResultBlock } from './chunk-PEODF7PL.mjs';
+import './chunk-SFSA2WUE.mjs';
+import './chunk-YJINOUZ7.mjs';
 import './chunk-EHJJX6ZZ.mjs';
-import './chunk-ZJATBQ3X.mjs';
-import './chunk-CEK5K5TU.mjs';
-import './chunk-UUWBHZKH.mjs';
-import './chunk-ASCPOK5F.mjs';
-import './chunk-LQQDRIZN.mjs';
-import './chunk-256SAVHD.mjs';
-import './chunk-VPLCWU7T.mjs';
-import './chunk-CMA7TSQG.mjs';
-import './chunk-2IL2LP47.mjs';
-import './chunk-25FJ277C.mjs';
-import './chunk-FAFXVD4P.mjs';
-import './chunk-7YKZ7D7U.mjs';
+import './chunk-2OTVEVU7.mjs';
+import './chunk-D3VRYN5H.mjs';
+import './chunk-7MH2LXFV.mjs';
+import './chunk-FVUORQJX.mjs';
+import './chunk-RGCO6BCU.mjs';
+import './chunk-W3XYS7M3.mjs';
+import './chunk-LVJYP46A.mjs';
+import './chunk-35VEFUPA.mjs';
+import './chunk-HOCKBMTF.mjs';
+import './chunk-AYH56CFA.mjs';
+import './chunk-PJZVMYPN.mjs';
+import './chunk-ATNP3Z6G.mjs';
 import './chunk-P7TACBB4.mjs';
-import './chunk-5VH26DHQ.mjs';
-import './chunk-NEJOZRKV.mjs';
-import './chunk-5CGIKL2Y.mjs';
-import './chunk-MXH3TZWM.mjs';
-import './chunk-MRJOYGDD.mjs';
-import './chunk-5FPVCRAI.mjs';
+import './chunk-QMFUWXJJ.mjs';
+import './chunk-BK5RX7N5.mjs';
+import './chunk-OG6UBKMG.mjs';
+import './chunk-QFECX4D6.mjs';
+import './chunk-3TAXDPV6.mjs';
+import './chunk-ECOC3JRK.mjs';
 import './chunk-6K6D4X6D.mjs';
-import './chunk-ZHCGY4YB.mjs';
-import './chunk-5DQUZENZ.mjs';
-import './chunk-ZWJSMASL.mjs';
-import './chunk-4IKXV4FQ.mjs';
-import './chunk-W3DRXKTC.mjs';
-import './chunk-WMFTYTMD.mjs';
-import './chunk-EWNPNF2B.mjs';
-import './chunk-VQ3MZS4J.mjs';
-import './chunk-REFCK56T.mjs';
+import './chunk-ZO5NWKNY.mjs';
+import './chunk-6F3XKP3G.mjs';
+import './chunk-3AGRJPPN.mjs';
+import './chunk-Z5YZVKS5.mjs';
+import './chunk-DBTYTFGU.mjs';
+import './chunk-CZC4EJOD.mjs';
+import './chunk-76V2THLN.mjs';
+import './chunk-MPIWXVKP.mjs';
+import './chunk-R4A5DO7E.mjs';
 import './chunk-ZT7KDTGF.mjs';
-import './chunk-47S6AX7M.mjs';
-import './chunk-FRIXS4BL.mjs';
+import './chunk-2PW7KHXJ.mjs';
+import './chunk-JPF3K5TD.mjs';
 import './chunk-PJMH47GY.mjs';
-import './chunk-DZABAR36.mjs';
-import './chunk-XUXHB434.mjs';
-import './chunk-F6ZWBNIM.mjs';
+import './chunk-NJC2WLYK.mjs';
+import './chunk-SM4TG5VI.mjs';
+import './chunk-CIUW5YZ7.mjs';
 import './chunk-PT4DPY4L.mjs';
-import './chunk-CZNQ24DQ.mjs';
-import './chunk-WFRV27QA.mjs';
-import './chunk-HEKVJKLH.mjs';
-import './chunk-D6H235SZ.mjs';
-import './chunk-AYXC2DCM.mjs';
-import './chunk-WLJEFSES.mjs';
-import './chunk-JACXLYPD.mjs';
-import './chunk-KEIDXVZB.mjs';
+import './chunk-X2JENUDV.mjs';
+import './chunk-G5A3E5IG.mjs';
+import './chunk-6UK5Y6KZ.mjs';
+import './chunk-UPAA75QA.mjs';
+import './chunk-K2G6O2LX.mjs';
+import './chunk-XBWUYKZW.mjs';
+import './chunk-7GLTVVKS.mjs';
+import './chunk-PT4IH2KW.mjs';
 import './chunk-S3J72WZM.mjs';
-import './chunk-YJKULMWM.mjs';
-import './chunk-3LINEESX.mjs';
-import './chunk-JCWSMIVA.mjs';
+import './chunk-EX5FMSQL.mjs';
+import './chunk-EH3ZVEVT.mjs';
+import './chunk-E6KQBM7F.mjs';
 import './chunk-SAXGEQRG.mjs';
 import './chunk-QHJF4QWW.mjs';
 import './chunk-GBY2NNWZ.mjs';

package/dist/text-row.mjs

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

package/dist/textarea.mjs

@@ -1,4 +1,4 @@
-export { a as TextArea } from './chunk-2IL2LP47.mjs';
+export { a as TextArea } from './chunk-HOCKBMTF.mjs';
 import './chunk-PUJZGK7Y.mjs';
 import './chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map

package/dist/textinput.mjs

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

package/dist/toast/index.mjs

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

package/dist/toggleswitch.mjs

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

package/dist/tooltip/tooltip.mjs

@@ -1,4 +1,4 @@
-export { a as ToolTip } from '../chunk-ASCPOK5F.mjs';
+export { a as ToolTip } from '../chunk-FVUORQJX.mjs';
 import '../chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=tooltip.mjs.map

package/dist/video-dashboard-notification.mjs

@@ -1,4 +1,4 @@
-export { a as VideoDashboardNotification } from './chunk-25FJ277C.mjs';
+export { a as VideoDashboardNotification } from './chunk-AYH56CFA.mjs';
 import './chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=video-dashboard-notification.mjs.map

package/dist/video-modal.mjs

@@ -1,4 +1,4 @@
-export { a as VideoModal } from './chunk-FAFXVD4P.mjs';
+export { a as VideoModal } from './chunk-PJZVMYPN.mjs';
 import './chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=video-modal.mjs.map

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.74",
+  "version": "0.3.78",
   "sideEffects": [
     "**/*.css"
   ],
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": "./dist",
+    "./index.mjs": "./dist/index.mjs",
     "./styles.css": "./dist/index.css"
   },
   "license": "MIT",
@@ -62,6 +63,7 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.18",
+    "@types/pluralize": "^0.0.33",
     "classname-variants": "^1.3.2",
     "clsx": "^1.2.1",
     "flowbite": "^1.8.1",

package/src/accordion.tsx

@@ -1,103 +1,165 @@
-//@ts-nocheck
-import { useState, createContext, useContext, useEffect, useRef, cloneElement, Children } from 'react'
-import { HiChevronDown, HiChevronUp } from 'react-icons/hi'
-import PropTypes from 'prop-types'
-export const AccordionContext = createContext()
-
-export function Accordion({ children, ...props }) {
-  const panelListRef = useRef([])
-  const [currentlyShowing, setCurrentlyShowing] = useState(null)
-
-  const handleSelection = (id) => {
+import React, {
+  useState,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  cloneElement,
+  Children,
+} from "react";
+import { HiChevronDown, HiChevronUp } from "react-icons/hi";
+import PropTypes from "prop-types";
+
+type AccordionContext = {
+  currentlyShowing: string | null;
+  handleSelection: (id: string) => void;
+  addPanelOrder: (id: string) => void;
+  getPanelList: () => string[];
+};
+
+export const AccordionContext = createContext<AccordionContext>({
+  currentlyShowing: null,
+  handleSelection: (_: string) => {},
+  addPanelOrder: (_: string) => {},
+  getPanelList: () => [],
+});
+
+type AccordionProps = {
+  children: React.ReactElement<AccordionPanelProps>[];
+};
+
+export function Accordion({ children }: AccordionProps) {
+  const panelListRef = useRef<string[]>([]);
+  const [currentlyShowing, setCurrentlyShowing] = useState<string | null>(null);
+
+  const handleSelection = (id: string) => {
     if (currentlyShowing === id) {
-      setCurrentlyShowing(null)
+      setCurrentlyShowing(null);
     } else {
-      setCurrentlyShowing(id)
+      setCurrentlyShowing(id);
     }
-  }
+  };
 
-  const addPanelOrder = (id) => {
-    panelListRef.current.push(id)
-  }
+  const addPanelOrder = (id: string) => {
+    panelListRef.current.push(id);
+  };
 
   const getPanelList = () => {
-    return panelListRef.current
-  }
+    return panelListRef.current;
+  };
 
-  return <AccordionContext.Provider value={{ currentlyShowing, handleSelection, addPanelOrder, getPanelList }}>{children}</AccordionContext.Provider>
+  return (
+    <AccordionContext.Provider
+      value={{ currentlyShowing, handleSelection, addPanelOrder, getPanelList }}
+    >
+      {children}
+    </AccordionContext.Provider>
+  );
 }
 
-export function AccordionPanel({ children, ...props }) {
-  const context = useContext(AccordionContext)
+type AccordionPanelProps = {
+  children: React.DetailedReactHTMLElement<any, HTMLElement>;
+  id: string;
+};
+
+export function AccordionPanel({ children, id }: AccordionPanelProps) {
+  const context = useContext(AccordionContext);
+
   useEffect(() => {
-    context.addPanelOrder(props.id)
-  }, [])
+    context.addPanelOrder(id);
+  }, []);
 
   return (
-    <div id={`${props.id}-panel`} data-accordion="collapse">
+    <div id={`${id}-panel`} data-accordion="collapse">
       {Children.map(children, (child) => {
-        return cloneElement(child, { id: props.id })
+        return cloneElement(child, { id: id });
       })}
     </div>
-  )
+  );
 }
 
-export function AccordionTitle({ children, ...props }) {
-  const context = useContext(AccordionContext)
+type AccordionTitleProps = {
+  children: React.ReactNode;
+  id: string;
+};
 
-  const handleSelection = (e) => {
-    context.handleSelection(props.id)
-  }
+export function AccordionTitle({ children, id }: AccordionTitleProps) {
+  const context = useContext(AccordionContext);
 
-  const panelList = context.getPanelList()
-  const isLastPanel = panelList[panelList.length - 1] === props.id
+  const handleSelection = () => {
+    context.handleSelection(id);
+  };
+
+  const panelList = context.getPanelList();
+  const isLastPanel = panelList[panelList.length - 1] === id;
 
   return (
-    <h2 id={`${props.id}-title`}>
+    <h2 id={`${id}-title`}>
       <button
         type="button"
-        className={`flex items-center justify-between w-full p-5 font-medium text-left border ${
-          isLastPanel && context.currentlyShowing !== props.id ? 'border-b-1' : 'border-b-0'
+        className={`flex w-full items-center justify-between border p-5 text-left font-medium ${
+          isLastPanel && context.currentlyShowing !== id
+            ? "border-b-1"
+            : "border-b-0"
         } border-gray-200 ${
-          panelList[0] === props.id ? 'rounded-t-xl' : isLastPanel && context.currentlyShowing !== props.id ? 'rounded-b-xl' : 'rounded-none'
-        } ${context.currentlyShowing === props.id && 'bg-gray-100'}
-         dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400`}
-        data-accordion-target={`#${props.id}-title`}
+          panelList[0] === id
+            ? "rounded-t-xl"
+            : isLastPanel && context.currentlyShowing !== id
+            ? "rounded-b-xl"
+            : "rounded-none"
+        } ${context.currentlyShowing === id && "bg-gray-100"}
+         text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800`}
+        data-accordion-target={`#${id}-title`}
         aria-expanded="true"
-        aria-controls={`${props.id}-title`}
+        aria-controls={`${id}-title`}
         onClick={handleSelection}
       >
         <span>{children}</span>
-        {context.currentlyShowing === `${props.id}` ? <HiChevronUp className="w-6 h-6" /> : <HiChevronDown className="w-6 h-6" />}
+        {context.currentlyShowing === `${id}` ? (
+          <HiChevronUp className="h-6 w-6" />
+        ) : (
+          <HiChevronDown className="h-6 w-6" />
+        )}
       </button>
     </h2>
-  )
+  );
 }
 
-export function AccordionContent({ children, ...props }) {
-  const context = useContext(AccordionContext)
-  const panelList = context.getPanelList()
+type AccordionContentProps = {
+  children: React.ReactNode;
+  id: string;
+};
+
+export function AccordionContent({ children, id }: AccordionContentProps) {
+  const context = useContext(AccordionContext);
+  const panelList = context.getPanelList();
   return (
-    <div className={props.id !== context.currentlyShowing ? 'hidden' : ''} aria-labelledby="accordion-collapse-heading-1">
+    <div
+      className={id !== context.currentlyShowing ? "hidden" : ""}
+      aria-labelledby="accordion-collapse-heading-1"
+    >
       <div
-        className={`p-5 border ${
-          panelList[panelList.length - 1] === props.id && context.currentlyShowing === props.id ? 'rounded-b-xl border-b-1' : 'border-b-0'
+        className={`border p-5 ${
+          panelList[panelList.length - 1] === id &&
+          context.currentlyShowing === id
+            ? "border-b-1 rounded-b-xl"
+            : "border-b-0"
         } border-gray-200 dark:border-gray-700 dark:bg-gray-900`}
       >
         {children}
       </div>
     </div>
-  )
+  );
 }
 
-Accordion.Panel = AccordionPanel
-Accordion.Title = AccordionTitle
-Accordion.Content = AccordionContent
+Accordion.Panel = AccordionPanel;
+Accordion.Title = AccordionTitle;
+Accordion.Content = AccordionContent;
 
 Accordion.propTypes = {
   /** Components to be rendered as Part of the Compound Component, each panel is a seperate accordion section*/
-  children: PropTypes.shape({ type: PropTypes.arrayOf([AccordionPanel]) }).isRequired,
-}
+  children: PropTypes.arrayOf(PropTypes.element),
+};
 
 AccordionPanel.propTypes = {
   /** Unique id for the dropdown */
@@ -107,9 +169,9 @@ AccordionPanel.propTypes = {
     PropTypes.shape({ type: PropTypes.oneOf([AccordionTitle]) }),
     PropTypes.shape({ type: PropTypes.oneOf([AccordionContent]) }),
   ]).isRequired,
-}
+};
 
 AccordionContent.propTypes = {
   /** Components held within the Content section of the AccordionPanel*/
   children: PropTypes.oneOfType([PropTypes.elementType]),
-}
+};

package/src/alert-banner.tsx

@@ -1,100 +1,122 @@
 //@ts-nocheck
 
-import { variantProps } from 'classname-variants/react'
-import { FaTimes } from 'react-icons/fa'
-import { FaTimes, FaInfoCircle, FaCheckCircle, FaExclamationCircle, FaExclamationTriangle } from 'react-icons/fa'
-import PropTypes from 'prop-types'
+import { variantProps } from "classname-variants/react";
+import { FaTimes } from "react-icons/fa";
+import {
+  FaTimes,
+  FaInfoCircle,
+  FaCheckCircle,
+  FaExclamationCircle,
+  FaExclamationTriangle,
+} from "react-icons/fa";
+import PropTypes from "prop-types";
 
 const alertProps = variantProps({
-  base: 'flex p-4 mb-4',
+  base: "flex p-4 mb-4",
   variants: {
     type: {
-      info: 'text-blue-800 border border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800',
-      default: 'text-gray-800 border border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-800',
-      success: 'text-green-800 border border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800',
-      danger: 'text-red-800 border border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800',
-      warning: 'text-yellow-800 border border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400 dark:border-yellow-800',
+      info: "text-blue-800 border border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800",
+      default:
+        "text-gray-800 border border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-800",
+      success:
+        "text-green-800 border border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800",
+      danger:
+        "text-red-800 border border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800",
+      warning:
+        "text-yellow-800 border border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400 dark:border-yellow-800",
     },
     size: {
-      sm: 'text-sm',
-      md: 'text-md',
-      lg: 'text-lg',
+      sm: "text-sm",
+      md: "text-md",
+      lg: "text-lg",
     },
     rounded: {
-      true: 'rounded-lg',
-      false: 'rounded-none',
+      true: "rounded-lg",
+      false: "rounded-none",
     },
     defaultVariants: {
-      type: 'info',
+      type: "info",
       rounded: true,
-      size: 'md',
+      size: "md",
     },
   },
-})
+});
 
 const dismissProps = variantProps({
-  base: 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8',
+  base: "ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8",
   variants: {
     type: {
-      info: ' bg-blue-50 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700',
-      default: ' bg-grey-50 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700',
-      success: ' bg-green-50 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-800 dark:text-green-400 dark:hover:bg-gray-700',
-      danger: ' bg-red-50 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700',
-      warning: ' bg-yellow-50 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-400 dark:hover:bg-gray-700',
+      info: " bg-blue-50 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700",
+      default:
+        " bg-grey-50 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700",
+      success:
+        " bg-green-50 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-800 dark:text-green-400 dark:hover:bg-gray-700",
+      danger:
+        " bg-red-50 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700",
+      warning:
+        " bg-yellow-50 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-400 dark:hover:bg-gray-700",
     },
   },
-})
-
-export function AlertBanner({ children, type, showIcon, onDismiss, rounded}) {
+});
 
+export function AlertBanner({ children, type, showIcon, onDismiss, rounded }) {
   const renderIcon = () => {
     switch (type) {
-      case 'info':
-        return <FaInfoCircle />
-      case 'success':
-        return <FaCheckCircle />
-      case 'danger':
-        return <FaExclamationCircle />
-      case 'warning':
-        return <FaExclamationTriangle />
+      case "info":
+        return <FaInfoCircle />;
+      case "success":
+        return <FaCheckCircle />;
+      case "danger":
+        return <FaExclamationCircle />;
+      case "warning":
+        return <FaExclamationTriangle />;
       default:
-        return <FaInfoCircle />
+        return <FaInfoCircle />;
     }
-  }
+  };
 
   return (
     <div {...alertProps({ type, rounded })} role="alert">
-      {showIcon && <div className="flex-shrink-0 inline w-4 h-4 mr-3 mt-1">{renderIcon()}</div>}
+      {showIcon && (
+        <div className="mr-3 mt-1 inline h-4 w-4 flex-shrink-0">
+          {renderIcon()}
+        </div>
+      )}
       <span className="sr-only">{type}</span>
       {children && <div>{children}</div>}
 
       {onDismiss && (
-        <button type="button" {...dismissProps({ type })} data-dismiss-target="#alert-1" aria-label="Close" onClick={onDismiss}>
+        <button
+          type="button"
+          {...dismissProps({ type })}
+          data-dismiss-target="#alert-1"
+          aria-label="Close"
+          onClick={onDismiss}
+        >
           <span className="sr-only">Close</span>
           <FaTimes />
         </button>
       )}
     </div>
-  )
+  );
 }
 
 AlertBanner.defaultProps = {
-    showIcon: true,
-    rounded: true,
-}
+  showIcon: true,
+  rounded: true,
+};
 
 AlertBanner.propTypes = {
-    /** Type of Alert */
-    type: PropTypes.oneOf(['info', 'success', 'warning', 'danger']).isRequired,
-    /** Determins if the icon assosiated with the alert type should be shown (defaults to true) */
-    showIcon: PropTypes.bool,
-    /** Function to be called when Alert is dismissed */
-    onDismiss: PropTypes.func,
-    /** Whether Alert should have rounded corners */
-    rounded: PropTypes.bool,
-    /** Components to be rendered as Part of the Compound Component*/
-    children: PropTypes.node.isRequired,
-}
-
-AlertBanner.displayName = "AlertBanner"
+  /** Type of Alert */
+  type: PropTypes.oneOf(["info", "success", "warning", "danger"]).isRequired,
+  /** Determins if the icon assosiated with the alert type should be shown (defaults to true) */
+  showIcon: PropTypes.bool,
+  /** Function to be called when Alert is dismissed */
+  onDismiss: PropTypes.func,
+  /** Whether Alert should have rounded corners */
+  rounded: PropTypes.bool,
+  /** Components to be rendered as Part of the Compound Component*/
+  children: PropTypes.node.isRequired,
+};
 
+AlertBanner.displayName = "AlertBanner";