ekm-ui 0.4.71 → 0.4.72

package/dist/table-result-block.js

@@ -1,11 +1,11 @@
-export { e as TableResultBlock } from './chunk-7V5FAXED.js';
+export { e as TableResultBlock } from './chunk-ZRMNYAO7.js';
 import './chunk-NF5KDPMG.js';
 import './chunk-YZ2YZSNQ.js';
 import './chunk-GVNUAH45.js';
 import './chunk-JAR3LP2K.js';
-import './chunk-WL2NTX3A.js';
+import './chunk-FOWKHGHJ.js';
 import './chunk-22RUXGYW.js';
-import './chunk-LQKVFBLU.js';
+import './chunk-ZNWAFIZY.js';
 import './chunk-HVNLAQA6.js';
 import './chunk-HW7AZG2V.js';
 import './chunk-AN66H4D6.js';
@@ -24,9 +24,9 @@ import './chunk-LWTESXND.js';
 import './chunk-LIXVY47P.js';
 import './chunk-Y5DEGGVQ.js';
 import './chunk-F7MTEILK.js';
-import './chunk-NGCAIS7M.js';
+import './chunk-VE6J42I7.js';
 import './chunk-DCVOMIPI.js';
-import './chunk-SE2IYY2P.js';
+import './chunk-BF6NM3B7.js';
 import './chunk-SBGTFQOD.js';
 import './chunk-IJMS44H4.js';
 import './chunk-AO5TGD7T.js';
@@ -47,23 +47,23 @@ import './chunk-W55BPRI4.js';
 import './chunk-AY4JB2QV.js';
 import './chunk-UQ566F6W.js';
 import './chunk-ESJIQMQJ.js';
-import './chunk-TY6TW6AX.js';
+import './chunk-MMFRYMGJ.js';
 import './chunk-DL4PX4HA.js';
 import './chunk-6TL5EZJH.js';
 import './chunk-NDDDT4TO.js';
 import './chunk-QYKN3JZ5.js';
 import './chunk-SLIZ4TDR.js';
-import './chunk-5Z7OC2TH.js';
+import './chunk-TXJVQRS6.js';
 import './chunk-ANU7OAPA.js';
 import './chunk-ISA6E23B.js';
 import './chunk-OUR2CLV6.js';
-import './chunk-XNPFK34J.js';
+import './chunk-MQETRVUJ.js';
 import './chunk-DSJ5TRZW.js';
 import './chunk-IPAI4R3G.js';
 import './chunk-F7K7HAXY.js';
-import './chunk-T3HFBJ37.js';
+import './chunk-TU4FTVZK.js';
 import './chunk-4FSPYK2A.js';
-import './chunk-AHD6UTU2.js';
+import './chunk-CYOCZEOE.js';
 import './chunk-WLWG565K.js';
 import './chunk-GIZ3LLSA.js';
 import './chunk-ER5CL77P.js';

package/package.json

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

package/src/button.tsx

@@ -135,6 +135,7 @@ const buttonProps = variantProps({
 });
 
 const sizes = Object.freeze({
+  xxs: "text-xs px-1 py-1",
   xs: "text-xs px-2 py-1",
   sm: "text-sm px-[12px] py-1.5",
   md: "text-sm px-[16px] py-2",
@@ -183,8 +184,8 @@ Button.propTypes = {
     "success",
     "warning",
   ]),
-  /** String to determine the size of the badge. "xs, sm, md, mdbs, lg, xl" */
-  size: PropTypes.oneOf(["xs", "sm", "md", "mdbs", "lg", "xl"]),
+  /** String to determine the size of the badge. "xxs, xs, sm, md, mdbs, lg, xl" */
+  size: PropTypes.oneOf(["xxs", "xs", "sm", "md", "mdbs", "lg", "xl"]),
   /** Bool to disable button */
   disabled: PropTypes.bool,
   /** Bool to outline button */

package/src/pagination/pagination.tsx

@@ -7,6 +7,7 @@ export type PaginationProps = {
   current: number;
   onChange: (page: number, pageSize: number) => void;
   loading?: boolean;
+  pageSizeOptions?: number[];
 };
 
 function range(size: number, startAt = 0): number[] {
@@ -19,6 +20,7 @@ export function Pagination({
   current,
   onChange,
   loading,
+  pageSizeOptions = [10, 25, 50, 100],
 }: PaginationProps) {
   // Calculate the values that are displayed
   const from = Math.min((current - 1) * pageSize + 1, total);
@@ -230,10 +232,11 @@ export function Pagination({
                 onChange={(e) => onChange(1, Number(e.target.value))}
                 value={pageSize}
               >
-                <option value={10}>10</option>
-                <option value={25}>25</option>
-                <option value={50}>50</option>
-                <option value={100}>100</option>
+                {pageSizeOptions.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
               </select>
               
             </div>

package/src/search/search.tsx

@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { HiSearch } from "react-icons/hi";
 
 function useDebounceEffect(effect, delay, deps) {
   const instanceRef = useRef(0);
@@ -38,6 +39,7 @@ export const Search = forwardRef(function Search(
     disabled = false,
     initialValue = "",
     additionalClasses= "",
+    showSearchIcon = false,
   },
   reference
 ) {
@@ -157,6 +159,11 @@ export const Search = forwardRef(function Search(
   return (
     <div className={`flex ${additionalClasses ? additionalClasses : ''}`}>
       <div className="relative w-full">
+        {showSearchIcon && (
+          <div className="pointer-events-none hidden lg:flex absolute inset-y-0 start-0 items-center ps-3.5">
+            <HiSearch size={20} className="text-gray-500"/>
+          </div>
+        )}
         <input
           ref={reference}
           placeholder={placeholder}
@@ -167,7 +174,7 @@ export const Search = forwardRef(function Search(
           onKeyDown={handleKeyDown}
           disabled={disabled}
           id={`${id}-search-input`}
-          className="block w-full rounded-lg border border-r-2 border-gray-300 border-r-gray-300 bg-gray-50 p-2 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"
+          className={`block w-full rounded-lg border border-gray-300 border-r-gray-300 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 ${showSearchIcon ? 'pl-2 lg:pl-10 pr-2 py-2 bg-white' : 'p-2 bg-gray-50'}`}
         />
         {categories?.length > 0 && renderDropdown()}
       </div>
@@ -217,7 +224,11 @@ Search.propTypes = {
   /**
    * Any additional classes to apply to the outside div of the search component
    */
-  additionalClasses: PropTypes.string
+  additionalClasses: PropTypes.string,
+  /**
+   * If set to true, a search icon will be displayed inside the search input.
+   */
+  showSearchIcon: PropTypes.bool,
 };
 
 Search.displayName = "Search";

package/dist/chunk-AHD6UTU2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button.tsx"],"names":["variantProps","import_prop_types","jsx","buttonProps","sizes","Button","_a","_b","color","disabled","outline","size","children","className","props","__objRest","__spreadProps","__spreadValues","twMerge","PropTypes"],"mappings":"6IACA,OAAS,gBAAAA,MAAoB,2BAE7B,IAAAC,EAAsB,SA6JhB,cAAAC,MAAA,oBA3JN,IAAMC,EAAcH,EAAa,CAC/B,KAAM,uIACN,SAAU,CACR,MAAO,CACL,QACE,qNACF,KAAM,2JACN,QACE,iHACF,KAAM,iOACN,KAAM,sIACN,MACE,oLACF,QACE,yHACF,QACE,2FACJ,EACA,SAAU,CACR,KAAM,gCACN,MAAO,EACT,EACA,QAAS,CACP,KAAM,SACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,gDACb,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,iCACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,8CACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,gCACb,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,gDACb,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,wBACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,kDACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,yBACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,oDACb,EACA,CACE,SAAU,CACR,MAAO,UACP,QAAS,EACX,EACA,UAAW,0BACb,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UACE,+CACJ,EACA,CACE,SAAU,CACR,MAAO,OACP,QAAS,EACX,EACA,UAAW,kDACb,EACA,CACE,SAAU,CACR,MAAO,QACP,QAAS,EACX,EACA,UACE,oDACJ,EACA,CACE,SAAU,CACR,MAAO,QACP,QAAS,EACX,EACA,UAAW,yEACb,CACF,CACF,CAAC,EAEKI,EAAQ,OAAO,OAAO,CAC1B,GAAI,oBACJ,GAAI,2BACJ,GAAI,yBACJ,KAAM,6BACN,GAAI,6BACJ,GAAI,0BACN,CAAC,EAEM,SAASC,EAAOC,EAQpB,CARoB,IAAAC,EAAAD,EACrB,OAAAE,EAAQ,UACR,SAAAC,EACA,QAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,UAAAC,CAvJF,EAiJuBN,EAOlBO,EAAAC,EAPkBR,EAOlB,CANH,QACA,WACA,UACA,OACA,WACA,cAGA,OACEL,EAAC,SAAAc,EAAAC,IAAA,GACKd,EAAY,CAAE,MAAAK,EAAO,SAAAC,EAAU,QAAAC,EAAS,UAAAG,CAAU,CAAC,GACnDC,GAFL,CAGC,SAAUL,EAEV,SAAAP,EAAC,QACC,UAAWgB,EACT,0EACAd,EAAMO,CAAI,EACVE,CACF,EAEC,SAAAD,EACH,GACF,CAEJ,CAEAP,EAAO,UAAY,CAEjB,MAAO,EAAAc,QAAU,MAAM,CACrB,UACA,OACA,UACA,OACA,OACA,QACA,UACA,SACF,CAAC,EAED,KAAM,EAAAA,QAAU,MAAM,CAAC,KAAM,KAAM,KAAM,OAAQ,KAAM,IAAI,CAAC,EAE5D,SAAU,EAAAA,QAAU,KAEpB,QAAS,EAAAA,QAAU,KAEnB,MAAO,EAAAA,QAAU,QAEjB,KAAM,EAAAA,QAAU,OAClB,EAEAd,EAAO,YAAc","sourcesContent":["//@ts-nocheck\nimport { variantProps } from \"classname-variants/react\";\nimport { twMerge } from \"tailwind-merge\";\nimport PropTypes from \"prop-types\";\n\nconst buttonProps = variantProps({\n  base: \"group flex items-stretch items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-none rounded-lg\",\n  variants: {\n    color: {\n      default:\n        \"focus:outline-none text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800 rounded-lg focus:ring-2\",\n      dark: \"enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700\",\n      failure:\n        \"enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900\",\n      gray: \"border border-gray-200 enabled:hover:bg-gray-100 focus:ring-blue-700 focus:text-blue-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:enabled:hover:text-white dark:enabled:hover:bg-gray-700 focus:ring-2\",\n      info: \"enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800\",\n      light:\n        \"focus:ring-4 focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700\",\n      success:\n        \"enabled:hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800\",\n      warning:\n        \"enabled:hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900\",\n    },\n    disabled: {\n      true: \"cursor-not-allowed opacity-50\",\n      false: \"\",\n    },\n    outline: {\n      true: \"border\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        color: \"dark\",\n        outline: true,\n      },\n      className: \"text-gray-800 border-gray-800 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"dark\",\n        outline: false,\n      },\n      className: \"border-0 text-white bg-gray-800\",\n    },\n    {\n      variants: {\n        color: \"failure\",\n        outline: true,\n      },\n      className: \"text-red-700 border-red-700 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"failure\",\n        outline: false,\n      },\n      className: \"border-0 text-white bg-red-700\",\n    },\n    {\n      variants: {\n        color: \"info\",\n        outline: true,\n      },\n      className: \"text-blue-700 border-blue-700 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"info\",\n        outline: false,\n      },\n      className: \"text-white bg-blue-700\",\n    },\n    {\n      variants: {\n        color: \"success\",\n        outline: true,\n      },\n      className: \"text-green-700 border-green-700 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"success\",\n        outline: false,\n      },\n      className: \"text-white bg-green-700\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        outline: true,\n      },\n      className: \"text-yellow-400 border-yellow-400 hover:text-white\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        outline: false,\n      },\n      className: \"text-white bg-yellow-400\",\n    },\n    {\n      variants: {\n        color: \"gray\",\n        outline: true,\n      },\n      className:\n        \"text-gray-900 bg-white border border-gray-200\",\n    },\n    {\n      variants: {\n        color: \"gray\",\n        outline: false,\n      },\n      className: \"text-gray-900 bg-gray-200 border border-gray-200\",\n    },\n    {\n      variants: {\n        color: \"light\",\n        outline: true,\n      },\n      className:\n        \"text-white border border-white hover:brightness-90\",\n    },\n    {\n      variants: {\n        color: \"light\",\n        outline: false,\n      },\n      className: \"text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100\",\n    },\n  ],\n});\n\nconst sizes = Object.freeze({\n  xs: \"text-xs px-2 py-1\",\n  sm: \"text-sm px-[12px] py-1.5\",\n  md: \"text-sm px-[16px] py-2\",\n  mdbs: \"text-sm px-[12px] py-[8px]\",\n  lg: \"text-base px-[20px] py-2.5\",\n  xl: \"text-base px-6 py-[12px]\",\n});\n\nexport function Button({\n  color = \"default\",\n  disabled,\n  outline,\n  size = \"md\",\n  children,\n  className,\n  ...props\n}) {\n  return (\n    <button\n      {...buttonProps({ color, disabled, outline, className })}\n      {...props}\n      disabled={disabled}\n    >\n      <span\n        className={twMerge(\n          \"flex items-center justify-center rounded-md transition-all duration-200\",\n          sizes[size],\n          className\n        )}\n      >\n        {children}\n      </span>\n    </button>\n  );\n}\n\nButton.propTypes = {\n  /** String for color of button */\n  color: PropTypes.oneOf([\n    \"default\",\n    \"dark\",\n    \"failure\",\n    \"gray\",\n    \"info\",\n    \"light\",\n    \"success\",\n    \"warning\",\n  ]),\n  /** String to determine the size of the badge. \"xs, sm, md, mdbs, lg, xl\" */\n  size: PropTypes.oneOf([\"xs\", \"sm\", \"md\", \"mdbs\", \"lg\", \"xl\"]),\n  /** Bool to disable button */\n  disabled: PropTypes.bool,\n  /** Bool to outline button */\n  outline: PropTypes.bool,\n  /** element for addon on button */\n  addon: PropTypes.element,\n  /** element for icon on button */\n  icon: PropTypes.element,\n};\n\nButton.displayName = \"Button\";\n"]}

package/dist/chunk-LQKVFBLU.js

@@ -1,10 +0,0 @@
-import { a } from './chunk-6LHL364H.js';
-import { e, b, a as a$1 } from './chunk-Z4LPO673.js';
-import { forwardRef, useState, useImperativeHandle, useEffect, useRef, useCallback } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-var r=e(a(),1);function I(w,a,t){let l=useRef(0),s=useRef(null),u=useCallback(w,t);useEffect(()=>(l.current===0?l.current=1:s.current=setTimeout(()=>{u();},a),()=>{clearTimeout(s.current);}),[u,a]);}var R=forwardRef(function({id:a,categories:t=[],delay:l=1500,placeholder:s="Enter a keyword to search...",callback:u,disabled:$=!1,initialValue:c="",additionalClasses:x=""},C){let[n,y]=useState({text:null,category:(t==null?void 0:t.length)>0?t[0]:null}),[N,b$1]=useState(c),[S,h]=useState(!0);useImperativeHandle(C,()=>({clear:()=>{b$1(""),y(b(a$1({},n),{text:""}));},removeFocus:()=>{document.getElementById(`${a}-search-input`).blur();}}));let D=e=>{b$1(e.target.value),y(b(a$1({},n),{text:e.target.value}));},E=(e,d)=>{e.preventDefault(),y(b(a$1({},n),{category:d})),h(!0);},T=e=>{(e.charCode||e.keyCode)===13&&e.preventDefault();};I(()=>{u(n);},l,[n.text,n.category]),useEffect(()=>{c!==N&&b$1(c);},[c]);let p=useRef(null);useEffect(()=>{let e=d=>{p.current&&!p.current.contains(d.target)&&h(!0);};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0);}},[]);let L=()=>jsxs(Fragment,{children:[jsxs("button",{id:`${a}-dropdown-button`,className:"absolute right-0 top-0 z-10 inline-flex flex-shrink-0 items-center rounded-r-lg border border-gray-300 bg-white px-4 py-2 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:()=>h(!S),children:[n.category.display,jsx("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",children:jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})]}),jsx("div",{id:`${a}-dropdown`,ref:p,className:`z-10 ${S?"hidden":""} absolute right-0 w-44 divide-y divide-gray-100 rounded-r-lg bg-white shadow dark:bg-gray-700`,children:jsx("ul",{className:"py-2 text-sm text-gray-700 dark:text-gray-200","aria-labelledby":"dropdown-button",children:(t||[]).map(e=>jsx("li",{className:"block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer",onClick:d=>E(d,e),children:e.display},`gst-${e.display}`))})})]});return jsx("div",{className:`flex ${x||""}`,children:jsxs("div",{className:"relative w-full",children:[jsx("input",{ref:C,placeholder:s,value:N,"aria-label":"search","aria-describedby":"Search",onChange:D,onKeyDown:T,disabled:$,id:`${a}-search-input`,className:"block w-full rounded-lg border border-r-2 border-gray-300 border-r-gray-300 bg-gray-50 p-2 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"}),(t==null?void 0:t.length)>0&&L()]})})});R.propTypes={categories:r.default.arrayOf(r.default.shape({display:r.default.string.isRequired,value:r.default.oneOfType([r.default.string,r.default.number]).isRequired})),delay:r.default.number,placeholder:r.default.string,callback:r.default.func.isRequired,disabled:r.default.bool,initialValue:r.default.string,additionalClasses:r.default.string};R.displayName="Search";
-
-export { R as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-LQKVFBLU.js.map

package/dist/chunk-LQKVFBLU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/search/search.tsx"],"names":["import_prop_types","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Fragment","jsx","jsxs","useDebounceEffect","effect","delay","deps","instanceRef","handlerRef","callback","Search","id","categories","placeholder","disabled","initialValue","additionalClasses","reference","state","setState","currentSearchValue","setCurrentSearchValue","hidden","setHidden","__spreadProps","__spreadValues","handleSearchChange","handleTypeChange","selection","handleKeyDown","ref","handleClickOutside","e","renderDropdown","x","PropTypes"],"mappings":"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","sourcesContent":["//@ts-nocheck\nimport PropTypes from \"prop-types\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nfunction useDebounceEffect(effect, delay, deps) {\n  const instanceRef = useRef(0);\n  const handlerRef = useRef(null);\n  const callback = useCallback(effect, deps);\n\n  useEffect(() => {\n    if (instanceRef.current === 0) {\n      instanceRef.current = 1;\n    } else {\n      handlerRef.current = setTimeout(() => {\n        callback();\n      }, delay);\n    }\n    return () => {\n      clearTimeout(handlerRef.current);\n    };\n  }, [callback, delay]);\n}\n\nexport const Search = forwardRef(function Search(\n  {\n    id,\n    categories = [],\n    delay = 1500,\n    placeholder = \"Enter a keyword to search...\",\n    callback,\n    disabled = false,\n    initialValue = \"\",\n    additionalClasses= \"\",\n  },\n  reference\n) {\n  // Create state based on config\n  const [state, setState] = useState({\n    text: null,\n    category: categories?.length > 0 ? categories[0] : null,\n  });\n  const [currentSearchValue, setCurrentSearchValue] = useState(initialValue);\n  const [hidden, setHidden] = useState(true);\n\n  useImperativeHandle(reference, () => ({\n    clear: () => {\n      setCurrentSearchValue(\"\");\n      setState({ ...state, text: \"\" });\n    },\n    removeFocus: () => {\n      document.getElementById(`${id}-search-input`).blur();\n    },\n  }));\n\n  const handleSearchChange = (e) => {\n    setCurrentSearchValue(e.target.value);\n    setState({ ...state, text: e.target.value });\n  };\n\n  const handleTypeChange = (e, selection) => {\n    e.preventDefault();\n    setState({ ...state, category: selection });\n    setHidden(true);\n  };\n\n  const handleKeyDown = (e) => {\n    if ((e.charCode || e.keyCode) === 13) {\n      e.preventDefault();\n    }\n  };\n\n  useDebounceEffect(\n    () => {\n      callback(state);\n    },\n    delay,\n    [state.text, state.category]\n  );\n  useEffect(() => {\n    if (initialValue !== currentSearchValue)\n      setCurrentSearchValue(initialValue);\n  }, [initialValue]);\n\n  const ref = useRef(null);\n  useEffect(() => {\n    const handleClickOutside = (e) => {\n      if (ref.current && !ref.current.contains(e.target)) {\n        setHidden(true);\n      }\n    };\n\n    document.addEventListener(\"click\", handleClickOutside, true);\n    return () => {\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n  }, []);\n\n  const renderDropdown = () => (\n    <>\n      <button\n        id={`${id}-dropdown-button`}\n        className=\"absolute right-0 top-0 z-10 inline-flex flex-shrink-0 items-center rounded-r-lg border border-gray-300 bg-white px-4 py-2 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\"\n        type=\"button\"\n        onClick={() => setHidden(!hidden)}\n      >\n        {state.category.display}\n        <svg\n          className=\"ml-2.5 h-2.5 w-2.5\"\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 10 6\"\n        >\n          <path\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"2\"\n            d=\"m1 1 4 4 4-4\"\n          />\n        </svg>\n      </button>\n      <div\n        id={`${id}-dropdown`}\n        ref={ref}\n        className={`z-10 ${\n          hidden ? \"hidden\" : \"\"\n        } absolute right-0 w-44 divide-y divide-gray-100 rounded-r-lg bg-white shadow dark:bg-gray-700`}\n      >\n        <ul\n          className=\"py-2 text-sm text-gray-700 dark:text-gray-200\"\n          aria-labelledby=\"dropdown-button\"\n        >\n          {(categories || []).map((x) => {\n            return (\n              <li \n                key={`gst-${x.display}`} \n                className=\"block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer\"\n                onClick={(e) => handleTypeChange(e, x)}\n              >\n                {x.display}\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    </>\n  );\n\n  return (\n    <div className={`flex ${additionalClasses ? additionalClasses : ''}`}>\n      <div className=\"relative w-full\">\n        <input\n          ref={reference}\n          placeholder={placeholder}\n          value={currentSearchValue}\n          aria-label=\"search\"\n          aria-describedby=\"Search\"\n          onChange={handleSearchChange}\n          onKeyDown={handleKeyDown}\n          disabled={disabled}\n          id={`${id}-search-input`}\n          className=\"block w-full rounded-lg border border-r-2 border-gray-300 border-r-gray-300 bg-gray-50 p-2 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\"\n        />\n        {categories?.length > 0 && renderDropdown()}\n      </div>\n    </div>\n  );\n});\n\nSearch.propTypes = {\n  /** Optional List of categories that the search term can be applied to. If supplied\n   *  the categories appear on the far right of the search input in a drop down list, otherwise it is hidden.\n   */\n  categories: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * The text shown to the user in the dropdown.\n       */\n      display: PropTypes.string.isRequired,\n      /**\n       * The value set when the item is selected.\n       */\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n        .isRequired,\n    })\n  ),\n  /**\n   * The delay between requests made to the server when typing in milliseconds.\n   */\n  delay: PropTypes.number,\n  /**\n   * Optional placeholder for the search field.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * Callback with the search object for use in the application the format is:\n   * { text: '', category: {display:\"\", value:\"\"} }. Note: category is null if no options are provided.\n   */\n  callback: PropTypes.func.isRequired,\n  /**\n   * If set to true, the text in the search box cannot be changed\n   */\n  disabled: PropTypes.bool,\n  /**\n   * If set, will be the value in the search bar when it first loads.\n   * If not set, the search bar will just be empty.\n   */\n  initialValue: PropTypes.string,\n  /**\n   * Any additional classes to apply to the outside div of the search component\n   */\n  additionalClasses: PropTypes.string\n};\n\nSearch.displayName = \"Search\";\n"]}

package/dist/chunk-WL2NTX3A.js

@@ -1,9 +0,0 @@
-import s from 'clsx';
-import { useMemo } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-function n(t,d=0){return [...Array(t).keys()].map(r=>r+d)}function w({pageSize:t,total:d,current:r,onChange:l,loading:h}){let b=Math.min((r-1)*t+1,d),p=Math.min(b+t-1,d),a=Math.ceil(d/t),v=useMemo(()=>a>5&&r>=4,[a,r]),y=useMemo(()=>a>5&&r<a-3,[a,r]),g=[];return a<=5?g=n(a,1):y?g=n(5,Math.max(r-2,1)):g=n(5,a-4),jsx("div",{id:"paginationControl",className:"w-full",children:jsx("div",{className:"relative overflow-hidden rounded-b-lg bg-white  dark:bg-gray-800",children:jsxs("nav",{className:" flex flex-wrap items-start justify-between gap-x-4 gap-y-2 md:items-center","aria-label":"Table navigation",children:[jsxs("div",{className:"flex w-full justify-between md:hidden",children:[jsxs("button",{id:"btnPreviousM",disabled:r===1,className:s(r===1&&"cursor-not-allowed","ml-0 flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 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:()=>l(r-1,t),children:[jsx("svg",{className:"h-5 w-5","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",clipRule:"evenodd"})}),jsx("span",{className:"leading-none",children:"Previous"})]}),jsxs("button",{id:"btnNextM",disabled:r===a,className:s(r===a&&"cursor-not-allowed","flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 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:()=>l(r+1,t),children:[jsx("span",{children:"Next"}),jsx("svg",{className:"h-5 w-5","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"})})]})]}),jsxs("div",{className:"hidden items-center w-full justify-between md:flex",children:[jsx("div",{id:"showingSection",className:"text-sm font-normal text-gray-500 dark:text-gray-400",children:!h&&jsxs("span",{className:"text-gray-500 dark:text-white",children:["Showing ",jsx("span",{className:"text-gray-900 font-semibold",children:`${d===0?0:b} - ${p}`})," ","of"," ",jsx("span",{className:"text-gray-900 font-semibold",children:d})]})}),jsxs("ul",{className:"hidden items-stretch -space-x-px md:inline-flex",children:[jsx("li",{children:jsxs("button",{id:"btnPrevious",disabled:r===1,className:s(r===1&&"cursor-not-allowed","ml-0 flex h-full items-center justify-center rounded-l-lg border border-gray-300 bg-white px-[8px] lg:px-3 py-1.5 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:()=>l(r-1,t),children:[jsx("span",{className:"sr-only",children:"Previous"}),jsx("svg",{className:"h-5 w-5","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",clipRule:"evenodd"})})]})}),v&&jsxs(Fragment,{children:[jsx("li",{children:jsx("button",{id:"btnPage1",className:s(r===1&&"cursor-not-allowed","flex items-center justify-center border border-gray-300 bg-white px-[8px] lg: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:()=>l(1,t),children:"1"})}),jsx("li",{className:"flex cursor-default items-center justify-center border border-gray-300 bg-white px-[8px] lg:px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",children:"..."})]}),g.map(i=>jsx("li",{children:jsx("button",{id:`btnPage${i}`,onClick:()=>l(i,t),className:s("hidden items-center justify-center border px-[8px] lg:px-3 py-2 text-sm leading-tight",i===r?"md:flex 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":"lg:flex 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"),children:i})},i)),y&&jsxs(Fragment,{children:[jsx("li",{className:"flex cursor-default items-center justify-center border border-gray-300 bg-white px-[8px] lg:px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",children:"..."}),jsx("li",{children:jsx("button",{id:"btnLast",className:"flex items-center justify-center border border-gray-300 bg-white px-[8px] lg: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:()=>l(a,t),children:a})})]}),jsx("li",{children:jsxs("button",{id:"btnNext",disabled:r===a,onClick:()=>l(r+1,t),className:s(r===a&&"cursor-not-allowed","flex h-full items-center justify-center rounded-r-lg border border-gray-300 bg-white px-[8px] lg:px-3 py-1.5 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"),children:[jsx("span",{className:"sr-only",children:"Next"}),jsx("svg",{className:"h-5 w-5","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:jsx("path",{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"})})]})})]}),jsxs("div",{id:"rowsPerPageSection",className:"flex items-center space-x-3",children:[jsx("label",{htmlFor:"rows",className:"text-sm font-normal text-gray-500 dark:text-gray-400 mb-0",children:"Show"}),jsxs("select",{id:"rows",className:"block rounded-lg border border-gray-300 bg-gray-50 py-1.5 pl-3.5 pr-6 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",onChange:i=>l(1,Number(i.target.value)),value:t,children:[jsx("option",{value:10,children:"10"}),jsx("option",{value:25,children:"25"}),jsx("option",{value:50,children:"50"}),jsx("option",{value:100,children:"100"})]})]})]})]})})})}
-
-export { w as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-WL2NTX3A.js.map

package/dist/chunk-WL2NTX3A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pagination/pagination.tsx"],"names":["clsx","useMemo","Fragment","jsx","jsxs","range","size","startAt","i","Pagination","pageSize","total","current","onChange","loading","from","to","totalPages","showJumpPrev","showJumpNext","pages","page","e"],"mappings":"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","sourcesContent":["import clsx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport type PaginationProps = {\n  pageSize: number;\n  total: number;\n  current: number;\n  onChange: (page: number, pageSize: number) => void;\n  loading?: boolean;\n};\n\nfunction range(size: number, startAt = 0): number[] {\n  return [...Array(size).keys()].map((i) => i + startAt);\n}\n\nexport function Pagination({\n  pageSize,\n  total,\n  current,\n  onChange,\n  loading,\n}: PaginationProps) {\n  // Calculate the values that are displayed\n  const from = Math.min((current - 1) * pageSize + 1, total);\n  const to = Math.min(from + pageSize - 1, total);\n  const totalPages = Math.ceil(total / pageSize);\n\n  const showJumpPrev = useMemo(() => {\n    return totalPages > 5 && current >= 4;\n  }, [totalPages, current]);\n\n  const showJumpNext = useMemo(() => {\n    return totalPages > 5 && current < totalPages - 3;\n  }, [totalPages, current]);\n\n  let pages: number[] = [];\n\n  if (totalPages <= 5) {\n    pages = range(totalPages, 1);\n  } else if (showJumpNext) {\n    pages = range(5, Math.max(current - 2, 1));\n  } else {\n    pages = range(5, totalPages - 4);\n  }\n\n  return (\n    <div id=\"paginationControl\" className=\"w-full\">\n      <div className=\"relative overflow-hidden rounded-b-lg bg-white  dark:bg-gray-800\">\n        <nav\n          className=\" flex flex-wrap items-start justify-between gap-x-4 gap-y-2 md:items-center\"\n          aria-label=\"Table navigation\"\n        >\n          <div className=\"flex w-full justify-between md:hidden\">\n            <button\n              id=\"btnPreviousM\"\n              disabled={current === 1}\n              className={clsx(\n                current === 1 && \"cursor-not-allowed\",\n                \"ml-0 flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 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\"\n              )}\n              onClick={() => onChange(current - 1, pageSize)}\n            >\n              <svg\n                className=\"h-5 w-5\"\n                aria-hidden=\"true\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 20 20\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n                  clipRule=\"evenodd\"\n                ></path>\n              </svg>\n              <span className=\"leading-none\">Previous</span>\n            </button>\n\n            <button\n              id=\"btnNextM\"\n              disabled={current === totalPages}\n              className={clsx(\n                current === totalPages && \"cursor-not-allowed\",\n                \"flex h-full items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 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\"\n              )}\n              onClick={() => onChange(current + 1, pageSize)}\n            >\n              <span>Next</span>\n              <svg\n                className=\"h-5 w-5\"\n                aria-hidden=\"true\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 20 20\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n                  clipRule=\"evenodd\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n          <div className=\"hidden items-center w-full justify-between md:flex\">\n            <div id=\"showingSection\" className=\"text-sm font-normal text-gray-500 dark:text-gray-400\">\n              {!loading && (\n                <span className=\"text-gray-500 dark:text-white\">\n                    Showing <span className=\"text-gray-900 font-semibold\">{`${total === 0 ? 0 : from} - ${to}`}</span>{\" \"}of{\" \"}\n                  <span className=\"text-gray-900 font-semibold\">\n                    {total}\n                  </span>\n                </span>\n              )}\n            </div>\n            <ul className=\"hidden items-stretch -space-x-px md:inline-flex\">\n              <li>\n                <button\n                  id=\"btnPrevious\"\n                  disabled={current === 1}\n                  className={clsx(\n                    current === 1 && \"cursor-not-allowed\",\n                    \"ml-0 flex h-full items-center justify-center rounded-l-lg border border-gray-300 bg-white px-[8px] lg:px-3 py-1.5 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\"\n                  )}\n                  onClick={() => onChange(current - 1, pageSize)}\n                >\n                  <span className=\"sr-only\">Previous</span>\n                  <svg\n                    className=\"h-5 w-5\"\n                    aria-hidden=\"true\"\n                    fill=\"currentColor\"\n                    viewBox=\"0 0 20 20\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n                      clipRule=\"evenodd\"\n                    ></path>\n                  </svg>\n                </button>\n              </li>\n              {showJumpPrev && (\n                <>\n                  <li>\n                    <button\n                      id=\"btnPage1\"\n                      className={clsx(\n                        current === 1 && \"cursor-not-allowed\",\n                        \"flex items-center justify-center border border-gray-300 bg-white px-[8px] lg: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\"\n                      )}\n                      onClick={() => onChange(1, pageSize)}\n                    >\n                      1\n                    </button>\n                  </li>\n                  <li className=\"flex cursor-default items-center justify-center border border-gray-300 bg-white px-[8px] lg:px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400\">\n                    ...\n                  </li>\n                </>\n              )}\n              {pages.map((page) => (\n                <li key={page}>\n                  <button\n                    id={`btnPage${page}`}\n                    onClick={() => onChange(page, pageSize)}\n                    className={clsx(\n                      \"hidden items-center justify-center border px-[8px] lg:px-3 py-2 text-sm leading-tight\",\n                      page === current\n                        ? \"md:flex 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\"\n                        : \"lg:flex 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\"\n                    )}\n                  >\n                    {page}\n                  </button>\n                </li>\n              ))}\n              {showJumpNext && (\n                <>\n                  <li className=\"flex cursor-default items-center justify-center border border-gray-300 bg-white px-[8px] lg:px-3 py-2 text-sm leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400\">\n                    ...\n                  </li>\n                  <li>\n                    <button\n                      id=\"btnLast\"\n                      className=\"flex items-center justify-center border border-gray-300 bg-white px-[8px] lg: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\"\n                      onClick={() => onChange(totalPages, pageSize)}\n                    >\n                      {totalPages}\n                    </button>\n                  </li>\n                </>\n              )}\n              <li>\n                <button\n                  id=\"btnNext\"\n                  disabled={current === totalPages}\n                  onClick={() => onChange(current + 1, pageSize)}\n                  className={clsx(\n                    current === totalPages && \"cursor-not-allowed\",\n                    \"flex h-full items-center justify-center rounded-r-lg border border-gray-300 bg-white px-[8px] lg:px-3 py-1.5 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\"\n                  )}\n                >\n                  <span className=\"sr-only\">Next</span>\n                  <svg\n                    className=\"h-5 w-5\"\n                    aria-hidden=\"true\"\n                    fill=\"currentColor\"\n                    viewBox=\"0 0 20 20\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n                      clipRule=\"evenodd\"\n                    ></path>\n                  </svg>\n                </button>\n              </li>\n            </ul>\n            <div id=\"rowsPerPageSection\" className=\"flex items-center space-x-3\">\n              <label\n                htmlFor=\"rows\"\n                className=\"text-sm font-normal text-gray-500 dark:text-gray-400 mb-0\"\n              >\n                Show\n              </label>\n              <select\n                id=\"rows\"\n                className=\"block rounded-lg border border-gray-300 bg-gray-50 py-1.5 pl-3.5 pr-6 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500\"\n                onChange={(e) => onChange(1, Number(e.target.value))}\n                value={pageSize}\n              >\n                <option value={10}>10</option>\n                <option value={25}>25</option>\n                <option value={50}>50</option>\n                <option value={100}>100</option>\n              </select>\n              \n            </div>\n          \n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n}\n"]}