ekm-ui 0.3.95 → 0.4.1

package/dist/table-result-block.js

@@ -1,14 +1,14 @@
-export { e as TableResultBlock } from './chunk-GGGZRFPY.js';
+export { e as TableResultBlock } from './chunk-UQFNA3OB.js';
+import './chunk-52VBZOHL.js';
 import './chunk-ZHMUFBQM.js';
 import './chunk-YZ2YZSNQ.js';
 import './chunk-E62SCYLR.js';
-import './chunk-X6RBGNFS.js';
 import './chunk-7Q6OMA2A.js';
-import './chunk-RHBXFO7R.js';
-import './chunk-5VOOMPCL.js';
-import './chunk-N7JQ6EAC.js';
+import './chunk-KRMPO53Y.js';
+import './chunk-CX2XFI5Q.js';
+import './chunk-R47VIYM2.js';
 import './chunk-HVNLAQA6.js';
-import './chunk-52VBZOHL.js';
+import './chunk-XKE3VK6Z.js';
 import './chunk-7WJGATIR.js';
 import './chunk-RTRHNOTP.js';
 import './chunk-JHGOFDVG.js';
@@ -22,39 +22,39 @@ import './chunk-3NO5IHBO.js';
 import './chunk-SFEJDNIA.js';
 import './chunk-E5KIDP3Z.js';
 import './chunk-TBJGGVSZ.js';
-import './chunk-QKHEEDZ4.js';
+import './chunk-AO5TGD7T.js';
 import './chunk-WVAVR5V6.js';
 import './chunk-CNJDESTL.js';
 import './chunk-TXDBBVCI.js';
 import './chunk-HTXOCBXA.js';
-import './chunk-EEMQBWYJ.js';
+import './chunk-CHXMQ7NN.js';
 import './chunk-ESJIQMQJ.js';
 import './chunk-IY6WVOAI.js';
 import './chunk-VGGEDWFD.js';
 import './chunk-AVTJXS4U.js';
-import './chunk-F7AUKLLE.js';
+import './chunk-FOPBXPMP.js';
 import './chunk-QMOPWIA3.js';
 import './chunk-SLIZ4TDR.js';
-import './chunk-FPELMAZN.js';
+import './chunk-JNHB4YNM.js';
 import './chunk-WTBH4TDX.js';
 import './chunk-6YBVKGQW.js';
 import './chunk-ISA6E23B.js';
 import './chunk-7Z2AKRKU.js';
 import './chunk-WSRPB5OU.js';
-import './chunk-YOHYKIR3.js';
+import './chunk-HQIKNKIV.js';
 import './chunk-DSJ5TRZW.js';
 import './chunk-E4USZ2Q3.js';
 import './chunk-F47A36U7.js';
 import './chunk-M4UBHZDH.js';
 import './chunk-TMO76FWT.js';
 import './chunk-YDCYBJPC.js';
-import './chunk-ELWZ674J.js';
-import './chunk-GI7QHCYX.js';
+import './chunk-5SEJVYKM.js';
+import './chunk-MBACKGWE.js';
 import './chunk-2OPJLYW6.js';
 import './chunk-P5IM3T4M.js';
 import './chunk-TRVGXTCI.js';
-import './chunk-TOLCGTOY.js';
-import './chunk-BLUJNMXF.js';
+import './chunk-XYGVDZRO.js';
+import './chunk-2I24LCEG.js';
 import './chunk-TJMI4DH2.js';
 import './chunk-6LHL364H.js';
 import './chunk-Z4LPO673.js';

package/package.json

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

package/src/alert-banner.tsx

@@ -62,6 +62,7 @@ type AlertBannerProps = {
   showIcon: boolean;
   onDismiss: () => void;
   rounded: boolean;
+  id:string;
 };
 
 export function AlertBanner({
@@ -70,6 +71,7 @@ export function AlertBanner({
   showIcon,
   onDismiss,
   rounded,
+  id,
 }: AlertBannerProps) {
   const renderIcon = () => {
     switch (type) {
@@ -87,7 +89,7 @@ export function AlertBanner({
   };
 
   return (
-    <div {...alertProps({ type, rounded, size: "md" })} role="alert">
+    <div id={id || undefined} {...alertProps({ type, rounded, size: "md" })} role="alert">
       {showIcon && (
         <div className="mr-3 mt-1 inline h-4 w-4 flex-shrink-0">
           {renderIcon()}
@@ -128,6 +130,8 @@ AlertBanner.propTypes = {
   rounded: PropTypes.bool,
   /** Components to be rendered as Part of the Compound Component*/
   children: PropTypes.node.isRequired,
+  /** Id for alert banner */
+  id: PropTypes.string,
 };
 
 AlertBanner.displayName = "AlertBanner";

package/src/alert.tsx

@@ -6,11 +6,13 @@ type Props = {
   type: "warning" | "info";
   hasBackground: boolean;
   centerText: boolean;
+  id: string;
 };
 
-export function Alert({ text, type, hasBackground, centerText }: Props) {
+export function Alert({ text, type, hasBackground, centerText, id }: Props) {
   return (
     <div
+      id={id || undefined}
       className={clsx(
         `flex items-center ${centerText ? "justify-center" : null}`,
         {

package/src/button-group-item.tsx

@@ -2,15 +2,17 @@ type Props = {
   text: string;
   className: string;
   active?: boolean;
+  id: string;
   onclick?: () => void;
 };
 
-export function ButtonGroupItem({ text, className, active, onclick }: Props) {
+export function ButtonGroupItem({ text, className, active, id, onclick }: Props) {
   return (
     <button
+      id={id || undefined}
       type="button"
       onClick={onclick}
-      className={`"rounded-l-lg dark:focus:ring-blue-500" border border-gray-200 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-gray-100 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white
+      className={`dark:focus:ring-blue-500" border border-gray-200 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-gray-100 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white
       ${className ? className : ""}
       ${
         active

package/src/button.tsx

@@ -171,7 +171,7 @@ Button.propTypes = {
   /** Bool to disable button */
   disabled: PropTypes.bool,
   /** Bool to outline button */
-  outlined: PropTypes.bool,
+  outline: PropTypes.bool,
   /** element for addon on button */
   addon: PropTypes.element,
   /** element for icon on button */

package/src/country-picker/country-modal.tsx

@@ -222,9 +222,9 @@ const NoResultsView =({title, msg, blockHeight="h-[500px]", showSpinner = false}
 }
 
 CountryPicker.propTypes = {
-  /** Boolean to indicate that the load of the country data this is passed to this component has been completed */
+  /** Boolean to indicate that the load of the country data that is passed to this component has been completed */
   initialLoadComplete: PropTypes.bool.isRequired,
-  /** Array of all the country data in the form { Id: 383, CountryCode 'CN': Country: 'China'} */
+  /** Array of all the country data in the form { ID: 383, CountryCode 'CN': Country: 'China'} */
   allCountryData: PropTypes.array.isRequired,   
   /** Array of preselected countries in the form { Id: 383, CountryCode 'CN': Country: 'China'} */
   preSelected: PropTypes.array.isRequired,

package/src/drag-and-drop.tsx

@@ -108,7 +108,7 @@ export function DragAndDrop({
       </p>
       <p className="text-xs text-gray-500 dark:text-gray-400">{subtitle}</p>
       {pickerCallback && (
-        <div className="mt-5">
+        <div className="mt-3 mb-3">
           <Button color="default" onClick={handleLaunchFilePicker}>
             <BiSearch className="mr-2" />
             Browse File Manager

package/src/drawer.tsx

@@ -55,7 +55,7 @@ export function Drawer({ show, onClose, children, title }: Props) {
       <div className="absolute w-full bg-white">
         <h5
           id="drawer-js-label"
-          className="inline-flex w-full items-center border-b-2 p-4	 text-lg  font-semibold text-gray-900 dark:border-gray-900 dark:bg-gray-900 dark:text-white"
+          className="inline-flex w-full items-center border-b-2 p-4	text-lg font-semibold text-gray-900 dark:border-gray-900 dark:bg-gray-900 dark:text-white"
         >
           {title}
         </h5>
@@ -64,13 +64,13 @@ export function Drawer({ show, onClose, children, title }: Props) {
           id="drawer-hide-button"
           type="button"
           aria-controls="drawer-example"
-          className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+          className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-2 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
         >
           <HiXMark className="h-auto w-6" />
           <span className="sr-only">Close menu</span>
         </button>
       </div>
-      <div className="flex h-full flex-col p-4 pt-20">{children}</div>
+      <div className="flex h-full flex-col pt-20 pb-4 pl-4 pr-4 mt-4">{children}</div>
     </div>
   );
 }

package/src/loading-button.tsx

@@ -3,24 +3,36 @@ import PropTypes from "prop-types";
 
 const buttonColors = Object.freeze({
   success:
-    " text-white bg-green-700 border border-transparent enabled:hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800 rounded-lg focus:ring-2",
+    {
+      buttonStyle: " text-white bg-green-700 border border-transparent enabled:hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800 rounded-lg focus:ring-2",
+      spinnerStyle: "text-white",
+    },
   danger:
-    " text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900 rounded-lg focus:ring-2",
-});
-
-const disabledButtonColors = Object.freeze({
-  success:
-    " cursor-not-allowed opacity-50 text-white bg-green-700 border border-transparent enabled:hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800 rounded-lg focus:ring-2",
-  danger:
-    " cursor-not-allowed opacity-50 text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900 rounded-lg focus:ring-2",
+    {
+      buttonStyle: " text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900 rounded-lg focus:ring-2",
+      spinnerStyle: "text-white",
+    },
+  successOutline:
+    {
+      buttonStyle: " text-green-700 border border-green-700 enabled:hover:text-white enabled:hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800 rounded-lg focus:ring-2",
+      spinnerStyle: "text-green-700",
+    },
+  dangerOutline:
+    {
+      buttonStyle: " text-red-700 border border-red-700 enabled:hover:text-white enabled:hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-500 dark:focus:ring-red-900 rounded-lg focus:ring-2",
+      spinnerStyle: "text-red-700",
+    },
 });
 
 export function LoadingButton({ children, isLoading = false, ...props }) {
+
+  const style = props.color ? buttonColors[props.color]: buttonColors.success
+
   const renderLoader = () => (
     <svg
       aria-hidden="true"
       role="status"
-      className="mr-3 inline h-4 w-4 animate-spin text-white"
+      className={`mr-3 inline h-4 w-4 animate-spin ${style.spinnerStyle}`}
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -39,16 +51,9 @@ export function LoadingButton({ children, isLoading = false, ...props }) {
   return (
     <button
       className={`group relative flex items-center justify-center p-0.5 text-center font-medium focus:z-10 focus:outline-none 
-          ${
-            props.color
-              ? isLoading
-                ? disabledButtonColors[props.color]
-                : buttonColors[props.color]
-              : isLoading
-              ? disabledButtonColors.success
-              : buttonColors.success
-          }
-        `}
+        ${style.buttonStyle}
+        ${isLoading ? ' cursor-not-allowed opacity': ''}
+      `}
       {...props}
       disabled={isLoading}
     >

package/src/nbui/nbui-card-form.tsx

@@ -0,0 +1,35 @@
+export function NBUI_Card_Form() {
+  return (
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex h-full flex-col justify-center gap-4">
+        <div className="w-1/4 h-6 bg-gray-400 rounded-md" />
+        <div className="w-2/4 h-4 bg-gray-400 rounded-md" />
+        <div className="flex gap-2">
+          <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+          <div className="mt-4 w-2/4 h-6 bg-gray-200 rounded-md" />
+        </div>
+        <div className="flex gap-2">
+          <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+          <div className="mt-4 w-2/4 h-6 bg-gray-200 rounded-md" />
+        </div>
+        <div className="flex gap-2">
+          <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+          <div className="mt-4 w-2/4 h-6 bg-gray-200 rounded-md" />
+        </div>
+        <div className="w-2/4 h-4 bg-gray-400 rounded-md" />
+        <div className="flex gap-2">
+          <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+          <div className="mt-4 w-2/4 h-6 bg-gray-200 rounded-md" />
+        </div>
+        <div className="flex gap-2">
+          <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+          <div className="mt-4 w-2/4 h-6 bg-gray-200 rounded-md" />
+        </div>
+        <div className="flex gap-2">
+          <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+          <div className="mt-4 w-2/4 h-6 bg-gray-200 rounded-md" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/nbui/nbui-card-image.tsx

@@ -0,0 +1,10 @@
+export function NBUI_Card_Image() {
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <div className="flex h-full flex-col justify-center gap-4">
+            <div className="w-2/4 h-6 bg-gray-400 rounded-md" />
+            <div className="flex items-center">
+                <div className="mt-2 w-60 h-40 bg-gray-200 rounded-md" />
+            </div>
+        </div>
+    </div>
+}

package/src/nbui/nbui-card-lg.tsx

@@ -0,0 +1,16 @@
+export function NBUI_Card_Lg() {
+  return (
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex h-full flex-col justify-center gap-4">
+        <div className="w-1/4 h-6 bg-gray-400 rounded-md" />
+        <div className="w-2/4 h-4 bg-gray-400 rounded-md" />
+        <div className="mt-2 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+    </div>
+  )
+}

package/src/nbui/nbui-card-paragraphs-lg.tsx

@@ -0,0 +1,23 @@
+export function NBUI_Card_Paragraphs_Lg() {
+  return (
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+    <div className="flex h-full flex-col justify-center gap-4">
+      <div className="w-1/4 h-6 bg-gray-400 rounded-md" />
+      <div className="w-2/4 h-4 bg-gray-400 rounded-md" />
+        <div className="mt-2 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+      <div className="w-2/4 h-4 bg-gray-400 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />  
+    </div>
+  </div>
+  )
+}

package/src/nbui/nbui-card-paragraphs.tsx

@@ -0,0 +1,16 @@
+export function NBUI_Card_Paragraphs() {
+  return (
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+    <div className="flex h-full flex-col justify-center gap-4">
+      <div className="w-1/4 h-6 bg-gray-400 rounded-md" />
+      <div className="w-2/4 h-4 bg-gray-400 rounded-md" />
+        <div className="mt-2 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-3/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-3/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-1 w-3/4 h-4 bg-gray-200 rounded-md" />
+    </div>
+  </div>
+  )
+}

package/src/nbui/nbui-card-sm.tsx

@@ -0,0 +1,12 @@
+export function NBUI_Card_Sm() {
+  return (
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex h-full flex-col justify-center gap-4">
+        <div className="w-1/4 h-6 bg-gray-400 rounded-md" />
+        <div className="w-2/4 h-4 bg-gray-400 rounded-md" />
+        <div className="mt-2 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+    </div>
+  )
+}

package/src/nbui/nbui-card-table.tsx

@@ -0,0 +1,56 @@
+export function NBUI_Card_Table() {
+  return (
+    <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+    <div className="flex h-full flex-col justify-center gap-4">
+      <div className="w-1/4 h-6 bg-gray-400 rounded-md" />
+      <div className="flex gap-2">
+        <div className="mt-4 w-1/3 h-6 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-40 h-6 bg-gray-300 rounded-md" />
+        <div className="mt-4 w-40 h-6 bg-gray-300 rounded-md" />
+      </div>
+      <div className="flex gap-2">
+        <div className="mt-4 w-1/4 h-6 bg-gray-300 rounded-md" />
+        <div className="mt-4 w-2/4 h-6 bg-gray-300 rounded-md" />
+        <div className="mt-4 w-2/4 h-6 bg-gray-300 rounded-md" />
+        <div className="mt-4 w-2/4 h-6 bg-gray-300 rounded-md" />
+      </div>
+      <div className="flex gap-2">
+        <div className="mt-4 w-1/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+      <div className="flex gap-2">
+        <div className="mt-4 w-1/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+      <div className="flex gap-2">
+        <div className="mt-4 w-1/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+      <div className="flex gap-2">
+        <div className="mt-4 w-1/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+      <div className="flex gap-2">
+        <div className="mt-4 w-1/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+      <div className="flex gap-2">
+        <div className="mt-4 w-1/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
+      </div>
+    </div>
+  </div>
+  )
+}

package/src/nbui/nbui-card.tsx

@@ -3,12 +3,11 @@ export function NBUI_Card() {
     <div className="flex flex-col rounded-lg border border-gray-200 bg-white px-5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
       <div className="flex h-full flex-col justify-center gap-4">
         <div className="w-1/4 h-6 bg-gray-400 rounded-md" />
+        <div className="w-2/4 h-4 bg-gray-400 rounded-md" />
         <div className="mt-2 w-2/4 h-4 bg-gray-200 rounded-md" />
         <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
         <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
         <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
-        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
-        <div className="mt-4 w-2/4 h-4 bg-gray-200 rounded-md" />
       </div>
     </div>
   )

package/src/nbui/nbui-footer.tsx

@@ -0,0 +1,8 @@
+export function NBUI_Footer() {
+  return (
+    <div className="flex justify-between gap-2">
+      <div className="mt-2 w-40 h-8 bg-gray-200 rounded-md" />
+      <div className="mt-2 w-40 h-8 bg-green-700 rounded-md" />
+    </div>
+  )
+}

package/src/nbui/nbui-side-panel-container.tsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+
+export function NBUI_Page_Layout({ children }: { children: React.ReactElement }) {
+  return (
+    <div className="px-4">
+        <div className="mb-4 md:flex gap-4">
+            {children}
+        </div>
+    </div>
+  );
+}
+
+export function NBUI_Page_Layout_Side_Panel({ children }: { children: React.ReactElement }) {
+  return (
+    <aside className="flex w-full md:max-w-[320px] shrink-0 flex-col gap-4">
+     {children}
+    </aside>
+  );
+}
+
+export function NBUI_Side_Panel_Main({ children }: { children: React.ReactElement }) {
+  return (
+    <div className="flex flex-grow flex-col gap-4 mb-4 md:mb-0">
+        {children}
+    </div>
+  );
+}
+
+NBUI_Page_Layout.Side_Panel = NBUI_Page_Layout_Side_Panel;
+NBUI_Page_Layout.Main = NBUI_Side_Panel_Main;
+
+NBUI_Page_Layout.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.shape({ type: PropTypes.oneOf([NBUI_Page_Layout_Side_Panel]) }),
+        PropTypes.shape({ type: PropTypes.oneOf([NBUI_Side_Panel_Main]) }),
+      ]).isRequired,
+};
+

package/src/pagination/pagination.tsx

@@ -44,7 +44,7 @@ export function Pagination({
   }
 
   return (
-    <div className="w-full">
+    <div id="paginationControl" className="w-full">
       <div className="relative overflow-hidden rounded-b-lg bg-white  dark:bg-gray-800">
         <nav
           className=" flex flex-wrap items-start justify-between gap-x-4 gap-y-2 md:items-center"
@@ -52,6 +52,7 @@ export function Pagination({
         >
           <div className="flex w-full justify-between md:hidden">
             <button
+              id="btnPreviousM"
               disabled={current === 1}
               className={clsx(
                 current === 1 && "cursor-not-allowed",
@@ -76,6 +77,7 @@ export function Pagination({
             </button>
 
             <button
+              id="btnNextM"
               disabled={current === totalPages}
               className={clsx(
                 current === totalPages && "cursor-not-allowed",
@@ -99,7 +101,7 @@ export function Pagination({
               </svg>
             </button>
           </div>
-          <div className="hidden items-center space-x-3 md:flex">
+          <div id="rowsPerPageSection" className="hidden items-center space-x-3 md:flex">
             <label
               htmlFor="rows"
               className="text-sm font-normal text-gray-500 dark:text-gray-400"
@@ -134,6 +136,7 @@ export function Pagination({
           <ul className="hidden items-stretch -space-x-px md:inline-flex">
             <li>
               <button
+                id="btnPrevious"
                 disabled={current === 1}
                 className={clsx(
                   current === 1 && "cursor-not-allowed",
@@ -161,6 +164,7 @@ export function Pagination({
               <>
                 <li>
                   <button
+                    id="btnLast"
                     className={clsx(
                       current === 1 && "cursor-not-allowed",
                       "flex items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
@@ -178,11 +182,12 @@ export function Pagination({
             {pages.map((page) => (
               <li key={page}>
                 <button
+                  id={`btnPage${page}`}
                   onClick={() => onChange(page, pageSize)}
                   className={clsx(
                     "flex items-center justify-center border px-3 py-2 text-sm leading-tight",
                     page === current
-                      ? "z-10 border-primary-300 bg-primary-50 text-primary-600 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+                      ? "z-10 border-primary-300 bg-primary-50 text-primary-600 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white st-pageCurrent"
                       : "border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                   )}
                 >
@@ -197,6 +202,7 @@ export function Pagination({
                 </li>
                 <li>
                   <button
+                    id="btnLast"
                     className="flex items-center justify-center border border-gray-300 bg-white px-3 py-2 text-sm leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                     onClick={() => onChange(totalPages, pageSize)}
                   >
@@ -207,6 +213,7 @@ export function Pagination({
             )}
             <li>
               <button
+                id="btnNext"
                 disabled={current === totalPages}
                 onClick={() => onChange(current + 1, pageSize)}
                 className={clsx(

package/src/product-picker/product-listing.tsx

@@ -6,7 +6,7 @@ import { Checkbox } from "../checkbox";
 // FOR USE WITH THE PRODUCT PICKER COMPONENT - ONLY
 
 function BuildImageUrl(imageUrl) {
-  return `${window.resourceSettings.imageBasePath}${imageUrl}?v=${window.resourceSettings.version}`;
+  return `${window.resourceSettings?.imageBasePath || ''}${imageUrl}?v=${window.resourceSettings?.version || ''}`;
 }
 
 export function Listing({
@@ -90,7 +90,7 @@ function ProductRow({ product, selected, callback }) {
           />
         </div>
         <div className="ml-4">
-          {product.Image && product.IamgeName !== "[URL-DownloadRequested]" ? (
+          {product.Image && product.ImageName !== "[URL-DownloadRequested]" ? (
             <img
               className="h-10 w-10 rounded-sm"
               src={product.Image}
@@ -123,9 +123,9 @@ function ProductRow({ product, selected, callback }) {
       </div>
       <div className="ml-4 flex-shrink-0">
         <span className="mr-3 text-sm text-gray-500">{`${
-          globalThis.globalSettings.CurrencySymbol
+          globalThis.globalSettings?.CurrencySymbol ?? '£'
         }${product.Price.toFixed(
-          globalThis.globalSettings.CurrencyExponent ?? 2
+          globalThis.globalSettings?.CurrencyExponent ?? 2
         )}`}</span>
       </div>
     </div>

package/src/product-picker/product-modal.tsx

@@ -324,7 +324,7 @@ ProductPicker.propTypes = {
   productCodeEnabled: PropTypes.bool,
   /** Callback to request a refresh of the displayed products */
   requestCallback: PropTypes.func.isRequired,
-  /** Callback to return the selected products {orig - preselected, add - newly added, remove -items removed from pre-selected} */
+  /** Callback to return the selected products ids in an array */
   callback: PropTypes.func.isRequired,
 };