polpo 0.1.11 → 0.1.13

package/dist/components.js

@@ -1,3 +1,3577 @@
 "use client";
-import{createContext as hr,useCallback as gr,useContext as br,useMemo as yr,useState as vr}from"react";import{useMemo as Dt}from"react";var h=e=>Dt(()=>Object.entries(e).reduce((o,[t,r])=>r?[...o,t]:o,[]).join(" "),[e]);import{useEffect as zt,useLayoutEffect as Ht,useRef as Bt}from"react";function O(e,o,t,r){let a=Bt(o);zt(()=>{a.current=o},[o]),Ht(()=>{let n=t?.current??window;if(!(n&&n.addEventListener))return;let i=s=>a.current(s);return n.addEventListener(e,i,r),()=>{n.removeEventListener(e,i,r)}},[e,t,r])}var $t=(e,o)=>e.current&&!e.current.contains(o),qe=(e,o)=>{O("keydown",t=>{t.key==="Escape"&&o()}),O("mousedown",t=>{let r=t.target;if(!r?.isConnected)return;(Array.isArray(e)?e:[e]).every(n=>$t(n,r))&&o()})};import{useEffect as Gt,useState as Ut}from"react";var Je=(e,o=500)=>{let[t,r]=Ut(e);return Gt(()=>{let a=setTimeout(()=>r(e),o);return()=>{clearTimeout(a)}},[e,o]),t};import{useEffect as Vt}from"react";var Q=(e,o)=>{Vt(()=>{let t=Array.isArray(e)?e:[e],r=new ResizeObserver(o);return t.forEach(a=>a.current&&r.observe(a.current)),()=>{r.disconnect()}},[e,o])};import{useEffect as _t,useState as Yt}from"react";var eo=e=>{let o=document.getElementById(e);return o===null&&(o=document.createElement("div"),o.setAttribute("id",e),document.body.appendChild(o)),o},oo=e=>{let[o,t]=Yt(()=>eo(e));return _t(()=>{let r=document.getElementById(e);if(o===null||r===null){let a=eo(e);t(a)}return()=>{o&&o.parentNode&&process.env.NODE_ENV==="production"&&document.body.removeChild(o)}},[o,e]),o};var te=(e,o=2)=>{if(e===0)return"0 Bytes";let t=1e3,r=o<0?0:o,a=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],n=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/Math.pow(t,n)).toFixed(r))+" "+a[n]};var to=({c:e,m:o,offset:t,position:r})=>{let a=e.y+e.h+t,n=e.x-(o.w-e.w)*(50/100);switch(r){case"top":case"top center":a=e.y-o.h-t,n=e.x-(o.w-e.w)/2;break;case"top left":a=e.y-o.h-t,n=e.x-o.w+e.w;break;case"top right":a=e.y-o.h-t,n=e.x;break;case"bottom":case"bottom center":a=e.y+e.h+t,n=e.x-(o.w-e.w)/2;break;case"bottom left":a=e.y+e.h+t,n=e.x-o.w+e.w;break;case"bottom right":a=e.y+e.h+t,n=e.x;break;case"left":case"left center":a=e.y-(o.h-e.h)/2,n=e.x-o.w-t;break;case"left top":a=e.y-o.h+e.h,n=e.x-o.w-t;break;case"left bottom":a=e.y,n=e.x-o.w-t;break;case"right":case"right center":a=e.y-(o.h-e.h)/2,n=e.x+e.w+t;break;case"right top":a=e.y-o.h+e.h,n=e.x+e.w+t;break;case"right bottom":a=e.y,n=e.x+e.w+t;break}return{left:Math.round(n),top:Math.round(a)}},jt=({top:e,left:o},t,r,a)=>{let n=t.split(" "),i=[],s=o+a.w+r-window.innerWidth,l=e+a.h+r-window.innerHeight;for(let c of n)c==="top"&&e<r?i.push("bottom"):c==="left"&&o<r?i.push("right"):c==="bottom"&&l>0?i.push("top"):c==="right"&&s>0?i.push("left"):i.push(c);return i.join(" ")},Xt=({top:e,left:o},t,r)=>{let a=o+t.w+r-window.innerWidth,n=e+t.h+r-window.innerHeight;return o=a>0?o-a:o,e=n>0?e-n:e,o=o<r?r:o,e=e<r?r:e,{top:e,left:o}},ro=({c:e,m:o,offset:t,windowOffset:r,position:a})=>{let n={c:e,m:o,offset:t,position:a},i=to(n),s=jt(i,a,r,o);s!==a&&(i=to({...n,position:s}));let l=Xt(i,o,r);return{left:`${l.left}px`,top:`${l.top}px`}};var no=({position:e,windowOffset:o})=>{switch(e){case"center":return{top:"50%",left:"50%",transform:"translate(-50%, -50%)"};case"top":case"top center":return{top:`${o}px`,left:"50%",transform:"translateX(-50%)"};case"top left":case"left top":return{top:`${o}px`,left:`${o}px`};case"top right":case"right top":return{top:`${o}px`,right:`${o}px`};case"bottom":case"bottom center":return{bottom:`${o}px`,left:"50%",transform:"translateX(-50%)"};case"left bottom":case"bottom left":return{bottom:`${o}px`,left:`${o}px`};case"right bottom":case"bottom right":return{bottom:`${o}px`,right:`${o}px`};case"left":case"left center":return{top:"50%",left:`${o}px`,transform:"translateY(-50%)"};case"right":case"right center":return{top:"50%",right:`${o}px`,transform:"translateY(-50%)"}}return{top:"50%",left:"50%",transform:"translate(-50%, -50%)"}};import{useRef as Qt,useState as Zt}from"react";import{useEffect as Wt}from"react";var ao=(e,o,t={})=>{Wt(()=>{let r=Array.isArray(e)?e:[e],a=new IntersectionObserver(o,t);return r.forEach(n=>n.current&&a.observe(n.current)),()=>{a.disconnect()}},[o,t,e])};var io=(e={})=>{let[o,t]=Zt(!1),r=Qt(null);return ao(r,([a])=>{t(a.isIntersecting)},e),{ref:r,inView:o}};import{useCallback as we,useState as Kt}from"react";var S=({onBlur:e,onFocus:o,onChange:t}={})=>{let[r,a]=Kt(!1),n=we(l=>{a(!0),o&&o(l)},[o]),i=we(l=>{a(!1),e&&e(l)},[e]),s=we(l=>{t&&t(l)},[t]);return{isFocus:r,handlers:{onFocus:n,onBlur:i,onChange:s}}};import{useEffect as qt,useState as Jt}from"react";var ue=e=>{let[o,t]=Jt(!1);return qt(()=>{let r=window.matchMedia(e);r.matches!==o&&t(r.matches);let a=()=>{t(r.matches)};return r.addEventListener("change",a),()=>{r.removeEventListener("change",a)}},[o,e]),o};import{useRef as er,useState as or}from"react";var so=()=>{let e=er(null),[o,t]=or(!1);return{containerRef:e,isOpen:o,openModal:()=>{t(!0)},closeModal:()=>{t(!1)}}};import{useCallback as lo,useLayoutEffect as tr,useRef as rr}from"react";var co=e=>({x:e.x,y:e.y,w:e.width,h:e.height,top:e.top,left:e.left}),po=({offset:e=0,windowOffset:o=0,position:t="bottom",modalRef:r,containerRef:a,isOpen:n})=>{let i=rr(null),s=lo((c,m)=>{let d=c.current?.getClientRects()[0],p=m.current?.getClientRects()[0];if(!d)return;let u=p?ro({c:co(p),m:co(d),offset:e,windowOffset:o,position:t}):no({position:t,windowOffset:o});Object.keys(u).forEach(g=>{c.current?.style.setProperty(g,u[g])})},[t,o,e]),l=lo(()=>{n&&s(r,a??i)},[s,n,a,r]);tr(l,[l]),Q(a??i,l),Q(r,l),O("resize",l),O("scroll",l,r)};import nr,{useCallback as mo,useEffect as ar,useLayoutEffect as ir,useMemo as sr}from"react";var uo=({transitionDuration:e=0,isOpen:o})=>{let[t,r]=nr.useState("CLOSED"),a=sr(()=>t!=="CLOSED",[t]);ar(()=>{document.documentElement.style.overflow=a?"hidden":"auto"},[a]);let n=mo(()=>{["OPENING","OPEN"].includes(t)&&(e>0?(r("CLOSING"),setTimeout(()=>{r("CLOSED")},e)):r("CLOSED"))},[t,e]),i=mo(()=>{["CLOSING","CLOSED"].includes(t)&&(e>0?(r("OPENING"),setTimeout(()=>{r("OPEN")},e)):r("OPEN"))},[t,e]);return ir(()=>{t==="CLOSED"&&o?i():t==="OPEN"&&!o&&n()},[o,i,n,t]),{isVisible:a,modalState:t}};import{useRef as lr,useState as cr}from"react";var fo=(e,o)=>{let{left:t,top:r}=e,a=t+window.scrollX,n=r+window.scrollY,i=o.pageX-a,s=o.pageY-n;return{x:o.pageX,y:o.pageY,elementX:i,elementY:s,elementPositionX:a,elementPositionY:n}},ho=e=>{let o=lr(null),[t,r]=cr({x:null,y:null,elementX:null,elementY:null,elementPositionX:null,elementPositionY:null});return O("mousemove",n=>{let{clientX:i,clientY:s}=n;if(r(l=>({...l,x:i,y:s})),e?.current instanceof Element){let l=fo(e.current.getBoundingClientRect(),n);r(c=>({...c,...l}))}else if(o.current instanceof Element){let l=fo(o.current.getBoundingClientRect(),n);r(c=>({...c,...l}))}}),{...t,ref:o}};import{useCallback as dr,useState as pr}from"react";var go=(e,o=0)=>{let[t,r]=pr(o),a=dr(n=>{r(n!==void 0?n:i=>(i+1)%e.length)},[e.length]);return[e[t],a]};import{jsx as fr}from"react/jsx-runtime";var mr=(t=>(t.VERTICAL="vertical",t.HORIZONTAL="horizontal",t))(mr||{}),ur=(r=>(r.SOLID="solid",r.DOTTED="dotted",r.DASHED="dashed",r))(ur||{}),fe=({orientation:e="horizontal",className:o="",style:t={},color:r="currentColor",size:a=1,lineStyle:n="solid",dashedSize:i=1,spacing:s=1})=>{let l=h({"custom-line":!0,[e]:!0,[o]:!!o,[n]:!0});return fr("span",{className:l,style:{...t,"--color":r,"--size":`${a}px`,"--spacing":`${s}px`,"--dashSize":`${i}px`}})};import{jsx as Ee}from"react/jsx-runtime";var bo=hr(null),yo=e=>{let o=br(bo);if(!o)throw new Error("You cant use this component out off an Accordion component");let{toggleItem:t,openedItems:r}=o,a=()=>t(e);return[r.includes(e),a]},Ui=({children:e,className:o="",noSeparators:t,multiple:r,style:a={},defaultOpened:n=[]})=>{let[i,s]=vr(()=>(Array.isArray(n)?n:[n]).reduce((d,p)=>typeof p=="string"?{...d,[p]:!0}:d,{})),l=gr(d=>{s(p=>({...r?p:{},[d]:!p[d]}))},[r]),c=yr(()=>Object.keys(i).filter(d=>i[d]),[i]),m=h({accordion:!0,[o]:!!o});return Ee(bo.Provider,{value:{toggleItem:l,openedItems:c},children:Ee("section",{className:m,style:a,children:(Array.isArray(e)?e:[e]).flatMap((d,p)=>p===0?d:[t?null:Ee(fe,{orientation:"horizontal"},`${p}.5`),d])})})};import{useMemo as kr}from"react";import{FaCaretLeft as Rr}from"react-icons/fa";import{jsx as Cr}from"react/jsx-runtime";var vo=({children:e,isOpen:o,className:t="",style:r={}})=>Cr("section",{className:t,style:{overflow:"hidden",height:o?"auto":0,transition:"height 300ms ease",interpolateSize:"allow-keywords",...r},children:e});import{useMemo as Co}from"react";import{jsx as Me,jsxs as xr}from"react/jsx-runtime";var Ji=({cardZIndex:e="auto",flipDirection:o="vertical",flipSpeed:t=500,isFlipped:r=!1,children:a})=>{let n=c=>{if(a.length!==2)throw new Error("Component FlipCard requires 2 children");return a[c]},i=Co(()=>`rotate${o==="horizontal"?"Y":"X"}(${r?180:0}deg)`,[o,r]),s=Co(()=>`rotate${o==="horizontal"?"Y":"X"}(${r?0:-180}deg)`,[o,r]),l=h({"flip-card":!0,"is-flipped":r});return Me("section",{className:l,style:{"--cardZIndex":e,"--flipSpeed":`${t}ms`,"--frontRotate":i,"--backRotate":s},children:xr("section",{className:"flipper",children:[Me("section",{className:"front",children:n(0)}),Me("section",{className:"back",children:n(1)})]})})};import{useCallback as xo,useRef as To}from"react";import{jsx as Po}from"react/jsx-runtime";var cs=({children:e,threshold:o=5,translationZ:t=25,width:r="fit-content",className:a=""})=>{let n=To(null),i=To(null),s=xo(m=>{let d=n.current,p=i.current;if(!d||!p)return;let{clientX:u,clientY:g,currentTarget:y}=m,{clientWidth:f,clientHeight:b}=y,{top:v,left:T}=d.getBoundingClientRect(),x=(u-T)/f,C=(g-v)/b,R=x*2-1,L=((C*2-1)*o).toFixed(2),F=(R*o).toFixed(2);p.style.transform=`perspective(${f}px) rotateX(${-L}deg) rotateY(${F}deg)`,d.style.transform=`perspective(${f}px) translateZ(${t}px)`},[o,t]),l=xo(m=>{let d=n.current,p=i.current;!d||!p||(p.style.transform=`perspective(${m.currentTarget.clientWidth}px) rotateX(0) rotateY(0)`,d.style.transform=`perspective(${m.currentTarget.clientWidth}px) translateZ(0)`)},[]);O("mousemove",s,n),O("mouseleave",l,n);let c=h({"hover-card":!0,[a]:!!a});return Po("span",{ref:n,style:{width:r},className:c,children:Po("span",{className:"card-hover-layer",ref:i,children:e})})};import{createElement as Tr,useMemo as Pr}from"react";var Se={hero:"h1",header1:"h1",header2:"h2",header3:"h3",header4:"h4",body:"p",label:"span","label-form":"label",small:"small"},Ne={hero:"hero",header1:"header1",header2:"header2",header3:"header3",header4:"header4",body:"body",label:"label","label-form":"label",small:"small"};var k=({variant:e="body",nowrap:o=!1,className:t="",style:r={},children:a,as:n,weight:i,family:s="primary",noPadding:l=!1,align:c,color:m,htmlFor:d,recommendedWidth:p=!1,...u})=>{let g=h({typography:!0,[Ne[e]]:Ne[e]!==void 0,[t]:!!t,[i??""]:!!i,[m??""]:!!m,"no-padding":l,"code-family":s==="code","recommended-width":p,"nowrap-max-lines":typeof o=="number","nowrap-max-lines-2":o===2,"nowrap-max-lines-3":o===3,"nowrap-max-lines-4":o===4,"nowrap-max-lines-5":o===5,nowrap:o===!0}),y=Pr(()=>Se[e]??Se.body,[e]);return Tr(n??y,{...u,className:g,htmlFor:d,style:{textAlign:c,...r}},a)};import{jsx as ne,jsxs as Ie}from"react/jsx-runtime";var re=(e,o)=>typeof e=="function"?e(o):e,Is=({title:e,subtitle:o,children:t,icon:r=Rr,startContent:a,content:n,endContent:i,classNames:s={},className:l="",style:c={}})=>{let m=kr(()=>crypto.randomUUID(),[]),[d,p]=yo(m),u=h({"accordion-header":!0,"has-start-content":!!a,[s?.header??""]:!!s?.header,"is-open":d}),g=h({"accordion-header-content":!0,[s?.headerContent??""]:!!s?.headerContent}),y=h({"accordion-toggle-icon":!0,isOpen:d,[s?.toggleIcon??""]:!!s?.toggleIcon}),f=h({"accordion-body":!0,[s?.body??""]:!!s?.body}),b=re(e,d),v=re(o,d),T=re(a,d),x=re(n,d)??Ie("section",{className:g,children:[ne(k,{className:s?.title,variant:"body",noPadding:!0,weight:"bold",children:b}),ne(k,{className:s?.subtitle,variant:"label",noPadding:!0,weight:"light",children:v})]}),C=re(i,d)??ne(r,{className:y}),R=h({"accordion-item":!0,[l]:!!l});return Ie("section",{className:R,style:c,children:[Ie("section",{className:u,onClick:p,children:[T,x,C]}),ne(vo,{isOpen:d,children:ne("section",{className:f,children:t})})]})};import{useEffect as wr,useRef as Er}from"react";import{jsx as Mr}from"react/jsx-runtime";var J=({color:e,duration:o=1e3,timingFunction:t="ease-out",times:r=1,className:a="",style:n={},zIndex:i=1})=>{let s=Er(null);return wr(()=>{if(!s.current?.parentElement)return;let c=getComputedStyle(s.current.parentElement).position;["absolute","fixed","sticky","relative"].includes(c)||(s.current.parentElement.style.position="relative")},[]),Mr("span",{ref:s,onMouseDown:c=>{let{pageX:m,pageY:d,currentTarget:p}=c,u=p.getBoundingClientRect(),g=(m-u.left)*100/u.width,y=(d-u.top)*100/u.height,f=document.createElement("span");f.classList.add("ripple-effect"),f.style.animationDuration=`${o}ms`,f.style.animationTimingFunction=t,f.style.left=`${g}%`,f.style.top=`${y}%`,e&&(f.style.background=e),p.appendChild(f),setTimeout(()=>{f.remove()},Math.max(o,500)*Math.max(r,1))},className:`ripple ${a}`,style:{...n,zIndex:i}})};import{jsx as Sr,jsxs as Nr}from"react/jsx-runtime";var ko=({children:e,color:o="default",variant:t="solid",radius:r="medium",size:a="regular",noWrap:n=!1,forIcon:i=!1,className:s="",...l})=>{let c=h({button:!0,[o]:!!o,[t]:!!t,[`radius-${r}`]:!!r,[`size-${a}`]:!!a,"no-wrap":n,icon:i,[s]:!!s});return Nr("button",{...l,className:c,children:[e,Sr(J,{})]})};import{useEffect as Ir,useState as Or}from"react";import{jsx as Ro,jsxs as Lr}from"react/jsx-runtime";var Js=()=>{let{x:e,y:o,elementX:t,elementY:r,ref:a}=ho(),[n,i]=Or(!1);if(O("mouseover",l=>{let c=getComputedStyle(l.target).cursor;i(c==="pointer")}),Ir(()=>("ontouchstart"in window||navigator.maxTouchPoints||(document.body.style.cursor="none"),()=>{document.body.style.cursor="auto"}),[]),e===null||o===null||"ontouchstart"in window||navigator.maxTouchPoints)return null;let s=`translate3d(${t}px, ${r}px, 0)`;return Lr("section",{className:"cursor-overlay",ref:a,children:[Ro("span",{className:`cursor outer-circle ${n?"cursor-hover":""}`,style:{transform:s}}),Ro("span",{className:`cursor inner-circle ${n?"cursor-hover":""}`,style:{transform:s}})]})};import{useMemo as Dr}from"react";import{IoCheckmarkOutline as zr}from"react-icons/io5";import{Controller as Fr,useFormContext as Ar}from"react-hook-form";import{jsx as wo}from"react/jsx-runtime";var M=({Component:e,inputProps:o,defaultValue:t,rules:r})=>{let{control:a,setValue:n}=Ar(),{name:i,defaultValue:s}=o;return wo(Fr,{name:i,control:a,rules:r,defaultValue:s??t,render:({field:{onBlur:l,value:c},fieldState:m})=>wo(e,{value:c,error:m.error?.message,invalid:m.invalid,isTouched:m.isTouched,isDirty:m.isDirty,setValue:d=>n(i,d),onBlur:l,...o})})};import{jsx as ae,jsxs as Eo}from"react/jsx-runtime";var ee=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,className:n="",style:i={},autoFocus:s=!1,readOnly:l=!1,disabled:c=!1,autoComplete:m="off",icon:d=zr,label:p,color:u="primary",size:g="regular"})=>{let y=Dr(()=>crypto.randomUUID(),[]),{handlers:f}=S({onChange:T=>t(T.target.checked),onBlur:r,onFocus:a}),b=h({"checkbox-container":!0,[n]:!!n,[`color-${u}`]:!!u}),v=h({checkbox:!0,"is-checked":o,[`size-${g}`]:!!g});return Eo("section",{className:b,style:i,onClick:T=>T.stopPropagation(),children:[Eo("section",{className:v,children:[ae("section",{className:"checkbox-fill",children:ae(d,{size:"1.3em",className:"checkbox-icon"})}),ae("input",{id:y,type:"checkbox",name:e,className:"checkbox-input",checked:o,autoFocus:s,autoComplete:m,disabled:c||l,...f})]}),p?ae(k,{variant:"label-form",htmlFor:y,className:"checkbox-label",children:p}):null]})},Hr=({rules:e,...o})=>ae(M,{Component:ee,defaultValue:!1,inputProps:o,rules:e});ee.Controller=Hr;import{useMemo as Ur}from"react";import{ImCross as Gr}from"react-icons/im";var Br=(r=>(r.FULL_BORDER="full-border",r.CONTENT_BORDER="content-border",r.CONTENT_LINE="line",r))(Br||{}),$r=(t=>(t.HORIZONTAL="horizontal",t.VERTICAL="vertical",t))($r||{});import{jsx as Z,jsxs as Oe}from"react/jsx-runtime";var Mo=({icon:e,className:o,onClick:t})=>e?Z(e,{className:o,onClick:t}):Z("span",{}),z=({id:e,label:o,leftIcon:t,rightIcon:r,errorIcon:a=Gr,error:n,onClickLeftIcon:i,onClickRightIcon:s,fieldOrientation:l="vertical",children:c,isFocus:m=!1,variant:d,ref:p})=>{let u=h({"form-field":!0,focus:m,error:!!n,"variant-content-border":d==="content-border","variant-content-line":d==="line","variant-full-border":d==="full-border","variant-inline":l==="horizontal"}),g=y=>f=>{f.stopPropagation();let b=document.getElementById(e);b?.focus(),b?.click(),y&&y()};return Oe("section",{className:u,ref:p,children:[o?Z(k,{className:"field-label",noPadding:!0,variant:"label-form",htmlFor:e,children:o}):null,Oe("section",{className:"field-content",children:[Mo({className:"field-left-icon",icon:t,onClick:g(i)}),Z("section",{className:"field-children",children:c}),Mo({className:"field-right-icon",icon:r,onClick:g(s)})]}),!!n&&Oe("section",{className:"field-message",children:[a?Z(a,{size:10}):Z("span",{}),Z(k,{noPadding:!0,variant:"small",children:n})]})]})};import{jsx as Le}from"react/jsx-runtime";var So=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,type:n="date",className:i="",style:s={},autoFocus:l=!1,readOnly:c=!1,disabled:m=!1,placeholder:d="",autoComplete:p="off",isDirty:u=!1,isTouched:g=!1,invalid:y=!1,error:f,...b})=>{let v=Ur(()=>crypto.randomUUID(),[]),{isFocus:T,handlers:x}=S({onBlur:r,onChange:C=>t(C.target.value),onFocus:a});return Le(z,{id:v,error:f,isFocus:T,...b,children:Le("input",{id:v,type:n,name:e,className:i,style:s,value:o,autoFocus:l,autoComplete:p,placeholder:d,disabled:m,readOnly:c,...x})})},Vr=({rules:e,...o})=>Le(M,{Component:So,defaultValue:"",inputProps:o,rules:e});So.Controller=Vr;import{useMemo as _r}from"react";import{jsx as Fe}from"react/jsx-runtime";var No=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,pattern:n,type:i="text",className:s="",style:l={},autoFocus:c=!1,readOnly:m=!1,disabled:d=!1,placeholder:p="",autoComplete:u="off",isDirty:g=!1,isTouched:y=!1,invalid:f=!1,error:b,min:v,max:T,...x})=>{let C=_r(()=>crypto.randomUUID(),[]),{handlers:R,isFocus:w}=S({onChange:L=>t(L.target.value),onBlur:r,onFocus:a});return Fe(z,{id:C,error:b,isFocus:w,...x,children:Fe("input",{id:C,type:i,name:e,className:s,style:l,value:o,pattern:n,autoFocus:c,autoComplete:u,placeholder:p,disabled:d,readOnly:m,min:v,max:T,...R})})},Yr=({rules:e,...o})=>Fe(M,{Component:No,defaultValue:"",inputProps:o,rules:e});No.Controller=Yr;import{useMemo as Io}from"react";import{FiEye as jr,FiEyeOff as Xr}from"react-icons/fi";import{IoIosWarning as Wr}from"react-icons/io";import{jsx as Ae}from"react/jsx-runtime";var Oo=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,className:n="",style:i={},autoFocus:s=!1,readOnly:l=!1,disabled:c=!1,placeholder:m="",autoComplete:d="off",isDirty:p=!1,isTouched:u=!1,invalid:g=!1,error:y,...f})=>{let b=Io(()=>crypto.randomUUID(),[]),[v,T]=go(["password","text"]),{isFocus:x,handlers:C}=S({onBlur:r,onChange:w=>t(w.target.value),onFocus:a}),R=Io(()=>v==="password"?jr:v==="text"?Xr:Wr,[v]);return Ae(z,{id:b,error:y,isFocus:x,...f,rightIcon:R,onClickRightIcon:()=>T(),children:Ae("input",{id:b,type:v,name:e,className:n,style:i,value:o,autoFocus:s,autoComplete:d,placeholder:m,disabled:c,readOnly:l,...C})})},Qr=({rules:e,...o})=>Ae(M,{Component:Oo,defaultValue:"",inputProps:o,rules:e});Oo.Controller=Qr;import Cn from"color";import{useCallback as xn,useEffect as Tn,useMemo as Go,useRef as Pn,useState as Uo}from"react";import{HexAlphaColorPicker as kn,HexColorInput as Rn}from"react-colorful";import{FaEyeDropper as wn}from"react-icons/fa6";import En from"use-eye-dropper";import{createContext as nn,useCallback as Ao,useContext as an,useRef as sn,useState as Do}from"react";import{ImCross as ln}from"react-icons/im";import{useMemo as on,useRef as tn}from"react";import{createPortal as Zr}from"react-dom";var Lo=({children:e,id:o})=>{let t=oo(o);return t===null?null:Zr(e,t)};import{useMemo as qr}from"react";import{jsx as en}from"react/jsx-runtime";var Jr=(a=>(a.OPAQUE="opaque",a.TRANSPARENT="transparent",a.BLUR="blur",a.NONE="none",a))(Jr||{}),Fo=({opacity:e=.6,backdrop:o="blur",zIndex:t,backdropOnClick:r,modalState:a})=>{let n=h({"modal-backdrop":!0,"backdrop-close":a==="CLOSING"||a==="CLOSED"}),i=qr(()=>({opaque:{background:`hsl(from var(--background-paper) h s l / ${e*100}%)`},transparent:{background:"transparent"},blur:{background:`hsl(from var(--background-paper) h s l / ${e*100}%)`,backdropFilter:"blur(5px)"},none:{display:"none"}})[o]??{},[o,e]);return o==="none"?null:en("section",{tabIndex:-1,onClick:r,className:n,style:{zIndex:t,...i}})};import{jsx as De,jsxs as rn}from"react/jsx-runtime";var U=({id:e,children:o,isOpen:t,onClose:r,className:a="",style:n={},rootStyle:i={},animation:s="fade-down",closeAnimationClassName:l="modal-close",modalRef:c,closeOnClickOutside:m=!0,transitionDuration:d=300,windowOffset:p=10,offset:u=20,position:g,containerRef:y,zIndex:f=1e3,...b})=>{let v=on(()=>crypto.randomUUID(),[]),T=tn(null),{modalState:x,isVisible:C}=uo({transitionDuration:d,isOpen:t});po({modalRef:c??T,containerRef:y,offset:u,windowOffset:p,position:g,isOpen:C}),qe(c??T,()=>{t&&m&&r()});let R=h({"modal-content":!0,[a]:!!a,[`animation-${s}`]:!!s&&s!=="none",[l]:x==="CLOSING"||x==="CLOSED"});return C?rn(Lo,{id:`modal-${e}-${v}`,children:[De(Fo,{...b,modalState:x,zIndex:f}),De("section",{className:"modal",ref:c??T,style:{maxWidth:`calc(100dvw - ${p*2}px)`,maxHeight:`calc(100dvh - ${p*2}px)`,...i,zIndex:+f+1},children:De("section",{style:{...n,animationDuration:`${d}ms`},className:R,children:o})})]}):null};import{jsx as V,jsxs as pn}from"react/jsx-runtime";var zo=nn(null),cn=()=>{let e=an(zo);if(!e)throw new Error("useActionModalContext must be used within a ActionModal");return e},ie=({children:e,isOpen:o,onClose:t,actionRequired:r,icon:a,noCloseButton:n,lineOnTop:i=!1,backCard:s=!1,noPadding:l=!1,className:c="",style:m={},...d})=>{let[p,u]=Do(!1),g=sn(null),y=Ao(()=>{g.current?.classList.add("shake-animation"),setTimeout(()=>{g.current?.classList.remove("shake-animation")},500)},[]),f=h({"action-modal-content":!0,"back-card":s,"line-on-top":i,"no-padding":l});return V(zo.Provider,{value:{onClose:t,isActionInProgress:p,setIsActionInProgress:u},children:V(U,{className:"action-modal",id:"action-modal",animation:"bounce",opacity:.8,isOpen:o,onClose:t,...d,backdropOnClick:r?y:t,position:"center",children:V("section",{ref:g,className:"modal-content",children:pn("section",{className:f,children:[!n&&!r&&V("section",{className:"close-modal-button",onClick:()=>t(),children:V(ln,{})}),a?V(k,{variant:"header4",className:"action-modal-icon",children:V(a,{})}):null,V("section",{className:"action-modal-body",children:V("section",{className:`action-modal-content ${c}`,style:m,children:e})})]})})})})},dn=({onClick:e,children:o,isLoading:t,...r})=>{let{onClose:a,isActionInProgress:n,setIsActionInProgress:i}=cn(),[s,l]=Do(!1),c=Ao(()=>{l(!0),i(!0);let m=e();m instanceof Promise?m.then(()=>{a(),l(!1),i(!1)}):(a(),l(!1),i(!1))},[e,a,i]);return!s&&n?null:V(ko,{...r,onClick:c,isLoading:t||s,children:o})};ie.ActionButton=dn;import{useMemo as mn}from"react";import{ImCross as un}from"react-icons/im";import{jsx as ze,jsxs as fn}from"react/jsx-runtime";var zc=({children:e,isOpen:o,onClose:t,position:r="left",size:a,className:n="",...i})=>{let s=mn(()=>({top:{height:a,width:"100%"},left:{height:"100%",width:a},right:{height:"100%",width:a},bottom:{height:a,width:"100%"}})[r],[r,a]);return fn(U,{id:"aside",isOpen:o,onClose:t,opacity:.6,windowOffset:0,animation:"none",className:`aside-modal ${n} ${r}`,rootStyle:s,backdropOnClick:t,position:r,...i,children:[ze("span",{className:"close-modal-button",onClick:t,children:ze(un,{})}),ze("section",{className:"aside-modal-content",children:e})]})};import{jsx as se,jsxs as Ho}from"react/jsx-runtime";var jc=({title:e,onAccept:o,onReject:t=()=>null,acceptText:r,rejectText:a,children:n,isLoading:i,...s})=>se(ie,{...s,backCard:!0,children:Ho("section",{className:"confirmation-modal",children:[se(k,{variant:"header4",children:e}),se("section",{children:n}),Ho("section",{className:"confirmation-modal-actions",children:[!i&&se(ie.ActionButton,{variant:"flat",onClick:t,children:a}),se(ie.ActionButton,{isLoading:i,onClick:o,children:r})]})]})});import{useCallback as hn,useMemo as gn}from"react";import{Fragment as Bo,jsx as $,jsxs as he}from"react/jsx-runtime";var _=({children:e,isOpen:o,onClose:t,id:r,menuContentRef:a,contentClassName:n="",contentStyle:i={},className:s="",...l})=>{let c=h({"menu-modal":!0,[s]:!!s});return $(U,{className:c,...l,id:`menu-${r}`,isOpen:o,onClose:t,children:$("ul",{className:`menu-content ${n}`,role:"listbox",style:i,ref:a,children:e})})},bn=({children:e,label:o="",asCheckbox:t,icon:r,id:a,disabled:n=!1,selected:i=!1,className:s="",style:l={},onClick:c=()=>null,...m})=>{let d=h({"menu-option":!0,[s]:!0,"is-disabled":n,"is-selected":i}),p=hn(g=>{g.stopPropagation(),n||c(!i)},[n,c,i]),u=gn(()=>e||(t?$(ee,{className:"menu-checkbox",disabled:n,value:i,setValue:g=>c(g),name:"option",style:{pointerEvents:"none"},size:"small",label:he(Bo,{children:[r!==void 0&&$(r,{className:"option-icon"}),$(k,{variant:"label",children:o})]})}):he(Bo,{children:[r!==void 0&&$(r,{className:"option-icon"}),typeof o=="string"?$(k,{variant:"label",children:o}):o]})),[t,e,n,r,o,c,i]);return he("li",{...m,id:a,role:"option",tabIndex:-1,"aria-selected":i,"aria-disabled":n,onClick:p,className:d,style:l,children:[$(J,{zIndex:10}),u]})},yn=()=>$("li",{children:$(fe,{className:"divider"})}),$o=({children:e,className:o="",...t})=>$("li",{tabIndex:-1,className:"menu-label",children:$(k,{...t,variant:"small",className:`menu-group-label ${o}`,children:e})}),vn=({children:e,label:o,className:t="",style:r={},contentClassName:a="",contentStyle:n={},...i})=>{let s=h({"menu-group":!0,[t]:!!t});return he("li",{tabIndex:-1,...i,className:s,style:r,children:[o&&$($o,{children:o}),$("ul",{className:`menu-group-content ${a}`,role:"listbox",style:n,children:e})]})};_.Option=bn;_.Divider=yn;_.GroupLabel=$o;_.Group=vn;import{jsx as W,jsxs as ge}from"react/jsx-runtime";var Vo=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,showValueText:n=!1,className:i="",style:s={},autoFocus:l=!1,readOnly:c=!1,disabled:m=!1,placeholder:d="",autoComplete:p="off",isDirty:u=!1,isTouched:g=!1,invalid:y=!1,error:f,...b})=>{let{open:v,isSupported:T}=En(),[x,C]=Uo(o),R=Go(()=>crypto.randomUUID(),[]),w=Pn(null),[L,F]=Uo(!1),{handlers:B,isFocus:H}=S({onChange:I=>C(I.target.value),onBlur:I=>{D(),r&&r(I)},onFocus:I=>{D(),a&&a(I)}}),P=Go(()=>{let I=Cn(o===""?"#000000":o);return I.isLight()||I.alpha()<.5?"#000000":"#FFFFFF"},[o]),E=async()=>{let{sRGBHex:I}=await v();t(I)};Tn(()=>{C(o)},[o]);let D=xn(()=>{x.match(/^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i)?t(x):C(o)},[x,t,o]),j=h({"input-color-box":!0,[i]:!!i});return ge(z,{id:R,error:f,isFocus:H,...b,children:[ge("section",{className:"input-color",onClick:I=>{I.stopPropagation(),F(!0)},ref:w,children:[W("section",{className:j,style:{borderColor:P,background:o,color:o,...s}}),n?W("input",{id:R,name:e,value:x,placeholder:d,readOnly:c,autoFocus:l,disabled:m,autoComplete:p,className:"color-input",...B}):null]}),ge(U,{id:"input-color",isOpen:L,onClose:()=>F(!1),position:"bottom right",offset:5,backdrop:"transparent",containerRef:w,className:"input-color-selector",children:[W(kn,{id:R,color:o,onChange:t}),ge("section",{className:"color-input-container",children:[T()?W(wn,{onClick:()=>{E()}}):W("span",{}),W(Rn,{className:"color-input",id:R,name:e,color:o,placeholder:"Type a color",prefixed:!0,alpha:!0,onChange:t}),W("span",{})]})]})]})},Mn=({rules:e,...o})=>W(M,{Component:Vo,defaultValue:"#147EFB",inputProps:o,rules:e});Vo.Controller=Mn;import{useCallback as Nn,useEffect as In,useMemo as _o,useState as On}from"react";import{FaMagnifyingGlass as Ln,FaRegTrashCan as Yo}from"react-icons/fa6";import{IoIosWarning as Fn}from"react-icons/io";import{PiFilePdfFill as An,PiFilePngFill as Dn}from"react-icons/pi";import{createElement as Sn}from"react";var le=({tag:e="section",children:o,className:t,style:r,flow:a,columnSize:n,rowSize:i,column:s,row:l,pc:c,pi:m,ps:d,jc:p,ji:u,js:g,ac:y,ai:f,as:b,gtc:v,gtr:T,gta:x,gt:C,gap:R,...w})=>Sn(e,{className:t,...w,style:{...r,...a?{gridAutoFlow:a}:{},...n?{gridAutoColumns:n}:{},...i?{gridAutoRows:i}:{},...s?{gridColumn:s}:{},...l?{gridRow:l}:{},...c?{placeContent:c}:{},...m?{placeItems:m}:{},...d?{placeSelf:d}:{},...p?{justifyContent:p}:{},...u?{justifyItems:u}:{},...g?{justifySelf:g}:{},...y?{alignContent:y}:{},...f?{alignItems:f}:{},...b?{alignSelf:b}:{},...v?{gridTemplateColumns:v}:{},...T?{gridTemplateRows:T}:{},...x?{gridTemplateAreas:x}:{},...C?{gridTemplate:C}:{},...R?{gap:R}:{},display:"grid"}},o);import{Fragment as Hn,jsx as A,jsxs as Y}from"react/jsx-runtime";var jo=({name:e,value:o={},setValue:t,onBlur:r,onFocus:a,className:n="",style:i={},autoFocus:s=!1,readOnly:l=!1,disabled:c=!1,placeholder:m="Click to upload or drag and drop",autoComplete:d="off",accept:p,multiple:u=!1,limitSize:g=5e6,errorTimeout:y=3e3,label:f})=>{let[b,v]=On(null),T=_o(()=>crypto.randomUUID(),[]),{handlers:x}=S({onBlur:r,onFocus:a,onChange:P=>{let{files:E}=P.target;E&&C(E)}});In(()=>{let P=null;return b!==null&&(P=setTimeout(()=>{v(null)},y)),()=>{P!==null&&clearTimeout(P)}},[b,y]);let C=P=>{let E=u?{...o}:{},D=u?P.length:1;for(let j=0;j<D;j++){let I=P.item(j);I&&(I.size<g?E[I.name]=I:v(`File '${I.name}' size is larger than ${te(g)}`))}t(E)},R=P=>{P.preventDefault(),P.stopPropagation(),P.dataTransfer.files&&P.dataTransfer.files.length&&C(P.dataTransfer.files)},w=Nn(P=>({"image/png":Dn,"application/pdf":An})[P]??Fn,[]),L=P=>{let E={...o};delete E[P.name],t(E)},F=()=>{t({})},B=_o(()=>Object.values(o).reduce((P,{size:E})=>P+E,0),[o]),H=(P,E)=>{let D=w(P.type);return Y("section",{className:"input-file-card",children:[A("section",{className:"file-card--image",children:A(D,{})}),Y(le,{children:[A(k,{variant:"label",noPadding:!0,nowrap:!0,children:P.name}),A(k,{noPadding:!0,variant:"small",children:te(P.size)})]}),A("section",{className:"file-card--delete",onClick:()=>L(P),children:A(Yo,{})})]},E)};return Y("section",{className:"input-file-container",children:[!!f&&A(k,{variant:"label-form",htmlFor:T,noPadding:!0,children:f}),Y("section",{className:"input-file--box",onDrop:R,children:[A("section",{className:"input-file--box--icon",children:A(Ln,{})}),Y(le,{children:[A(k,{variant:"label-form",htmlFor:T,noPadding:!0,weight:"bold",children:m}),Y(k,{variant:"small",noPadding:!0,children:["Max size (",te(g),")"]})]}),A("input",{id:T,type:"file",name:e,value:"",placeholder:m,readOnly:l,autoFocus:s,disabled:c,autoComplete:d,className:n,style:i,accept:p,multiple:u,title:"",...x})]}),b!==null&&A(k,{variant:"small",noPadding:!0,className:"error",children:b}),Object.keys(o).length>0&&Y(Hn,{children:[u&&Y("span",{className:"total-info",children:[Y(k,{variant:"small",noPadding:!0,children:[Object.keys(o).length," files - ",te(B)]}),A("span",{className:"total-info--delete",onClick:F,children:A(Yo,{})})]}),A("section",{className:"input-file--files",children:A("section",{className:"input-file--files--content",children:Object.values(o).map(H)})})]})]})},zn=({rules:e,...o})=>A(M,{Component:jo,defaultValue:{},inputProps:o,rules:e});jo.Controller=zn;import{useEffect as Bn,useMemo as Xo,useState as $n}from"react";import{jsx as He}from"react/jsx-runtime";var Wo={comma:/(?!^-)[^0-9,]/g,dot:/(?!^-)[^0-9.]/g},Qo=(e,o=".")=>{let t=o==="."?Wo.dot:Wo.comma,r=e.replace(t,"").replace(",",".");return r||""},be=(e,o)=>!e||Number.isNaN(e)?o(0):o(e),Zo=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,pattern:n,className:i="",style:s={},autoFocus:l=!1,readOnly:c=!1,disabled:m=!1,placeholder:d="",autoComplete:p="off",isDirty:u=!1,isTouched:g=!1,invalid:y=!1,error:f,min:b,max:v,decimalSeparator:T,format:x={locales:"en-US",style:"decimal",minimumFractionDigits:0,maximumFractionDigits:2},...C})=>{let R=Xo(()=>crypto.randomUUID(),[]),w=Xo(()=>{if(typeof x=="function")return x;let{locales:P,...E}=x;return Intl.NumberFormat(P,E).format},[x]),[L,F]=$n(be(o,w)),{handlers:B,isFocus:H}=S({onChange:P=>{let E=Qo(P.target.value,T);E.endsWith(".")?F(P.target.value):(F(be(Number(E),w)),t(Number(E)))},onBlur:P=>{let E=Qo(P.target.value,T);F(be(Number(E),w)),t(Number(E)),r&&r(P)},onFocus:a});return Bn(()=>{let P=be(o,w);L!==P&&F(P)},[w,L,o]),He(z,{id:R,error:f,isFocus:H,...C,children:He("input",{id:R,type:"text",name:e,className:i,style:s,value:L,pattern:n,autoFocus:l,autoComplete:p,placeholder:d,disabled:m,readOnly:c,min:b,max:v,...B})})},Gn=({rules:e,...o})=>He(M,{Component:Zo,defaultValue:0,inputProps:o,rules:e});Zo.Controller=Gn;import{useMemo as Un}from"react";import{jsx as ye,jsxs as Ko}from"react/jsx-runtime";var qo=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,className:n="",style:i={},autoFocus:s=!1,readOnly:l=!1,disabled:c=!1,autoComplete:m="off",radioValue:d,label:p,color:u="primary",size:g="regular"})=>{let y=Un(()=>crypto.randomUUID(),[]),{handlers:f}=S({onChange:T=>t(T.target.value),onBlur:r,onFocus:a}),b=h({"radio-container":!0,[n]:!!n,[`color-${u}`]:!!u}),v=h({radio:!0,"is-checked":d===o,[`size-${g}`]:!!g});return Ko("section",{className:b,style:i,children:[Ko("section",{className:v,children:[ye("section",{className:"radio-fill"}),ye("input",{id:y,type:"radio",name:e,className:`radio-input ${n}`,style:i,value:d,checked:d===o,autoFocus:s,autoComplete:m,disabled:c||l,...f})]}),p?ye(k,{variant:"label-form",htmlFor:y,className:"radio-label",children:p}):null]})},Vn=({rules:e,...o})=>ye(M,{Component:qo,defaultValue:"",inputProps:o,rules:e});qo.Controller=Vn;import{createContext as Wn,useCallback as it,useContext as Qn,useMemo as Ce,useRef as st,useState as Zn}from"react";import{ImCross as Kn}from"react-icons/im";import{PiCaretDown as qn}from"react-icons/pi";import{useEffect as _n}from"react";import{Fragment as Yn,jsx as Be,jsxs as Jo}from"react/jsx-runtime";var et=({isLoading:e=!1,hasNextPage:o=!1,loadMore:t,customLoadMoreElement:r,emptyMessage:a,children:n})=>{let{ref:i,inView:s}=io(),l=Je(e,100);_n(()=>{o&&s&&!l&&t()},[o,l,t,s]);let c=Array.isArray(n)?n.length>0:!!n;return Jo(Yn,{children:[n,Jo("section",{className:"infinity-scroll",children:[!!a&&!c&&!l&&Be("p",{className:"empty-message",children:a}),(o||l)&&(r?r(i):Be("section",{ref:i,className:"loading",children:l&&Be("span",{className:"loading--icon",children:":D"})}))]})]})};import{useCallback as $e,useMemo as ot}from"react";import{jsx as tt}from"react/jsx-runtime";var rt=({children:e,value:o})=>{let{multiselect:t,isEqualComparator:r,maxOptions:a,selectedValue:n,setValue:i,setIsOpen:s}=nt(),l=$e((u,g)=>["number","string"].includes(typeof u)?u===g:!!r&&r(u,g),[r]),c=$e(u=>{if(u)if(t){if(a&&Array.isArray(n)&&n.length>=a)return;i([...n,o])}else i(o),s(!1);else t?i(n.filter(g=>!l(g,o))):(i(null),s(!1))},[t,a,n,i,o,s,l]),m=ot(()=>n===""||n===null?!1:Array.isArray(n)?["number","string"].includes(typeof o)?n.includes(o):n.some(u=>!!r&&r(o,u)):l(o,n),[l,r,n,o]),d=$e(u=>{["Enter"," "].includes(u.key)&&(u.preventDefault(),c(!(m&&t)))},[c,m,t]),p=ot(()=>typeof e=="string"?tt(k,{"data-value":o,variant:"label",nowrap:!0,children:e}):e,[e,o]);return tt(_.Option,{label:p,onKeyDown:d,asCheckbox:t,selected:m,onClick:u=>c(t?u:!0)})};import{useCallback as Ue,useEffect as Ve,useRef as Ge,useState as _e}from"react";import{jsx as ve,jsxs as Xn}from"react/jsx-runtime";var jn=({height:e,minHeight:o,containerRef:t,offset:r,windowOffset:a})=>{let[n,i]=_e(void 0),s=Ue(()=>{let l=t.current?.getBoundingClientRect().bottom??0,c=window.innerHeight-l-a-r-5,m=window.innerHeight-a*3,d=c<o?m:c,p=Math.min(d,e),u=Math.max(p,o);i(`${Math.round(u)}px`)},[t,a,r,o,e]);return Ve(()=>{s()},[s]),Q(t,s),O("resize",s),{h:n}},at=({children:e,searchQueryValue:o,searchQueryPlaceholder:t="Search option",searchQueryClassName:r="",searchQueryStyle:a={},onSearchQuery:n,containerRef:i,height:s=300})=>{let l=Ge(null),c=Ge(null),[m,d]=_e(""),p=Ge(null),u=ue("(max-width: 480px)");O("keydown",x=>{if(["ArrowDown","ArrowUp"].includes(x.code)){x.preventDefault();let C=document.activeElement;if(C?.tagName==="LI")switch(x.code){case"ArrowDown":C?.nextSibling?.focus();break;case"ArrowUp":C?.previousElementSibling?.focus();break}}});let g=Ue(x=>{let{value:C}=x.target;n&&n(C),d(C)},[n]);Ve(()=>{p.current&&p.current.focus()},[]);let{h:y}=jn({height:s,minHeight:150,containerRef:i,offset:5,windowOffset:10}),[f,b]=_e(!1),v=Ue(()=>{let x=Math.round(l.current?.getBoundingClientRect().height??0)+2,C=Math.round(c.current?.scrollHeight??0);b(x>=C)},[]);Ve(v,[v]),Q(l,v),Q(c,v),O("resize",v);let T=h({"select-options-header":!0,[r]:!!r});return Xn("section",{className:`select-options ${n?"with-search-query":""}`,style:u?{maxHeight:window.innerHeight-100,width:window.innerWidth-100}:{height:f?"auto":y,maxHeight:s,width:i.current?.offsetWidth??"auto"},children:[n&&ve("section",{className:T,style:a,children:ve("input",{name:"query",className:"input-search",value:o??m,onChange:g,placeholder:t,onClick:x=>x.stopPropagation(),ref:p,autoFocus:!0})}),ve("section",{className:"select-options-list-container",ref:l,children:ve("ul",{className:"select-options-list",ref:c,children:e})})]})};import{jsx as N,jsxs as lt}from"react/jsx-runtime";var ct=Wn(null),nt=()=>{let e=Qn(ct);if(!e)throw new Error("useSelectContext must be used within a Select component");return e},Jn=({children:e})=>{let o=Ce(()=>typeof e=="string"?N(k,{noPadding:!0,variant:"label",nowrap:!0,children:e}):e,[e]);return N(_.GroupLabel,{children:o})},ea=({value:e})=>N(k,{variant:"label",nowrap:!0,children:typeof e=="string"||typeof e=="number"?e:JSON.stringify(e)}),oa=({value:e,multiselect:o})=>o?N(k,{noPadding:!0,nowrap:!0,variant:"label",children:`${e.length} item${e.length===1?"":"s"} selected`}):e===null?null:N(k,{noPadding:!0,variant:"label",nowrap:!0,children:typeof e=="string"||typeof e=="number"?e:JSON.stringify(e)}),K=({options:e,isEqualComparator:o,searchQueryValue:t,searchQueryPlaceholder:r,onSearchQuery:a,loadMore:n=()=>null,isLoading:i=!1,hasNextPage:s=!1,emptyMessage:l="No options to select",multiselect:c,optionComponent:m=ea,valueComponent:d=oa,maxOptions:p,children:u,name:g,value:y,setValue:f,onBlur:b,onFocus:v,className:T="",style:x={},showClearOption:C=!1,height:R,searchQueryStyle:w,searchQueryClassName:L,autoFocus:F=!1,readOnly:B=!1,disabled:H=!1,placeholder:P="",autoComplete:E="off",isDirty:D=!1,isTouched:j=!1,invalid:I=!1,error:Te,...It})=>{let Ot=st(null),pe=ue("(max-width: 480px)"),Ze=Ce(()=>crypto.randomUUID(),[]),Pe=st(null),[me,Ke]=Zn(!1),ke=it(X=>{Ke(X&&!H)},[H]),Lt=it(X=>{X.stopPropagation(),f(c?[]:null)},[c,f]),Re=Ce(()=>c?y.length>0:!!y,[c,y]),Ft=Ce(()=>u||e.map((X,At)=>N(K.Option,{value:X,children:N(m,{value:X})},At)),[m,u,e]);return N(ct.Provider,{value:{selectedValue:y,setValue:f,multiselect:c??!1,isEqualComparator:o,maxOptions:p??null,setIsOpen:Ke},children:N(z,{id:Ze,error:Te,isFocus:me,ref:Pe,...It,children:lt("section",{id:g,style:x,onBlur:b,className:`select ${H?"disabled":""} ${T}`,children:[lt("section",{id:Ze,className:`select-container ${Re&&C?"three-columns":""}`,onClick:()=>ke(!0),children:[N("button",{type:"button",className:`input-button ${(Array.isArray(y)?y.length>0:y)?"":"placeholder"}`,"aria-haspopup":"listbox","aria-expanded":me,onFocus:X=>{ke(!0),v&&v(X)},children:Re?N(d,{...c?{value:y,multiselect:c}:{value:y}}):N(k,{variant:"label",noPadding:!0,nowrap:!0,children:P})}),Re&&C&&N("section",{className:"icon-close",onClick:Lt,children:N(Kn,{})}),N(qn,{className:`select-caret-icon ${me&&"is-select-open"}`})]}),N(_,{id:"form-select",isOpen:me,onClose:()=>ke(!1),backdrop:pe?"blur":"transparent",opacity:pe?.8:.4,position:pe?"center":"bottom",offset:5,modalRef:Ot,windowOffset:10,transitionDuration:200,containerRef:pe?void 0:Pe,contentClassName:"select-menu-content",className:"select-options-menu",children:N(at,{containerRef:Pe,onSearchQuery:a,searchQueryValue:t,searchQueryPlaceholder:r,searchQueryClassName:L,searchQueryStyle:w,height:R,children:N(et,{isLoading:i,hasNextPage:s,loadMore:n,emptyMessage:l,children:Ft})})})]})})})},ta=({rules:e,...o})=>N(M,{Component:K,defaultValue:[],inputProps:{...o,multiselect:!0},rules:e}),ra=({rules:e,...o})=>N(M,{Component:K,defaultValue:null,inputProps:{...o,multiselect:!1},rules:e}),na=e=>{let{multiselect:o}=e;return o?N(ta,{...e,multiselect:!0}):N(ra,{...e,multiselect:!1})};K.Controller=na;K.Option=rt;K.OptionLabel=Jn;import{useMemo as aa}from"react";import{jsx as xe,jsxs as sa}from"react/jsx-runtime";var dt=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,min:n,max:i,step:s,onlySlider:l=!1,className:c="",style:m={},autoFocus:d=!1,readOnly:p=!1,disabled:u=!1,placeholder:g="",autoComplete:y="off",isDirty:f=!1,isTouched:b=!1,invalid:v=!1,error:T,...x})=>{let C=aa(()=>crypto.randomUUID(),[]),R=B=>{r&&r(B);let H=parseInt(`${o}`);n!==void 0&&H<n&&t(n),i!==void 0&&H>i&&t(i),t(H)},{isFocus:w,handlers:L}=S({onBlur:R,onChange:B=>t(+B.target.value),onFocus:a}),F=h({"input-slider":!0,"is-focus":w});return xe(z,{id:C,error:T,isFocus:w,...x,children:sa("section",{className:F,children:[xe("input",{id:C,type:"range",name:e,className:`slider ${c}`,style:m,value:o,autoFocus:d,autoComplete:y,placeholder:g,disabled:u,readOnly:p,min:n,max:i,step:s,...L}),!l&&xe("input",{id:C,type:"number",name:e,className:`slider-number ${c}`,style:m,value:o,autoComplete:y,disabled:u,readOnly:p,min:n,max:i,step:s,...L})]})})},ia=({rules:e,...o})=>xe(M,{Component:dt,defaultValue:0,inputProps:o,rules:e});dt.Controller=ia;import{useMemo as la}from"react";import{jsx as Ye}from"react/jsx-runtime";var pt=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,rows:n=4,resize:i="vertical",className:s="",style:l={},autoFocus:c=!1,readOnly:m=!1,disabled:d=!1,placeholder:p="",autoComplete:u="off",isDirty:g=!1,isTouched:y=!1,invalid:f=!1,error:b,...v})=>{let T=la(()=>crypto.randomUUID(),[]),{handlers:x,isFocus:C}=S({onBlur:r,onChange:w=>t(w.target.value),onFocus:a}),R=h({textarea:!0,[s]:!!s});return Ye(z,{id:T,error:b,isFocus:C,...v,children:Ye("textarea",{id:T,name:e,className:R,style:{resize:i,...l},value:o,rows:n,...x,autoFocus:c,autoComplete:u,placeholder:p,disabled:d,readOnly:m})})},ca=({rules:e,...o})=>Ye(M,{Component:pt,defaultValue:"",inputProps:o,rules:e});pt.Controller=ca;import{useMemo as fa}from"react";import{useState as ua}from"react";import{cloneElement as da}from"react";import{Fragment as pa,jsx as mt,jsxs as ma}from"react/jsx-runtime";var ce=({position:e="top",children:o,content:t,offset:r=5,disabled:a=!1})=>{let{containerRef:n,openModal:i,closeModal:s,isOpen:l}=so(),c=h({tooltip:!0,[e]:!0});return O("mouseenter",()=>i(),n),O("mouseleave",()=>s(),n),a?o:ma(pa,{children:[da(o,{ref:n}),mt(U,{backdrop:"none",id:"tooltip",isOpen:l,containerRef:n,onClose:s,position:e,className:c,closeOnClickOutside:!1,offset:6+ +r,windowOffset:10,transitionDuration:100,closeAnimationClassName:"close-animation",children:mt("span",{className:"tooltip-content",children:t})})]})};import{jsx as ut}from"react/jsx-runtime";var Em=({children:e,value:o,position:t,offset:r,tooltipText:a,tooltipCopiedText:n,copiedTextTimeout:i=500})=>{let[s,l]=ua(!1);return ut(ce,{content:s&&n?n:a,position:t,offset:r,children:ut("span",{onClick:()=>{l(!0),navigator.clipboard.writeText(o),setTimeout(()=>l(!1),i)},children:e})})};import{jsx as G,jsxs as gt}from"react/jsx-runtime";var ft={small:1,regular:1.2,large:1.4},ht={small:2,regular:2.5,large:3},bt=({name:e,value:o,setValue:t,onBlur:r,onFocus:a,className:n="",style:i={},autoFocus:s=!1,readOnly:l=!1,disabled:c=!1,placeholder:m="",autoComplete:d="off",label:p,leftLabel:u,rightLabel:g,width:y="regular",size:f="regular",dotHoverSize:b=1.3,padding:v=.25,leftIcon:T,rightIcon:x,internalLeftIcon:C,internalRightIcon:R,leftIconTooltip:w,rightIconTooltip:L,color:F})=>{let B=fa(()=>crypto.randomUUID(),[]),{handlers:H}=S({onChange:Te=>t(Te.target.checked),onBlur:r,onFocus:a}),P=h({"switch-container":!0,[n]:!!n,[`color-${F}`]:!!F}),E=h({switch:!0,"is-checked":o,"is-readonly":!c&&l}),D=ft[f]??ft.regular,j=(ht[y]??ht.regular)*D,I=Math.min(v,D);return gt("section",{className:P,style:{...i,"--width":`${j}em`,"--dot-size":`${D}em`,"--dot-hover-size":`${D*Math.min(Math.max(b,1),2)}em`,"--padding":`${I}em`},children:[u?G(k,{variant:"label-form",className:"switch-label",htmlFor:B,children:u}):null,T!==void 0&&G(ce,{content:w,disabled:!w,offset:10,children:G(T,{size:`${D*.7}em`,className:"switch-icon",onClick:()=>t(!o)})}),gt("section",{className:E,children:[C!==void 0&&G("span",{className:"switch-internal-left-icon",children:G(C,{size:`${D*.7}em`})}),R!==void 0&&G("span",{className:"switch-internal-right-icon",children:G(R,{size:`${D*.7}em`})}),G("span",{className:"switch-dot"}),G("input",{id:B,type:"checkbox",name:e,className:`switch-checkbox ${n}`,style:i,checked:o,autoFocus:s,autoComplete:d,placeholder:m,disabled:c||l,...H})]}),x!==void 0&&G(ce,{content:L,disabled:!L,offset:10,children:G(x,{size:`${D*.7}em`,className:"switch-icon",onClick:()=>t(!o)})}),p||g?G(k,{variant:"label-form",className:"switch-label",htmlFor:B,children:p||g}):null]})},ha=({rules:e,...o})=>G(M,{Component:bt,defaultValue:!1,inputProps:o,rules:e});bt.Controller=ha;import{jsx as ga}from"react/jsx-runtime";var $m=({alt:e="",loading:o="eager",...t})=>ga("img",{loading:o,alt:e,...t,width:"100%"});import{useMemo as kt,useState as ka}from"react";import{useMemo as ba}from"react";import{MdArrowDownward as ya,MdArrowUpward as va}from"react-icons/md";import{jsx as oe,jsxs as yt}from"react/jsx-runtime";var vt=({header:e,sortBy:o,icon:t,width:r,field:a,toggleSortField:n,sortField:i,orderField:s,hidden:l})=>{let c=o!==void 0?o:a,m=h({"sort-on-click":!!c}),d=c?()=>n(c):void 0,p=ba(()=>c?oe("span",{className:"sort-icon",children:!!i&&i===c&&(s==="asc"?oe(va,{}):oe(ya,{}))}):null,[c,i,s]);return l?null:yt("th",{style:{width:r},className:m,onClick:d,children:[yt(le,{flow:"column",gap:"0.5em",jc:"space-between",ai:"center",children:[t?oe(t,{}):null,oe(k,{variant:"label",noPadding:!0,children:e}),p]}),oe(J,{color:"var(--primary-700)"})]})};import{jsx as je}from"react/jsx-runtime";var Ca=(e,{field:o,render:t,Component:r},a)=>{if(o&&e[o])return je(k,{noPadding:!0,nowrap:!0,children:e[o]});if(t)return t(e,a);if(r)return je(r,{data:e,rowKey:a})},Ct=(e,o,t)=>o.map((r,a)=>r.hidden?null:je("td",{children:Ca(e,r,t)},a)),xt=(e,o,t)=>o?e.toSorted((r,a)=>{let n=r[o],i=a[o];return["number","boolean","string"].includes(typeof n)&&["number","boolean","string"].includes(typeof i)?n===i?0:t==="asc"?n>i?1:-1:n>i?-1:1:0}):e;import{useCallback as xa,useState as Ta}from"react";var Tt=()=>{let[[e,o],t]=Ta([null,null]),r=xa(a=>{t(([n,i])=>a!==n?[a,"asc"]:i==="asc"?[a,"desc"]:[null,null])},[]);return{sortBy:e,order:o,toggleSortField:r}};import{jsx as Pa}from"react/jsx-runtime";var Pt=({data:e,columns:o,isSelected:t=!1,selectable:r=!1,rowKey:a})=>{let n=h({"row-selected":r&&t});return Pa("tr",{className:n,children:Ct(e,o,a)})};import{jsx as q,jsxs as Ra}from"react/jsx-runtime";var gu=({columns:e,data:o,width:t,selectable:r=!1,rowId:a,className:n="",tableClassName:i=""})=>{let[s,l]=ka({}),c=h({"smart-table":!0,[i]:!!i,"layout-fixed":t==="content","layout-scrollable":t==="scroll"}),m=h({"smart-table-container":!0,[n]:!!n}),{sortBy:d,order:p,toggleSortField:u}=Tt(),g=kt(()=>{let f=[...e];return r&&(f=[{header:`${Object.values(s).length}`,render:(b,v)=>q(ee,{name:`selected-${v}`,value:`${v}`in s,setValue:T=>{l(x=>{let C={...x};return T?C[`${v}`]=b:delete C[`${v}`],C})}})},...f]),f},[e,r,s]),y=kt(()=>xt(o,d,p),[o,d,p]);return q("section",{className:m,children:Ra("table",{className:c,children:[q("thead",{children:q("tr",{children:g.map((f,b)=>q(vt,{toggleSortField:u,sortField:d,orderField:p,...f},b))})}),q("tbody",{children:y.map(f=>q(Pt,{rowKey:f[a],data:f,columns:g,isSelected:`${f[a]}`in s,selectable:r},f[a]))})]})})};import{createContext as Ma,useContext as St,useEffect as Sa,useState as Na}from"react";import{useEffect as wa,useRef as Rt,useState as wt}from"react";import{jsx as Et,jsxs as Ea}from"react/jsx-runtime";var Xe={top:0,left:0,width:0,height:0};var Mt=({tabs:e=[],variant:o="solid",radius:t="full",direction:r="horizontal",color:a,children:n,openTab:i,size:s="medium",className:l="",style:c={}})=>{let m=Rt(null),d=Rt(null),[p,u]=wt(!1),[g,y]=wt(Xe),f=h({"tab-list":!0,[`variant-${o}`]:!!o,[`size-${s}`]:!!s,[`radius-${t}`]:!!t,[`color-${a}`]:!!a,"vertical-direction":r==="vertical",[l]:!!l});return wa(()=>{let b=d.current?.getBoundingClientRect()??Xe,v=m.current?.getBoundingClientRect()??Xe,T=b.width,x=o==="line"?2:b.height,C=b.left-v.left,R=o==="line"?b.top+b.height-v.top:b.top-v.top;y({left:C,top:R,width:T,height:x}),p||setTimeout(()=>{u(!0)},100)},[p,o,i]),Ea("section",{className:f,ref:m,style:c,children:[!!o&&Et("span",{className:`tabs-selector ${p?"active":""}`,style:g}),e.map(({id:b,label:v})=>Et(de.Tab,{id:b,ref:b===i?d:void 0,children:v},b)),n]})};import{jsx as Qe}from"react/jsx-runtime";var We=Ma(null),Nt=e=>{let o=St(We);if(!o)throw new Error("You cant use this component out off an Tabs component");let{openTab:t,changeOpenTab:r}=o;return[t===e,()=>r(e)]},Ia=()=>{let e=St(We);if(!e)throw new Error("You cant use this component out off an Tabs component");return e},de=({children:e,defaultOpenTab:o,onChange:t})=>{let[r,a]=Na(o);return Sa(()=>{t&&t(r)},[r,t]),Qe(We.Provider,{value:{openTab:r,changeOpenTab:n=>a(n)},children:e})},Oa=({id:e,children:o,className:t="",style:r={},onClick:a,ref:n})=>{let[i,s]=Nt(e),l=h({tab:!0,[t]:!!t,"is-open":i});return Qe("span",{className:l,style:r,onClick:m=>{s(),a&&a(m)},ref:n,children:o})},La=({id:e,children:o})=>{let[t]=Nt(e);return t?o:null},Fa=({children:e,...o})=>{let{openTab:t}=Ia();return Qe(Mt,{...o,openTab:t,children:e})};de.Tab=Oa;de.TabPanel=La;de.TabList=Fa;import{jsx as Da}from"react/jsx-runtime";var Aa=(n=>(n.NONE="none",n.SMALL="small",n.MEDIUM="medium",n.LARGE="large",n.FULL="full",n))(Aa||{}),Bu=({children:e,rounded:o="medium",selected:t=!1,noWrap:r=!1,ref:a})=>{let n=h({tag:!0,[`rounded-${o}`]:!!o,"is-selected":t,"no-wrap":r});return Da("span",{className:n,ref:a,children:e})};export{Ui as Accordion,Is as AccordionItem,ie as ActionModal,zc as AsideModal,Fo as Backdrop,ko as Button,ee as Checkbox,Em as ClickToCopy,jc as ConfirmationModal,Js as Cursor,So as DatePicker,z as Field,$r as FieldOrientation,Br as FieldVariant,Ji as FlipCard,cs as HoverCard,$m as Image,et as InfinityScroll,No as Input,Vo as InputColor,jo as InputFile,Zo as InputNumber,Oo as InputPassword,fe as Line,mr as LineOrientation,ur as LineStyle,_ as Menu,U as Modal,Jr as ModalBackdrop,Lo as Portal,qo as Radio,J as Ripple,K as Select,vo as SlideCard,dt as Slider,gu as SmartTable,bt as Switch,de as Tabs,Bu as Tag,Aa as TagRounded,pt as Textarea,ce as Tooltip,k as Typography,yo as useAccordionItem};
+
+// src/components/accordion/accordion.component.tsx
+import { createContext, useCallback as useCallback5, useContext, useMemo as useMemo3, useState as useState9 } from "react";
+
+// src/hooks/use-classnames.ts
+import { useMemo } from "react";
+var useClassNames = (classes) => useMemo(
+  () => Object.entries(classes).reduce(
+    (compiledClassNames, [classname, value]) => value ? [...compiledClassNames, classname] : compiledClassNames,
+    []
+  ).join(" "),
+  [classes]
+);
+
+// src/hooks/use-event-listener.ts
+import { useEffect, useLayoutEffect, useRef } from "react";
+function useEventListener(eventName, callback, element, options) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useLayoutEffect(() => {
+    const targetElement = element?.current ?? window;
+    if (!(targetElement && targetElement.addEventListener)) return;
+    const listener = (event) => callbackRef.current(event);
+    targetElement.addEventListener(eventName, listener, options);
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+// src/hooks/use-click-outside.ts
+var checkIsOutside = (ref, target) => {
+  return ref.current && !ref.current.contains(target);
+};
+var useClickOutside = (ref, callback) => {
+  useEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      callback();
+    }
+  });
+  useEventListener("mousedown", (event) => {
+    const target = event.target;
+    if (!target?.isConnected) {
+      return;
+    }
+    const isOutside = (Array.isArray(ref) ? ref : [ref]).every((r) => checkIsOutside(r, target));
+    if (isOutside) {
+      callback();
+    }
+  });
+};
+
+// src/hooks/use-debounce.ts
+import { useEffect as useEffect2, useState } from "react";
+var useDebounce = (value, delay = 500) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect2(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
+
+// src/hooks/use-resize-observer.ts
+import { useEffect as useEffect3 } from "react";
+var useResizeObserver = (ref, callback) => {
+  useEffect3(() => {
+    const refs = Array.isArray(ref) ? ref : [ref];
+    const observer = new ResizeObserver(callback);
+    refs.forEach((r) => r.current && observer.observe(r.current));
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, callback]);
+};
+
+// src/hooks/use-dom-container.ts
+import { useEffect as useEffect4, useState as useState2 } from "react";
+var createContainer = (containerID) => {
+  let domContainer = document.getElementById(containerID);
+  if (domContainer === null) {
+    domContainer = document.createElement("div");
+    domContainer.setAttribute("id", containerID);
+    document.body.appendChild(domContainer);
+  }
+  return domContainer;
+};
+var useDomContainer = (containerID) => {
+  const [container, setContainer] = useState2(() => createContainer(containerID));
+  useEffect4(() => {
+    const domContainer = document.getElementById(containerID);
+    if (container === null || domContainer === null) {
+      const domContainer2 = createContainer(containerID);
+      setContainer(domContainer2);
+    }
+    return () => {
+      if (container && container.parentNode && process.env.NODE_ENV === "production") {
+        document.body.removeChild(container);
+      }
+    };
+  }, [container, containerID]);
+  return container;
+};
+
+// src/helpers/format-bytes.ts
+var formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1e3;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+
+// src/helpers/get-modal-position.ts
+var getModalPosition = ({ c, m, offset, position }) => {
+  let top = c.y + c.h + offset;
+  let left = c.x - (m.w - c.w) * (50 / 100);
+  switch (position) {
+    case "top" /* TOP */:
+    case "top center" /* TOP_CENTER */:
+      top = c.y - m.h - offset;
+      left = c.x - (m.w - c.w) / 2;
+      break;
+    case "top left" /* TOP_LEFT */:
+      top = c.y - m.h - offset;
+      left = c.x - m.w + c.w;
+      break;
+    case "top right" /* TOP_RIGHT */:
+      top = c.y - m.h - offset;
+      left = c.x;
+      break;
+    case "bottom" /* BOTTOM */:
+    case "bottom center" /* BOTTOM_CENTER */:
+      top = c.y + c.h + offset;
+      left = c.x - (m.w - c.w) / 2;
+      break;
+    case "bottom left" /* BOTTOM_LEFT */:
+      top = c.y + c.h + offset;
+      left = c.x - m.w + c.w;
+      break;
+    case "bottom right" /* BOTTOM_RIGHT */:
+      top = c.y + c.h + offset;
+      left = c.x;
+      break;
+    case "left" /* LEFT */:
+    case "left center" /* LEFT_CENTER */:
+      top = c.y - (m.h - c.h) / 2;
+      left = c.x - m.w - offset;
+      break;
+    case "left top" /* LEFT_TOP */:
+      top = c.y - m.h + c.h;
+      left = c.x - m.w - offset;
+      break;
+    case "left bottom" /* LEFT_BOTTOM */:
+      top = c.y;
+      left = c.x - m.w - offset;
+      break;
+    case "right" /* RIGHT */:
+    case "right center" /* RIGHT_CENTER */:
+      top = c.y - (m.h - c.h) / 2;
+      left = c.x + c.w + offset;
+      break;
+    case "right top" /* RIGHT_TOP */:
+      top = c.y - m.h + c.h;
+      left = c.x + c.w + offset;
+      break;
+    case "right bottom" /* RIGHT_BOTTOM */:
+      top = c.y;
+      left = c.x + c.w + offset;
+      break;
+  }
+  return {
+    left: Math.round(left),
+    top: Math.round(top)
+  };
+};
+var getOppositePosition = ({ top, left }, position, windowOffset, m) => {
+  const positions = position.split(" ");
+  const newPosition = [];
+  const rightOffset = left + m.w + windowOffset - window.innerWidth;
+  const bottomOffset = top + m.h + windowOffset - window.innerHeight;
+  for (const p of positions) {
+    if (p === "top" /* TOP */ && top < windowOffset) {
+      newPosition.push("bottom" /* BOTTOM */);
+    } else if (p === "left" /* LEFT */ && left < windowOffset) {
+      newPosition.push("right" /* RIGHT */);
+    } else if (p === "bottom" /* BOTTOM */ && bottomOffset > 0) {
+      newPosition.push("top" /* TOP */);
+    } else if (p === "right" /* RIGHT */ && rightOffset > 0) {
+      newPosition.push("left" /* LEFT */);
+    } else {
+      newPosition.push(p);
+    }
+  }
+  return newPosition.join(" ");
+};
+var fixModalPosition = ({ top, left }, m, windowOffset) => {
+  const rightOffset = left + m.w + windowOffset - window.innerWidth;
+  const bottomOffset = top + m.h + windowOffset - window.innerHeight;
+  left = rightOffset > 0 ? left - rightOffset : left;
+  top = bottomOffset > 0 ? top - bottomOffset : top;
+  left = left < windowOffset ? windowOffset : left;
+  top = top < windowOffset ? windowOffset : top;
+  return { top, left };
+};
+var getModalPositionRelativeToContainer = ({
+  c,
+  m,
+  offset,
+  windowOffset,
+  position
+}) => {
+  const params = { c, m, offset, position };
+  let modalContainerStyle = getModalPosition(params);
+  const oppositePosition = getOppositePosition(modalContainerStyle, position, windowOffset, m);
+  if (oppositePosition !== position) {
+    modalContainerStyle = getModalPosition({
+      ...params,
+      position: oppositePosition
+    });
+  }
+  const fixedPosition = fixModalPosition(modalContainerStyle, m, windowOffset);
+  return {
+    left: `${fixedPosition.left}px`,
+    top: `${fixedPosition.top}px`
+  };
+};
+
+// src/helpers/get-modal-position-relative-to-screen.ts
+var getModalPositionRelativeToScreen = ({
+  position,
+  windowOffset
+}) => {
+  switch (position) {
+    case "center" /* CENTER */:
+      return {
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    case "top" /* TOP */:
+    case "top center" /* TOP_CENTER */:
+      return {
+        top: `${windowOffset}px`,
+        left: "50%",
+        transform: "translateX(-50%)"
+      };
+    case "top left" /* TOP_LEFT */:
+    case "left top" /* LEFT_TOP */:
+      return {
+        top: `${windowOffset}px`,
+        left: `${windowOffset}px`
+      };
+    case "top right" /* TOP_RIGHT */:
+    case "right top" /* RIGHT_TOP */:
+      return {
+        top: `${windowOffset}px`,
+        right: `${windowOffset}px`
+      };
+    case "bottom" /* BOTTOM */:
+    case "bottom center" /* BOTTOM_CENTER */:
+      return {
+        bottom: `${windowOffset}px`,
+        left: "50%",
+        transform: "translateX(-50%)"
+      };
+    case "left bottom" /* LEFT_BOTTOM */:
+    case "bottom left" /* BOTTOM_LEFT */:
+      return {
+        bottom: `${windowOffset}px`,
+        left: `${windowOffset}px`
+      };
+    case "right bottom" /* RIGHT_BOTTOM */:
+    case "bottom right" /* BOTTOM_RIGHT */:
+      return {
+        bottom: `${windowOffset}px`,
+        right: `${windowOffset}px`
+      };
+    case "left" /* LEFT */:
+    case "left center" /* LEFT_CENTER */:
+      return {
+        top: "50%",
+        left: `${windowOffset}px`,
+        transform: "translateY(-50%)"
+      };
+    case "right" /* RIGHT */:
+    case "right center" /* RIGHT_CENTER */:
+      return {
+        top: "50%",
+        right: `${windowOffset}px`,
+        transform: "translateY(-50%)"
+      };
+  }
+  return {
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  };
+};
+
+// src/hooks/use-in-view.ts
+import { useRef as useRef2, useState as useState3 } from "react";
+
+// src/hooks/use-intersection-observer.ts
+import { useEffect as useEffect5 } from "react";
+var useIntersectionObserver = (ref, callback, initOptions = {}) => {
+  useEffect5(() => {
+    const refs = Array.isArray(ref) ? ref : [ref];
+    const observer = new IntersectionObserver(callback, initOptions);
+    refs.forEach((r) => r.current && observer.observe(r.current));
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, initOptions, ref]);
+};
+
+// src/hooks/use-in-view.ts
+var useInView = (initOptions = {}) => {
+  const [inView, setInView] = useState3(false);
+  const ref = useRef2(null);
+  useIntersectionObserver(
+    ref,
+    ([entry]) => {
+      setInView(entry.isIntersecting);
+    },
+    initOptions
+  );
+  return { ref, inView };
+};
+
+// src/hooks/use-input-handlers.ts
+import { useCallback, useState as useState4 } from "react";
+var useInputHandlers = ({
+  onBlur,
+  onFocus,
+  onChange
+} = {}) => {
+  const [isFocus, setIsFocus] = useState4(false);
+  const handleFocus = useCallback(
+    (e) => {
+      setIsFocus(true);
+      onFocus && onFocus(e);
+    },
+    [onFocus]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      setIsFocus(false);
+      onBlur && onBlur(e);
+    },
+    [onBlur]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      onChange && onChange(e);
+    },
+    [onChange]
+  );
+  return {
+    isFocus,
+    handlers: {
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChange: handleChange
+    }
+  };
+};
+
+// src/hooks/use-media-query.ts
+import { useEffect as useEffect6, useState as useState5 } from "react";
+var useMediaQuery = (query) => {
+  const [matches, setMatches] = useState5(false);
+  useEffect6(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => {
+      setMatches(media.matches);
+    };
+    media.addEventListener("change", listener);
+    return () => {
+      media.removeEventListener("change", listener);
+    };
+  }, [matches, query]);
+  return matches;
+};
+
+// src/hooks/use-modal.ts
+import { useRef as useRef3, useState as useState6 } from "react";
+var useModal = () => {
+  const containerRef = useRef3(null);
+  const [isOpen, setIsOpen] = useState6(false);
+  const openModal = () => {
+    setIsOpen(true);
+  };
+  const closeModal = () => {
+    setIsOpen(false);
+  };
+  return {
+    containerRef,
+    isOpen,
+    openModal,
+    closeModal
+  };
+};
+
+// src/hooks/use-modal-in-container.ts
+import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
+var convertDOMRectToPosition = (rect) => ({
+  x: rect.x,
+  y: rect.y,
+  w: rect.width,
+  h: rect.height,
+  top: rect.top,
+  left: rect.left
+});
+var useModalInContainer = ({
+  offset = 0,
+  windowOffset = 0,
+  position = "bottom" /* BOTTOM */,
+  modalRef,
+  containerRef,
+  isOpen
+}) => {
+  const containerTemporalRef = useRef4(null);
+  const getPosition = useCallback2(
+    (modalRef2, containerRef2) => {
+      const modal = modalRef2.current?.getClientRects()[0];
+      const container = containerRef2.current?.getClientRects()[0];
+      if (!modal) {
+        return;
+      }
+      const modalStyle = !container ? getModalPositionRelativeToScreen({ position, windowOffset }) : getModalPositionRelativeToContainer({
+        c: convertDOMRectToPosition(container),
+        m: convertDOMRectToPosition(modal),
+        offset,
+        windowOffset,
+        position
+      });
+      Object.keys(modalStyle).forEach((key) => {
+        modalRef2.current?.style.setProperty(key, modalStyle[key]);
+      });
+    },
+    [position, windowOffset, offset]
+  );
+  const callback = useCallback2(() => {
+    if (isOpen) {
+      getPosition(modalRef, containerRef ?? containerTemporalRef);
+    }
+  }, [getPosition, isOpen, containerRef, modalRef]);
+  useLayoutEffect2(callback, [callback]);
+  useResizeObserver(containerRef ?? containerTemporalRef, callback);
+  useResizeObserver(modalRef, callback);
+  useEventListener("resize", callback);
+  useEventListener("scroll", callback, modalRef);
+};
+
+// src/hooks/use-modal-transition.ts
+import React2, { useCallback as useCallback3, useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2 } from "react";
+var useModalTransition = ({ transitionDuration = 0, isOpen }) => {
+  const [modalState, setModalState] = React2.useState("CLOSED" /* CLOSED */);
+  const isVisible = useMemo2(() => {
+    return modalState !== "CLOSED" /* CLOSED */;
+  }, [modalState]);
+  useEffect7(() => {
+    document.documentElement.style.overflow = isVisible ? "hidden" : "auto";
+  }, [isVisible]);
+  const closeModal = useCallback3(() => {
+    if (["OPENING" /* OPENING */, "OPEN" /* OPEN */].includes(modalState)) {
+      if (transitionDuration > 0) {
+        setModalState("CLOSING" /* CLOSING */);
+        setTimeout(() => {
+          setModalState("CLOSED" /* CLOSED */);
+        }, transitionDuration);
+      } else {
+        setModalState("CLOSED" /* CLOSED */);
+      }
+    }
+  }, [modalState, transitionDuration]);
+  const openModal = useCallback3(() => {
+    if (["CLOSING" /* CLOSING */, "CLOSED" /* CLOSED */].includes(modalState)) {
+      if (transitionDuration > 0) {
+        setModalState("OPENING" /* OPENING */);
+        setTimeout(() => {
+          setModalState("OPEN" /* OPEN */);
+        }, transitionDuration);
+      } else {
+        setModalState("OPEN" /* OPEN */);
+      }
+    }
+  }, [modalState, transitionDuration]);
+  useLayoutEffect3(() => {
+    if (modalState === "CLOSED" /* CLOSED */ && isOpen) {
+      openModal();
+    } else if (modalState === "OPEN" /* OPEN */ && !isOpen) {
+      closeModal();
+    }
+  }, [isOpen, openModal, closeModal, modalState]);
+  return {
+    isVisible,
+    modalState
+  };
+};
+
+// src/hooks/use-mouse-position.ts
+import { useRef as useRef5, useState as useState7 } from "react";
+var getMousePosition = (domRect, e) => {
+  const { left, top } = domRect;
+  const containerPositionX = left + window.scrollX;
+  const containerPositionY = top + window.scrollY;
+  const containerX = e.pageX - containerPositionX;
+  const containerY = e.pageY - containerPositionY;
+  return {
+    x: e.pageX,
+    y: e.pageY,
+    elementX: containerX,
+    elementY: containerY,
+    elementPositionX: containerPositionX,
+    elementPositionY: containerPositionY
+  };
+};
+var useMousePosition = (containerRef) => {
+  const ref = useRef5(null);
+  const [position, setPosition] = useState7({
+    x: null,
+    y: null,
+    elementX: null,
+    elementY: null,
+    elementPositionX: null,
+    elementPositionY: null
+  });
+  const mouseMove = (e) => {
+    const { clientX, clientY } = e;
+    setPosition((prev) => ({ ...prev, x: clientX, y: clientY }));
+    if (containerRef?.current instanceof Element) {
+      const newState = getMousePosition(containerRef.current.getBoundingClientRect(), e);
+      setPosition((prev) => ({
+        ...prev,
+        ...newState
+      }));
+    } else if (ref.current instanceof Element) {
+      const newState = getMousePosition(ref.current.getBoundingClientRect(), e);
+      setPosition((prev) => ({
+        ...prev,
+        ...newState
+      }));
+    }
+  };
+  useEventListener("mousemove", mouseMove);
+  return { ...position, ref };
+};
+
+// src/hooks/use-toggle-values.ts
+import { useCallback as useCallback4, useState as useState8 } from "react";
+var useToggleValues = (values, defaultIndex = 0) => {
+  const [index, setIndex] = useState8(defaultIndex);
+  const toggle = useCallback4(
+    (index2) => {
+      setIndex(index2 !== void 0 ? index2 : (prev) => (prev + 1) % values.length);
+    },
+    [values.length]
+  );
+  return [values[index], toggle];
+};
+
+// src/components/line/line.component.tsx
+import { jsx } from "react/jsx-runtime";
+var LineOrientation = /* @__PURE__ */ ((LineOrientation2) => {
+  LineOrientation2["VERTICAL"] = "vertical";
+  LineOrientation2["HORIZONTAL"] = "horizontal";
+  return LineOrientation2;
+})(LineOrientation || {});
+var LineStyle = /* @__PURE__ */ ((LineStyle2) => {
+  LineStyle2["SOLID"] = "solid";
+  LineStyle2["DOTTED"] = "dotted";
+  LineStyle2["DASHED"] = "dashed";
+  return LineStyle2;
+})(LineStyle || {});
+var Line = ({
+  orientation = "horizontal" /* HORIZONTAL */,
+  className = "",
+  style = {},
+  color = "currentColor",
+  size = 1,
+  lineStyle = "solid" /* SOLID */,
+  dashedSize = 1,
+  spacing = 1
+}) => {
+  const classNames = useClassNames({
+    "custom-line": true,
+    [orientation]: true,
+    [className]: !!className,
+    [lineStyle]: true
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classNames,
+      style: {
+        ...style,
+        "--color": color,
+        "--size": `${size}px`,
+        "--spacing": `${spacing}px`,
+        "--dashSize": `${dashedSize}px`
+      }
+    }
+  );
+};
+
+// src/components/accordion/accordion.component.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AccordionContext = createContext(null);
+var useAccordionItem = (id) => {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error("You cant use this component out off an Accordion component");
+  }
+  const { toggleItem, openedItems } = context;
+  const toggle = () => toggleItem(id);
+  return [openedItems.includes(id), toggle];
+};
+var Accordion = ({
+  children,
+  className = "",
+  noSeparators,
+  multiple,
+  style = {},
+  defaultOpened = []
+}) => {
+  const [openedItems, setOpenedItems] = useState9(() => {
+    return (Array.isArray(defaultOpened) ? defaultOpened : [defaultOpened]).reduce((acc, id) => {
+      return typeof id === "string" ? { ...acc, [id]: true } : acc;
+    }, {});
+  });
+  const toggleItem = useCallback5(
+    (id) => {
+      setOpenedItems((prev) => ({ ...multiple ? prev : {}, [id]: !prev[id] }));
+    },
+    [multiple]
+  );
+  const openedItemsIDs = useMemo3(() => Object.keys(openedItems).filter((id) => openedItems[id]), [openedItems]);
+  const accordionClassName = useClassNames({
+    accordion: true,
+    [className]: Boolean(className)
+  });
+  return /* @__PURE__ */ jsx2(
+    AccordionContext.Provider,
+    {
+      value: {
+        toggleItem,
+        openedItems: openedItemsIDs
+      },
+      children: /* @__PURE__ */ jsx2("section", { className: accordionClassName, style, children: (Array.isArray(children) ? children : [children]).flatMap((child, key) => {
+        return key === 0 ? child : [noSeparators ? null : /* @__PURE__ */ jsx2(Line, { orientation: "horizontal" }, `${key}.5`), child];
+      }) })
+    }
+  );
+};
+
+// src/components/accordion/accordion-item.tsx
+import { useMemo as useMemo6 } from "react";
+import { FaCaretLeft } from "react-icons/fa";
+
+// src/components/cards/slide-card/slide-card.component.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SlideCard = ({ children, isOpen, className = "", style = {} }) => {
+  return /* @__PURE__ */ jsx3(
+    "section",
+    {
+      className,
+      style: {
+        overflow: "hidden",
+        height: isOpen ? "auto" : 0,
+        transition: "height 300ms ease",
+        interpolateSize: "allow-keywords",
+        ...style
+      },
+      children
+    }
+  );
+};
+
+// src/components/cards/flip-card/flip-card.component.tsx
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var FlipCard = ({
+  cardZIndex = "auto",
+  flipDirection = "vertical",
+  flipSpeed = 500,
+  isFlipped = false,
+  children
+}) => {
+  const getComponent = (key) => {
+    if (children.length !== 2) {
+      throw new Error("Component FlipCard requires 2 children");
+    }
+    return children[key];
+  };
+  const frontRotate = useMemo4(() => {
+    const deg = isFlipped ? 180 : 0;
+    return `rotate${flipDirection === "horizontal" ? "Y" : "X"}(${deg}deg)`;
+  }, [flipDirection, isFlipped]);
+  const backRotate = useMemo4(() => {
+    const deg = isFlipped ? 0 : -180;
+    return `rotate${flipDirection === "horizontal" ? "Y" : "X"}(${deg}deg)`;
+  }, [flipDirection, isFlipped]);
+  const className = useClassNames({
+    "flip-card": true,
+    "is-flipped": isFlipped
+  });
+  return /* @__PURE__ */ jsx4(
+    "section",
+    {
+      className,
+      style: {
+        "--cardZIndex": cardZIndex,
+        "--flipSpeed": `${flipSpeed}ms`,
+        "--frontRotate": frontRotate,
+        "--backRotate": backRotate
+      },
+      children: /* @__PURE__ */ jsxs("section", { className: "flipper", children: [
+        /* @__PURE__ */ jsx4("section", { className: "front", children: getComponent(0) }),
+        /* @__PURE__ */ jsx4("section", { className: "back", children: getComponent(1) })
+      ] })
+    }
+  );
+};
+
+// src/components/cards/hover-card/hover-card.component.tsx
+import { useCallback as useCallback6, useRef as useRef6 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var HoverCard = ({
+  children,
+  threshold = 5,
+  translationZ = 25,
+  width = "fit-content",
+  className = ""
+}) => {
+  const refCard = useRef6(null);
+  const refLayer = useRef6(null);
+  const mouseMoveCallback = useCallback6(
+    (e) => {
+      const card = refCard.current;
+      const layer = refLayer.current;
+      if (!card || !layer) return;
+      const { clientX, clientY, currentTarget } = e;
+      const { clientWidth, clientHeight } = currentTarget;
+      const { top, left } = card.getBoundingClientRect();
+      const horizontal = (clientX - left) / clientWidth;
+      const vertical = (clientY - top) / clientHeight;
+      const relativePercentageX = horizontal * 2 - 1;
+      const relativePercentageY = vertical * 2 - 1;
+      const rotateY = (relativePercentageY * threshold).toFixed(2);
+      const rotateX = (relativePercentageX * threshold).toFixed(2);
+      layer.style.transform = `perspective(${clientWidth}px) rotateX(${-rotateY}deg) rotateY(${rotateX}deg)`;
+      card.style.transform = `perspective(${clientWidth}px) translateZ(${translationZ}px)`;
+    },
+    [threshold, translationZ]
+  );
+  const mouseLeaveCallback = useCallback6((e) => {
+    const card = refCard.current;
+    const layer = refLayer.current;
+    if (!card || !layer) return;
+    layer.style.transform = `perspective(${e.currentTarget.clientWidth}px) rotateX(0) rotateY(0)`;
+    card.style.transform = `perspective(${e.currentTarget.clientWidth}px) translateZ(0)`;
+  }, []);
+  useEventListener("mousemove", mouseMoveCallback, refCard);
+  useEventListener("mouseleave", mouseLeaveCallback, refCard);
+  const cardClassName = useClassNames({
+    "hover-card": true,
+    [className]: Boolean(className)
+  });
+  return /* @__PURE__ */ jsx5("span", { ref: refCard, style: { width }, className: cardClassName, children: /* @__PURE__ */ jsx5("span", { className: "card-hover-layer", ref: refLayer, children }) });
+};
+
+// src/components/typography/typography.component.tsx
+import { createElement, useMemo as useMemo5 } from "react";
+
+// src/components/typography/typography.constants.ts
+var TypographyVariantsElements = {
+  ["hero" /* HERO */]: "h1",
+  ["header1" /* HEADER1 */]: "h1",
+  ["header2" /* HEADER2 */]: "h2",
+  ["header3" /* HEADER3 */]: "h3",
+  ["header4" /* HEADER4 */]: "h4",
+  ["body" /* BODY */]: "p",
+  ["label" /* LABEL */]: "span",
+  ["label-form" /* LABEL_FORM */]: "label",
+  ["small" /* SMALL */]: "small"
+};
+var TypographyVariantsClassNames = {
+  ["hero" /* HERO */]: "hero",
+  ["header1" /* HEADER1 */]: "header1",
+  ["header2" /* HEADER2 */]: "header2",
+  ["header3" /* HEADER3 */]: "header3",
+  ["header4" /* HEADER4 */]: "header4",
+  ["body" /* BODY */]: "body",
+  ["label" /* LABEL */]: "label",
+  ["label-form" /* LABEL_FORM */]: "label",
+  ["small" /* SMALL */]: "small"
+};
+
+// src/components/typography/typography.component.tsx
+var Typography = ({
+  variant = "body" /* BODY */,
+  nowrap = false,
+  className: customClassname = "",
+  style = {},
+  children,
+  as,
+  weight,
+  family = "primary",
+  noPadding = false,
+  align,
+  color,
+  htmlFor,
+  recommendedWidth = false,
+  ...props
+}) => {
+  const className = useClassNames({
+    typography: true,
+    [TypographyVariantsClassNames[variant]]: TypographyVariantsClassNames[variant] !== void 0,
+    [customClassname]: !!customClassname,
+    [weight ?? ""]: !!weight,
+    [color ?? ""]: Boolean(color),
+    "no-padding": noPadding,
+    "code-family": family === "code",
+    "recommended-width": recommendedWidth,
+    "nowrap-max-lines": typeof nowrap === "number",
+    "nowrap-max-lines-2": nowrap === 2,
+    "nowrap-max-lines-3": nowrap === 3,
+    "nowrap-max-lines-4": nowrap === 4,
+    "nowrap-max-lines-5": nowrap === 5,
+    nowrap: nowrap === true
+  });
+  const component = useMemo5(
+    () => TypographyVariantsElements[variant] ?? TypographyVariantsElements["body" /* BODY */],
+    [variant]
+  );
+  return createElement(
+    as ?? component,
+    {
+      ...props,
+      className,
+      htmlFor,
+      style: {
+        textAlign: align,
+        ...style
+      }
+    },
+    children
+  );
+};
+
+// src/components/accordion/accordion-item.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var getContent = (content, isOpen) => {
+  if (typeof content === "function") {
+    return content(isOpen);
+  }
+  return content;
+};
+var AccordionItem = ({
+  title,
+  subtitle,
+  children,
+  icon: Icon = FaCaretLeft,
+  startContent,
+  content,
+  endContent,
+  classNames = {},
+  className = "",
+  style = {}
+}) => {
+  const id = useMemo6(() => crypto.randomUUID(), []);
+  const [isOpen, toggle] = useAccordionItem(id);
+  const headerClassName = useClassNames({
+    "accordion-header": true,
+    "has-start-content": !!startContent,
+    [classNames?.header ?? ""]: !!classNames?.header,
+    "is-open": isOpen
+  });
+  const headerContentClassName = useClassNames({
+    "accordion-header-content": true,
+    [classNames?.headerContent ?? ""]: !!classNames?.headerContent
+  });
+  const toggleIconClassName = useClassNames({
+    "accordion-toggle-icon": true,
+    isOpen,
+    [classNames?.toggleIcon ?? ""]: !!classNames?.toggleIcon
+  });
+  const bodyContentClassName = useClassNames({
+    "accordion-body": true,
+    [classNames?.body ?? ""]: !!classNames?.body
+  });
+  const titleContent = getContent(title, isOpen);
+  const subtitleContent = getContent(subtitle, isOpen);
+  const headerStart = getContent(startContent, isOpen);
+  const headerMiddle = getContent(content, isOpen) ?? /* @__PURE__ */ jsxs2("section", { className: headerContentClassName, children: [
+    /* @__PURE__ */ jsx6(Typography, { className: classNames?.title, variant: "body", noPadding: true, weight: "bold", children: titleContent }),
+    /* @__PURE__ */ jsx6(Typography, { className: classNames?.subtitle, variant: "label", noPadding: true, weight: "light", children: subtitleContent })
+  ] });
+  const headerEnd = getContent(endContent, isOpen) ?? /* @__PURE__ */ jsx6(Icon, { className: toggleIconClassName });
+  const accordionItemClassName = useClassNames({
+    "accordion-item": true,
+    [className]: Boolean(className)
+  });
+  return /* @__PURE__ */ jsxs2("section", { className: accordionItemClassName, style, children: [
+    /* @__PURE__ */ jsxs2("section", { className: headerClassName, onClick: toggle, children: [
+      headerStart,
+      headerMiddle,
+      headerEnd
+    ] }),
+    /* @__PURE__ */ jsx6(SlideCard, { isOpen, children: /* @__PURE__ */ jsx6("section", { className: bodyContentClassName, children }) })
+  ] });
+};
+
+// src/components/ripple/ripple.component.tsx
+import { useEffect as useEffect8, useRef as useRef7 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Ripple = ({
+  color,
+  duration = 1e3,
+  timingFunction = "ease-out",
+  times = 1,
+  className = "",
+  style = {},
+  zIndex = 1
+}) => {
+  const ref = useRef7(null);
+  useEffect8(() => {
+    if (!ref.current?.parentElement) {
+      return;
+    }
+    const computedPosition = getComputedStyle(ref.current.parentElement).position;
+    if (!["absolute", "fixed", "sticky", "relative"].includes(computedPosition)) {
+      ref.current.parentElement.style.position = "relative";
+    }
+  }, []);
+  const handleClick = (e) => {
+    const { pageX, pageY, currentTarget } = e;
+    const rect = currentTarget.getBoundingClientRect();
+    const x = (pageX - rect.left) * 100 / rect.width;
+    const y = (pageY - rect.top) * 100 / rect.height;
+    const ripple = document.createElement("span");
+    ripple.classList.add("ripple-effect");
+    ripple.style.animationDuration = `${duration}ms`;
+    ripple.style.animationTimingFunction = timingFunction;
+    ripple.style.left = `${x}%`;
+    ripple.style.top = `${y}%`;
+    if (color) {
+      ripple.style.background = color;
+    }
+    currentTarget.appendChild(ripple);
+    setTimeout(
+      () => {
+        ripple.remove();
+      },
+      Math.max(duration, 500) * Math.max(times, 1)
+    );
+  };
+  return /* @__PURE__ */ jsx7("span", { ref, onMouseDown: handleClick, className: `ripple ${className}`, style: { ...style, zIndex } });
+};
+
+// src/components/button/button.component.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var Button = ({
+  children,
+  color = "default" /* DEFAULT */,
+  variant = "solid" /* SOLID */,
+  radius = "medium" /* MEDIUM */,
+  size = "regular" /* REGULAR */,
+  noWrap = false,
+  forIcon = false,
+  className = "",
+  ...props
+}) => {
+  const classNames = useClassNames({
+    button: true,
+    [color]: Boolean(color),
+    [variant]: Boolean(variant),
+    [`radius-${radius}`]: Boolean(radius),
+    [`size-${size}`]: Boolean(size),
+    "no-wrap": noWrap,
+    icon: forIcon,
+    [className]: Boolean(className)
+  });
+  return /* @__PURE__ */ jsxs3("button", { ...props, className: classNames, children: [
+    children,
+    /* @__PURE__ */ jsx8(Ripple, {})
+  ] });
+};
+
+// src/components/cursor/cursor.component.tsx
+import { useEffect as useEffect9, useState as useState10 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var Cursor = () => {
+  const { x, y, elementX, elementY, ref } = useMousePosition();
+  const [isCursorHover, setIsCursorHover] = useState10(false);
+  useEventListener("mouseover", (e) => {
+    const computedCursor = getComputedStyle(e.target).cursor;
+    setIsCursorHover(computedCursor === "pointer");
+  });
+  useEffect9(() => {
+    if (!("ontouchstart" in window || navigator.maxTouchPoints)) {
+      document.body.style.cursor = "none";
+    }
+    return () => {
+      document.body.style.cursor = "auto";
+    };
+  }, []);
+  if (x === null || y === null || "ontouchstart" in window || navigator.maxTouchPoints) {
+    return null;
+  }
+  const translate3d = `translate3d(${elementX}px, ${elementY}px, 0)`;
+  return /* @__PURE__ */ jsxs4("section", { className: "cursor-overlay", ref, children: [
+    /* @__PURE__ */ jsx9(
+      "span",
+      {
+        className: `cursor outer-circle ${isCursorHover ? "cursor-hover" : ""}`,
+        style: {
+          transform: translate3d
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      "span",
+      {
+        className: `cursor inner-circle ${isCursorHover ? "cursor-hover" : ""}`,
+        style: {
+          transform: translate3d
+        }
+      }
+    )
+  ] });
+};
+
+// src/components/form/checkbox/checkbox.component.tsx
+import { useMemo as useMemo7 } from "react";
+import { IoCheckmarkOutline } from "react-icons/io5";
+
+// src/components/form/controller/controller.component.tsx
+import { Controller as RHFController, useFormContext } from "react-hook-form";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Controller = ({
+  Component,
+  inputProps,
+  defaultValue: fieldDefaultValue,
+  rules
+}) => {
+  const { control, setValue } = useFormContext();
+  const { name, defaultValue } = inputProps;
+  return /* @__PURE__ */ jsx10(
+    RHFController,
+    {
+      name,
+      control,
+      rules,
+      defaultValue: defaultValue ?? fieldDefaultValue,
+      render: ({ field: { onBlur, value }, fieldState }) => /* @__PURE__ */ jsx10(
+        Component,
+        {
+          value,
+          error: fieldState.error?.message,
+          invalid: fieldState.invalid,
+          isTouched: fieldState.isTouched,
+          isDirty: fieldState.isDirty,
+          setValue: (value2) => setValue(name, value2),
+          onBlur,
+          ...inputProps
+        }
+      )
+    }
+  );
+};
+
+// src/components/form/checkbox/checkbox.component.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var Checkbox = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  autoComplete = "off",
+  icon: Icon = IoCheckmarkOutline,
+  label,
+  color = "primary" /* PRIMARY */,
+  size = "regular" /* REGULAR */
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}) => {
+  const id = useMemo7(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers({
+    onChange: (e) => setValue(e.target.checked),
+    onBlur,
+    onFocus
+  });
+  const checkboxContainerClassName = useClassNames({
+    "checkbox-container": true,
+    [className]: Boolean(className),
+    [`color-${color}`]: Boolean(color)
+  });
+  const checkboxClassName = useClassNames({
+    checkbox: true,
+    "is-checked": value,
+    [`size-${size}`]: Boolean(size)
+  });
+  return /* @__PURE__ */ jsxs5("section", { className: checkboxContainerClassName, style, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs5("section", { className: checkboxClassName, children: [
+      /* @__PURE__ */ jsx11("section", { className: "checkbox-fill", children: /* @__PURE__ */ jsx11(Icon, { size: "1.3em", className: "checkbox-icon" }) }),
+      /* @__PURE__ */ jsx11(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          name,
+          className: "checkbox-input",
+          checked: value,
+          autoFocus,
+          autoComplete,
+          disabled: disabled || readOnly,
+          ...handlers
+        }
+      )
+    ] }),
+    label ? /* @__PURE__ */ jsx11(Typography, { variant: "label-form", htmlFor: id, className: "checkbox-label", children: label }) : null
+  ] });
+};
+var CheckboxController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx11(Controller, { Component: Checkbox, defaultValue: false, inputProps: props, rules });
+};
+Checkbox.Controller = CheckboxController;
+
+// src/components/form/date-picker/date-picker.component.tsx
+import { useMemo as useMemo8 } from "react";
+
+// src/components/form/field/field.component.tsx
+import { ImCross } from "react-icons/im";
+
+// src/components/form/field/field.types.ts
+var FieldVariant = /* @__PURE__ */ ((FieldVariant2) => {
+  FieldVariant2["FULL_BORDER"] = "full-border";
+  FieldVariant2["CONTENT_BORDER"] = "content-border";
+  FieldVariant2["CONTENT_LINE"] = "line";
+  return FieldVariant2;
+})(FieldVariant || {});
+var FieldOrientation = /* @__PURE__ */ ((FieldOrientation2) => {
+  FieldOrientation2["HORIZONTAL"] = "horizontal";
+  FieldOrientation2["VERTICAL"] = "vertical";
+  return FieldOrientation2;
+})(FieldOrientation || {});
+
+// src/components/form/field/field.component.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var getIcon = ({ icon: Icon, className, onClick }) => Icon ? /* @__PURE__ */ jsx12(Icon, { className, onClick }) : /* @__PURE__ */ jsx12("span", {});
+var Field = ({
+  id,
+  label,
+  leftIcon,
+  rightIcon,
+  errorIcon: ErrorIcon = ImCross,
+  error,
+  onClickLeftIcon,
+  onClickRightIcon,
+  fieldOrientation = "vertical" /* VERTICAL */,
+  children,
+  isFocus = false,
+  variant,
+  ref
+}) => {
+  const fieldClassName = useClassNames({
+    "form-field": true,
+    focus: isFocus,
+    error: !!error,
+    "variant-content-border": variant === "content-border" /* CONTENT_BORDER */,
+    "variant-content-line": variant === "line" /* CONTENT_LINE */,
+    "variant-full-border": variant === "full-border" /* FULL_BORDER */,
+    "variant-inline": fieldOrientation === "horizontal" /* HORIZONTAL */
+  });
+  const handleClick = (callback) => (e) => {
+    e.stopPropagation();
+    const input = document.getElementById(id);
+    input?.focus();
+    input?.click();
+    if (callback) callback();
+  };
+  return /* @__PURE__ */ jsxs6("section", { className: fieldClassName, ref, children: [
+    label ? /* @__PURE__ */ jsx12(Typography, { className: "field-label", noPadding: true, variant: "label-form", htmlFor: id, children: label }) : null,
+    /* @__PURE__ */ jsxs6("section", { className: "field-content", children: [
+      getIcon({
+        className: "field-left-icon",
+        icon: leftIcon,
+        onClick: handleClick(onClickLeftIcon)
+      }),
+      /* @__PURE__ */ jsx12("section", { className: "field-children", children }),
+      getIcon({
+        className: "field-right-icon",
+        icon: rightIcon,
+        onClick: handleClick(onClickRightIcon)
+      })
+    ] }),
+    Boolean(error) && /* @__PURE__ */ jsxs6("section", { className: "field-message", children: [
+      ErrorIcon ? /* @__PURE__ */ jsx12(ErrorIcon, { size: 10 }) : /* @__PURE__ */ jsx12("span", {}),
+      /* @__PURE__ */ jsx12(Typography, { noPadding: true, variant: "small", children: error })
+    ] })
+  ] });
+};
+
+// src/components/form/date-picker/date-picker.component.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var DatePicker = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  type = "date",
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  autoComplete = "off",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}) => {
+  const id = useMemo8(() => crypto.randomUUID(), []);
+  const { isFocus, handlers } = useInputHandlers({
+    onBlur,
+    onChange: (e) => setValue(e.target.value),
+    onFocus
+  });
+  return /* @__PURE__ */ jsx13(Field, { id, error, isFocus, ...fieldProps, children: /* @__PURE__ */ jsx13(
+    "input",
+    {
+      id,
+      type,
+      name,
+      className,
+      style,
+      value,
+      autoFocus,
+      autoComplete,
+      placeholder,
+      disabled,
+      readOnly,
+      ...handlers
+    }
+  ) });
+};
+var DatePickerController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx13(Controller, { Component: DatePicker, defaultValue: "", inputProps: props, rules });
+};
+DatePicker.Controller = DatePickerController;
+
+// src/components/form/input/input.component.tsx
+import { useMemo as useMemo9 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Input = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  pattern,
+  type = "text",
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  autoComplete = "off",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  min,
+  max,
+  ...fieldProps
+}) => {
+  const id = useMemo9(() => crypto.randomUUID(), []);
+  const { handlers, isFocus } = useInputHandlers({
+    onChange: (e) => setValue(e.target.value),
+    onBlur,
+    onFocus
+  });
+  return /* @__PURE__ */ jsx14(Field, { id, error, isFocus, ...fieldProps, children: /* @__PURE__ */ jsx14(
+    "input",
+    {
+      id,
+      type,
+      name,
+      className,
+      style,
+      value,
+      pattern,
+      autoFocus,
+      autoComplete,
+      placeholder,
+      disabled,
+      readOnly,
+      min,
+      max,
+      ...handlers
+    }
+  ) });
+};
+var InputController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx14(Controller, { Component: Input, defaultValue: "", inputProps: props, rules });
+};
+Input.Controller = InputController;
+
+// src/components/form/input-password/input-password.component.tsx
+import { useMemo as useMemo10 } from "react";
+import { FiEye, FiEyeOff } from "react-icons/fi";
+import { IoIosWarning } from "react-icons/io";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var InputPassword = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  autoComplete = "off",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}) => {
+  const id = useMemo10(() => crypto.randomUUID(), []);
+  const [type, toggle] = useToggleValues(["password", "text"]);
+  const { isFocus, handlers } = useInputHandlers({
+    onBlur,
+    onChange: (e) => setValue(e.target.value),
+    onFocus
+  });
+  const icon = useMemo10(() => {
+    if (type === "password") return FiEye;
+    if (type === "text") return FiEyeOff;
+    return IoIosWarning;
+  }, [type]);
+  return /* @__PURE__ */ jsx15(Field, { id, error, isFocus, ...fieldProps, rightIcon: icon, onClickRightIcon: () => toggle(), children: /* @__PURE__ */ jsx15(
+    "input",
+    {
+      id,
+      type,
+      name,
+      className,
+      style,
+      value,
+      autoFocus,
+      autoComplete,
+      placeholder,
+      disabled,
+      readOnly,
+      ...handlers
+    }
+  ) });
+};
+var InputPasswordController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx15(Controller, { Component: InputPassword, defaultValue: "", inputProps: props, rules });
+};
+InputPassword.Controller = InputPasswordController;
+
+// src/components/form/input-color/input-color.component.tsx
+import Color from "color";
+import { useCallback as useCallback9, useEffect as useEffect10, useMemo as useMemo15, useRef as useRef10, useState as useState12 } from "react";
+import { HexAlphaColorPicker, HexColorInput } from "react-colorful";
+import { FaEyeDropper } from "react-icons/fa6";
+import useEyeDropper from "use-eye-dropper";
+
+// src/components/modals/action-modal/action-modal.component.tsx
+import { createContext as createContext2, useCallback as useCallback7, useContext as useContext2, useRef as useRef9, useState as useState11 } from "react";
+import { ImCross as ImCross2 } from "react-icons/im";
+
+// src/components/modals/modal/modal.component.tsx
+import { useMemo as useMemo12, useRef as useRef8 } from "react";
+
+// src/components/modals/portal/portal.component.tsx
+import { createPortal } from "react-dom";
+var Portal = ({ children, id }) => {
+  const root = useDomContainer(id);
+  if (root === null) {
+    return null;
+  }
+  return createPortal(children, root);
+};
+
+// src/components/modals/modal/modal.backdrop.tsx
+import { useMemo as useMemo11 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ModalBackdrop = /* @__PURE__ */ ((ModalBackdrop2) => {
+  ModalBackdrop2["OPAQUE"] = "opaque";
+  ModalBackdrop2["TRANSPARENT"] = "transparent";
+  ModalBackdrop2["BLUR"] = "blur";
+  ModalBackdrop2["NONE"] = "none";
+  return ModalBackdrop2;
+})(ModalBackdrop || {});
+var Backdrop = ({
+  opacity = 0.6,
+  backdrop = "blur" /* BLUR */,
+  zIndex,
+  backdropOnClick,
+  modalState
+}) => {
+  const backdropClassName = useClassNames({
+    "modal-backdrop": true,
+    "backdrop-close": modalState === "CLOSING" /* CLOSING */ || modalState === "CLOSED" /* CLOSED */
+  });
+  const backgroundStyles = useMemo11(() => {
+    const backdropStyles = {
+      ["opaque" /* OPAQUE */]: {
+        background: `hsl(from var(--background-paper) h s l / ${opacity * 100}%)`
+      },
+      ["transparent" /* TRANSPARENT */]: {
+        background: "transparent"
+      },
+      ["blur" /* BLUR */]: {
+        background: `hsl(from var(--background-paper) h s l / ${opacity * 100}%)`,
+        backdropFilter: "blur(5px)"
+      },
+      ["none" /* NONE */]: {
+        display: "none"
+      }
+    };
+    return backdropStyles[backdrop] ?? {};
+  }, [backdrop, opacity]);
+  if (backdrop === "none" /* NONE */) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx16(
+    "section",
+    {
+      tabIndex: -1,
+      onClick: backdropOnClick,
+      className: backdropClassName,
+      style: {
+        zIndex,
+        ...backgroundStyles
+      }
+    }
+  );
+};
+
+// src/components/modals/modal/modal.component.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+var Modal = ({
+  id,
+  children,
+  isOpen,
+  onClose,
+  className = "",
+  style = {},
+  rootStyle = {},
+  animation = "fade-down",
+  closeAnimationClassName = "modal-close",
+  modalRef: modalRefProp,
+  closeOnClickOutside = true,
+  transitionDuration = 300,
+  windowOffset = 10,
+  offset = 20,
+  position,
+  containerRef,
+  zIndex = 1e3,
+  ...backdropProps
+}) => {
+  const uuid = useMemo12(() => crypto.randomUUID(), []);
+  const modalRef = useRef8(null);
+  const { modalState, isVisible } = useModalTransition({
+    transitionDuration,
+    isOpen
+  });
+  useModalInContainer({
+    modalRef: modalRefProp ?? modalRef,
+    containerRef,
+    offset,
+    windowOffset,
+    position,
+    isOpen: isVisible
+  });
+  useClickOutside(modalRefProp ?? modalRef, () => {
+    if (isOpen && closeOnClickOutside) {
+      onClose();
+    }
+  });
+  const modalContentClassName = useClassNames({
+    "modal-content": true,
+    [className]: Boolean(className),
+    [`animation-${animation}`]: Boolean(animation) && animation !== "none",
+    [closeAnimationClassName]: modalState === "CLOSING" /* CLOSING */ || modalState === "CLOSED" /* CLOSED */
+  });
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs7(Portal, { id: `modal-${id}-${uuid}`, children: [
+    /* @__PURE__ */ jsx17(Backdrop, { ...backdropProps, modalState, zIndex }),
+    /* @__PURE__ */ jsx17(
+      "section",
+      {
+        className: "modal",
+        ref: modalRefProp ?? modalRef,
+        style: {
+          maxWidth: `calc(100dvw - ${windowOffset * 2}px)`,
+          maxHeight: `calc(100dvh - ${windowOffset * 2}px)`,
+          ...rootStyle,
+          zIndex: +zIndex + 1
+        },
+        children: /* @__PURE__ */ jsx17("section", { style: { ...style, animationDuration: `${transitionDuration}ms` }, className: modalContentClassName, children })
+      }
+    )
+  ] });
+};
+
+// src/components/modals/action-modal/action-modal.component.tsx
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var ActionModalContext = createContext2(null);
+var useActionModalContext = () => {
+  const context = useContext2(ActionModalContext);
+  if (!context) {
+    throw new Error("useActionModalContext must be used within a ActionModal");
+  }
+  return context;
+};
+var ActionModal = ({
+  children,
+  isOpen,
+  onClose,
+  actionRequired,
+  icon: Icon,
+  noCloseButton,
+  lineOnTop = false,
+  backCard = false,
+  noPadding = false,
+  className = "",
+  style = {},
+  ...modalProps
+}) => {
+  const [isActionInProgress, setIsActionInProgress] = useState11(false);
+  const ref = useRef9(null);
+  const remainAction = useCallback7(() => {
+    ref.current?.classList.add("shake-animation");
+    setTimeout(() => {
+      ref.current?.classList.remove("shake-animation");
+    }, 500);
+  }, []);
+  const actionModalClassName = useClassNames({
+    "action-modal-content": true,
+    "back-card": backCard,
+    "line-on-top": lineOnTop,
+    "no-padding": noPadding
+  });
+  return /* @__PURE__ */ jsx18(ActionModalContext.Provider, { value: { onClose, isActionInProgress, setIsActionInProgress }, children: /* @__PURE__ */ jsx18(
+    Modal,
+    {
+      className: "action-modal",
+      id: "action-modal",
+      animation: "bounce",
+      opacity: 0.8,
+      isOpen,
+      onClose,
+      ...modalProps,
+      backdropOnClick: actionRequired ? remainAction : onClose,
+      position: "center" /* CENTER */,
+      children: /* @__PURE__ */ jsx18("section", { ref, className: "modal-content", children: /* @__PURE__ */ jsxs8("section", { className: actionModalClassName, children: [
+        !noCloseButton && !actionRequired && /* @__PURE__ */ jsx18("section", { className: "close-modal-button", onClick: () => onClose(), children: /* @__PURE__ */ jsx18(ImCross2, {}) }),
+        Icon ? /* @__PURE__ */ jsx18(Typography, { variant: "header4", className: "action-modal-icon", children: /* @__PURE__ */ jsx18(Icon, {}) }) : null,
+        /* @__PURE__ */ jsx18("section", { className: "action-modal-body", children: /* @__PURE__ */ jsx18("section", { className: `action-modal-content ${className}`, style, children }) })
+      ] }) })
+    }
+  ) });
+};
+var ActionButton = ({ onClick, children, isLoading: manualIsLoading, ...buttonProps }) => {
+  const { onClose, isActionInProgress, setIsActionInProgress } = useActionModalContext();
+  const [isLoading, setIsLoading] = useState11(false);
+  const handleAction = useCallback7(() => {
+    setIsLoading(true);
+    setIsActionInProgress(true);
+    const result = onClick();
+    if (result instanceof Promise) {
+      result.then(() => {
+        onClose();
+        setIsLoading(false);
+        setIsActionInProgress(false);
+      });
+    } else {
+      onClose();
+      setIsLoading(false);
+      setIsActionInProgress(false);
+    }
+  }, [onClick, onClose, setIsActionInProgress]);
+  if (!isLoading && isActionInProgress) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx18(Button, { ...buttonProps, onClick: handleAction, isLoading: manualIsLoading || isLoading, children });
+};
+ActionModal.ActionButton = ActionButton;
+
+// src/components/modals/aside-modal/aside-modal.component.tsx
+import { useMemo as useMemo13 } from "react";
+import { ImCross as ImCross3 } from "react-icons/im";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var AsideModal = ({
+  children,
+  isOpen,
+  onClose,
+  position = "left" /* LEFT */,
+  size,
+  className = "",
+  ...modalProps
+}) => {
+  const modalRootStyles = useMemo13(() => {
+    const computedSize = {
+      ["top" /* TOP */]: { height: size, width: "100%" },
+      ["left" /* LEFT */]: { height: "100%", width: size },
+      ["right" /* RIGHT */]: { height: "100%", width: size },
+      ["bottom" /* BOTTOM */]: { height: size, width: "100%" }
+    };
+    return computedSize[position];
+  }, [position, size]);
+  return /* @__PURE__ */ jsxs9(
+    Modal,
+    {
+      id: "aside",
+      isOpen,
+      onClose,
+      opacity: 0.6,
+      windowOffset: 0,
+      animation: "none",
+      className: `aside-modal ${className} ${position}`,
+      rootStyle: modalRootStyles,
+      backdropOnClick: onClose,
+      position,
+      ...modalProps,
+      children: [
+        /* @__PURE__ */ jsx19("span", { className: "close-modal-button", onClick: onClose, children: /* @__PURE__ */ jsx19(ImCross3, {}) }),
+        /* @__PURE__ */ jsx19("section", { className: "aside-modal-content", children })
+      ]
+    }
+  );
+};
+
+// src/components/modals/confirmation-modal/confirmation-modal.component.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var ConfirmationModal = ({
+  title,
+  onAccept,
+  onReject = () => null,
+  acceptText,
+  rejectText,
+  children,
+  isLoading,
+  ...actionModalProps
+}) => {
+  return /* @__PURE__ */ jsx20(ActionModal, { ...actionModalProps, backCard: true, children: /* @__PURE__ */ jsxs10("section", { className: "confirmation-modal", children: [
+    /* @__PURE__ */ jsx20(Typography, { variant: "header4", children: title }),
+    /* @__PURE__ */ jsx20("section", { children }),
+    /* @__PURE__ */ jsxs10("section", { className: "confirmation-modal-actions", children: [
+      !isLoading && /* @__PURE__ */ jsx20(ActionModal.ActionButton, { variant: "flat", onClick: onReject, children: rejectText }),
+      /* @__PURE__ */ jsx20(ActionModal.ActionButton, { isLoading, onClick: onAccept, children: acceptText })
+    ] })
+  ] }) });
+};
+
+// src/components/modals/menu/menu.component.tsx
+import { useCallback as useCallback8, useMemo as useMemo14 } from "react";
+import { Fragment, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var Menu = ({
+  children,
+  isOpen,
+  onClose,
+  id,
+  menuContentRef,
+  contentClassName = "",
+  contentStyle = {},
+  className = "",
+  ...modalProps
+}) => {
+  const modalClassName = useClassNames({
+    "menu-modal": true,
+    [className]: Boolean(className)
+  });
+  return /* @__PURE__ */ jsx21(Modal, { className: modalClassName, ...modalProps, id: `menu-${id}`, isOpen, onClose, children: /* @__PURE__ */ jsx21("ul", { className: `menu-content ${contentClassName}`, role: "listbox", style: contentStyle, ref: menuContentRef, children }) });
+};
+var MenuOption = ({
+  children,
+  label = "",
+  asCheckbox,
+  icon: Icon,
+  id,
+  disabled = false,
+  selected = false,
+  className = "",
+  style = {},
+  onClick = () => null,
+  ...liProps
+}) => {
+  const menuOptionClassName = useClassNames({
+    "menu-option": true,
+    [className]: true,
+    "is-disabled": disabled,
+    "is-selected": selected
+  });
+  const handleClick = useCallback8(
+    (e) => {
+      e.stopPropagation();
+      if (!disabled) {
+        onClick(!selected);
+      }
+    },
+    [disabled, onClick, selected]
+  );
+  const menuOptionContent = useMemo14(() => {
+    if (children) {
+      return children;
+    }
+    if (asCheckbox) {
+      return /* @__PURE__ */ jsx21(
+        Checkbox,
+        {
+          className: "menu-checkbox",
+          disabled,
+          value: selected,
+          setValue: (n) => onClick(n),
+          name: "option",
+          style: { pointerEvents: "none" },
+          size: "small",
+          label: /* @__PURE__ */ jsxs11(Fragment, { children: [
+            Icon !== void 0 && /* @__PURE__ */ jsx21(Icon, { className: "option-icon" }),
+            /* @__PURE__ */ jsx21(Typography, { variant: "label", children: label })
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs11(Fragment, { children: [
+      Icon !== void 0 && /* @__PURE__ */ jsx21(Icon, { className: "option-icon" }),
+      typeof label === "string" ? /* @__PURE__ */ jsx21(Typography, { variant: "label", children: label }) : label
+    ] });
+  }, [asCheckbox, children, disabled, Icon, label, onClick, selected]);
+  return /* @__PURE__ */ jsxs11(
+    "li",
+    {
+      ...liProps,
+      id,
+      role: "option",
+      tabIndex: -1,
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      className: menuOptionClassName,
+      style,
+      children: [
+        /* @__PURE__ */ jsx21(Ripple, { zIndex: 10 }),
+        menuOptionContent
+      ]
+    }
+  );
+};
+var Divider = () => {
+  return /* @__PURE__ */ jsx21("li", { children: /* @__PURE__ */ jsx21(Line, { className: "divider" }) });
+};
+var Label = ({ children, className = "", ...props }) => {
+  return /* @__PURE__ */ jsx21("li", { tabIndex: -1, className: "menu-label", children: /* @__PURE__ */ jsx21(Typography, { ...props, variant: "small", className: `menu-group-label ${className}`, children }) });
+};
+var Group = ({
+  children,
+  label,
+  className = "",
+  style = {},
+  contentClassName = "",
+  contentStyle = {},
+  ...props
+}) => {
+  const groupClassName = useClassNames({
+    "menu-group": true,
+    [className]: Boolean(className)
+  });
+  return /* @__PURE__ */ jsxs11("li", { tabIndex: -1, ...props, className: groupClassName, style, children: [
+    label && /* @__PURE__ */ jsx21(Label, { children: label }),
+    /* @__PURE__ */ jsx21("ul", { className: `menu-group-content ${contentClassName}`, role: "listbox", style: contentStyle, children })
+  ] });
+};
+Menu.Option = MenuOption;
+Menu.Divider = Divider;
+Menu.GroupLabel = Label;
+Menu.Group = Group;
+
+// src/components/form/input-color/input-color.component.tsx
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var InputColor = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  showValueText = false,
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  autoComplete = "off",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}) => {
+  const { open, isSupported } = useEyeDropper();
+  const [inputValue, setInputValue] = useState12(value);
+  const id = useMemo15(() => crypto.randomUUID(), []);
+  const containerRef = useRef10(null);
+  const [isOpen, setIsOpen] = useState12(false);
+  const { handlers, isFocus } = useInputHandlers({
+    onChange: (e) => setInputValue(e.target.value),
+    onBlur: (e) => {
+      setInputColor();
+      if (onBlur) onBlur(e);
+    },
+    onFocus: (e) => {
+      setInputColor();
+      if (onFocus) onFocus(e);
+    }
+  });
+  const borderColor = useMemo15(() => {
+    const color = Color(value === "" ? "#000000" : value);
+    if (color.isLight() || color.alpha() < 0.5) {
+      return "#000000";
+    }
+    return "#FFFFFF";
+  }, [value]);
+  const openEyeDropper = async () => {
+    const { sRGBHex } = await open();
+    setValue(sRGBHex);
+  };
+  useEffect10(() => {
+    setInputValue(value);
+  }, [value]);
+  const setInputColor = useCallback9(() => {
+    if (inputValue.match(/^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i)) {
+      setValue(inputValue);
+    } else {
+      setInputValue(value);
+    }
+  }, [inputValue, setValue, value]);
+  const inputBoxClassName = useClassNames({
+    "input-color-box": true,
+    [className]: Boolean(className)
+  });
+  return /* @__PURE__ */ jsxs12(Field, { id, error, isFocus, ...fieldProps, children: [
+    /* @__PURE__ */ jsxs12(
+      "section",
+      {
+        className: "input-color",
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsOpen(true);
+        },
+        ref: containerRef,
+        children: [
+          /* @__PURE__ */ jsx22(
+            "section",
+            {
+              className: inputBoxClassName,
+              style: {
+                borderColor,
+                background: value,
+                color: value,
+                ...style
+              }
+            }
+          ),
+          showValueText ? /* @__PURE__ */ jsx22(
+            "input",
+            {
+              id,
+              name,
+              value: inputValue,
+              placeholder,
+              readOnly,
+              autoFocus,
+              disabled,
+              autoComplete,
+              className: "color-input",
+              ...handlers
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs12(
+      Modal,
+      {
+        id: "input-color",
+        isOpen,
+        onClose: () => setIsOpen(false),
+        position: "bottom right",
+        offset: 5,
+        backdrop: "transparent",
+        containerRef,
+        className: "input-color-selector",
+        children: [
+          /* @__PURE__ */ jsx22(HexAlphaColorPicker, { id, color: value, onChange: setValue }),
+          /* @__PURE__ */ jsxs12("section", { className: "color-input-container", children: [
+            isSupported() ? /* @__PURE__ */ jsx22(
+              FaEyeDropper,
+              {
+                onClick: () => {
+                  void openEyeDropper();
+                }
+              }
+            ) : /* @__PURE__ */ jsx22("span", {}),
+            /* @__PURE__ */ jsx22(
+              HexColorInput,
+              {
+                className: "color-input",
+                id,
+                name,
+                color: value,
+                placeholder: "Type a color",
+                prefixed: true,
+                alpha: true,
+                onChange: setValue
+              }
+            ),
+            /* @__PURE__ */ jsx22("span", {})
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+var InputColorController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx22(Controller, { Component: InputColor, defaultValue: "#147EFB", inputProps: props, rules });
+};
+InputColor.Controller = InputColorController;
+
+// src/components/form/input-file/input-file.component.tsx
+import { useCallback as useCallback10, useEffect as useEffect11, useMemo as useMemo16, useState as useState13 } from "react";
+import { FaMagnifyingGlass, FaRegTrashCan } from "react-icons/fa6";
+import { IoIosWarning as IoIosWarning2 } from "react-icons/io";
+import { PiFilePdfFill, PiFilePngFill } from "react-icons/pi";
+
+// src/layouts/grid/grid.component.tsx
+import { createElement as createElement2 } from "react";
+var Grid = ({
+  tag = "section",
+  children,
+  className,
+  style,
+  flow,
+  columnSize,
+  rowSize,
+  column,
+  row,
+  pc,
+  pi,
+  ps,
+  jc,
+  ji,
+  js,
+  ac,
+  ai,
+  as,
+  gtc,
+  gtr,
+  gta,
+  gt,
+  gap,
+  ...props
+}) => {
+  return createElement2(
+    tag,
+    {
+      className,
+      ...props,
+      style: {
+        ...style,
+        ...flow ? { gridAutoFlow: flow } : {},
+        ...columnSize ? { gridAutoColumns: columnSize } : {},
+        ...rowSize ? { gridAutoRows: rowSize } : {},
+        ...column ? { gridColumn: column } : {},
+        ...row ? { gridRow: row } : {},
+        ...pc ? { placeContent: pc } : {},
+        ...pi ? { placeItems: pi } : {},
+        ...ps ? { placeSelf: ps } : {},
+        ...jc ? { justifyContent: jc } : {},
+        ...ji ? { justifyItems: ji } : {},
+        ...js ? { justifySelf: js } : {},
+        ...ac ? { alignContent: ac } : {},
+        ...ai ? { alignItems: ai } : {},
+        ...as ? { alignSelf: as } : {},
+        ...gtc ? { gridTemplateColumns: gtc } : {},
+        ...gtr ? { gridTemplateRows: gtr } : {},
+        ...gta ? { gridTemplateAreas: gta } : {},
+        ...gt ? { gridTemplate: gt } : {},
+        ...gap ? { gap } : {},
+        display: "grid"
+      }
+    },
+    children
+  );
+};
+
+// src/components/form/input-file/input-file.component.tsx
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+var InputFile = ({
+  name,
+  value = {},
+  setValue,
+  onBlur,
+  onFocus,
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "Click to upload or drag and drop",
+  autoComplete = "off",
+  accept,
+  multiple = false,
+  limitSize = 5e6,
+  errorTimeout = 3e3,
+  label
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}) => {
+  const [error, setError] = useState13(null);
+  const id = useMemo16(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers({
+    onBlur,
+    onFocus,
+    onChange: (e) => {
+      const { files } = e.target;
+      if (files) saveFiles(files);
+    }
+  });
+  useEffect11(() => {
+    let intervalId = null;
+    if (error !== null) {
+      intervalId = setTimeout(() => {
+        setError(null);
+      }, errorTimeout);
+    }
+    return () => {
+      if (intervalId !== null) {
+        clearTimeout(intervalId);
+      }
+    };
+  }, [error, errorTimeout]);
+  const saveFiles = (files) => {
+    const finalFiles = multiple ? { ...value } : {};
+    const filesToCheck = multiple ? files.length : 1;
+    for (let i = 0; i < filesToCheck; i++) {
+      const file = files.item(i);
+      if (!file) {
+        continue;
+      }
+      if (file.size < limitSize) {
+        finalFiles[file.name] = file;
+      } else {
+        setError(`File '${file.name}' size is larger than ${formatBytes(limitSize)}`);
+      }
+    }
+    setValue(finalFiles);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.files && e.dataTransfer.files.length) {
+      saveFiles(e.dataTransfer.files);
+    }
+  };
+  const getIconType = useCallback10((type) => {
+    const iconTypes = {
+      ["image/png" /* PNG */]: PiFilePngFill,
+      ["application/pdf" /* PDF */]: PiFilePdfFill
+    };
+    return iconTypes[type] ?? IoIosWarning2;
+  }, []);
+  const deleteFile = (file) => {
+    const prevValue = { ...value };
+    delete prevValue[file.name];
+    setValue(prevValue);
+  };
+  const deleteAll = () => {
+    setValue({});
+  };
+  const totalSize = useMemo16(() => Object.values(value).reduce((prev, { size }) => prev + size, 0), [value]);
+  const renderFileToCard = (file, key) => {
+    const Icon = getIconType(file.type);
+    return /* @__PURE__ */ jsxs13("section", { className: "input-file-card", children: [
+      /* @__PURE__ */ jsx23("section", { className: "file-card--image", children: /* @__PURE__ */ jsx23(Icon, {}) }),
+      /* @__PURE__ */ jsxs13(Grid, { children: [
+        /* @__PURE__ */ jsx23(Typography, { variant: "label", noPadding: true, nowrap: true, children: file.name }),
+        /* @__PURE__ */ jsx23(Typography, { noPadding: true, variant: "small", children: formatBytes(file.size) })
+      ] }),
+      /* @__PURE__ */ jsx23("section", { className: "file-card--delete", onClick: () => deleteFile(file), children: /* @__PURE__ */ jsx23(FaRegTrashCan, {}) })
+    ] }, key);
+  };
+  return /* @__PURE__ */ jsxs13("section", { className: "input-file-container", children: [
+    Boolean(label) && /* @__PURE__ */ jsx23(Typography, { variant: "label-form", htmlFor: id, noPadding: true, children: label }),
+    /* @__PURE__ */ jsxs13("section", { className: "input-file--box", onDrop: handleDrop, children: [
+      /* @__PURE__ */ jsx23("section", { className: "input-file--box--icon", children: /* @__PURE__ */ jsx23(FaMagnifyingGlass, {}) }),
+      /* @__PURE__ */ jsxs13(Grid, { children: [
+        /* @__PURE__ */ jsx23(Typography, { variant: "label-form", htmlFor: id, noPadding: true, weight: "bold", children: placeholder }),
+        /* @__PURE__ */ jsxs13(Typography, { variant: "small", noPadding: true, children: [
+          "Max size (",
+          formatBytes(limitSize),
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx23(
+        "input",
+        {
+          id,
+          type: "file",
+          name,
+          value: "",
+          placeholder,
+          readOnly,
+          autoFocus,
+          disabled,
+          autoComplete,
+          className,
+          style,
+          accept,
+          multiple,
+          title: "",
+          ...handlers
+        }
+      )
+    ] }),
+    error !== null && /* @__PURE__ */ jsx23(Typography, { variant: "small", noPadding: true, className: "error", children: error }),
+    Object.keys(value).length > 0 && /* @__PURE__ */ jsxs13(Fragment2, { children: [
+      multiple && /* @__PURE__ */ jsxs13("span", { className: "total-info", children: [
+        /* @__PURE__ */ jsxs13(Typography, { variant: "small", noPadding: true, children: [
+          Object.keys(value).length,
+          " files - ",
+          formatBytes(totalSize)
+        ] }),
+        /* @__PURE__ */ jsx23("span", { className: "total-info--delete", onClick: deleteAll, children: /* @__PURE__ */ jsx23(FaRegTrashCan, {}) })
+      ] }),
+      /* @__PURE__ */ jsx23("section", { className: "input-file--files", children: /* @__PURE__ */ jsx23("section", { className: "input-file--files--content", children: Object.values(value).map(renderFileToCard) }) })
+    ] })
+  ] });
+};
+var InputFileController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx23(Controller, { Component: InputFile, defaultValue: {}, inputProps: props, rules });
+};
+InputFile.Controller = InputFileController;
+
+// src/components/form/input-number/input-number.component.tsx
+import { useEffect as useEffect12, useMemo as useMemo17, useState as useState14 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var RegexDecimal = {
+  comma: /(?!^-)[^0-9,]/g,
+  dot: /(?!^-)[^0-9.]/g
+};
+var getCleanedValue = (input, decimalSeparator = ".") => {
+  const regex = decimalSeparator === "." ? RegexDecimal.dot : RegexDecimal.comma;
+  const cleaned = input.replace(regex, "").replace(",", ".");
+  if (!cleaned) {
+    return "";
+  }
+  return cleaned;
+};
+var getFormattedValue = (value, format) => {
+  if (!value || Number.isNaN(value)) {
+    return format(0);
+  }
+  return format(value);
+};
+var InputNumber = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  pattern,
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  autoComplete = "off",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  min,
+  max,
+  decimalSeparator,
+  format = {
+    locales: "en-US",
+    style: "decimal",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  },
+  ...fieldProps
+}) => {
+  const id = useMemo17(() => crypto.randomUUID(), []);
+  const formatFunction = useMemo17(() => {
+    if (typeof format === "function") return format;
+    const { locales, ...formatConfig } = format;
+    return Intl.NumberFormat(locales, formatConfig).format;
+  }, [format]);
+  const [formattedValue, setFormattedValue] = useState14(getFormattedValue(value, formatFunction));
+  const { handlers, isFocus } = useInputHandlers({
+    onChange: (e) => {
+      const cleaned = getCleanedValue(e.target.value, decimalSeparator);
+      if (cleaned.endsWith(".")) {
+        setFormattedValue(e.target.value);
+      } else {
+        setFormattedValue(getFormattedValue(Number(cleaned), formatFunction));
+        setValue(Number(cleaned));
+      }
+    },
+    onBlur: (e) => {
+      const cleaned = getCleanedValue(e.target.value, decimalSeparator);
+      setFormattedValue(getFormattedValue(Number(cleaned), formatFunction));
+      setValue(Number(cleaned));
+      if (onBlur) onBlur(e);
+    },
+    onFocus
+  });
+  useEffect12(() => {
+    const formatted = getFormattedValue(value, formatFunction);
+    if (formattedValue !== formatted) {
+      setFormattedValue(formatted);
+    }
+  }, [formatFunction, formattedValue, value]);
+  return /* @__PURE__ */ jsx24(Field, { id, error, isFocus, ...fieldProps, children: /* @__PURE__ */ jsx24(
+    "input",
+    {
+      id,
+      type: "text",
+      name,
+      className,
+      style,
+      value: formattedValue,
+      pattern,
+      autoFocus,
+      autoComplete,
+      placeholder,
+      disabled,
+      readOnly,
+      min,
+      max,
+      ...handlers
+    }
+  ) });
+};
+var InputController2 = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx24(Controller, { Component: InputNumber, defaultValue: 0, inputProps: props, rules });
+};
+InputNumber.Controller = InputController2;
+
+// src/components/form/radio/radio.component.tsx
+import { useMemo as useMemo18 } from "react";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var Radio = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  autoComplete = "off",
+  radioValue,
+  label,
+  color = "primary" /* PRIMARY */,
+  size = "regular" /* REGULAR */
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}) => {
+  const id = useMemo18(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers({
+    onChange: (e) => setValue(e.target.value),
+    onBlur,
+    onFocus
+  });
+  const radioContainerClassName = useClassNames({
+    "radio-container": true,
+    [className]: Boolean(className),
+    [`color-${color}`]: Boolean(color)
+  });
+  const radioClassName = useClassNames({
+    radio: true,
+    "is-checked": radioValue === value,
+    [`size-${size}`]: Boolean(size)
+  });
+  return /* @__PURE__ */ jsxs14("section", { className: radioContainerClassName, style, children: [
+    /* @__PURE__ */ jsxs14("section", { className: radioClassName, children: [
+      /* @__PURE__ */ jsx25("section", { className: "radio-fill" }),
+      /* @__PURE__ */ jsx25(
+        "input",
+        {
+          id,
+          type: "radio",
+          name,
+          className: `radio-input ${className}`,
+          style,
+          value: radioValue,
+          checked: radioValue === value,
+          autoFocus,
+          autoComplete,
+          disabled: disabled || readOnly,
+          ...handlers
+        }
+      )
+    ] }),
+    label ? /* @__PURE__ */ jsx25(Typography, { variant: "label-form", htmlFor: id, className: "radio-label", children: label }) : null
+  ] });
+};
+var RadioController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx25(Controller, { Component: Radio, defaultValue: "", inputProps: props, rules });
+};
+Radio.Controller = RadioController;
+
+// src/components/form/select/select.component.tsx
+import { createContext as createContext3, useCallback as useCallback13, useContext as useContext3, useMemo as useMemo20, useRef as useRef12, useState as useState16 } from "react";
+import { ImCross as ImCross4 } from "react-icons/im";
+import { PiCaretDown } from "react-icons/pi";
+
+// src/components/infinity-scroll/infinity-scroll.component.tsx
+import { useEffect as useEffect13 } from "react";
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+var InfinityScroll = ({
+  isLoading: isLoadingProp = false,
+  hasNextPage = false,
+  loadMore,
+  customLoadMoreElement,
+  emptyMessage,
+  children
+}) => {
+  const { ref, inView } = useInView();
+  const isLoading = useDebounce(isLoadingProp, 100);
+  useEffect13(() => {
+    if (hasNextPage && inView && !isLoading) {
+      loadMore();
+    }
+  }, [hasNextPage, isLoading, loadMore, inView]);
+  const childrenExists = Array.isArray(children) ? children.length > 0 : Boolean(children);
+  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    children,
+    /* @__PURE__ */ jsxs15("section", { className: "infinity-scroll", children: [
+      Boolean(emptyMessage) && !childrenExists && !isLoading && /* @__PURE__ */ jsx26("p", { className: "empty-message", children: emptyMessage }),
+      (hasNextPage || isLoading) && (customLoadMoreElement ? customLoadMoreElement(ref) : /* @__PURE__ */ jsx26("section", { ref, className: "loading", children: isLoading && /* @__PURE__ */ jsx26("span", { className: "loading--icon", children: ":D" }) }))
+    ] })
+  ] });
+};
+
+// src/components/form/select/option.tsx
+import { useCallback as useCallback11, useMemo as useMemo19 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Option = ({ children, value }) => {
+  const { multiselect, isEqualComparator, maxOptions, selectedValue, setValue, setIsOpen } = useSelectContext();
+  const compareValuesIsEqual = useCallback11(
+    (a, b) => {
+      if (["number", "string"].includes(typeof a)) {
+        return a === b;
+      }
+      return !!isEqualComparator && isEqualComparator(a, b);
+    },
+    [isEqualComparator]
+  );
+  const toggleOption = useCallback11(
+    (isSelected2) => {
+      if (isSelected2) {
+        if (multiselect) {
+          if (maxOptions && Array.isArray(selectedValue) && selectedValue.length >= maxOptions) {
+            return;
+          }
+          setValue([...selectedValue, value]);
+        } else {
+          setValue(value);
+          setIsOpen(false);
+        }
+      } else {
+        if (multiselect) {
+          setValue(selectedValue.filter((item) => !compareValuesIsEqual(item, value)));
+        } else {
+          setValue(null);
+          setIsOpen(false);
+        }
+      }
+    },
+    [multiselect, maxOptions, selectedValue, setValue, value, setIsOpen, compareValuesIsEqual]
+  );
+  const isSelected = useMemo19(() => {
+    if (selectedValue === "" || selectedValue === null) {
+      return false;
+    }
+    if (!Array.isArray(selectedValue)) {
+      return compareValuesIsEqual(value, selectedValue);
+    }
+    if (["number", "string"].includes(typeof value)) {
+      return selectedValue.includes(value);
+    }
+    return selectedValue.some((item) => !!isEqualComparator && isEqualComparator(value, item));
+  }, [compareValuesIsEqual, isEqualComparator, selectedValue, value]);
+  const handleKeyDown = useCallback11(
+    (e) => {
+      if (["Enter", " "].includes(e.key)) {
+        e.preventDefault();
+        toggleOption(!(isSelected && multiselect));
+      }
+    },
+    [toggleOption, isSelected, multiselect]
+  );
+  const optionLabel = useMemo19(() => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsx27(Typography, { "data-value": value, variant: "label", nowrap: true, children });
+    }
+    return children;
+  }, [children, value]);
+  return /* @__PURE__ */ jsx27(
+    Menu.Option,
+    {
+      label: optionLabel,
+      onKeyDown: handleKeyDown,
+      asCheckbox: multiselect,
+      selected: isSelected,
+      onClick: (selected) => toggleOption(multiselect ? selected : true)
+    }
+  );
+};
+
+// src/components/form/select/options.tsx
+import { useCallback as useCallback12, useEffect as useEffect14, useRef as useRef11, useState as useState15 } from "react";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var useDynamicHeight = ({
+  height,
+  minHeight: defaultMinHeight,
+  containerRef,
+  offset,
+  windowOffset
+}) => {
+  const [h, setH] = useState15(void 0);
+  const getMaxHeight = useCallback12(() => {
+    const containerBottom = containerRef.current?.getBoundingClientRect().bottom ?? 0;
+    const heightBottom = window.innerHeight - containerBottom - windowOffset - offset - 5;
+    const heightTop = window.innerHeight - windowOffset * 3;
+    const heightCalculated = heightBottom < defaultMinHeight ? heightTop : heightBottom;
+    const maxHeight = Math.min(heightCalculated, height);
+    const minHeight = Math.max(maxHeight, defaultMinHeight);
+    setH(`${Math.round(minHeight)}px`);
+  }, [containerRef, windowOffset, offset, defaultMinHeight, height]);
+  useEffect14(() => {
+    getMaxHeight();
+  }, [getMaxHeight]);
+  useResizeObserver(containerRef, getMaxHeight);
+  useEventListener("resize", getMaxHeight);
+  return { h };
+};
+var Options = ({
+  children,
+  searchQueryValue,
+  searchQueryPlaceholder = "Search option",
+  searchQueryClassName = "",
+  searchQueryStyle = {},
+  onSearchQuery,
+  containerRef,
+  height = 300
+}) => {
+  const optionsGroupContainerRef = useRef11(null);
+  const optionsGroupRef = useRef11(null);
+  const [internalSearchQuery, setInternalSearchQuery] = useState15("");
+  const searchInputRef = useRef11(null);
+  const isMobile = useMediaQuery("(max-width: 480px)");
+  useEventListener("keydown", (e) => {
+    if (["ArrowDown", "ArrowUp"].includes(e.code)) {
+      e.preventDefault();
+      const focusedItem = document.activeElement;
+      const isListItem = focusedItem?.tagName === "LI";
+      if (isListItem) {
+        switch (e.code) {
+          case "ArrowDown":
+            focusedItem?.nextSibling?.focus();
+            break;
+          case "ArrowUp":
+            focusedItem?.previousElementSibling?.focus();
+            break;
+        }
+      }
+    }
+  });
+  const handleSearchQuery = useCallback12(
+    (e) => {
+      const { value } = e.target;
+      if (onSearchQuery) onSearchQuery(value);
+      setInternalSearchQuery(value);
+    },
+    [onSearchQuery]
+  );
+  useEffect14(() => {
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, []);
+  const { h } = useDynamicHeight({
+    height,
+    minHeight: 150,
+    containerRef,
+    offset: 5,
+    windowOffset: 10
+  });
+  const [shouldUseAuto, setShouldUseAuto] = useState15(false);
+  const calculateHeight = useCallback12(() => {
+    const optionsContainerHeight = Math.round(optionsGroupContainerRef.current?.getBoundingClientRect().height ?? 0) + 2;
+    const optionsHeight = Math.round(optionsGroupRef.current?.scrollHeight ?? 0);
+    setShouldUseAuto(optionsContainerHeight >= optionsHeight);
+  }, []);
+  useEffect14(calculateHeight, [calculateHeight]);
+  useResizeObserver(optionsGroupContainerRef, calculateHeight);
+  useResizeObserver(optionsGroupRef, calculateHeight);
+  useEventListener("resize", calculateHeight);
+  const selectOptionsHeader = useClassNames({
+    "select-options-header": true,
+    [searchQueryClassName]: Boolean(searchQueryClassName)
+  });
+  return /* @__PURE__ */ jsxs16(
+    "section",
+    {
+      className: `select-options ${onSearchQuery ? "with-search-query" : ""}`,
+      style: isMobile ? {
+        maxHeight: window.innerHeight - 100,
+        width: window.innerWidth - 100
+      } : {
+        height: shouldUseAuto ? "auto" : h,
+        maxHeight: height,
+        width: containerRef.current?.offsetWidth ?? "auto"
+      },
+      children: [
+        onSearchQuery && /* @__PURE__ */ jsx28("section", { className: selectOptionsHeader, style: searchQueryStyle, children: /* @__PURE__ */ jsx28(
+          "input",
+          {
+            name: "query",
+            className: "input-search",
+            value: searchQueryValue ?? internalSearchQuery,
+            onChange: handleSearchQuery,
+            placeholder: searchQueryPlaceholder,
+            onClick: (e) => e.stopPropagation(),
+            ref: searchInputRef,
+            autoFocus: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx28("section", { className: "select-options-list-container", ref: optionsGroupContainerRef, children: /* @__PURE__ */ jsx28("ul", { className: "select-options-list", ref: optionsGroupRef, children }) })
+      ]
+    }
+  );
+};
+
+// src/components/form/select/select.component.tsx
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+var SelectContext = createContext3(null);
+var useSelectContext = () => {
+  const context = useContext3(SelectContext);
+  if (!context) {
+    throw new Error("useSelectContext must be used within a Select component");
+  }
+  return context;
+};
+var OptionLabel = ({ children }) => {
+  const labelComponent = useMemo20(() => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsx29(Typography, { noPadding: true, variant: "label", nowrap: true, children });
+    }
+    return children;
+  }, [children]);
+  return /* @__PURE__ */ jsx29(Menu.GroupLabel, { children: labelComponent });
+};
+var DefaultOption = ({ value }) => {
+  return /* @__PURE__ */ jsx29(Typography, { variant: "label", nowrap: true, children: typeof value === "string" || typeof value === "number" ? value : JSON.stringify(value) });
+};
+var DefaultValue = ({ value, multiselect }) => {
+  if (multiselect) {
+    return /* @__PURE__ */ jsx29(Typography, { noPadding: true, nowrap: true, variant: "label", children: `${value.length} item${value.length === 1 ? "" : "s"} selected` });
+  }
+  if (value === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx29(Typography, { noPadding: true, variant: "label", nowrap: true, children: typeof value === "string" || typeof value === "number" ? value : JSON.stringify(value) });
+};
+var Select = ({
+  // Select props
+  options,
+  isEqualComparator,
+  searchQueryValue,
+  searchQueryPlaceholder,
+  onSearchQuery,
+  loadMore = () => null,
+  isLoading = false,
+  hasNextPage = false,
+  emptyMessage = "No options to select",
+  multiselect,
+  optionComponent: OptionComponent = DefaultOption,
+  valueComponent: ValueComponent = DefaultValue,
+  maxOptions,
+  children,
+  // Shared props
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = "",
+  style = {},
+  showClearOption = false,
+  height,
+  searchQueryStyle,
+  searchQueryClassName,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  autoFocus = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  autoComplete = "off",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  // Field props
+  ...fieldProps
+}) => {
+  const modalRef = useRef12(null);
+  const isMobile = useMediaQuery("(max-width: 480px)");
+  const id = useMemo20(() => crypto.randomUUID(), []);
+  const containerRef = useRef12(null);
+  const [isOpen, setIsOpen] = useState16(false);
+  const openSelect = useCallback13(
+    (open) => {
+      setIsOpen(open && !disabled);
+    },
+    [disabled]
+  );
+  const clearOption = useCallback13(
+    (e) => {
+      e.stopPropagation();
+      if (multiselect) {
+        setValue([]);
+      } else {
+        setValue(null);
+      }
+    },
+    [multiselect, setValue]
+  );
+  const valueNonEmpty = useMemo20(() => {
+    if (multiselect) {
+      return value.length > 0;
+    } else {
+      return Boolean(value);
+    }
+  }, [multiselect, value]);
+  const renderedOptions = useMemo20(() => {
+    if (!children)
+      return options.map((value2, key) => /* @__PURE__ */ jsx29(Select.Option, { value: value2, children: /* @__PURE__ */ jsx29(OptionComponent, { value: value2 }) }, key));
+    return children;
+  }, [OptionComponent, children, options]);
+  return /* @__PURE__ */ jsx29(
+    SelectContext.Provider,
+    {
+      value: {
+        selectedValue: value,
+        setValue,
+        multiselect: multiselect ?? false,
+        isEqualComparator,
+        maxOptions: maxOptions ?? null,
+        setIsOpen
+      },
+      children: /* @__PURE__ */ jsx29(Field, { id, error, isFocus: isOpen, ref: containerRef, ...fieldProps, children: /* @__PURE__ */ jsxs17(
+        "section",
+        {
+          id: name,
+          style,
+          onBlur,
+          className: `select ${disabled ? "disabled" : ""} ${className}`,
+          children: [
+            /* @__PURE__ */ jsxs17(
+              "section",
+              {
+                id,
+                className: `select-container ${valueNonEmpty && showClearOption ? "three-columns" : ""}`,
+                onClick: () => openSelect(true),
+                children: [
+                  /* @__PURE__ */ jsx29(
+                    "button",
+                    {
+                      type: "button",
+                      className: `input-button ${(Array.isArray(value) ? value.length > 0 : value) ? "" : "placeholder"}`,
+                      "aria-haspopup": "listbox",
+                      "aria-expanded": isOpen,
+                      onFocus: (e) => {
+                        openSelect(true);
+                        if (onFocus) onFocus(e);
+                      },
+                      children: valueNonEmpty ? /* @__PURE__ */ jsx29(ValueComponent, { ...multiselect ? { value, multiselect } : { value } }) : /* @__PURE__ */ jsx29(Typography, { variant: "label", noPadding: true, nowrap: true, children: placeholder })
+                    }
+                  ),
+                  valueNonEmpty && showClearOption && /* @__PURE__ */ jsx29("section", { className: "icon-close", onClick: clearOption, children: /* @__PURE__ */ jsx29(ImCross4, {}) }),
+                  /* @__PURE__ */ jsx29(PiCaretDown, { className: `select-caret-icon ${isOpen && "is-select-open"}` })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx29(
+              Menu,
+              {
+                id: "form-select",
+                isOpen,
+                onClose: () => openSelect(false),
+                backdrop: isMobile ? "blur" : "transparent",
+                opacity: isMobile ? 0.8 : 0.4,
+                position: isMobile ? "center" : "bottom",
+                offset: 5,
+                modalRef,
+                windowOffset: 10,
+                transitionDuration: 200,
+                containerRef: isMobile ? void 0 : containerRef,
+                contentClassName: "select-menu-content",
+                className: "select-options-menu",
+                children: /* @__PURE__ */ jsx29(
+                  Options,
+                  {
+                    containerRef,
+                    onSearchQuery,
+                    searchQueryValue,
+                    searchQueryPlaceholder,
+                    searchQueryClassName,
+                    searchQueryStyle,
+                    height,
+                    children: /* @__PURE__ */ jsx29(
+                      InfinityScroll,
+                      {
+                        isLoading,
+                        hasNextPage,
+                        loadMore,
+                        emptyMessage,
+                        children: renderedOptions
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+};
+var MultiSelectController = ({
+  rules,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx29(
+    Controller,
+    {
+      Component: Select,
+      defaultValue: [],
+      inputProps: {
+        ...props,
+        multiselect: true
+      },
+      rules
+    }
+  );
+};
+var SingleSelectController = ({
+  rules,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx29(
+    Controller,
+    {
+      Component: Select,
+      defaultValue: null,
+      inputProps: {
+        ...props,
+        multiselect: false
+      },
+      rules
+    }
+  );
+};
+var SelectController = (props) => {
+  const { multiselect } = props;
+  if (multiselect) {
+    return /* @__PURE__ */ jsx29(MultiSelectController, { ...props, multiselect: true });
+  }
+  return /* @__PURE__ */ jsx29(SingleSelectController, { ...props, multiselect: false });
+};
+Select.Controller = SelectController;
+Select.Option = Option;
+Select.OptionLabel = OptionLabel;
+
+// src/components/form/slider/slider.component.tsx
+import { useMemo as useMemo21 } from "react";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+var Slider = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  min,
+  max,
+  step,
+  onlySlider = false,
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  autoComplete = "off",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}) => {
+  const id = useMemo21(() => crypto.randomUUID(), []);
+  const onBlurInput = (e) => {
+    if (onBlur) onBlur(e);
+    const parsedValue = parseInt(`${value}`);
+    if (min !== void 0 && parsedValue < min) {
+      setValue(min);
+    }
+    if (max !== void 0 && parsedValue > max) {
+      setValue(max);
+    }
+    setValue(parsedValue);
+  };
+  const { isFocus, handlers } = useInputHandlers({
+    onBlur: onBlurInput,
+    onChange: (e) => setValue(+e.target.value),
+    onFocus
+  });
+  const inputSliderClassName = useClassNames({
+    "input-slider": true,
+    "is-focus": isFocus
+  });
+  return /* @__PURE__ */ jsx30(Field, { id, error, isFocus, ...fieldProps, children: /* @__PURE__ */ jsxs18("section", { className: inputSliderClassName, children: [
+    /* @__PURE__ */ jsx30(
+      "input",
+      {
+        id,
+        type: "range",
+        name,
+        className: `slider ${className}`,
+        style,
+        value,
+        autoFocus,
+        autoComplete,
+        placeholder,
+        disabled,
+        readOnly,
+        min,
+        max,
+        step,
+        ...handlers
+      }
+    ),
+    !onlySlider && /* @__PURE__ */ jsx30(
+      "input",
+      {
+        id,
+        type: "number",
+        name,
+        className: `slider-number ${className}`,
+        style,
+        value,
+        autoComplete,
+        disabled,
+        readOnly,
+        min,
+        max,
+        step,
+        ...handlers
+      }
+    )
+  ] }) });
+};
+var SliderController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx30(Controller, { Component: Slider, defaultValue: 0, inputProps: props, rules });
+};
+Slider.Controller = SliderController;
+
+// src/components/form/textarea/textarea.component.tsx
+import { useMemo as useMemo22 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Textarea = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  rows = 4,
+  resize = "vertical",
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  autoComplete = "off",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  ...fieldProps
+}) => {
+  const id = useMemo22(() => crypto.randomUUID(), []);
+  const { handlers, isFocus } = useInputHandlers({
+    onBlur,
+    onChange: (e) => setValue(e.target.value),
+    onFocus
+  });
+  const textareaClassName = useClassNames({
+    textarea: true,
+    [className]: Boolean(className)
+  });
+  return /* @__PURE__ */ jsx31(Field, { id, error, isFocus, ...fieldProps, children: /* @__PURE__ */ jsx31(
+    "textarea",
+    {
+      id,
+      name,
+      className: textareaClassName,
+      style: {
+        resize,
+        ...style
+      },
+      value,
+      rows,
+      ...handlers,
+      autoFocus,
+      autoComplete,
+      placeholder,
+      disabled,
+      readOnly
+    }
+  ) });
+};
+var TextareaController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx31(Controller, { Component: Textarea, defaultValue: "", inputProps: props, rules });
+};
+Textarea.Controller = TextareaController;
+
+// src/components/form/switch/switch.component.tsx
+import { useMemo as useMemo23 } from "react";
+
+// src/components/tooltips/click-to-copy/click-to-copy.component.tsx
+import { useState as useState17 } from "react";
+
+// src/components/tooltips/tooltip/tooltip.component.tsx
+import { cloneElement } from "react";
+import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+var Tooltip = ({
+  position = "top" /* TOP */,
+  children,
+  content,
+  offset = 5,
+  disabled = false
+}) => {
+  const { containerRef, openModal, closeModal, isOpen } = useModal();
+  const classNames = useClassNames({
+    tooltip: true,
+    [position]: true
+  });
+  useEventListener("mouseenter", () => openModal(), containerRef);
+  useEventListener("mouseleave", () => closeModal(), containerRef);
+  if (disabled) return children;
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    cloneElement(children, { ref: containerRef }),
+    /* @__PURE__ */ jsx32(
+      Modal,
+      {
+        backdrop: "none",
+        id: "tooltip",
+        isOpen,
+        containerRef,
+        onClose: closeModal,
+        position,
+        className: classNames,
+        closeOnClickOutside: false,
+        offset: 6 + +offset,
+        windowOffset: 10,
+        transitionDuration: 100,
+        closeAnimationClassName: "close-animation",
+        children: /* @__PURE__ */ jsx32("span", { className: "tooltip-content", children: content })
+      }
+    )
+  ] });
+};
+
+// src/components/tooltips/click-to-copy/click-to-copy.component.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+var ClickToCopy = ({
+  children,
+  value,
+  position,
+  offset,
+  tooltipText,
+  tooltipCopiedText,
+  copiedTextTimeout = 500
+}) => {
+  const [justCopied, setJustCopied] = useState17(false);
+  const handleCopy = () => {
+    setJustCopied(true);
+    navigator.clipboard.writeText(value);
+    setTimeout(() => setJustCopied(false), copiedTextTimeout);
+  };
+  return /* @__PURE__ */ jsx33(
+    Tooltip,
+    {
+      content: justCopied && tooltipCopiedText ? tooltipCopiedText : tooltipText,
+      position,
+      offset,
+      children: /* @__PURE__ */ jsx33("span", { onClick: handleCopy, children })
+    }
+  );
+};
+
+// src/components/form/switch/switch.component.tsx
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+var DotSizeMap = {
+  ["small" /* SMALL */]: 1,
+  ["regular" /* REGULAR */]: 1.2,
+  ["large" /* LARGE */]: 1.4
+};
+var WidthMap = {
+  ["small" /* SMALL */]: 2,
+  ["regular" /* REGULAR */]: 2.5,
+  ["large" /* LARGE */]: 3
+};
+var Switch = ({
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = "",
+  style = {},
+  autoFocus = false,
+  readOnly = false,
+  disabled = false,
+  placeholder = "",
+  autoComplete = "off",
+  label,
+  leftLabel,
+  rightLabel,
+  width = "regular" /* REGULAR */,
+  size = "regular" /* REGULAR */,
+  dotHoverSize = 1.3,
+  padding = 0.25,
+  leftIcon: LeftIcon,
+  rightIcon: RightIcon,
+  internalLeftIcon: InternalLeftIcon,
+  internalRightIcon: InternalRightIcon,
+  leftIconTooltip,
+  rightIconTooltip,
+  color
+  /*
+   * isDirty = false,
+   * isTouched = false,
+   * invalid = false,
+   * error,
+   */
+}) => {
+  const id = useMemo23(() => crypto.randomUUID(), []);
+  const { handlers } = useInputHandlers({
+    onChange: (e) => setValue(e.target.checked),
+    onBlur,
+    onFocus
+  });
+  const switchContainerClassName = useClassNames({
+    "switch-container": true,
+    [className]: Boolean(className),
+    [`color-${color}`]: Boolean(color)
+  });
+  const switchClassName = useClassNames({
+    switch: true,
+    "is-checked": value,
+    "is-readonly": !disabled && readOnly
+  });
+  const dotSize = DotSizeMap[size] ?? DotSizeMap["regular" /* REGULAR */];
+  const _width = (WidthMap[width] ?? WidthMap["regular" /* REGULAR */]) * dotSize;
+  const _padding = Math.min(padding, dotSize);
+  return /* @__PURE__ */ jsxs20(
+    "section",
+    {
+      className: switchContainerClassName,
+      style: {
+        ...style,
+        "--width": `${_width}em`,
+        "--dot-size": `${dotSize}em`,
+        "--dot-hover-size": `${dotSize * Math.min(Math.max(dotHoverSize, 1), 2)}em`,
+        "--padding": `${_padding}em`
+      },
+      children: [
+        leftLabel ? /* @__PURE__ */ jsx34(Typography, { variant: "label-form", className: "switch-label", htmlFor: id, children: leftLabel }) : null,
+        LeftIcon !== void 0 && /* @__PURE__ */ jsx34(Tooltip, { content: leftIconTooltip, disabled: !leftIconTooltip, offset: 10, children: /* @__PURE__ */ jsx34(LeftIcon, { size: `${dotSize * 0.7}em`, className: "switch-icon", onClick: () => setValue(!value) }) }),
+        /* @__PURE__ */ jsxs20("section", { className: switchClassName, children: [
+          InternalLeftIcon !== void 0 && /* @__PURE__ */ jsx34("span", { className: "switch-internal-left-icon", children: /* @__PURE__ */ jsx34(InternalLeftIcon, { size: `${dotSize * 0.7}em` }) }),
+          InternalRightIcon !== void 0 && /* @__PURE__ */ jsx34("span", { className: "switch-internal-right-icon", children: /* @__PURE__ */ jsx34(InternalRightIcon, { size: `${dotSize * 0.7}em` }) }),
+          /* @__PURE__ */ jsx34("span", { className: "switch-dot" }),
+          /* @__PURE__ */ jsx34(
+            "input",
+            {
+              id,
+              type: "checkbox",
+              name,
+              className: `switch-checkbox ${className}`,
+              style,
+              checked: value,
+              autoFocus,
+              autoComplete,
+              placeholder,
+              disabled: disabled || readOnly,
+              ...handlers
+            }
+          )
+        ] }),
+        RightIcon !== void 0 && /* @__PURE__ */ jsx34(Tooltip, { content: rightIconTooltip, disabled: !rightIconTooltip, offset: 10, children: /* @__PURE__ */ jsx34(RightIcon, { size: `${dotSize * 0.7}em`, className: "switch-icon", onClick: () => setValue(!value) }) }),
+        label || rightLabel ? /* @__PURE__ */ jsx34(Typography, { variant: "label-form", className: "switch-label", htmlFor: id, children: label || rightLabel }) : null
+      ]
+    }
+  );
+};
+var SwitchController = ({ rules, ...props }) => {
+  return /* @__PURE__ */ jsx34(Controller, { Component: Switch, defaultValue: false, inputProps: props, rules });
+};
+Switch.Controller = SwitchController;
+
+// src/components/image/image.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Image = ({ alt = "", loading = "eager", ...props }) => {
+  return /* @__PURE__ */ jsx35("img", { loading, alt, ...props, width: "100%" });
+};
+
+// src/components/smart-table/smart-table.component.tsx
+import { useMemo as useMemo25, useState as useState19 } from "react";
+
+// src/components/smart-table/smart-table.column.tsx
+import { useMemo as useMemo24 } from "react";
+import { MdArrowDownward, MdArrowUpward } from "react-icons/md";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+var SmartTableColumn = ({
+  header,
+  sortBy,
+  icon: Icon,
+  width,
+  field,
+  toggleSortField,
+  sortField,
+  orderField,
+  hidden
+}) => {
+  const sortByKey = sortBy !== void 0 ? sortBy : field;
+  const columnClassName = useClassNames({
+    "sort-on-click": Boolean(sortByKey)
+  });
+  const columnOnClick = sortByKey ? () => toggleSortField(sortByKey) : void 0;
+  const sortIcon = useMemo24(() => {
+    if (!sortByKey) return null;
+    return /* @__PURE__ */ jsx36("span", { className: "sort-icon", children: Boolean(sortField) && sortField === sortByKey && (orderField === "asc" ? /* @__PURE__ */ jsx36(MdArrowUpward, {}) : /* @__PURE__ */ jsx36(MdArrowDownward, {})) });
+  }, [sortByKey, sortField, orderField]);
+  if (hidden) return null;
+  return /* @__PURE__ */ jsxs21("th", { style: { width }, className: columnClassName, onClick: columnOnClick, children: [
+    /* @__PURE__ */ jsxs21(Grid, { flow: "column", gap: "0.5em", jc: "space-between", ai: "center", children: [
+      Icon ? /* @__PURE__ */ jsx36(Icon, {}) : null,
+      /* @__PURE__ */ jsx36(Typography, { variant: "label", noPadding: true, children: header }),
+      sortIcon
+    ] }),
+    /* @__PURE__ */ jsx36(Ripple, { color: "var(--primary-700)" })
+  ] });
+};
+
+// src/components/smart-table/smart-table.helpers.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+var renderRowColumn = (data, { field, render, Component }, rowKey) => {
+  if (field && data[field])
+    return /* @__PURE__ */ jsx37(Typography, { noPadding: true, nowrap: true, children: data[field] });
+  if (render) return render(data, rowKey);
+  if (Component) return /* @__PURE__ */ jsx37(Component, { data, rowKey });
+};
+var renderRow = (data, columns, rowKey) => columns.map((column, key) => column.hidden ? null : /* @__PURE__ */ jsx37("td", { children: renderRowColumn(data, column, rowKey) }, key));
+var sortData = (data, sortBy, order) => {
+  if (sortBy) {
+    return data.toSorted((a, b) => {
+      const fieldA = a[sortBy];
+      const fieldB = b[sortBy];
+      if (["number", "boolean", "string"].includes(typeof fieldA) && ["number", "boolean", "string"].includes(typeof fieldB)) {
+        if (fieldA === fieldB) return 0;
+        if (order === "asc") {
+          return fieldA > fieldB ? 1 : -1;
+        }
+        return fieldA > fieldB ? -1 : 1;
+      }
+      return 0;
+    });
+  }
+  return data;
+};
+
+// src/components/smart-table/smart-table.hooks.ts
+import { useCallback as useCallback14, useState as useState18 } from "react";
+var useSort = () => {
+  const [[sortBy, order], setSortField] = useState18([null, null]);
+  const toggleSortField = useCallback14((sortByField) => {
+    setSortField(([sortBy2, order2]) => {
+      if (sortByField !== sortBy2) {
+        return [sortByField, "asc"];
+      }
+      if (order2 === "asc") {
+        return [sortByField, "desc"];
+      }
+      return [null, null];
+    });
+  }, []);
+  return {
+    sortBy,
+    order,
+    toggleSortField
+  };
+};
+
+// src/components/smart-table/smart-table.row.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var SmartTableRow = ({
+  data,
+  columns,
+  isSelected = false,
+  selectable = false,
+  rowKey
+}) => {
+  const rowClassName = useClassNames({
+    "row-selected": selectable && isSelected
+  });
+  return /* @__PURE__ */ jsx38("tr", { className: rowClassName, children: renderRow(data, columns, rowKey) });
+};
+
+// src/components/smart-table/smart-table.component.tsx
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
+var SmartTable = ({
+  columns: initialColumns,
+  data,
+  width,
+  selectable = false,
+  rowId,
+  className = "",
+  tableClassName: _tableClassName = ""
+}) => {
+  const [selected, setSelected] = useState19({});
+  const tableClassName = useClassNames({
+    "smart-table": true,
+    [_tableClassName]: Boolean(_tableClassName),
+    "layout-fixed": width === "content",
+    "layout-scrollable": width === "scroll"
+  });
+  const tableContainerClassName = useClassNames({
+    "smart-table-container": true,
+    [className]: Boolean(className)
+  });
+  const { sortBy, order, toggleSortField } = useSort();
+  const columns = useMemo25(() => {
+    let finalColumns = [...initialColumns];
+    if (selectable) {
+      finalColumns = [
+        {
+          header: `${Object.values(selected).length}`,
+          render: (data2, rowKey) => /* @__PURE__ */ jsx39(
+            Checkbox,
+            {
+              name: `selected-${rowKey}`,
+              value: `${rowKey}` in selected,
+              setValue: (isSelected) => {
+                setSelected((prev) => {
+                  const copy = { ...prev };
+                  if (isSelected) {
+                    copy[`${rowKey}`] = data2;
+                  } else {
+                    delete copy[`${rowKey}`];
+                  }
+                  return copy;
+                });
+              }
+            }
+          )
+        },
+        ...finalColumns
+      ];
+    }
+    return finalColumns;
+  }, [initialColumns, selectable, selected]);
+  const rows = useMemo25(() => sortData(data, sortBy, order), [data, sortBy, order]);
+  return /* @__PURE__ */ jsx39("section", { className: tableContainerClassName, children: /* @__PURE__ */ jsxs22("table", { className: tableClassName, children: [
+    /* @__PURE__ */ jsx39("thead", { children: /* @__PURE__ */ jsx39("tr", { children: columns.map((column, key) => /* @__PURE__ */ jsx39(
+      SmartTableColumn,
+      {
+        toggleSortField,
+        sortField: sortBy,
+        orderField: order,
+        ...column
+      },
+      key
+    )) }) }),
+    /* @__PURE__ */ jsx39("tbody", { children: rows.map((row) => /* @__PURE__ */ jsx39(
+      SmartTableRow,
+      {
+        rowKey: row[rowId],
+        data: row,
+        columns,
+        isSelected: `${row[rowId]}` in selected,
+        selectable
+      },
+      row[rowId]
+    )) })
+  ] }) });
+};
+
+// src/components/tabs/tabs.tsx
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect16, useState as useState21 } from "react";
+
+// src/components/tabs/tabs-list.tsx
+import { useEffect as useEffect15, useRef as useRef13, useState as useState20 } from "react";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+var DefaultRect = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+var TabsList = ({
+  tabs = [],
+  variant = "solid" /* SOLID */,
+  radius = "full" /* Full */,
+  direction = "horizontal" /* HORIZONTAL */,
+  color,
+  children,
+  openTab,
+  size = "medium" /* Medium */,
+  className = "",
+  style = {}
+}) => {
+  const containerRef = useRef13(null);
+  const selectedTabRef = useRef13(null);
+  const [isSelectorActive, setIsSelectorActive] = useState20(false);
+  const [selector, setSelector] = useState20(DefaultRect);
+  const containerClassNames = useClassNames({
+    "tab-list": true,
+    [`variant-${variant}`]: Boolean(variant),
+    [`size-${size}`]: Boolean(size),
+    [`radius-${radius}`]: Boolean(radius),
+    [`color-${color}`]: Boolean(color),
+    "vertical-direction": direction === "vertical" /* VERTICAL */,
+    [className]: Boolean(className)
+  });
+  useEffect15(() => {
+    const selectedRect = selectedTabRef.current?.getBoundingClientRect() ?? DefaultRect;
+    const containerRect = containerRef.current?.getBoundingClientRect() ?? DefaultRect;
+    const width = selectedRect.width;
+    const height = variant === "line" /* LINE */ ? 2 : selectedRect.height;
+    const left = selectedRect.left - containerRect.left;
+    const top = variant === "line" /* LINE */ ? selectedRect.top + selectedRect.height - containerRect.top : selectedRect.top - containerRect.top;
+    setSelector({ left, top, width, height });
+    if (!isSelectorActive) {
+      setTimeout(() => {
+        setIsSelectorActive(true);
+      }, 100);
+    }
+  }, [isSelectorActive, variant, openTab]);
+  return /* @__PURE__ */ jsxs23("section", { className: containerClassNames, ref: containerRef, style, children: [
+    Boolean(variant) && /* @__PURE__ */ jsx40("span", { className: `tabs-selector ${isSelectorActive ? "active" : ""}`, style: selector }),
+    tabs.map(({ id, label }) => /* @__PURE__ */ jsx40(Tabs.Tab, { id, ref: id === openTab ? selectedTabRef : void 0, children: label }, id)),
+    children
+  ] });
+};
+
+// src/components/tabs/tabs.tsx
+import { jsx as jsx41 } from "react/jsx-runtime";
+var TabsContext = createContext4(null);
+var useTab = (id) => {
+  const context = useContext4(TabsContext);
+  if (!context) {
+    throw new Error("You cant use this component out off an Tabs component");
+  }
+  const { openTab, changeOpenTab } = context;
+  return [openTab === id, () => changeOpenTab(id)];
+};
+var useTabsContext = () => {
+  const context = useContext4(TabsContext);
+  if (!context) {
+    throw new Error("You cant use this component out off an Tabs component");
+  }
+  return context;
+};
+var Tabs = ({ children, defaultOpenTab, onChange }) => {
+  const [openTab, setOpenTab] = useState21(defaultOpenTab);
+  useEffect16(() => {
+    if (onChange) {
+      onChange(openTab);
+    }
+  }, [openTab, onChange]);
+  return /* @__PURE__ */ jsx41(
+    TabsContext.Provider,
+    {
+      value: {
+        openTab,
+        changeOpenTab: (id) => setOpenTab(id)
+      },
+      children
+    }
+  );
+};
+var Tab = ({ id, children, className = "", style = {}, onClick, ref }) => {
+  const [isOpen, openTab] = useTab(id);
+  const tabClassNames = useClassNames({
+    tab: true,
+    [className]: !!className,
+    "is-open": isOpen
+  });
+  const handleClick = (e) => {
+    openTab();
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  return /* @__PURE__ */ jsx41("span", { className: tabClassNames, style, onClick: handleClick, ref, children });
+};
+var TabPanel = ({ id, children }) => {
+  const [isOpen] = useTab(id);
+  return isOpen ? children : null;
+};
+var TabList = ({ children, ...props }) => {
+  const { openTab } = useTabsContext();
+  return /* @__PURE__ */ jsx41(TabsList, { ...props, openTab, children });
+};
+Tabs.Tab = Tab;
+Tabs.TabPanel = TabPanel;
+Tabs.TabList = TabList;
+
+// src/components/tag/tag.component.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+var TagRounded = /* @__PURE__ */ ((TagRounded2) => {
+  TagRounded2["NONE"] = "none";
+  TagRounded2["SMALL"] = "small";
+  TagRounded2["MEDIUM"] = "medium";
+  TagRounded2["LARGE"] = "large";
+  TagRounded2["FULL"] = "full";
+  return TagRounded2;
+})(TagRounded || {});
+var Tag = ({ children, rounded = "medium" /* MEDIUM */, selected = false, noWrap = false, ref }) => {
+  const className = useClassNames({
+    tag: true,
+    [`rounded-${rounded}`]: Boolean(rounded),
+    "is-selected": selected,
+    "no-wrap": noWrap
+  });
+  return /* @__PURE__ */ jsx42("span", { className, ref, children });
+};
+export {
+  Accordion,
+  AccordionItem,
+  ActionModal,
+  AsideModal,
+  Backdrop,
+  Button,
+  Checkbox,
+  ClickToCopy,
+  ConfirmationModal,
+  Cursor,
+  DatePicker,
+  Field,
+  FieldOrientation,
+  FieldVariant,
+  FlipCard,
+  HoverCard,
+  Image,
+  InfinityScroll,
+  Input,
+  InputColor,
+  InputFile,
+  InputNumber,
+  InputPassword,
+  Line,
+  LineOrientation,
+  LineStyle,
+  Menu,
+  Modal,
+  ModalBackdrop,
+  Portal,
+  Radio,
+  Ripple,
+  Select,
+  SlideCard,
+  Slider,
+  SmartTable,
+  Switch,
+  Tabs,
+  Tag,
+  TagRounded,
+  Textarea,
+  Tooltip,
+  Typography,
+  useAccordionItem
+};
 //# sourceMappingURL=components.js.map