@digitalpromise/design 4.3.0 → 4.5.1

package/dist/components/forms/dropzone.d.ts

@@ -4,7 +4,7 @@ interface DropzoneProps extends Omit<ComponentPropsWithRef<"input">, "type">, Fo
     instructions?: string;
     remover?: ReactElement;
 }
-export declare const Dropzone: ({ children, error, instructions, className, onChange: userOnChange, remover, ...props }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropzone: ({ children, error, instructions, className, ref: userRef, onChange: userOnChange, remover, ...props }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
 type SingleImageDropzoneProps = Omit<DropzoneProps, "multiple" | "accept" | "children">;
 export declare const SingleImageDropzone: (props: SingleImageDropzoneProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/forms/dropzone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.d.ts","sourceRoot":"","sources":["../../../src/components/forms/dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,YAAY,EAGZ,KAAK,qBAAqB,EAC3B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,UAAU,aACR,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EAClD,cAAc;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,GAAI,yFAQtB,aAAa,4CAiHf,CAAC;AAEF,KAAK,wBAAwB,GAAG,IAAI,CAClC,aAAa,EACb,UAAU,GAAG,QAAQ,GAAG,UAAU,CACnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CAelE,CAAC"}
+{"version":3,"file":"dropzone.d.ts","sourceRoot":"","sources":["../../../src/components/forms/dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,YAAY,EAGZ,KAAK,qBAAqB,EAC3B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,UAAU,aACR,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EAClD,cAAc;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,GAAI,uGAStB,aAAa,4CA2Hf,CAAC;AAEF,KAAK,wBAAwB,GAAG,IAAI,CAClC,aAAa,EACb,UAAU,GAAG,QAAQ,GAAG,UAAU,CACnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CAelE,CAAC"}

package/dist/components/forms/index.d.ts

@@ -5,5 +5,6 @@ import { FormField } from "./form-field";
 import { Select } from "./select";
 import { TextInput } from "./text-input";
 import { Textarea } from "./textarea";
-export { Checkbox, Dropzone, SingleImageDropzone, Form, FormField, Select, Textarea, TextInput, };
+import { Label } from "./label";
+export { Checkbox, Dropzone, SingleImageDropzone, Form, FormField, Label, Select, Textarea, TextInput, };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,SAAS,GACV,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACV,CAAC"}

package/dist/components/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAIA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,KAAK,EACL,YAAqB,GACtB,EAAE,eAAe,2CAoHjB"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,KAAK,EACL,YAAqB,GACtB,EAAE,eAAe,2CA+GjB"}

package/dist/components/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/components/search.tsx"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,WAAW,EACX,SAAS,EACT,UAAU,EACV,KAAK,EACL,QAAQ,EACR,SAAgB,EAChB,EAAa,EACb,QAAc,GACf,EAAE,WAAW,2CA+Fb"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/components/search.tsx"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,WAAW,EACX,SAAS,EACT,UAAU,EACV,KAAK,EACL,QAAQ,EACR,SAAgB,EAChB,EAAa,EACb,QAAc,GACf,EAAE,WAAW,2CA4Fb"}

package/dist/forms.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),g=require("./icon-DjGt_3uE.cjs"),I=({error:a,className:r,label:t,...l})=>{const n=l.id||l.name;return e.jsxs("div",{className:"flex gap-3 items-center",children:[e.jsx("input",{type:"checkbox",className:`transition-colors appearance-none cursor-pointer bg-neutral-1 border-2 border-gray-5 rounded-sm w-5 h-5 grid place-content-center hover:bg-gray-1 hover:border-neutral-5 before:hidden before:content-['\\2713'] before:text-neutral-1 before:font-bold checked:bg-blue-3 checked:border-blue-4 checked:hover:bg-blue-4 checked:hover:border-blue-5 checked:before:inline-block ${r??""}`.trim(),...l,id:n}),e.jsx("label",{"data-error":a||null,htmlFor:n,className:"data-error:text-red-4",children:t})]})},p=({children:a,error:r,instructions:t,className:l,onChange:n,remover:d,...i})=>{const s=u.useRef(null),[v,m]=u.useState(!1),[b,j]=u.useState([]),h=b.length>0,w=o=>{o.preventDefault(),m(!1),s.current&&o.dataTransfer.files.length>0&&(s.current.files=o.dataTransfer.files,o.dataTransfer.clearData(),s.current.dispatchEvent(new Event("change",{bubbles:!0})))},y=o=>{n&&n(o);const k=Array.from(o.currentTarget.files??[]).map(c=>{if(c.type.includes("image")){const F=URL.createObjectURL(c);return e.jsx("img",{alt:"",src:F,className:"max-h-full max-w-full object-contain"},c.name)}else return e.jsx("p",{children:c.name},c.name)});j(k)},N=()=>{s.current&&(s.current.value="",s.current.files=null,s.current.dispatchEvent(new Event("change",{bubbles:!0})))},x={onClick:o=>{o.preventDefault(),N()}},D=d?u.cloneElement(d,x):e.jsx(g.Button,{type:"button",variant:"tertiary",state:"decolor",...x,children:"Remove Files"}),f=o=>{o.preventDefault(),m(!0)};return e.jsxs("div",{children:[e.jsxs("label",{"data-showing-preview":h||null,"data-is-dragging":v||null,onDragLeave:()=>m(!1),onDragEnter:f,onDragOver:f,onDrop:w,htmlFor:i.id,"data-error":r||null,className:`flex items-center justify-center rounded-lg border border-dashed border-blue-3 px-7 py-8 font-medium text-blue-3 data-showing-preview:w-max data-showing-preview:border-gray-3 data-showing-preview:text-gray-3 data-is-dragging:border-blue-5 data-is-dragging:bg-blue-1 data-showing-preview:py-5 data-is-dragging:text-blue-4 ${l??""} cursor-default`.trim(),children:[e.jsx("input",{...i,ref:s,onChange:y,className:"sr-only",type:"file"}),h?e.jsxs(e.Fragment,{children:[e.jsx("aside",{className:"grid grid-cols-2 grid-rows-2 w-11 h-11",children:b}),D]}):a??e.jsxs("p",{className:"pointer-events-none select-none",children:[e.jsx(g.Icon,{name:"Upload"})," Click or drop to upload"]})]}),t&&e.jsx("p",{className:"font-light leading-6",children:t})]})},T=a=>{const r=e.jsx(g.Button,{type:"button",variant:"tertiary",state:"decolor",children:"Remove Image"});return e.jsx(p,{...a,multiple:!1,remover:r,accept:"image/png image/svg+xml"})},q=({noValidate:a,className:r,...t})=>e.jsx("form",{className:`container flex flex-col gap-7 max-w-[45rem] ${r??""}`.trim(),...t,noValidate:a??!0}),C=({className:a,label:r,required:t,error:l,...n})=>e.jsx("label",{"data-required":t||null,"data-error":l||null,...n,className:`text-base font-medium leading-5 data-error:text-red-4 data-required:after:content-['*'] data-required:after:text-red-4 data-required:after:ml-1 ${a??""}`.trim(),children:r}),S=({Input:a,inputProps:r,errorMessage:t,label:l,labelClassname:n})=>{const d=!!t,i=r?.id||r?.name;return e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx(C,{label:l,className:n,htmlFor:i,required:r?.required,error:d}),e.jsx(a,{error:d,...r,id:i}),t&&e.jsx("p",{className:"text-red-4",children:t})]})},E=({options:a,error:r,className:t,...l})=>e.jsx("select",{...l,"data-error":r||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${t??""}`.trim(),children:a.map(n=>e.jsx("option",{className:"hover:bg-gray-3",value:n.value,children:n.label},[l.name,n.label].join()))}),R=({error:a,className:r,...t})=>e.jsx("input",{"data-error":a||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${r??""}`.trim(),...t,type:"text"}),$=({className:a,error:r,...t})=>e.jsx("textarea",{"data-error":r||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${a??""}`.trim(),...t});exports.Checkbox=I;exports.Dropzone=p;exports.Form=q;exports.FormField=S;exports.Select=E;exports.SingleImageDropzone=T;exports.TextInput=R;exports.Textarea=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),g=require("./icon-DjGt_3uE.cjs"),q=({error:a,className:r,label:t,...o})=>{const n=o.id||o.name;return e.jsxs("div",{className:"flex gap-3 items-center",children:[e.jsx("input",{type:"checkbox",className:`transition-colors appearance-none cursor-pointer bg-neutral-1 border-2 border-gray-5 rounded-sm w-5 h-5 grid place-content-center hover:bg-gray-1 hover:border-neutral-5 before:hidden before:content-['\\2713'] before:text-neutral-1 before:font-bold checked:bg-blue-3 checked:border-blue-4 checked:hover:bg-blue-4 checked:hover:border-blue-5 checked:before:inline-block ${r??""}`.trim(),...o,id:n}),e.jsx("label",{"data-error":a||null,htmlFor:n,className:"data-error:text-red-4",children:t})]})},v=({children:a,error:r,instructions:t,className:o,ref:n,onChange:i,remover:d,...b})=>{const s=u.useRef(null),[w,m]=u.useState(!1),[h,y]=u.useState([]),x=h.length>0,N=l=>{l.preventDefault(),m(!1),s.current&&l.dataTransfer.files.length>0&&(s.current.files=l.dataTransfer.files,l.dataTransfer.clearData(),s.current.dispatchEvent(new Event("change",{bubbles:!0})))},D=l=>{i&&i(l);const I=Array.from(l.currentTarget.files??[]).map(c=>{if(c.type.includes("image")){const T=URL.createObjectURL(c);return e.jsx("img",{alt:"",src:T,className:"max-h-full max-w-full object-contain"},c.name)}else return e.jsx("p",{children:c.name},c.name)});y(I)},F=()=>{s.current&&(s.current.value="",s.current.files=null,s.current.dispatchEvent(new Event("change",{bubbles:!0})))},f={onClick:l=>{l.preventDefault(),F()}},k=d?u.cloneElement(d,f):e.jsx(g.Button,{type:"button",variant:"tertiary",state:"decolor",...f,children:"Remove Files"}),p=l=>{l.preventDefault(),m(!0)};return e.jsxs("div",{children:[e.jsxs("label",{"data-showing-preview":x||null,"data-is-dragging":w||null,onDragLeave:()=>m(!1),onDragEnter:p,onDragOver:p,onDrop:N,htmlFor:b.id,"data-error":r||null,className:`flex items-center justify-center rounded-lg border border-dashed border-blue-3 px-7 py-8 font-medium text-blue-3 data-showing-preview:w-max data-showing-preview:border-gray-3 data-showing-preview:text-gray-3 data-is-dragging:border-blue-5 data-is-dragging:bg-blue-1 data-showing-preview:py-5 data-is-dragging:text-blue-4 ${o??""} cursor-default`.trim(),children:[e.jsx("input",{...b,ref:l=>{n&&(n instanceof Function?n(l):n.current=l),s.current=l},onChange:D,className:"sr-only",type:"file"}),x?e.jsxs(e.Fragment,{children:[e.jsx("aside",{className:"grid grid-cols-2 grid-rows-2 w-11 h-11",children:h}),k]}):a??e.jsxs("p",{className:"pointer-events-none select-none",children:[e.jsx(g.Icon,{name:"Upload"})," Click or drop to upload"]})]}),t&&e.jsx("p",{className:"font-light leading-6",children:t})]})},C=a=>{const r=e.jsx(g.Button,{type:"button",variant:"tertiary",state:"decolor",children:"Remove Image"});return e.jsx(v,{...a,multiple:!1,remover:r,accept:"image/png image/svg+xml"})},S=({noValidate:a,className:r,...t})=>e.jsx("form",{className:`container flex flex-col gap-7 max-w-[45rem] ${r??""}`.trim(),...t,noValidate:a??!0}),j=({className:a,label:r,required:t,error:o,...n})=>e.jsx("label",{"data-required":t||null,"data-error":o||null,...n,className:`text-base font-medium leading-5 data-error:text-red-4 data-required:after:content-['*'] data-required:after:text-red-4 data-required:after:ml-1 ${a??""}`.trim(),children:r}),E=({Input:a,inputProps:r,errorMessage:t,label:o,labelClassname:n})=>{const i=!!t,d=r?.id||r?.name;return e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx(j,{label:o,className:n,htmlFor:d,required:r?.required,error:i}),e.jsx(a,{error:i,...r,id:d}),t&&e.jsx("p",{className:"text-red-4",children:t})]})},$=({options:a,error:r,className:t,...o})=>e.jsx("select",{...o,"data-error":r||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${t??""}`.trim(),children:a.map(n=>e.jsx("option",{className:"hover:bg-gray-3",value:n.value,children:n.label},[o.name,n.label].join()))}),L=({error:a,className:r,...t})=>e.jsx("input",{"data-error":a||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${r??""}`.trim(),...t,type:"text"}),z=({className:a,error:r,...t})=>e.jsx("textarea",{"data-error":r||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${a??""}`.trim(),...t});exports.Checkbox=q;exports.Dropzone=v;exports.Form=S;exports.FormField=E;exports.Label=j;exports.Select=$;exports.SingleImageDropzone=C;exports.TextInput=L;exports.Textarea=z;

package/dist/forms.d.ts

@@ -8,7 +8,7 @@ declare type CheckboxProps = InputPropsWithoutType & FormInputProps & {
     label: string;
 };
 
-export declare const Dropzone: ({ children, error, instructions, className, onChange: userOnChange, remover, ...props }: DropzoneProps) => JSX.Element;
+export declare const Dropzone: ({ children, error, instructions, className, ref: userRef, onChange: userOnChange, remover, ...props }: DropzoneProps) => JSX.Element;
 
 declare interface DropzoneProps extends Omit<ComponentPropsWithRef<"input">, "type">, FormInputProps {
     instructions?: string;
@@ -38,6 +38,14 @@ declare type FormProps = ComponentPropsWithRef<"form">;
 
 declare type InputPropsWithoutType = Omit<ComponentPropsWithRef<"input">, "type">;
 
+export declare const Label: ({ className, label, required, error, ...props }: LabelProps) => JSX.Element;
+
+declare interface LabelProps extends ComponentPropsWithRef<"label"> {
+    label: string;
+    error?: boolean;
+    required?: boolean;
+}
+
 export declare const Select: ({ options, error, className, ...props }: SelectProps) => JSX.Element;
 
 declare interface SelectProps extends ComponentPropsWithRef<"select">, FormInputProps {

package/dist/forms.js

@@ -1,20 +1,20 @@
-import { jsxs as i, jsx as e, Fragment as C } from "react/jsx-runtime";
-import { useRef as E, useState as p, cloneElement as T } from "react";
-import { B as v, I as $ } from "./icon-BR2zaZo5.js";
-const S = ({
+import { jsxs as i, jsx as e, Fragment as E } from "react/jsx-runtime";
+import { useRef as T, useState as v, cloneElement as $ } from "react";
+import { B as x, I as j } from "./icon-BR2zaZo5.js";
+const U = ({
   error: a,
   className: r,
   label: t,
-  ...l
+  ...o
 }) => {
-  const n = l.id || l.name;
+  const n = o.id || o.name;
   return /* @__PURE__ */ i("div", { className: "flex gap-3 items-center", children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "checkbox",
         className: `transition-colors appearance-none cursor-pointer bg-neutral-1 border-2 border-gray-5 rounded-sm w-5 h-5 grid place-content-center hover:bg-gray-1 hover:border-neutral-5 before:hidden before:content-['\\2713'] before:text-neutral-1 before:font-bold checked:bg-blue-3 checked:border-blue-4 checked:hover:bg-blue-4 checked:hover:border-blue-5 checked:before:inline-block ${r ?? ""}`.trim(),
-        ...l,
+        ...o,
         id: n
       }
     ),
@@ -28,29 +28,30 @@ const S = ({
       }
     )
   ] });
-}, j = ({
+}, q = ({
   children: a,
   error: r,
   instructions: t,
-  className: l,
-  onChange: n,
+  className: o,
+  ref: n,
+  onChange: c,
   remover: s,
-  ...c
+  ...g
 }) => {
-  const d = E(null), [x, m] = p(!1), [g, w] = p([]), b = g.length > 0, y = (o) => {
-    o.preventDefault(), m(!1), d.current && o.dataTransfer.files.length > 0 && (d.current.files = o.dataTransfer.files, o.dataTransfer.clearData(), d.current.dispatchEvent(
+  const d = T(null), [w, m] = v(!1), [b, y] = v([]), h = b.length > 0, N = (l) => {
+    l.preventDefault(), m(!1), d.current && l.dataTransfer.files.length > 0 && (d.current.files = l.dataTransfer.files, l.dataTransfer.clearData(), d.current.dispatchEvent(
       new Event("change", { bubbles: !0 })
     ));
-  }, N = (o) => {
-    n && n(o);
-    const k = Array.from(o.currentTarget.files ?? []).map((u) => {
+  }, D = (l) => {
+    c && c(l);
+    const F = Array.from(l.currentTarget.files ?? []).map((u) => {
       if (u.type.includes("image")) {
-        const F = URL.createObjectURL(u);
+        const C = URL.createObjectURL(u);
         return /* @__PURE__ */ e(
           "img",
           {
             alt: "",
-            src: F,
+            src: C,
             className: "max-h-full max-w-full object-contain"
           },
           u.name
@@ -58,47 +59,49 @@ const S = ({
       } else
         return /* @__PURE__ */ e("p", { children: u.name }, u.name);
     });
-    w(k);
-  }, D = () => {
+    y(F);
+  }, I = () => {
     d.current && (d.current.value = "", d.current.files = null, d.current.dispatchEvent(
       new Event("change", { bubbles: !0 })
     ));
-  }, h = {
-    onClick: (o) => {
-      o.preventDefault(), D();
+  }, f = {
+    onClick: (l) => {
+      l.preventDefault(), I();
     }
-  }, I = s ? T(s, h) : /* @__PURE__ */ e(v, { type: "button", variant: "tertiary", state: "decolor", ...h, children: "Remove Files" }), f = (o) => {
-    o.preventDefault(), m(!0);
+  }, k = s ? $(s, f) : /* @__PURE__ */ e(x, { type: "button", variant: "tertiary", state: "decolor", ...f, children: "Remove Files" }), p = (l) => {
+    l.preventDefault(), m(!0);
   };
   return /* @__PURE__ */ i("div", { children: [
     /* @__PURE__ */ i(
       "label",
       {
-        "data-showing-preview": b || null,
-        "data-is-dragging": x || null,
+        "data-showing-preview": h || null,
+        "data-is-dragging": w || null,
         onDragLeave: () => m(!1),
-        onDragEnter: f,
-        onDragOver: f,
-        onDrop: y,
-        htmlFor: c.id,
+        onDragEnter: p,
+        onDragOver: p,
+        onDrop: N,
+        htmlFor: g.id,
         "data-error": r || null,
-        className: `flex items-center justify-center rounded-lg border border-dashed border-blue-3 px-7 py-8 font-medium text-blue-3 data-showing-preview:w-max data-showing-preview:border-gray-3 data-showing-preview:text-gray-3 data-is-dragging:border-blue-5 data-is-dragging:bg-blue-1 data-showing-preview:py-5 data-is-dragging:text-blue-4 ${l ?? ""} cursor-default`.trim(),
+        className: `flex items-center justify-center rounded-lg border border-dashed border-blue-3 px-7 py-8 font-medium text-blue-3 data-showing-preview:w-max data-showing-preview:border-gray-3 data-showing-preview:text-gray-3 data-is-dragging:border-blue-5 data-is-dragging:bg-blue-1 data-showing-preview:py-5 data-is-dragging:text-blue-4 ${o ?? ""} cursor-default`.trim(),
         children: [
           /* @__PURE__ */ e(
             "input",
             {
-              ...c,
-              ref: d,
-              onChange: N,
+              ...g,
+              ref: (l) => {
+                n && (n instanceof Function ? n(l) : n.current = l), d.current = l;
+              },
+              onChange: D,
               className: "sr-only",
               type: "file"
             }
           ),
-          b ? /* @__PURE__ */ i(C, { children: [
-            /* @__PURE__ */ e("aside", { className: "grid grid-cols-2 grid-rows-2 w-11 h-11", children: g }),
-            I
+          h ? /* @__PURE__ */ i(E, { children: [
+            /* @__PURE__ */ e("aside", { className: "grid grid-cols-2 grid-rows-2 w-11 h-11", children: b }),
+            k
           ] }) : a ?? /* @__PURE__ */ i("p", { className: "pointer-events-none select-none", children: [
-            /* @__PURE__ */ e($, { name: "Upload" }),
+            /* @__PURE__ */ e(j, { name: "Upload" }),
             " Click or drop to upload"
           ] })
         ]
@@ -106,72 +109,72 @@ const S = ({
     ),
     t && /* @__PURE__ */ e("p", { className: "font-light leading-6", children: t })
   ] });
-}, U = (a) => /* @__PURE__ */ e(
-  j,
+}, z = (a) => /* @__PURE__ */ e(
+  q,
   {
     ...a,
     multiple: !1,
-    remover: /* @__PURE__ */ e(v, { type: "button", variant: "tertiary", state: "decolor", children: "Remove Image" }),
+    remover: /* @__PURE__ */ e(x, { type: "button", variant: "tertiary", state: "decolor", children: "Remove Image" }),
     accept: "image/png image/svg+xml"
   }
-), z = ({ noValidate: a, className: r, ...t }) => /* @__PURE__ */ e(
+), P = ({ noValidate: a, className: r, ...t }) => /* @__PURE__ */ e(
   "form",
   {
     className: `container flex flex-col gap-7 max-w-[45rem] ${r ?? ""}`.trim(),
     ...t,
     noValidate: a ?? !0
   }
-), q = ({
+), L = ({
   className: a,
   label: r,
   required: t,
-  error: l,
+  error: o,
   ...n
 }) => /* @__PURE__ */ e(
   "label",
   {
     "data-required": t || null,
-    "data-error": l || null,
+    "data-error": o || null,
     ...n,
     className: `text-base font-medium leading-5 data-error:text-red-4 data-required:after:content-['*'] data-required:after:text-red-4 data-required:after:ml-1 ${a ?? ""}`.trim(),
     children: r
   }
-), P = ({
+), A = ({
   Input: a,
   inputProps: r,
   errorMessage: t,
-  label: l,
+  label: o,
   labelClassname: n
 }) => {
-  const s = !!t, c = r?.id || r?.name;
+  const c = !!t, s = r?.id || r?.name;
   return /* @__PURE__ */ i("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ e(
-      q,
+      L,
       {
-        label: l,
+        label: o,
         className: n,
-        htmlFor: c,
+        htmlFor: s,
         required: r?.required,
-        error: s
+        error: c
       }
     ),
-    /* @__PURE__ */ e(a, { error: s, ...r, id: c }),
+    /* @__PURE__ */ e(a, { error: c, ...r, id: s }),
     t && /* @__PURE__ */ e("p", { className: "text-red-4", children: t })
   ] });
-}, A = ({
+}, O = ({
   options: a,
   error: r,
   className: t,
-  ...l
+  ...o
 }) => /* @__PURE__ */ e(
   "select",
   {
-    ...l,
+    ...o,
     "data-error": r || null,
     className: `border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${t ?? ""}`.trim(),
-    children: a.map((n) => /* @__PURE__ */ e("option", { className: "hover:bg-gray-3", value: n.value, children: n.label }, [l.name, n.label].join()))
+    children: a.map((n) => /* @__PURE__ */ e("option", { className: "hover:bg-gray-3", value: n.value, children: n.label }, [o.name, n.label].join()))
   }
-), O = ({ error: a, className: r, ...t }) => /* @__PURE__ */ e(
+), V = ({ error: a, className: r, ...t }) => /* @__PURE__ */ e(
   "input",
   {
     "data-error": a || null,
@@ -179,7 +182,7 @@ const S = ({
     ...t,
     type: "text"
   }
-), V = ({ className: a, error: r, ...t }) => /* @__PURE__ */ e(
+), G = ({ className: a, error: r, ...t }) => /* @__PURE__ */ e(
   "textarea",
   {
     "data-error": r || null,
@@ -188,12 +191,13 @@ const S = ({
   }
 );
 export {
-  S as Checkbox,
-  j as Dropzone,
-  z as Form,
-  P as FormField,
-  A as Select,
-  U as SingleImageDropzone,
-  O as TextInput,
-  V as Textarea
+  U as Checkbox,
+  q as Dropzone,
+  P as Form,
+  A as FormField,
+  L as Label,
+  O as Select,
+  z as SingleImageDropzone,
+  V as TextInput,
+  G as Textarea
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("./icon-DjGt_3uE.cjs"),e=require("react/jsx-runtime"),m=require("next/navigation"),S=require("react"),k=new Map([["black","/primary-badge-engine-logo-black.svg"],["white","/primary-badge-engine-logo-white.svg"],["color","/primary-badge-engine-logo-color.svg"]]);function C({variant:c="color",className:b}){const r=k.get(c);return r===void 0?null:e.jsx("img",{src:r,width:186,height:36,alt:"Badge Engine",className:b})}function R({count:c,limit:b,pageParamKey:r="page"}){const s=m.useSearchParams(),x=m.usePathname(),o=m.useRouter(),v=s.get(r),d=v?Number.parseInt(v,10):Number.NaN,t=Number.isFinite(d)?d:1,n=Math.max(1,Math.ceil(c/b)),w=n<=7?Array.from({length:n},(a,i)=>i+1):t<=4?[1,2,3,4,5,"ellipsis",n]:t>=n-3?[1,"ellipsis",n-4,n-3,n-2,n-1,n]:[1,"ellipsis",t-1,t,t+1,"ellipsis",n],y=t===1,u=t===n,N=a=>{if(y&&a==="prev"||u&&a==="next")return;const i=a==="prev"?t-1:t+1,g=new URLSearchParams(s.toString());g.set(r,String(i)),o.push(`${x}?${g.toString()}`,{scroll:!1})},j=a=>{const i=new URLSearchParams(s.toString());i.set(r,String(a)),o.push(`${x}?${i.toString()}`,{scroll:!1})};return e.jsxs("ul",{className:"flex items-center justify-center gap-4 font-medium",children:[e.jsx("li",{className:"mr-2",children:e.jsx("button",{type:"button","aria-label":"Previous page",disabled:y,className:"inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",onClick:()=>N("prev"),children:e.jsx("span",{"aria-hidden":!0,className:"font-icon dpg-icons-arrow-line-left inline-block h-[24px] w-[24px] text-[24px] leading-[24px]"})})}),w.map((a,i)=>{const g=a==="ellipsis",h=g?void 0:a,f=h===t,p=g||f,l=g?"Pagination ellipsis":`Go to page ${h}`;return e.jsx("li",{children:e.jsx("button",{type:"button","aria-label":l,"aria-current":f?"page":void 0,disabled:p,className:`flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${f?"bg-blue-1 text-blue-4":""} ${p?"cursor-default":"cursor-pointer hover:bg-gray-1"}`.trim(),onClick:!p&&h?()=>j(h):void 0,children:g?"...":h})},`${a}-${i}`)}),e.jsx("li",{className:"ml-2",children:e.jsx("button",{type:"button","aria-label":"Next page",disabled:u,className:"inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",onClick:()=>N("next"),children:e.jsx("span",{"aria-hidden":!0,className:"font-icon dpg-icons-arrow-line-right inline-block h-[24px] w-[24px] text-[24px] leading-[24px]"})})})]})}function L({placeholder:c,className:b,inputWidth:r,value:s,onChange:x,syncToUrl:o=!0,id:v="search",paramKey:d="s"}){const t=m.useSearchParams(),n=m.usePathname(),w=m.useRouter(),y=S.useRef(null),u=s!==void 0,[N,j]=S.useState(u?s:t.get(d)?.toString()??""),a=u?s:N,i=Math.max(c.length,1),g=`calc(${i}ch + 60px)`,h=r===void 0?g:typeof r=="number"?`${r}px`:r;S.useEffect(()=>{!o||u||j(t.get(d)?.toString()??"")},[u,d,t,o]);const f=p=>{if(!o)return;const l=new URLSearchParams(t.toString());p?(l.set(d,p),l.delete("page")):(l.delete(d),l.delete("page"));const P=l.toString();w.replace(P?`${n}?${P}`:n)};return e.jsxs("form",{className:b??"",noValidate:!0,children:[e.jsx("label",{className:"sr-only",htmlFor:v,children:"Search"}),e.jsxs("div",{className:"relative max-w-full",style:{width:h},children:[e.jsx($.Icon,{name:"Magnifier","aria-hidden":!0,className:"absolute left-[15px] top-1/2 z-10 -translate-y-1/2 text-large leading-5 text-gray-5"}),e.jsx("input",{ref:y,className:"hide-search-clear block w-full max-w-full rounded-sm bg-white py-[11px] pl-[15px] pr-[40px] text-base leading-6 indent-[30px] outline-1 outline-gray-5 transition focus:outline-2 focus:outline-blue-4",style:{color:"#000000",WebkitTextFillColor:"#000000"},size:i,id:v,type:"search",autoComplete:"off",value:a,placeholder:c,onChange:p=>{const l=p.target.value;u||j(l),x?.(l),f(l)}}),a.length>0&&e.jsx("button",{type:"button","aria-label":"Clear search",className:"absolute right-1 top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg p-2 text-gray-5 hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4",onClick:()=>{u||j(""),x?.(""),f(""),y.current?.focus()},children:e.jsx("span",{"aria-hidden":!0,className:"font-icon dpg-icons-close inline-block h-4 w-4 text-[16px] leading-4 text-gray-5"})})]})]})}function M({columns:c,rows:b,rowKey:r}){return e.jsxs("table",{className:"w-full table-auto border-y border-gray-2 text-gray-5",children:[e.jsx("thead",{className:"font-bold",children:e.jsx("tr",{children:c.map(s=>e.jsx("td",{className:`px-3 py-4 ${s.headerClassName??""}`.trim(),children:s.header},s.key))})}),e.jsx("tbody",{children:b.map((s,x)=>e.jsx("tr",{className:"border-t border-gray-2",children:c.map(o=>e.jsx("td",{className:`${o.cellClassName??"px-3 py-4"}`.trim(),children:o.render(s)},o.key))},r(s,x)))})]})}exports.Button=$.Button;exports.Logo=C;exports.Pagination=R;exports.Search=L;exports.Table=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("./icon-DjGt_3uE.cjs"),e=require("react/jsx-runtime"),m=require("next/navigation"),w=require("react"),C=new Map([["black","/primary-badge-engine-logo-black.svg"],["white","/primary-badge-engine-logo-white.svg"],["color","/primary-badge-engine-logo-color.svg"]]);function k({variant:c="color",className:b}){const r=C.get(c);return r===void 0?null:e.jsx("img",{src:r,width:186,height:36,alt:"Badge Engine",className:b})}function L({count:c,limit:b,pageParamKey:r="page"}){const s=m.useSearchParams(),h=m.usePathname(),o=m.useRouter(),v=s.get(r),d=v?Number.parseInt(v,10):Number.NaN,t=Number.isFinite(d)?d:1,n=Math.max(1,Math.ceil(c/b)),P=n<=7?Array.from({length:n},(a,i)=>i+1):t<=4?[1,2,3,4,5,"ellipsis",n]:t>=n-3?[1,"ellipsis",n-4,n-3,n-2,n-1,n]:[1,"ellipsis",t-1,t,t+1,"ellipsis",n],y=t===1,u=t===n,S=a=>{if(y&&a==="prev"||u&&a==="next")return;const i=a==="prev"?t-1:t+1,g=new URLSearchParams(s.toString());g.set(r,String(i)),o.push(`${h}?${g.toString()}`,{scroll:!1})},j=a=>{const i=new URLSearchParams(s.toString());i.set(r,String(a)),o.push(`${h}?${i.toString()}`,{scroll:!1})};return e.jsxs("ul",{className:"flex items-center justify-center gap-4 font-medium",children:[e.jsx("li",{className:"mr-2",children:e.jsx("button",{type:"button","aria-label":"Previous page",disabled:y,className:"inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",onClick:()=>S("prev"),children:e.jsx(N.Icon,{name:"ArrowLineLeft"})})}),P.map((a,i)=>{const g=a==="ellipsis",x=g?void 0:a,f=x===t,p=g||f,l=g?"Pagination ellipsis":`Go to page ${x}`;return e.jsx("li",{children:e.jsx("button",{type:"button","aria-label":l,"aria-current":f?"page":void 0,disabled:p,className:`flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${f?"bg-blue-1 text-blue-4":""} ${p?"cursor-default":"cursor-pointer hover:bg-gray-1"}`.trim(),onClick:!p&&x?()=>j(x):void 0,children:g?"...":x})},`${a}-${i}`)}),e.jsx("li",{className:"ml-2",children:e.jsx("button",{type:"button","aria-label":"Next page",disabled:u,className:"inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",onClick:()=>S("next"),children:e.jsx(N.Icon,{name:"ArrowLineRight"})})})]})}function R({placeholder:c,className:b,inputWidth:r,value:s,onChange:h,syncToUrl:o=!0,id:v="search",paramKey:d="s"}){const t=m.useSearchParams(),n=m.usePathname(),P=m.useRouter(),y=w.useRef(null),u=s!==void 0,[S,j]=w.useState(u?s:t.get(d)?.toString()??""),a=u?s:S,i=Math.max(c.length,1),g=`calc(${i}ch + 60px)`,x=r===void 0?g:typeof r=="number"?`${r}px`:r;w.useEffect(()=>{!o||u||j(t.get(d)?.toString()??"")},[u,d,t,o]);const f=p=>{if(!o)return;const l=new URLSearchParams(t.toString());p?(l.set(d,p),l.delete("page")):(l.delete(d),l.delete("page"));const $=l.toString();P.replace($?`${n}?${$}`:n)};return e.jsxs("form",{className:b??"",noValidate:!0,children:[e.jsx("label",{className:"sr-only",htmlFor:v,children:"Search"}),e.jsxs("div",{className:"relative max-w-full",style:{width:x},children:[e.jsx(N.Icon,{name:"Magnifier","aria-hidden":!0,className:"absolute left-[15px] top-1/2 z-10 -translate-y-1/2 text-large leading-5 text-gray-5"}),e.jsx("input",{ref:y,className:"hide-search-clear block w-full max-w-full rounded-sm bg-white py-[11px] pl-[15px] pr-[40px] text-base leading-6 indent-[30px] outline-1 outline-gray-5 transition focus:outline-2 focus:outline-blue-4",style:{color:"#000000",WebkitTextFillColor:"#000000"},size:i,id:v,type:"search",autoComplete:"off",value:a,placeholder:c,onChange:p=>{const l=p.target.value;u||j(l),h?.(l),f(l)}}),a.length>0&&e.jsx("button",{type:"button","aria-label":"Clear search",className:"absolute right-1 top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg p-2 text-gray-5 hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4",onClick:()=>{u||j(""),h?.(""),f(""),y.current?.focus()},children:e.jsx(N.Icon,{name:"Close"})})]})]})}function I({columns:c,rows:b,rowKey:r}){return e.jsxs("table",{className:"w-full table-auto border-y border-gray-2 text-gray-5",children:[e.jsx("thead",{className:"font-bold",children:e.jsx("tr",{children:c.map(s=>e.jsx("td",{className:`px-3 py-4 ${s.headerClassName??""}`.trim(),children:s.header},s.key))})}),e.jsx("tbody",{children:b.map((s,h)=>e.jsx("tr",{className:"border-t border-gray-2",children:c.map(o=>e.jsx("td",{className:`${o.cellClassName??"px-3 py-4"}`.trim(),children:o.render(s)},o.key))},r(s,h)))})]})}exports.Button=N.Button;exports.Logo=k;exports.Pagination=L;exports.Search=R;exports.Table=I;

package/dist/index.js

@@ -1,22 +1,22 @@
-import { I as j } from "./icon-BR2zaZo5.js";
+import { I as w } from "./icon-BR2zaZo5.js";
 import { B as T } from "./icon-BR2zaZo5.js";
-import { jsx as e, jsxs as w } from "react/jsx-runtime";
-import { useSearchParams as $, usePathname as k, useRouter as C } from "next/navigation";
-import { useRef as L, useState as R, useEffect as M } from "react";
+import { jsx as e, jsxs as S } from "react/jsx-runtime";
+import { useSearchParams as C, usePathname as k, useRouter as L } from "next/navigation";
+import { useRef as j, useState as R, useEffect as M } from "react";
 const z = /* @__PURE__ */ new Map([
   ["black", "/primary-badge-engine-logo-black.svg"],
   ["white", "/primary-badge-engine-logo-white.svg"],
   ["color", "/primary-badge-engine-logo-color.svg"]
 ]);
-function V({
+function E({
   variant: c = "color",
   className: b
 }) {
-  const i = z.get(c);
-  return i === void 0 ? null : /* @__PURE__ */ e(
+  const s = z.get(c);
+  return s === void 0 ? null : /* @__PURE__ */ e(
     "img",
     {
-      src: i,
+      src: s,
       width: 186,
       height: 36,
       alt: "Badge Engine",
@@ -24,29 +24,29 @@ function V({
     }
   );
 }
-function q({
+function V({
   count: c,
   limit: b,
-  pageParamKey: i = "page"
+  pageParamKey: s = "page"
 }) {
-  const n = $(), f = k(), o = C(), x = n.get(i), d = x ? Number.parseInt(x, 10) : Number.NaN, t = Number.isFinite(d) ? d : 1, r = Math.max(1, Math.ceil(c / b)), S = r <= 7 ? Array.from({ length: r }, (a, s) => s + 1) : t <= 4 ? [1, 2, 3, 4, 5, "ellipsis", r] : t >= r - 3 ? [1, "ellipsis", r - 4, r - 3, r - 2, r - 1, r] : [
+  const r = C(), f = k(), o = L(), x = r.get(s), d = x ? Number.parseInt(x, 10) : Number.NaN, t = Number.isFinite(d) ? d : 1, n = Math.max(1, Math.ceil(c / b)), P = n <= 7 ? Array.from({ length: n }, (a, i) => i + 1) : t <= 4 ? [1, 2, 3, 4, 5, "ellipsis", n] : t >= n - 3 ? [1, "ellipsis", n - 4, n - 3, n - 2, n - 1, n] : [
     1,
     "ellipsis",
     t - 1,
     t,
     t + 1,
     "ellipsis",
-    r
-  ], v = t === 1, u = t === r, N = (a) => {
+    n
+  ], v = t === 1, u = t === n, N = (a) => {
     if (v && a === "prev" || u && a === "next")
       return;
-    const s = a === "prev" ? t - 1 : t + 1, p = new URLSearchParams(n.toString());
-    p.set(i, String(s)), o.push(`${f}?${p.toString()}`, { scroll: !1 });
+    const i = a === "prev" ? t - 1 : t + 1, g = new URLSearchParams(r.toString());
+    g.set(s, String(i)), o.push(`${f}?${g.toString()}`, { scroll: !1 });
   }, y = (a) => {
-    const s = new URLSearchParams(n.toString());
-    s.set(i, String(a)), o.push(`${f}?${s.toString()}`, { scroll: !1 });
+    const i = new URLSearchParams(r.toString());
+    i.set(s, String(a)), o.push(`${f}?${i.toString()}`, { scroll: !1 });
   };
-  return /* @__PURE__ */ w("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
+  return /* @__PURE__ */ S("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
     /* @__PURE__ */ e("li", { className: "mr-2", children: /* @__PURE__ */ e(
       "button",
       {
@@ -55,29 +55,23 @@ function q({
         disabled: v,
         className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         onClick: () => N("prev"),
-        children: /* @__PURE__ */ e(
-          "span",
-          {
-            "aria-hidden": !0,
-            className: "font-icon dpg-icons-arrow-line-left inline-block h-[24px] w-[24px] text-[24px] leading-[24px]"
-          }
-        )
+        children: /* @__PURE__ */ e(w, { name: "ArrowLineLeft" })
       }
     ) }),
-    S.map((a, s) => {
-      const p = a === "ellipsis", h = p ? void 0 : a, m = h === t, g = p || m, l = p ? "Pagination ellipsis" : `Go to page ${h}`;
+    P.map((a, i) => {
+      const g = a === "ellipsis", h = g ? void 0 : a, m = h === t, p = g || m, l = g ? "Pagination ellipsis" : `Go to page ${h}`;
       return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           "aria-label": l,
           "aria-current": m ? "page" : void 0,
-          disabled: g,
-          className: `flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${m ? "bg-blue-1 text-blue-4" : ""} ${g ? "cursor-default" : "cursor-pointer hover:bg-gray-1"}`.trim(),
-          onClick: !g && h ? () => y(h) : void 0,
-          children: p ? "..." : h
+          disabled: p,
+          className: `flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${m ? "bg-blue-1 text-blue-4" : ""} ${p ? "cursor-default" : "cursor-pointer hover:bg-gray-1"}`.trim(),
+          onClick: !p && h ? () => y(h) : void 0,
+          children: g ? "..." : h
         }
-      ) }, `${a}-${s}`);
+      ) }, `${a}-${i}`);
     }),
     /* @__PURE__ */ e("li", { className: "ml-2", children: /* @__PURE__ */ e(
       "button",
@@ -87,45 +81,39 @@ function q({
         disabled: u,
         className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         onClick: () => N("next"),
-        children: /* @__PURE__ */ e(
-          "span",
-          {
-            "aria-hidden": !0,
-            className: "font-icon dpg-icons-arrow-line-right inline-block h-[24px] w-[24px] text-[24px] leading-[24px]"
-          }
-        )
+        children: /* @__PURE__ */ e(w, { name: "ArrowLineRight" })
       }
     ) })
   ] });
 }
-function A({
+function q({
   placeholder: c,
   className: b,
-  inputWidth: i,
-  value: n,
+  inputWidth: s,
+  value: r,
   onChange: f,
   syncToUrl: o = !0,
   id: x = "search",
   paramKey: d = "s"
 }) {
-  const t = $(), r = k(), S = C(), v = L(null), u = n !== void 0, [N, y] = R(
-    u ? n : t.get(d)?.toString() ?? ""
-  ), a = u ? n : N, s = Math.max(c.length, 1), p = `calc(${s}ch + 60px)`, h = i === void 0 ? p : typeof i == "number" ? `${i}px` : i;
+  const t = C(), n = k(), P = L(), v = j(null), u = r !== void 0, [N, y] = R(
+    u ? r : t.get(d)?.toString() ?? ""
+  ), a = u ? r : N, i = Math.max(c.length, 1), g = `calc(${i}ch + 60px)`, h = s === void 0 ? g : typeof s == "number" ? `${s}px` : s;
   M(() => {
     !o || u || y(t.get(d)?.toString() ?? "");
   }, [u, d, t, o]);
-  const m = (g) => {
+  const m = (p) => {
     if (!o) return;
     const l = new URLSearchParams(t.toString());
-    g ? (l.set(d, g), l.delete("page")) : (l.delete(d), l.delete("page"));
-    const P = l.toString();
-    S.replace(P ? `${r}?${P}` : r);
+    p ? (l.set(d, p), l.delete("page")) : (l.delete(d), l.delete("page"));
+    const $ = l.toString();
+    P.replace($ ? `${n}?${$}` : n);
   };
-  return /* @__PURE__ */ w("form", { className: b ?? "", noValidate: !0, children: [
+  return /* @__PURE__ */ S("form", { className: b ?? "", noValidate: !0, children: [
     /* @__PURE__ */ e("label", { className: "sr-only", htmlFor: x, children: "Search" }),
-    /* @__PURE__ */ w("div", { className: "relative max-w-full", style: { width: h }, children: [
+    /* @__PURE__ */ S("div", { className: "relative max-w-full", style: { width: h }, children: [
       /* @__PURE__ */ e(
-        j,
+        w,
         {
           name: "Magnifier",
           "aria-hidden": !0,
@@ -141,14 +129,14 @@ function A({
             color: "#000000",
             WebkitTextFillColor: "#000000"
           },
-          size: s,
+          size: i,
           id: x,
           type: "search",
           autoComplete: "off",
           value: a,
           placeholder: c,
-          onChange: (g) => {
-            const l = g.target.value;
+          onChange: (p) => {
+            const l = p.target.value;
             u || y(l), f?.(l), m(l);
           }
         }
@@ -162,42 +150,36 @@ function A({
           onClick: () => {
             u || y(""), f?.(""), m(""), v.current?.focus();
           },
-          children: /* @__PURE__ */ e(
-            "span",
-            {
-              "aria-hidden": !0,
-              className: "font-icon dpg-icons-close inline-block h-4 w-4 text-[16px] leading-4 text-gray-5"
-            }
-          )
+          children: /* @__PURE__ */ e(w, { name: "Close" })
         }
       )
     ] })
   ] });
 }
-function D({ columns: c, rows: b, rowKey: i }) {
-  return /* @__PURE__ */ w("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
-    /* @__PURE__ */ e("thead", { className: "font-bold", children: /* @__PURE__ */ e("tr", { children: c.map((n) => /* @__PURE__ */ e(
+function D({ columns: c, rows: b, rowKey: s }) {
+  return /* @__PURE__ */ S("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
+    /* @__PURE__ */ e("thead", { className: "font-bold", children: /* @__PURE__ */ e("tr", { children: c.map((r) => /* @__PURE__ */ e(
       "td",
       {
-        className: `px-3 py-4 ${n.headerClassName ?? ""}`.trim(),
-        children: n.header
+        className: `px-3 py-4 ${r.headerClassName ?? ""}`.trim(),
+        children: r.header
       },
-      n.key
+      r.key
     )) }) }),
-    /* @__PURE__ */ e("tbody", { children: b.map((n, f) => /* @__PURE__ */ e("tr", { className: "border-t border-gray-2", children: c.map((o) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("tbody", { children: b.map((r, f) => /* @__PURE__ */ e("tr", { className: "border-t border-gray-2", children: c.map((o) => /* @__PURE__ */ e(
       "td",
       {
         className: `${o.cellClassName ?? "px-3 py-4"}`.trim(),
-        children: o.render(n)
+        children: o.render(r)
       },
       o.key
-    )) }, i(n, f))) })
+    )) }, s(r, f))) })
   ] });
 }
 export {
   T as Button,
-  V as Logo,
-  q as Pagination,
-  A as Search,
+  E as Logo,
+  V as Pagination,
+  q as Search,
   D as Table
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digitalpromise/design",
   "private": false,
-  "version": "4.3.0",
+  "version": "4.5.1",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -30,7 +30,7 @@
     "@typescript-eslint/eslint-plugin": "^8.56.1",
     "@typescript-eslint/parser": "^8.56.1",
     "@vitejs/plugin-react-swc": "^4.2.3",
-    "eslint": "^10.0.2",
+    "eslint": "^9.39.3",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-storybook": "^10.2.13",
     "jsdom": "^28.1.0",