@digitalpromise/design 4.3.0 → 4.5.0

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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digitalpromise/design",
   "private": false,
-  "version": "4.3.0",
+  "version": "4.5.0",
   "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",