@eliseubatista99/react-scaffold-core 1.1.19 → 1.1.20

package/dist/components/form/form.d.ts

@@ -4,10 +4,16 @@ export interface FormSubmitButton {
     styles?: React.CSSProperties;
     content: React.ReactNode;
 }
+export interface FormSubmitSection {
+    renderBeforeSubmitButton?: React.ReactNode;
+    submitButton: FormSubmitButton;
+    renderAfterSubmitButton?: React.ReactNode;
+    styles?: React.CSSProperties;
+}
 export interface FormProps {
     children?: React.ReactNode;
     configurations?: FormFieldConfiguration[];
-    submitButton: FormSubmitButton;
+    submitSection: FormSubmitSection;
     onMount?: (data: FormFieldOutputData[], hasErrors?: boolean) => Promise<void>;
     onPreSubmit?: () => void;
     onSubmit: (data: FormFieldOutputData[], hasErrors?: boolean) => Promise<void>;

package/dist/components/form/stories/form.stories.d.ts

@@ -19,10 +19,12 @@ declare const meta: {
         childrenStyles: {
             gap: string;
         };
-        submitButton: {
-            content: import("react/jsx-runtime").JSX.Element;
-            styles: {
-                marginTop: string;
+        submitSection: {
+            submitButton: {
+                content: import("react/jsx-runtime").JSX.Element;
+                styles: {
+                    marginTop: string;
+                };
             };
         };
         onSubmit: (_: import('../../..').FormFieldOutputData[]) => Promise<void>;
@@ -36,3 +38,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithAnotherButton: Story;

package/dist/index.cjs.js

@@ -125,7 +125,7 @@ React keys must be passed directly to JSX without using spread:
 
 Please change the parent <Route path="${S}"> to <Route path="${S==="/"?"*":`${S}/*`}">.`)}let y=ke(),E;if(t){let S=typeof t=="string"?Me(t):t;ae(d==="/"||S.pathname?.startsWith(d),`When overriding the location using \`<Routes location>\` or \`useRoutes(routes, location)\`, the location pathname must begin with the portion of the URL pathname that was matched by all parent routes. The current pathname base is "${d}" but pathname "${S.pathname}" was given in the \`location\` prop.`),E=S}else E=y;let M=E.pathname||"/",k=M;if(d!=="/"){let S=d.replace(/^\//,"").split("/");k="/"+M.replace(/^\//,"").split("/").slice(S.length).join("/")}let p=rn(e,{pathname:k});ve(g||p!=null,`No routes matched location "${E.pathname}${E.search}${E.hash}" `),ve(p==null||p[p.length-1].route.element!==void 0||p[p.length-1].route.Component!==void 0||p[p.length-1].route.lazy!==void 0,`Matched leaf route at location "${E.pathname}${E.search}${E.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`);let R=Ja(p&&p.map(S=>Object.assign({},S,{params:Object.assign({},u,S.params),pathname:Se([d,a.encodeLocation?a.encodeLocation(S.pathname).pathname:S.pathname]),pathnameBase:S.pathnameBase==="/"?d:Se([d,a.encodeLocation?a.encodeLocation(S.pathnameBase).pathname:S.pathnameBase])})),s,r,i);return t&&R?$.createElement(Je.Provider,{value:{location:{pathname:"/",search:"",hash:"",state:null,key:"default",...E},navigationType:"POP"}},R):R}function qa(){let e=ro(),t=Na(e)?`${e.status} ${e.statusText}`:e instanceof Error?e.message:JSON.stringify(e),r=e instanceof Error?e.stack:null,i="rgba(200,200,200, 0.5)",a={padding:"0.5rem",backgroundColor:i},s={padding:"2px 4px",backgroundColor:i},c=null;return console.error("Error handled by React Router default ErrorBoundary:",e),c=$.createElement($.Fragment,null,$.createElement("p",null,"💿 Hey developer 👋"),$.createElement("p",null,"You can provide a way better UX than this when your app throws errors by providing your own ",$.createElement("code",{style:s},"ErrorBoundary")," or"," ",$.createElement("code",{style:s},"errorElement")," prop on your route.")),$.createElement($.Fragment,null,$.createElement("h2",null,"Unexpected Application Error!"),$.createElement("h3",{style:{fontStyle:"italic"}},t),r?$.createElement("pre",{style:a},r):null,c)}var Xa=$.createElement(qa,null),Ga=class extends $.Component{constructor(e){super(e),this.state={location:e.location,revalidation:e.revalidation,error:e.error}}static getDerivedStateFromError(e){return{error:e}}static getDerivedStateFromProps(e,t){return t.location!==e.location||t.revalidation!=="idle"&&e.revalidation==="idle"?{error:e.error,location:e.location,revalidation:e.revalidation}:{error:e.error!==void 0?e.error:t.error,location:t.location,revalidation:e.revalidation||t.revalidation}}componentDidCatch(e,t){console.error("React Router caught the following error during render",e,t)}render(){return this.state.error!==void 0?$.createElement(Oe.Provider,{value:this.props.routeContext},$.createElement(qt.Provider,{value:this.state.error,children:this.props.component})):this.props.children}};function Ka({routeContext:e,match:t,children:r}){let i=$.useContext(De);return i&&i.static&&i.staticContext&&(t.route.errorElement||t.route.ErrorBoundary)&&(i.staticContext._deepestRenderedBoundaryId=t.route.id),$.createElement(Oe.Provider,{value:e},r)}function Ja(e,t=[],r=null,i=null){if(e==null){if(!r)return null;if(r.errors)e=r.matches;else if(t.length===0&&!r.initialized&&r.matches.length>0)e=r.matches;else return null}let a=e,s=r?.errors;if(s!=null){let l=a.findIndex(d=>d.route.id&&s?.[d.route.id]!==void 0);ae(l>=0,`Could not find a matching route for errors on route IDs: ${Object.keys(s).join(",")}`),a=a.slice(0,Math.min(a.length,l+1))}let c=!1,u=-1;if(r)for(let l=0;l<a.length;l++){let d=a[l];if((d.route.HydrateFallback||d.route.hydrateFallbackElement)&&(u=l),d.route.id){let{loaderData:g,errors:y}=r,E=d.route.loader&&!g.hasOwnProperty(d.route.id)&&(!y||y[d.route.id]===void 0);if(d.route.lazy||E){c=!0,u>=0?a=a.slice(0,u+1):a=[a[0]];break}}}return a.reduceRight((l,d,g)=>{let y,E=!1,M=null,k=null;r&&(y=s&&d.route.id?s[d.route.id]:void 0,M=d.route.errorElement||Xa,c&&(u<0&&g===0?(hn("route-fallback",!1,"No `HydrateFallback` element provided to render during initial hydration"),E=!0,k=null):u===g&&(E=!0,k=d.route.hydrateFallbackElement||null)));let p=t.concat(a.slice(0,g+1)),R=()=>{let S;return y?S=M:E?S=k:d.route.Component?S=$.createElement(d.route.Component,null):d.route.element?S=d.route.element:S=l,$.createElement(Ka,{match:d,routeContext:{outlet:l,matches:p,isDataRoute:r!=null},children:S})};return r&&(d.route.ErrorBoundary||d.route.errorElement||g===0)?$.createElement(Ga,{location:r.location,revalidation:r.revalidation,component:M,error:y,children:R(),routeContext:{outlet:null,matches:p,isDataRoute:!0}}):R()},null)}function Gt(e){return`${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`}function Za(e){let t=$.useContext(De);return ae(t,Gt(e)),t}function Qa(e){let t=$.useContext(Ot);return ae(t,Gt(e)),t}function eo(e){let t=$.useContext(Oe);return ae(t,Gt(e)),t}function Kt(e){let t=eo(e),r=t.matches[t.matches.length-1];return ae(r.route.id,`${e} can only be used on routes that contain a unique "id"`),r.route.id}function to(){return Kt("useRouteId")}function ro(){let e=$.useContext(qt),t=Qa("useRouteError"),r=Kt("useRouteError");return e!==void 0?e:t.errors?.[r]}function no(){let{router:e}=Za("useNavigate"),t=Kt("useNavigate"),r=$.useRef(!1);return fn(()=>{r.current=!0}),$.useCallback(async(a,s={})=>{ve(r.current,cn),r.current&&(typeof a=="number"?e.navigate(a):await e.navigate(a,{fromRouteId:t,...s}))},[e,t])}var jr={};function hn(e,t,r){!t&&!jr[e]&&(jr[e]=!0,ve(!1,r))}$.memo(io);function io({routes:e,future:t,state:r}){return dn(e,void 0,r,t)}function pn(e){ae(!1,"A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.")}function ao({basename:e="/",children:t=null,location:r,navigationType:i="POP",navigator:a,static:s=!1}){ae(!Ze(),"You cannot render a <Router> inside another <Router>. You should never have more than one in your app.");let c=e.replace(/^\/*/,"/"),u=$.useMemo(()=>({basename:c,navigator:a,static:s,future:{}}),[c,a,s]);typeof r=="string"&&(r=Me(r));let{pathname:l="/",search:d="",hash:g="",state:y=null,key:E="default"}=r,M=$.useMemo(()=>{let k=xe(l,c);return k==null?null:{location:{pathname:k,search:d,hash:g,state:y,key:E},navigationType:i}},[c,l,d,g,y,E,i]);return ve(M!=null,`<Router basename="${c}"> is not able to match the URL "${l}${d}${g}" because it does not start with the basename, so the <Router> won't render anything.`),M==null?null:$.createElement(we.Provider,{value:u},$.createElement(Je.Provider,{children:t,value:M}))}function oo({children:e,location:t}){return Ba(Ft(e),t)}function Ft(e,t=[]){let r=[];return $.Children.forEach(e,(i,a)=>{if(!$.isValidElement(i))return;let s=[...t,a];if(i.type===$.Fragment){r.push.apply(r,Ft(i.props.children,s));return}ae(i.type===pn,`[${typeof i.type=="string"?i.type:i.type.name}] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>`),ae(!i.props.index||!i.props.children,"An index route cannot have child routes.");let c={id:i.props.id||s.join("-"),caseSensitive:i.props.caseSensitive,element:i.props.element,Component:i.props.Component,index:i.props.index,path:i.props.path,loader:i.props.loader,action:i.props.action,hydrateFallbackElement:i.props.hydrateFallbackElement,HydrateFallback:i.props.HydrateFallback,errorElement:i.props.errorElement,ErrorBoundary:i.props.ErrorBoundary,hasErrorBoundary:i.props.hasErrorBoundary===!0||i.props.ErrorBoundary!=null||i.props.errorElement!=null,shouldRevalidate:i.props.shouldRevalidate,handle:i.props.handle,lazy:i.props.lazy};i.props.children&&(c.children=Ft(i.props.children,s)),r.push(c)}),r}var ut="get",ct="application/x-www-form-urlencoded";function kt(e){return e!=null&&typeof e.tagName=="string"}function so(e){return kt(e)&&e.tagName.toLowerCase()==="button"}function lo(e){return kt(e)&&e.tagName.toLowerCase()==="form"}function uo(e){return kt(e)&&e.tagName.toLowerCase()==="input"}function co(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}function fo(e,t){return e.button===0&&(!t||t==="_self")&&!co(e)}function Wt(e=""){return new URLSearchParams(typeof e=="string"||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce((t,r)=>{let i=e[r];return t.concat(Array.isArray(i)?i.map(a=>[r,a]):[[r,i]])},[]))}function ho(e,t){let r=Wt(e);return t&&t.forEach((i,a)=>{r.has(a)||t.getAll(a).forEach(s=>{r.append(a,s)})}),r}var at=null;function po(){if(at===null)try{new FormData(document.createElement("form"),0),at=!1}catch{at=!0}return at}var mo=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function $t(e){return e!=null&&!mo.has(e)?(ve(!1,`"${e}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${ct}"`),null):e}function vo(e,t){let r,i,a,s,c;if(lo(e)){let u=e.getAttribute("action");i=u?xe(u,t):null,r=e.getAttribute("method")||ut,a=$t(e.getAttribute("enctype"))||ct,s=new FormData(e)}else if(so(e)||uo(e)&&(e.type==="submit"||e.type==="image")){let u=e.form;if(u==null)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let l=e.getAttribute("formaction")||u.getAttribute("action");if(i=l?xe(l,t):null,r=e.getAttribute("formmethod")||u.getAttribute("method")||ut,a=$t(e.getAttribute("formenctype"))||$t(u.getAttribute("enctype"))||ct,s=new FormData(u,e),!po()){let{name:d,type:g,value:y}=e;if(g==="image"){let E=d?`${d}.`:"";s.append(`${E}x`,"0"),s.append(`${E}y`,"0")}else d&&s.append(d,y)}}else{if(kt(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');r=ut,i=null,a=ct,c=e}return s&&a==="text/plain"&&(c=s,s=void 0),{action:i,method:r.toLowerCase(),encType:a,formData:s,body:c}}function Jt(e,t){if(e===!1||e===null||typeof e>"u")throw new Error(t)}async function go(e,t){if(e.id in t)return t[e.id];try{let r=await import(e.module);return t[e.id]=r,r}catch(r){return console.error(`Error loading route module \`${e.module}\`, reloading page...`),console.error(r),window.__reactRouterContext&&window.__reactRouterContext.isSpaMode,window.location.reload(),new Promise(()=>{})}}function yo(e){return e==null?!1:e.href==null?e.rel==="preload"&&typeof e.imageSrcSet=="string"&&typeof e.imageSizes=="string":typeof e.rel=="string"&&typeof e.href=="string"}async function bo(e,t,r){let i=await Promise.all(e.map(async a=>{let s=t.routes[a.route.id];if(s){let c=await go(s,r);return c.links?c.links():[]}return[]}));return Oo(i.flat(1).filter(yo).filter(a=>a.rel==="stylesheet"||a.rel==="preload").map(a=>a.rel==="stylesheet"?{...a,rel:"prefetch",as:"style"}:{...a,rel:"prefetch"}))}function Lr(e,t,r,i,a,s){let c=(l,d)=>r[d]?l.route.id!==r[d].route.id:!0,u=(l,d)=>r[d].pathname!==l.pathname||r[d].route.path?.endsWith("*")&&r[d].params["*"]!==l.params["*"];return s==="assets"?t.filter((l,d)=>c(l,d)||u(l,d)):s==="data"?t.filter((l,d)=>{let g=i.routes[l.route.id];if(!g||!g.hasLoader)return!1;if(c(l,d)||u(l,d))return!0;if(l.route.shouldRevalidate){let y=l.route.shouldRevalidate({currentUrl:new URL(a.pathname+a.search+a.hash,window.origin),currentParams:r[0]?.params||{},nextUrl:new URL(e,window.origin),nextParams:l.params,defaultShouldRevalidate:!0});if(typeof y=="boolean")return y}return!0}):[]}function wo(e,t,{includeHydrateFallback:r}={}){return So(e.map(i=>{let a=t.routes[i.route.id];if(!a)return[];let s=[a.module];return a.clientActionModule&&(s=s.concat(a.clientActionModule)),a.clientLoaderModule&&(s=s.concat(a.clientLoaderModule)),r&&a.hydrateFallbackModule&&(s=s.concat(a.hydrateFallbackModule)),a.imports&&(s=s.concat(a.imports)),s}).flat(1))}function So(e){return[...new Set(e)]}function xo(e){let t={},r=Object.keys(e).sort();for(let i of r)t[i]=e[i];return t}function Oo(e,t){let r=new Set;return new Set(t),e.reduce((i,a)=>{let s=JSON.stringify(xo(a));return r.has(s)||(r.add(s),i.push({key:s,link:a})),i},[])}Object.getOwnPropertyNames(Object.prototype).sort().join("\0");var ko=new Set([100,101,204,205]);function Co(e,t){let r=typeof e=="string"?new URL(e,typeof window>"u"?"server://singlefetch/":window.location.origin):e;return r.pathname==="/"?r.pathname="_root.data":t&&xe(r.pathname,t)==="/"?r.pathname=`${t.replace(/\/$/,"")}/_root.data`:r.pathname=`${r.pathname.replace(/\/$/,"")}.data`,r}function mn(){let e=$.useContext(De);return Jt(e,"You must render this element inside a <DataRouterContext.Provider> element"),e}function Po(){let e=$.useContext(Ot);return Jt(e,"You must render this element inside a <DataRouterStateContext.Provider> element"),e}var Zt=$.createContext(void 0);Zt.displayName="FrameworkContext";function vn(){let e=$.useContext(Zt);return Jt(e,"You must render this element inside a <HydratedRouter> element"),e}function Eo(e,t){let r=$.useContext(Zt),[i,a]=$.useState(!1),[s,c]=$.useState(!1),{onFocus:u,onBlur:l,onMouseEnter:d,onMouseLeave:g,onTouchStart:y}=t,E=$.useRef(null);$.useEffect(()=>{if(e==="render"&&c(!0),e==="viewport"){let p=S=>{S.forEach(A=>{c(A.isIntersecting)})},R=new IntersectionObserver(p,{threshold:.5});return E.current&&R.observe(E.current),()=>{R.disconnect()}}},[e]),$.useEffect(()=>{if(i){let p=setTimeout(()=>{c(!0)},100);return()=>{clearTimeout(p)}}},[i]);let M=()=>{a(!0)},k=()=>{a(!1),c(!1)};return r?e!=="intent"?[s,E,{}]:[s,E,{onFocus:Ue(u,M),onBlur:Ue(l,k),onMouseEnter:Ue(d,M),onMouseLeave:Ue(g,k),onTouchStart:Ue(y,M)}]:[!1,E,{}]}function Ue(e,t){return r=>{e&&e(r),r.defaultPrevented||t(r)}}function Ro({page:e,...t}){let{router:r}=mn(),i=$.useMemo(()=>rn(r.routes,e,r.basename),[r.routes,e,r.basename]);return i?$.createElement(_o,{page:e,matches:i,...t}):null}function To(e){let{manifest:t,routeModules:r}=vn(),[i,a]=$.useState([]);return $.useEffect(()=>{let s=!1;return bo(e,t,r).then(c=>{s||a(c)}),()=>{s=!0}},[e,t,r]),i}function _o({page:e,matches:t,...r}){let i=ke(),{manifest:a,routeModules:s}=vn(),{basename:c}=mn(),{loaderData:u,matches:l}=Po(),d=$.useMemo(()=>Lr(e,t,l,a,i,"data"),[e,t,l,a,i]),g=$.useMemo(()=>Lr(e,t,l,a,i,"assets"),[e,t,l,a,i]),y=$.useMemo(()=>{if(e===i.pathname+i.search+i.hash)return[];let k=new Set,p=!1;if(t.forEach(S=>{let A=a.routes[S.route.id];!A||!A.hasLoader||(!d.some(W=>W.route.id===S.route.id)&&S.route.id in u&&s[S.route.id]?.shouldRevalidate||A.hasClientLoader?p=!0:k.add(S.route.id))}),k.size===0)return[];let R=Co(e,c);return p&&k.size>0&&R.searchParams.set("_routes",t.filter(S=>k.has(S.route.id)).map(S=>S.route.id).join(",")),[R.pathname+R.search]},[c,u,i,a,d,t,e,s]),E=$.useMemo(()=>wo(g,a),[g,a]),M=To(g);return $.createElement($.Fragment,null,y.map(k=>$.createElement("link",{key:k,rel:"prefetch",as:"fetch",href:k,...r})),E.map(k=>$.createElement("link",{key:k,rel:"modulepreload",href:k,...r})),M.map(({key:k,link:p})=>$.createElement("link",{key:k,...p})))}function jo(...e){return t=>{e.forEach(r=>{typeof r=="function"?r(t):r!=null&&(r.current=t)})}}var gn=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u";try{gn&&(window.__reactRouterVersion="7.6.3")}catch{}function Lo({basename:e,children:t,window:r}){let i=$.useRef();i.current==null&&(i.current=ga({window:r,v5Compat:!0}));let a=i.current,[s,c]=$.useState({action:a.action,location:a.location}),u=$.useCallback(l=>{$.startTransition(()=>c(l))},[c]);return $.useLayoutEffect(()=>a.listen(u),[a,u]),$.createElement(ao,{basename:e,children:t,location:s.location,navigationType:s.action,navigator:a})}var yn=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,bn=$.forwardRef(function({onClick:t,discover:r="render",prefetch:i="none",relative:a,reloadDocument:s,replace:c,state:u,target:l,to:d,preventScrollReset:g,viewTransition:y,...E},M){let{basename:k}=$.useContext(we),p=typeof d=="string"&&yn.test(d),R,S=!1;if(typeof d=="string"&&p&&(R=d,gn))try{let b=new URL(window.location.href),h=d.startsWith("//")?new URL(b.protocol+d):new URL(d),C=xe(h.pathname,k);h.origin===b.origin&&C!=null?d=C+h.search+h.hash:S=!0}catch{ve(!1,`<Link to="${d}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`)}let A=Ua(d,{relative:a}),[W,F,m]=Eo(i,E),w=Io(d,{replace:c,state:u,target:l,preventScrollReset:g,relative:a,viewTransition:y});function x(b){t&&t(b),b.defaultPrevented||w(b)}let T=$.createElement("a",{...E,...m,href:R||A,onClick:S||s?t:x,ref:jo(M,F),target:l,"data-discover":!p&&r==="render"?"true":void 0});return W&&!p?$.createElement($.Fragment,null,T,$.createElement(Ro,{page:A})):T});bn.displayName="Link";var Mo=$.forwardRef(function({"aria-current":t="page",caseSensitive:r=!1,className:i="",end:a=!1,style:s,to:c,viewTransition:u,children:l,...d},g){let y=Qe(c,{relative:d.relative}),E=ke(),M=$.useContext(Ot),{navigator:k,basename:p}=$.useContext(we),R=M!=null&&Wo(y)&&u===!0,S=k.encodeLocation?k.encodeLocation(y).pathname:y.pathname,A=E.pathname,W=M&&M.navigation&&M.navigation.location?M.navigation.location.pathname:null;r||(A=A.toLowerCase(),W=W?W.toLowerCase():null,S=S.toLowerCase()),W&&p&&(W=xe(W,p)||W);const F=S!=="/"&&S.endsWith("/")?S.length-1:S.length;let m=A===S||!a&&A.startsWith(S)&&A.charAt(F)==="/",w=W!=null&&(W===S||!a&&W.startsWith(S)&&W.charAt(S.length)==="/"),x={isActive:m,isPending:w,isTransitioning:R},T=m?t:void 0,b;typeof i=="function"?b=i(x):b=[i,m?"active":null,w?"pending":null,R?"transitioning":null].filter(Boolean).join(" ");let h=typeof s=="function"?s(x):s;return $.createElement(bn,{...d,"aria-current":T,className:b,ref:g,style:h,to:c,viewTransition:u},typeof l=="function"?l(x):l)});Mo.displayName="NavLink";var Do=$.forwardRef(({discover:e="render",fetcherKey:t,navigate:r,reloadDocument:i,replace:a,state:s,method:c=ut,action:u,onSubmit:l,relative:d,preventScrollReset:g,viewTransition:y,...E},M)=>{let k=No(),p=Fo(u,{relative:d}),R=c.toLowerCase()==="get"?"get":"post",S=typeof u=="string"&&yn.test(u),A=W=>{if(l&&l(W),W.defaultPrevented)return;W.preventDefault();let F=W.nativeEvent.submitter,m=F?.getAttribute("formmethod")||c;k(F||W.currentTarget,{fetcherKey:t,method:m,navigate:r,replace:a,state:s,relative:d,preventScrollReset:g,viewTransition:y})};return $.createElement("form",{ref:M,method:R,action:p,onSubmit:i?l:A,...E,"data-discover":!S&&e==="render"?"true":void 0})});Do.displayName="Form";function $o(e){return`${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`}function wn(e){let t=$.useContext(De);return ae(t,$o(e)),t}function Io(e,{target:t,replace:r,state:i,preventScrollReset:a,relative:s,viewTransition:c}={}){let u=Xt(),l=ke(),d=Qe(e,{relative:s});return $.useCallback(g=>{if(fo(g,t)){g.preventDefault();let y=r!==void 0?r:Xe(l)===Xe(d);u(e,{replace:y,state:i,preventScrollReset:a,relative:s,viewTransition:c})}},[l,u,d,r,i,t,e,a,s,c])}function Ao(e){ve(typeof URLSearchParams<"u","You cannot use the `useSearchParams` hook in a browser that does not support the URLSearchParams API. If you need to support Internet Explorer 11, we recommend you load a polyfill such as https://github.com/ungap/url-search-params.");let t=$.useRef(Wt(e)),r=$.useRef(!1),i=ke(),a=$.useMemo(()=>ho(i.search,r.current?null:t.current),[i.search]),s=Xt(),c=$.useCallback((u,l)=>{const d=Wt(typeof u=="function"?u(a):u);r.current=!0,s("?"+d,l)},[s,a]);return[a,c]}var Ho=0,zo=()=>`__${String(++Ho)}__`;function No(){let{router:e}=wn("useSubmit"),{basename:t}=$.useContext(we),r=to();return $.useCallback(async(i,a={})=>{let{action:s,method:c,encType:u,formData:l,body:d}=vo(i,t);if(a.navigate===!1){let g=a.fetcherKey||zo();await e.fetch(g,r,a.action||s,{preventScrollReset:a.preventScrollReset,formData:l,body:d,formMethod:a.method||c,formEncType:a.encType||u,flushSync:a.flushSync})}else await e.navigate(a.action||s,{preventScrollReset:a.preventScrollReset,formData:l,body:d,formMethod:a.method||c,formEncType:a.encType||u,replace:a.replace,state:a.state,fromRouteId:r,flushSync:a.flushSync,viewTransition:a.viewTransition})},[e,t,r])}function Fo(e,{relative:t}={}){let{basename:r}=$.useContext(we),i=$.useContext(Oe);ae(i,"useFormAction must be used inside a RouteContext");let[a]=i.matches.slice(-1),s={...Qe(e||".",{relative:t})},c=ke();if(e==null){s.search=c.search;let u=new URLSearchParams(s.search),l=u.getAll("index");if(l.some(g=>g==="")){u.delete("index"),l.filter(y=>y).forEach(y=>u.append("index",y));let g=u.toString();s.search=g?`?${g}`:""}}return(!e||e===".")&&a.route.index&&(s.search=s.search?s.search.replace(/^\?/,"?index&"):"?index"),r!=="/"&&(s.pathname=s.pathname==="/"?r:Se([r,s.pathname])),Xe(s)}function Wo(e,t={}){let r=$.useContext(un);ae(r!=null,"`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?");let{basename:i}=wn("useViewTransitionState"),a=Qe(e,{relative:t.relative});if(!r.isTransitioning)return!1;let s=xe(r.currentLocation.pathname,i)||r.currentLocation.pathname,c=xe(r.nextLocation.pathname,i)||r.nextLocation.pathname;return gt(a.pathname,c)!=null||gt(a.pathname,s)!=null}[...ko];const Sn=U.createContext({history:[],addToHistory:()=>{},popFromHistory:()=>"",replaceHistory:()=>{}}),Vo=()=>{const[e,t]=Ao(),r=U.useMemo(()=>Object.fromEntries(e.entries()),[e]),i=U.useCallback(g=>{const y={};return g.forEach(E=>{y[E]=e.get(E)}),y},[e]),a=U.useCallback(g=>{const y=e.get(g);return y==null||y==null,y},[e]),s=U.useCallback(g=>{const y=new URLSearchParams(e);y.delete(g),t(y)},[e,t]),c=U.useCallback(g=>{const y=new URLSearchParams(e);g.forEach(E=>{y.delete(String(E))}),t(y)},[e,t]),u=U.useCallback(()=>{t({})},[e,t]),l=U.useCallback((g,y)=>{t(E=>{const M=new URLSearchParams(E);return y==null?M.delete(g):M.set(g,String(y)),M})},[t]),d=U.useCallback(g=>{t(y=>{const E=new URLSearchParams(y);return Object.entries(g).forEach(([M,k])=>{k==null?E.delete(M):E.set(M,String(k))}),E})},[t]);return{getAll:()=>r,get:a,getMany:i,set:l,setMany:d,remove:s,removeMany:c,removeAll:u}},Uo=()=>{const e=Xt(),t=ke(),r=Vo(),i=U.useContext(Sn),a=l=>{const d=new URL(l.path,"http://dummy-base");return l.params&&Object.entries(l.params).forEach(([g,y])=>{y!=null&&d.searchParams.set(g,String(y))}),d.pathname+d.search},s=U.useCallback(l=>{const d=a(l);l.addToHistory!==!1?(e(d),i.addToHistory(d)):(e(d,{replace:!0}),i.history.length>0&&(i.popFromHistory(1),i.addToHistory(d)))},[e,i.history]),c=U.useCallback(l=>{let d=l||1;i.history.length<d&&(d=i.history.length),e(-d),i.popFromHistory(d)},[e]),u=U.useCallback(()=>{i.replaceHistory([])},[e]);return{currentPath:t.pathname,history:i.history,searchParams:r,goBack:c,goTo:s,clearHistory:u}},Yo=({isReady:e=!0,routes:t,children:r})=>{const i=U.useRef([]),[a,s]=U.useState([]),c=U.useCallback(y=>{i.current=y,s(y)},[]),u=(y,E=!1)=>{let M=[...i.current];E&&(M=M.slice(0,M.length-1)),M=[...M,y],c(M)},l=y=>{let E="",M=[];return i.current.length===0||i.current.length<y?"/":(M=i.current.slice(0,i.current.length-y),E=M[M.length-1],c(M),E)},d=y=>{c(y)},g=t.map(y=>X.jsx(pn,{path:y.path,element:y.render}));return X.jsx(Sn.Provider,{value:{history:a,addToHistory:u,popFromHistory:l,replaceHistory:d},children:X.jsx(Lo,{children:X.jsxs(X.Fragment,{children:[e&&X.jsx(oo,{children:g}),r]})})})},xn=U.createContext({visibleItems:[],isItemVisible:()=>!1,showItem:()=>{},hideItem:()=>{}}),Bo=({children:e})=>{const t=U.useRef([]),[r,i]=U.useState([]),a=U.useCallback(l=>{t.current=l,i(l)},[]),s=U.useCallback(l=>t.current.some(d=>d===l),[]),c=U.useCallback(l=>{s(l)||a([...t.current,l])},[s,a]),u=U.useCallback(l=>{s(l)&&a(t.current.filter(g=>g!==l))},[s,a]);return X.jsx(xn.Provider,{value:{visibleItems:r,isItemVisible:s,showItem:c,hideItem:u},children:e})},et=()=>{const e=U.useContext(xn),t=a=>e.visibleItems.some(s=>s===a),r=a=>{e.showItem(a)},i=a=>{e.hideItem(a)};return{visibleItems:e.visibleItems,isItemVisible:t,showItem:r,hideItem:i}},qo=({id:e,onCloseDrawer:t,drawerCloseOffset:r=15})=>{const{isItemVisible:i}=et(),[a,s]=U.useState({isDragging:!1}),c=U.useRef(null),u=U.useRef(null),l=U.useRef(null),[d,g]=U.useState(0),y=k=>{s(k)},E=k=>{s(k),g(0)};return en({ref:l,onDrag:k=>{s(k);const p=u.current?.clientHeight||0;k.distanceY&&(g(k.distanceY<0?0:-k.distanceY),k.distanceY>=p-r&&(t?.(),E(k)))},onDragEnd:E,onDragStart:y}),{isVisible:i(e),drawerParentRef:c,drawerRef:u,drawerBottomDistance:d,handleRef:l}},Xo=e=>{const{children:t,backgroundStyles:r,contentStyles:i,handle:a}=e,{isVisible:s,drawerParentRef:c,drawerRef:u,handleRef:l,drawerBottomDistance:d}=qo(e);return X.jsx(X.Fragment,{children:s&&X.jsx("div",{ref:c,style:{width:"100%",height:"100%",minHeight:"100vh",left:0,top:0,background:"#00000068",position:"fixed",zIndex:1e3,display:"flex",flexDirection:"column",touchAction:"none",...r},children:X.jsxs("div",{ref:u,style:{width:"100%",height:"fit-content",minHeight:"80px",maxHeight:"90%",background:"#ffffff",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"24px",zIndex:1001,position:"absolute",bottom:`${d}px`,...i},onClick:g=>{g.stopPropagation()},children:[X.jsx("div",{ref:l,style:{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:"0px",height:"24px",width:"100%",cursor:"pointer",...a?.styles},children:a?.render}),t]})})})},Go=({onPreSubmit:e,onSubmit:t,onChange:r,onMount:i,configurations:a})=>{const s=U.useRef(null),c=U.useRef(!1),u=R=>({name:R.name,value:R.value}),l=()=>{if(!s.current?.elements)return[];const R=Array.from(s.current?.elements).filter(A=>!!A.getAttribute("name")),S=[];for(const A of R)S.push(u(A));return S},d=(R,S,A)=>R==="change"&&S||R==="mount"&&A||R==="submit",g=async(R,S)=>{try{const F=(a||[]).find(m=>m.name===R.name);if(!F)return R;var A=R.value,W=R.value;if(F.emptyValidation&&F.emptyValidation.allow===!1&&!A&&d(S,F.emptyValidation.validateOnChange,F.emptyValidation.validateOnMount))return R.error=F.emptyValidation.errorMessage,R;if(F.minLengthValidation&&A.length<F.minLengthValidation.value&&d(S,F.minLengthValidation.validateOnChange,F.minLengthValidation.validateOnMount))return R.error=F.minLengthValidation.errorMessage,R;if(F.maxLengthValidation&&A.length>F.maxLengthValidation.value&&d(S,F.maxLengthValidation.validateOnChange,F.maxLengthValidation.validateOnMount))return R.error=F.maxLengthValidation.errorMessage,R;if(!isNaN(W)){if(F.minValueValidation&&W<F.minValueValidation.value&&d(S,F.minValueValidation.validateOnChange,F.minValueValidation.validateOnMount))return R.error=F.minValueValidation.errorMessage,R;if(F.maxValueValidation&&W>F.maxValueValidation.value&&d(S,F.maxValueValidation.validateOnChange,F.maxValueValidation.validateOnMount))return R.error=F.maxValueValidation.errorMessage,R}if(F.exactValueValidation&&F.exactValueValidation.value!==R.value&&d(S,F.exactValueValidation.validateOnChange,F.exactValueValidation.validateOnMount))return R.error=F.exactValueValidation.errorMessage,R;for(let m=0;m<(F.validations||[]).length;m++){const w=F.validations?.[m];if(!d(S,w?.validateOnChange,w?.validateOnMount))continue;const x=await F.validations?.[m].validate?.(R.value);if(x)return R.error=x,R}}catch(F){console.error(`Form > Failed To Validate Field ${R.name}: `,F)}return R},y=U.useCallback(async R=>{let S=l();S=await Promise.all(S.map(async W=>await g(W,R)));const A=S.find(W=>W.error!==void 0);return{fields:S,hasErrors:A!==void 0}},[]),E=U.useCallback(async R=>{try{if(c.current)return;c.current=!0,e?.(),R.preventDefault(),R.stopPropagation();const S=await y("submit");c.current=!1,t?.(S.fields,S.hasErrors)}catch(S){c.current=!1,console.error("Form > OnSubmit > Error submitting: ",S)}},[t,e]),M=U.useCallback(async R=>{try{const A=R.target;var S=await y("change");let W=u(A);W=await g(W,"change"),console.log("Form > On Change > ",{result:W,allFieldsValidation:S}),r?.(W,S.fields,S.hasErrors)}catch(A){console.error("Form > onChange > Error changing: ",A)}},[t,e]),k=U.useCallback(async()=>{try{const R=await y("mount");i?.(R.fields,R.hasErrors)}catch(R){console.error("Form > onChange > Error changing: ",R)}},[t,e]),p=R=>{s.current&&s.current.requestSubmit()};return Zr(()=>{k()}),{ref:s,submitForm:p,handleFormSubmission:E,handleFormChange:M}},Ko=Pe.div`
   display: flex;
-  width: 100%;
+  flex: 1,
   align-items: center;
   justify-content: center;
   background: none;
@@ -138,7 +138,7 @@ Please change the parent <Route path="${S}"> to <Route path="${S==="/"?"*":`${S}
   > * {
     pointer-events: none;
   }
-`,Jo=e=>{const{children:t,styles:r,childrenStyles:i,submitButton:a}=e,{ref:s,handleFormSubmission:c,submitForm:u,handleFormChange:l}=Go(e);return X.jsxs("form",{ref:s,onSubmit:c,onChange:l,style:{width:"100%",display:"flex",flexDirection:"column",gap:"8px",flex:1,...r},children:[X.jsx("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:"8px",flex:1,...i},children:t}),X.jsx(Ko,{onClick:u,styles:{...a.styles},children:a.content})]})},Zo=({src:e,alt:t="",onClick:r,styles:i})=>X.jsx("img",{src:e,alt:t,style:{overflow:"hidden",position:"relative",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",objectFit:"cover",...i},onClick:()=>{r?.()}}),Qo=e=>({handleOnBlur:s=>{e.onBlur?.()},handleOnFocus:s=>{e.onFocus?.()},onValueChanged:s=>{e.onChange?.(s.currentTarget.value)},handleOnClick:()=>{e.onClick?.()}}),es=Pe.div`
+`,Jo=e=>{const{children:t,styles:r,childrenStyles:i,submitSection:a}=e,{ref:s,handleFormSubmission:c,submitForm:u,handleFormChange:l}=Go(e);return X.jsxs("form",{ref:s,onSubmit:c,onChange:l,style:{width:"100%",display:"flex",flexDirection:"column",gap:"8px",flex:1,...r},children:[X.jsx("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:"8px",flex:1,...i},children:t}),X.jsxs("div",{style:{width:"100%",flexDirection:"row",gap:"10px",display:"flex",flexWrap:"wrap",alignItems:"center",justifyContent:"center",...a.styles},children:[a.renderBeforeSubmitButton,X.jsx(Ko,{onClick:u,styles:{...a.submitButton.styles},children:a.submitButton.content}),a.renderAfterSubmitButton]})]})},Zo=({src:e,alt:t="",onClick:r,styles:i})=>X.jsx("img",{src:e,alt:t,style:{overflow:"hidden",position:"relative",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",objectFit:"cover",...i},onClick:()=>{r?.()}}),Qo=e=>({handleOnBlur:s=>{e.onBlur?.()},handleOnFocus:s=>{e.onFocus?.()},onValueChanged:s=>{e.onChange?.(s.currentTarget.value)},handleOnClick:()=>{e.onClick?.()}}),es=Pe.div`
   display: flex;
   flex-direction: column;
   font-family: inherit;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import * as $ from "react";
-import q, { forwardRef as Cn, useContext as Ut, useEffect as Ir, useState as Ar, useMemo as Hr, useCallback as me, useRef as Pn } from "react";
+import B, { forwardRef as Cn, useContext as Ut, useEffect as Ir, useState as Ar, useMemo as Hr, useCallback as me, useRef as Pn } from "react";
 var rt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function Yt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -212,24 +212,24 @@ function _n() {
       }), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
     }
     function g(n, f, O, I, D, N, V, U) {
-      var B = f.children;
-      if (B !== void 0)
+      var q = f.children;
+      if (q !== void 0)
         if (I)
-          if (T(B)) {
-            for (I = 0; I < B.length; I++)
-              y(B[I]);
-            Object.freeze && Object.freeze(B);
+          if (T(q)) {
+            for (I = 0; I < q.length; I++)
+              y(q[I]);
+            Object.freeze && Object.freeze(q);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else y(B);
+        else y(q);
       if (H.call(f, "key")) {
-        B = e(n);
+        q = e(n);
         var K = Object.keys(f).filter(function(J) {
           return J !== "key";
         });
-        I = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", v[B + I] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
+        I = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", v[q + I] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -237,22 +237,22 @@ React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
           I,
-          B,
+          q,
           K,
-          B
-        ), v[B + I] = !0);
+          q
+        ), v[q + I] = !0);
       }
-      if (B = null, O !== void 0 && (r(O), B = "" + O), c(f) && (r(f.key), B = "" + f.key), "key" in f) {
+      if (q = null, O !== void 0 && (r(O), q = "" + O), c(f) && (r(f.key), q = "" + f.key), "key" in f) {
         O = {};
         for (var G in f)
           G !== "key" && (O[G] = f[G]);
       } else O = f;
-      return B && u(
+      return q && u(
         O,
         typeof n == "function" ? n.displayName || n.name || "Unknown" : n
       ), d(
         n,
-        B,
+        q,
         N,
         D,
         a(),
@@ -264,7 +264,7 @@ React keys must be passed directly to JSX without using spread:
     function y(n) {
       typeof n == "object" && n !== null && n.$$typeof === M && n._store && (n._store.validated = 1);
     }
-    var E = q, M = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), R = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), A = Symbol.for("react.consumer"), W = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), x = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), b = Symbol.for("react.activity"), h = Symbol.for("react.client.reference"), C = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, H = Object.prototype.hasOwnProperty, T = Array.isArray, j = console.createTask ? console.createTask : function() {
+    var E = B, M = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), R = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), A = Symbol.for("react.consumer"), W = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), x = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), b = Symbol.for("react.activity"), h = Symbol.for("react.client.reference"), C = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, H = Object.prototype.hasOwnProperty, T = Array.isArray, j = console.createTask ? console.createTask : function() {
       return null;
     };
     E = {
@@ -383,19 +383,19 @@ function Ln() {
       throw new TypeError(e);
     w = F(w) || 0, S(x) && (P = !!x.leading, L = "maxWait" in x, h = L ? M(F(x.maxWait) || 0, w) : h, o = "trailing" in x ? !!x.trailing : o);
     function z(U) {
-      var B = _, K = b;
-      return _ = b = void 0, j = U, C = m.apply(K, B), C;
+      var q = _, K = b;
+      return _ = b = void 0, j = U, C = m.apply(K, q), C;
     }
     function v(U) {
       return j = U, H = setTimeout(O, w), P ? z(U) : C;
     }
     function n(U) {
-      var B = U - T, K = U - j, G = w - B;
+      var q = U - T, K = U - j, G = w - q;
       return L ? k(G, h - K) : G;
     }
     function f(U) {
-      var B = U - T, K = U - j;
-      return T === void 0 || B >= w || B < 0 || L && K >= h;
+      var q = U - T, K = U - j;
+      return T === void 0 || q >= w || q < 0 || L && K >= h;
     }
     function O() {
       var U = p();
@@ -413,8 +413,8 @@ function Ln() {
       return H === void 0 ? C : I(p());
     }
     function V() {
-      var U = p(), B = f(U);
-      if (_ = arguments, b = this, T = U, B) {
+      var U = p(), q = f(U);
+      if (_ = arguments, b = this, T = U, q) {
         if (H === void 0)
           return v(T);
         if (L)
@@ -496,7 +496,7 @@ function zr() {
     Object.defineProperty(e, "__esModule", {
       value: !0
     }), e.default = void 0;
-    var t = r(q);
+    var t = r(B);
     function r(a) {
       return a && a.__esModule ? a : { default: a };
     }
@@ -572,7 +572,7 @@ function Ke() {
   ur = 1, Object.defineProperty(Y, "__esModule", {
     value: !0
   }), Y.checkSpecKeys = Y.checkNavigable = Y.changeSlide = Y.canUseDOM = Y.canGoNext = void 0, Y.clamp = d, Y.extractObject = void 0, Y.filterSettings = z, Y.validSettings = Y.swipeStart = Y.swipeMove = Y.swipeEnd = Y.slidesOnRight = Y.slidesOnLeft = Y.slideHandler = Y.siblingDirection = Y.safePreventDefault = Y.lazyStartIndex = Y.lazySlidesOnRight = Y.lazySlidesOnLeft = Y.lazyEndIndex = Y.keyHandler = Y.initializedState = Y.getWidth = Y.getTrackLeft = Y.getTrackCSS = Y.getTrackAnimateCSS = Y.getTotalSlides = Y.getSwipeDirection = Y.getSlideCount = Y.getRequiredLazySlides = Y.getPreClones = Y.getPostClones = Y.getOnDemandLazySlides = Y.getNavigableIndexes = Y.getHeight = void 0;
-  var e = r(q), t = r(zr());
+  var e = r(B), t = r(zr());
   function r(v) {
     return v && v.__esModule ? v : { default: v };
   }
@@ -670,7 +670,7 @@ function Ke() {
       var U = n.centerMode && parseInt(n.centerPadding) * 2;
       typeof n.centerPadding == "string" && n.centerPadding.slice(-1) === "%" && (U *= I / 100), V = Math.ceil((I - U) / n.slidesToShow);
     }
-    var B = O && S(O.querySelector('[data-index="0"]')), K = B * n.slidesToShow, G = n.currentSlide === void 0 ? n.initialSlide : n.currentSlide;
+    var q = O && S(O.querySelector('[data-index="0"]')), K = q * n.slidesToShow, G = n.currentSlide === void 0 ? n.initialSlide : n.currentSlide;
     n.rtl && n.currentSlide === void 0 && (G = f - 1 - n.initialSlide);
     var J = n.lazyLoadedList || [], te = y(s(s({}, n), {}, {
       currentSlide: G,
@@ -683,13 +683,13 @@ function Ke() {
       listWidth: I,
       trackWidth: N,
       currentSlide: G,
-      slideHeight: B,
+      slideHeight: q,
       listHeight: K,
       lazyLoadedList: J
     };
     return n.autoplaying === null && n.autoplay && (Z.autoplaying = "playing"), Z;
   }, Y.slideHandler = function(n) {
-    var f = n.waitForAnimate, O = n.animating, I = n.fade, D = n.infinite, N = n.index, V = n.slideCount, U = n.lazyLoad, B = n.currentSlide, K = n.centerMode, G = n.slidesToScroll, J = n.slidesToShow, te = n.useCSS, Z = n.lazyLoadedList;
+    var f = n.waitForAnimate, O = n.animating, I = n.fade, D = n.infinite, N = n.index, V = n.slideCount, U = n.lazyLoad, q = n.currentSlide, K = n.centerMode, G = n.slidesToScroll, J = n.slidesToShow, te = n.useCSS, Z = n.lazyLoadedList;
     if (f && O) return {};
     var ee = N, ie, le, Q, oe = {}, ue = {}, ce = D ? N : d(N, 0, V - 1);
     if (I) {
@@ -704,7 +704,7 @@ function Ke() {
         targetSlide: ee
       };
     } else
-      ie = ee, ee < 0 ? (ie = ee + V, D ? V % G !== 0 && (ie = V - V % G) : ie = 0) : !W(n) && ee > B ? ee = ie = B : K && ee >= V ? (ee = D ? V : V - 1, ie = D ? 0 : V - 1) : ee >= V && (ie = ee - V, D ? V % G !== 0 && (ie = 0) : ie = V - J), !D && ee + J >= V && (ie = V - J), le = h(s(s({}, n), {}, {
+      ie = ee, ee < 0 ? (ie = ee + V, D ? V % G !== 0 && (ie = V - V % G) : ie = 0) : !W(n) && ee > q ? ee = ie = q : K && ee >= V ? (ee = D ? V : V - 1, ie = D ? 0 : V - 1) : ee >= V && (ie = ee - V, D ? V % G !== 0 && (ie = 0) : ie = V - J), !D && ee + J >= V && (ie = V - J), le = h(s(s({}, n), {}, {
         slideIndex: ee
       })), Q = h(s(s({}, n), {}, {
         slideIndex: ie
@@ -739,9 +739,9 @@ function Ke() {
       nextState: ue
     };
   }, Y.changeSlide = function(n, f) {
-    var O, I, D, N, V, U = n.slidesToScroll, B = n.slidesToShow, K = n.slideCount, G = n.currentSlide, J = n.targetSlide, te = n.lazyLoad, Z = n.infinite;
+    var O, I, D, N, V, U = n.slidesToScroll, q = n.slidesToShow, K = n.slideCount, G = n.currentSlide, J = n.targetSlide, te = n.lazyLoad, Z = n.infinite;
     if (N = K % U !== 0, O = N ? 0 : (K - G) % U, f.message === "previous")
-      D = O === 0 ? U : B - O, V = G - D, te && !Z && (I = G - D, V = I === -1 ? K - 1 : I), Z || (V = J - U);
+      D = O === 0 ? U : q - O, V = G - D, te && !Z && (I = G - D, V = I === -1 ? K - 1 : I), Z || (V = J - U);
     else if (f.message === "next")
       D = O === 0 ? U : O, V = G + D, te && !Z && (V = (G + U) % K + O), Z || (V = J + U);
     else if (f.message === "dots")
@@ -768,7 +768,7 @@ function Ke() {
       }
     };
   }, Y.swipeMove = function(n, f) {
-    var O = f.scrolling, I = f.animating, D = f.vertical, N = f.swipeToSlide, V = f.verticalSwiping, U = f.rtl, B = f.currentSlide, K = f.edgeFriction, G = f.edgeDragged, J = f.onEdge, te = f.swiped, Z = f.swiping, ee = f.slideCount, ie = f.slidesToScroll, le = f.infinite, Q = f.touchObject, oe = f.swipeEvent, ue = f.listHeight, ce = f.listWidth;
+    var O = f.scrolling, I = f.animating, D = f.vertical, N = f.swipeToSlide, V = f.verticalSwiping, U = f.rtl, q = f.currentSlide, K = f.edgeFriction, G = f.edgeDragged, J = f.onEdge, te = f.swiped, Z = f.swiping, ee = f.slideCount, ie = f.slidesToScroll, le = f.infinite, Q = f.touchObject, oe = f.swipeEvent, ue = f.listHeight, ce = f.listWidth;
     if (!O) {
       if (I) return g(n);
       D && N && V && g(n);
@@ -783,7 +783,7 @@ function Ke() {
       var Ie = (U ? -1 : 1) * (Q.curX > Q.startX ? 1 : -1);
       V && (Ie = Q.curY > Q.startY ? 1 : -1);
       var kn = Math.ceil(ee / ie), Pe = A(f.touchObject, V), Ae = Q.swipeLength;
-      return le || (B === 0 && (Pe === "right" || Pe === "down") || B + 1 >= kn && (Pe === "left" || Pe === "up") || !W(f) && (Pe === "left" || Pe === "up")) && (Ae = Q.swipeLength * K, G === !1 && J && (J(Pe), Re.edgeDragged = !0)), !te && oe && (oe(Pe), Re.swiped = !0), D ? pe = tt + Ae * (ue / ce) * Ie : U ? pe = tt - Ae * Ie : pe = tt + Ae * Ie, V && (pe = tt + Ae * Ie), Re = s(s({}, Re), {}, {
+      return le || (q === 0 && (Pe === "right" || Pe === "down") || q + 1 >= kn && (Pe === "left" || Pe === "up") || !W(f) && (Pe === "left" || Pe === "up")) && (Ae = Q.swipeLength * K, G === !1 && J && (J(Pe), Re.edgeDragged = !0)), !te && oe && (oe(Pe), Re.swiped = !0), D ? pe = tt + Ae * (ue / ce) * Ie : U ? pe = tt - Ae * Ie : pe = tt + Ae * Ie, V && (pe = tt + Ae * Ie), Re = s(s({}, Re), {}, {
         touchObject: Q,
         swipeLeft: pe,
         trackStyle: _(s(s({}, f), {}, {
@@ -792,10 +792,10 @@ function Ke() {
       }), Math.abs(Q.curX - Q.startX) < Math.abs(Q.curY - Q.startY) * 0.8 || Q.swipeLength > 10 && (Re.swiping = !0, g(n)), Re;
     }
   }, Y.swipeEnd = function(n, f) {
-    var O = f.dragging, I = f.swipe, D = f.touchObject, N = f.listWidth, V = f.touchThreshold, U = f.verticalSwiping, B = f.listHeight, K = f.swipeToSlide, G = f.scrolling, J = f.onSwipe, te = f.targetSlide, Z = f.currentSlide, ee = f.infinite;
+    var O = f.dragging, I = f.swipe, D = f.touchObject, N = f.listWidth, V = f.touchThreshold, U = f.verticalSwiping, q = f.listHeight, K = f.swipeToSlide, G = f.scrolling, J = f.onSwipe, te = f.targetSlide, Z = f.currentSlide, ee = f.infinite;
     if (!O)
       return I && g(n), {};
-    var ie = U ? B / V : N / V, le = A(D, U), Q = {
+    var ie = U ? q / V : N / V, le = A(D, U), Q = {
       dragging: !1,
       edgeDragged: !1,
       scrolling: !1,
@@ -902,11 +902,11 @@ function Ke() {
     if (n.unslick)
       return 0;
     x(n, ["slideIndex", "trackRef", "infinite", "centerMode", "slideCount", "slidesToShow", "slidesToScroll", "slideWidth", "listWidth", "variableWidth", "slideHeight"]);
-    var f = n.slideIndex, O = n.trackRef, I = n.infinite, D = n.centerMode, N = n.slideCount, V = n.slidesToShow, U = n.slidesToScroll, B = n.slideWidth, K = n.listWidth, G = n.variableWidth, J = n.slideHeight, te = n.fade, Z = n.vertical, ee = 0, ie, le, Q = 0;
+    var f = n.slideIndex, O = n.trackRef, I = n.infinite, D = n.centerMode, N = n.slideCount, V = n.slidesToShow, U = n.slidesToScroll, q = n.slideWidth, K = n.listWidth, G = n.variableWidth, J = n.slideHeight, te = n.fade, Z = n.vertical, ee = 0, ie, le, Q = 0;
     if (te || n.slideCount === 1)
       return 0;
     var oe = 0;
-    if (I ? (oe = -C(n), N % U !== 0 && f + U > N && (oe = -(f > N ? V - (f - N) : N % U)), D && (oe += parseInt(V / 2))) : (N % U !== 0 && f + U > N && (oe = V - N % U), D && (oe = parseInt(V / 2))), ee = oe * B, Q = oe * J, Z ? ie = f * J * -1 + Q : ie = f * B * -1 + ee, G === !0) {
+    if (I ? (oe = -C(n), N % U !== 0 && f + U > N && (oe = -(f > N ? V - (f - N) : N % U)), D && (oe += parseInt(V / 2))) : (N % U !== 0 && f + U > N && (oe = V - N % U), D && (oe = parseInt(V / 2))), ee = oe * q, Q = oe * J, Z ? ie = f * J * -1 + Q : ie = f * q * -1 + ee, G === !0) {
       var ue, ce = O && O.node;
       if (ue = f + C(n), le = ce && ce.childNodes[ue], ie = le ? le.offsetLeft * -1 : 0, D === !0) {
         ue = I ? f + C(n) : f, le = ce && ce.children[ue], ie = 0;
@@ -956,7 +956,7 @@ function Mn() {
   cr = 1, Object.defineProperty(Fe, "__esModule", {
     value: !0
   }), Fe.Track = void 0;
-  var e = i(q), t = i(yt()), r = Ke();
+  var e = i(B), t = i(yt()), r = Ke();
   function i(b) {
     return b && b.__esModule ? b : { default: b };
   }
@@ -1192,7 +1192,7 @@ function Dn() {
   Object.defineProperty(We, "__esModule", {
     value: !0
   }), We.Dots = void 0;
-  var t = a(q), r = a(yt()), i = Ke();
+  var t = a(B), r = a(yt()), i = Ke();
   function a(m) {
     return m && m.__esModule ? m : { default: m };
   }
@@ -1325,12 +1325,12 @@ function Dn() {
             index: f,
             slidesToScroll: j,
             currentSlide: o
-          }, B = this.clickHandler.bind(this, U);
+          }, q = this.clickHandler.bind(this, U);
           n = n.concat(/* @__PURE__ */ t.default.createElement("li", {
             key: f,
             className: V
           }, /* @__PURE__ */ t.default.cloneElement(this.props.customPaging(f), {
-            onClick: B
+            onClick: q
           })));
         }
         return /* @__PURE__ */ t.default.cloneElement(this.props.appendDots(n), c({
@@ -1355,7 +1355,7 @@ function $n() {
   Object.defineProperty(_e, "__esModule", {
     value: !0
   }), _e.PrevArrow = _e.NextArrow = void 0;
-  var t = a(q), r = a(yt()), i = Ke();
+  var t = a(B), r = a(yt()), i = Ke();
   function a(m) {
     return m && m.__esModule ? m : { default: m };
   }
@@ -1699,24 +1699,24 @@ function Yn(e) {
   if (!t && !r)
     return Wr;
   var i = je(e).getComputedStyle(e), a = Vn(i), s = a.left + a.right, c = a.top + a.bottom, u = mt(i.width), l = mt(i.height);
-  if (i.boxSizing === "border-box" && (Math.round(u + s) !== t && (u -= hr(i, "left", "right") + s), Math.round(l + c) !== r && (l -= hr(i, "top", "bottom") + c)), !Bn(e)) {
+  if (i.boxSizing === "border-box" && (Math.round(u + s) !== t && (u -= hr(i, "left", "right") + s), Math.round(l + c) !== r && (l -= hr(i, "top", "bottom") + c)), !qn(e)) {
     var d = Math.round(u + s) - t, g = Math.round(l + c) - r;
     Math.abs(d) !== 1 && (u -= d), Math.abs(g) !== 1 && (l -= g);
   }
   return bt(a.left, a.top, u, l);
 }
-var qn = /* @__PURE__ */ function() {
+var Bn = /* @__PURE__ */ function() {
   return typeof SVGGraphicsElement < "u" ? function(e) {
     return e instanceof je(e).SVGGraphicsElement;
   } : function(e) {
     return e instanceof je(e).SVGElement && typeof e.getBBox == "function";
   };
 }();
-function Bn(e) {
+function qn(e) {
   return e === je(e).document.documentElement;
 }
 function Xn(e) {
-  return At ? qn(e) ? Un(e) : Yn(e) : Wr;
+  return At ? Bn(e) ? Un(e) : Yn(e) : Wr;
 }
 function Gn(e) {
   var t = e.x, r = e.y, i = e.width, a = e.height, s = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, c = Object.create(s.prototype);
@@ -1840,7 +1840,7 @@ function ri() {
   pr = 1, Object.defineProperty(Ne, "__esModule", {
     value: !0
   }), Ne.InnerSlider = void 0;
-  var e = d(q), t = d(jn()), r = d(Ln()), i = d(yt()), a = Ke(), s = Mn(), c = Dn(), u = $n(), l = d(ti);
+  var e = d(B), t = d(jn()), r = d(Ln()), i = d(yt()), a = Ke(), s = Mn(), c = Dn(), u = $n(), l = d(ti);
   function d(T) {
     return T && T.__esModule ? T : { default: T };
   }
@@ -2086,8 +2086,8 @@ function ri() {
             left: -n + "px"
           };
           if (o.props.centerMode) {
-            var B = "".concat(f[o.state.currentSlide], "px");
-            U.left = "calc(".concat(U.left, " + (100% - ").concat(B, ") / 2 ) ");
+            var q = "".concat(f[o.state.currentSlide], "px");
+            U.left = "calc(".concat(U.left, " + (100% - ").concat(q, ") / 2 ) ");
           }
           return {
             trackStyle: U
@@ -2144,12 +2144,12 @@ function ri() {
           };
         }), o.props.onLazyLoad && o.props.onLazyLoad(v)) : o.lazyLoadTimer && (clearInterval(o.lazyLoadTimer), delete o.lazyLoadTimer);
       }), h(x(o), "slideHandler", function(v) {
-        var n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, f = o.props, O = f.asNavFor, I = f.beforeChange, D = f.onLazyLoad, N = f.speed, V = f.afterChange, U = o.state.currentSlide, B = (0, a.slideHandler)(p(p(p({
+        var n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, f = o.props, O = f.asNavFor, I = f.beforeChange, D = f.onLazyLoad, N = f.speed, V = f.afterChange, U = o.state.currentSlide, q = (0, a.slideHandler)(p(p(p({
           index: v
         }, o.props), o.state), {}, {
           trackRef: o.track,
           useCSS: o.props.useCSS && !n
-        })), K = B.state, G = B.nextState;
+        })), K = q.state, G = q.nextState;
         if (K) {
           I && I(U, K.currentSlide);
           var J = K.lazyLoadedList.filter(function(te) {
@@ -2301,8 +2301,8 @@ function ri() {
             onMouseLeave: N ? o.onDotsLeave : null
           }), I = /* @__PURE__ */ e.default.createElement(c.Dots, D);
         }
-        var V, U, B = (0, a.extractObject)(n, ["infinite", "centerMode", "currentSlide", "slideCount", "slidesToShow", "prevArrow", "nextArrow"]);
-        B.clickHandler = o.changeSlide, o.props.arrows && (V = /* @__PURE__ */ e.default.createElement(u.PrevArrow, B), U = /* @__PURE__ */ e.default.createElement(u.NextArrow, B));
+        var V, U, q = (0, a.extractObject)(n, ["infinite", "centerMode", "currentSlide", "slideCount", "slidesToShow", "prevArrow", "nextArrow"]);
+        q.clickHandler = o.changeSlide, o.props.arrows && (V = /* @__PURE__ */ e.default.createElement(u.PrevArrow, q), U = /* @__PURE__ */ e.default.createElement(u.NextArrow, q));
         var K = null;
         o.props.vertical && (K = {
           height: o.state.listHeight
@@ -2406,7 +2406,7 @@ function ai() {
     Object.defineProperty(e, "__esModule", {
       value: !0
     }), e.default = void 0;
-    var t = c(q), r = ri(), i = c(ii()), a = c(zr()), s = Ke();
+    var t = c(B), r = ri(), i = c(ii()), a = c(zr()), s = Ke();
     function c(_) {
       return _ && _.__esModule ? _ : { default: _ };
     }
@@ -2713,11 +2713,11 @@ var fi = /* @__PURE__ */ function() {
       return (a = i.parentNode) == null ? void 0 : a.removeChild(i);
     }), this.tags = [], this.ctr = 0;
   }, e;
-}(), de = "-ms-", vt = "-moz-", re = "-webkit-", Yr = "comm", qt = "rule", Bt = "decl", di = "@import", qr = "@keyframes", hi = "@layer", pi = Math.abs, wt = String.fromCharCode, mi = Object.assign;
+}(), de = "-ms-", vt = "-moz-", re = "-webkit-", Yr = "comm", Bt = "rule", qt = "decl", di = "@import", Br = "@keyframes", hi = "@layer", pi = Math.abs, wt = String.fromCharCode, mi = Object.assign;
 function vi(e, t) {
   return fe(e, 0) ^ 45 ? (((t << 2 ^ fe(e, 0)) << 2 ^ fe(e, 1)) << 2 ^ fe(e, 2)) << 2 ^ fe(e, 3) : 0;
 }
-function Br(e) {
+function qr(e) {
   return e.trim();
 }
 function gi(e, t) {
@@ -2732,7 +2732,7 @@ function zt(e, t) {
 function fe(e, t) {
   return e.charCodeAt(t) | 0;
 }
-function qe(e, t, r) {
+function Be(e, t, r) {
   return e.slice(t, r);
 }
 function ye(e) {
@@ -2770,9 +2770,9 @@ function ot() {
   return he;
 }
 function Je(e, t) {
-  return qe(Me, e, t);
+  return Be(Me, e, t);
 }
-function Be(e) {
+function qe(e) {
   switch (e) {
     // \0 \t \n \r \s whitespace token
     case 0:
@@ -2817,12 +2817,12 @@ function Kr(e) {
   return Me = "", e;
 }
 function st(e) {
-  return Br(Je(he - 1, Nt(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+  return qr(Je(he - 1, Nt(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
 }
 function Si(e) {
   for (; (se = we()) && se < 33; )
     ve();
-  return Be(e) > 2 || Be(se) > 3 ? "" : " ";
+  return qe(e) > 2 || qe(se) > 3 ? "" : " ";
 }
 function xi(e, t) {
   for (; --t && ve() && !(se < 48 || se > 102 || se > 57 && se < 65 || se > 70 && se < 97); )
@@ -2858,7 +2858,7 @@ function Oi(e, t) {
   return "/*" + Je(t, he - 1) + "*" + wt(e === 47 ? e : ve());
 }
 function ki(e) {
-  for (; !Be(we()); )
+  for (; !qe(we()); )
     ve();
   return Je(e, he);
 }
@@ -2973,15 +2973,15 @@ function lt(e, t, r, i, a, s, c, u, l) {
 }
 function br(e, t, r, i, a, s, c, u, l, d, g) {
   for (var y = a - 1, E = a === 0 ? s : [""], M = Xt(E), k = 0, p = 0, R = 0; k < i; ++k)
-    for (var S = 0, A = qe(e, y + 1, y = pi(p = c[k])), W = e; S < M; ++S)
-      (W = Br(p > 0 ? E[S] + " " + A : ne(A, /&\f/g, E[S]))) && (l[R++] = W);
-  return xt(e, t, r, a === 0 ? qt : u, l, d, g);
+    for (var S = 0, A = Be(e, y + 1, y = pi(p = c[k])), W = e; S < M; ++S)
+      (W = qr(p > 0 ? E[S] + " " + A : ne(A, /&\f/g, E[S]))) && (l[R++] = W);
+  return xt(e, t, r, a === 0 ? Bt : u, l, d, g);
 }
 function Pi(e, t, r) {
-  return xt(e, t, r, Yr, wt(bi()), qe(e, 2, -2), 0);
+  return xt(e, t, r, Yr, wt(bi()), Be(e, 2, -2), 0);
 }
 function wr(e, t, r, i) {
-  return xt(e, t, r, Bt, qe(e, 0, i), qe(e, i + 1, -1), i);
+  return xt(e, t, r, qt, Be(e, 0, i), Be(e, i + 1, -1), i);
 }
 function Te(e, t) {
   for (var r = "", i = Xt(e), a = 0; a < i; a++)
@@ -2993,13 +2993,13 @@ function Ei(e, t, r, i) {
     case hi:
       if (e.children.length) break;
     case di:
-    case Bt:
+    case qt:
       return e.return = e.return || e.value;
     case Yr:
       return "";
-    case qr:
+    case Br:
       return e.return = e.value + "{" + Te(e.children, i) + "}";
-    case qt:
+    case Bt:
       e.value = e.props.join(",");
   }
   return ye(r = Te(e.children, i)) ? e.return = e.value + "{" + r + "}" : "";
@@ -3024,13 +3024,13 @@ function Jr(e) {
   };
 }
 var Ti = function(t, r, i) {
-  for (var a = 0, s = 0; a = s, s = we(), a === 38 && s === 12 && (r[i] = 1), !Be(s); )
+  for (var a = 0, s = 0; a = s, s = we(), a === 38 && s === 12 && (r[i] = 1), !qe(s); )
     ve();
   return Je(t, he);
 }, ji = function(t, r) {
   var i = -1, a = 44;
   do
-    switch (Be(a)) {
+    switch (qe(a)) {
       case 0:
         a === 38 && we() === 12 && (r[i] = 1), t[i] += Ti(he - 1, r, i);
         break;
@@ -3215,14 +3215,14 @@ function Zr(e, t) {
 }
 var $i = function(t, r, i, a) {
   if (t.length > -1 && !t.return) switch (t.type) {
-    case Bt:
+    case qt:
       t.return = Zr(t.value, t.length);
       break;
-    case qr:
+    case Br:
       return Te([Ve(t, {
         value: ne(t.value, "@", "@" + re)
       })], a);
-    case qt:
+    case Bt:
       if (t.length) return yi(t.props, function(s) {
         switch (gi(s, /(::plac\w+|:read-\w+)/)) {
           // :read-(only|write)
@@ -3485,7 +3485,7 @@ function Yi(e, t, r) {
   return i;
 }
 var kr = /label:\s*([^\s;{]+)\s*(;|$)/g, be;
-function qi(e, t, r) {
+function Bi(e, t, r) {
   if (e.length === 1 && typeof e[0] == "object" && e[0] !== null && e[0].styles !== void 0)
     return e[0];
   var i = !0, a = "";
@@ -3512,9 +3512,9 @@ function qi(e, t, r) {
     next: be
   };
 }
-var Bi = function(t) {
+var qi = function(t) {
   return t();
-}, Xi = $.useInsertionEffect ? $.useInsertionEffect : !1, Gi = Xi || Bi, tn = /* @__PURE__ */ $.createContext(
+}, Xi = $.useInsertionEffect ? $.useInsertionEffect : !1, Gi = Xi || qi, tn = /* @__PURE__ */ $.createContext(
   // we're doing this to avoid preconstruct's dead code elimination in this one case
   // because this module is primarily intended for the browser and node
   // but it's also required in react native and similar environments sometimes
@@ -3580,7 +3580,7 @@ var Ki = function(t) {
         w.theme = $.useContext(Ji);
       }
       typeof R.className == "string" ? F = zi(S.registered, m, R.className) : R.className != null && (F = R.className + " ");
-      var _ = qi(y.concat(m), S.registered, w);
+      var _ = Bi(y.concat(m), S.registered, w);
       F += S.key + "-" + _.name, c !== void 0 && (F += " " + c);
       var b = d && u === void 0 ? Cr(W) : l, h = {};
       for (var C in R)
@@ -3837,7 +3837,7 @@ const aa = Ee.div`
   settings: r,
   gap: i = 15
 }) => {
-  const [a, s] = q.useState(1), c = q.useRef(null), u = q.useRef(null);
+  const [a, s] = B.useState(1), c = B.useRef(null), u = B.useRef(null);
   var l = {
     dots: !1,
     speed: 500,
@@ -3874,7 +3874,7 @@ const aa = Ee.div`
       res: M
     }), s(M);
   };
-  return q.useEffect(() => {
+  return B.useEffect(() => {
     g();
   }, [c, u]), /* @__PURE__ */ X.jsx(aa, { ref: c, styles: { ...e }, children: d.length > 0 && /* @__PURE__ */ X.jsx(li, { ...l, slidesToShow: a, children: d }) });
 }, ls = ({
@@ -3958,10 +3958,10 @@ const aa = Ee.div`
     ]
   }
 ), sa = (e) => Ir(e, []), la = () => {
-  const [e, t] = q.useState(
+  const [e, t] = B.useState(
     {}
-  ), [r, i] = q.useState(!1);
-  return q.useEffect(() => {
+  ), [r, i] = B.useState(!1);
+  return B.useEffect(() => {
     const a = (u) => {
       t({ x: u.clientX, y: u.clientY });
     }, s = (u) => {
@@ -3982,9 +3982,9 @@ const aa = Ee.div`
   onDragStart: r,
   onDragEnd: i
 }) => {
-  const a = q.useRef(!1), s = q.useRef(!1), { pointerPosition: c, isPointerDown: u } = la(), l = q.useRef({
+  const a = B.useRef(!1), s = B.useRef(!1), { pointerPosition: c, isPointerDown: u } = la(), l = B.useRef({
     isDragging: !1
-  }), d = q.useCallback(
+  }), d = B.useCallback(
     (k) => {
       if (!e || !e.current || !l.current)
         return;
@@ -3992,21 +3992,21 @@ const aa = Ee.div`
       return p.posY = k.y, p.posX = k.x, l.current.startPosX && l.current.posX && (p.distanceX = l.current.startPosX - l.current.posX), l.current.startPosY && l.current.posY && (p.distanceY = -(l.current.startPosY - l.current.posY)), p;
     },
     []
-  ), g = q.useCallback(
+  ), g = B.useCallback(
     (k) => {
       k.preventDefault(), k.stopPropagation(), l.current.isDragging = !0, l.current.startPosY = k.clientY, l.current.startPosX = k.clientX;
       const p = d({ x: k.clientX, y: k.clientY });
       p && (l.current = p, r?.(p));
     },
     [d]
-  ), y = q.useCallback(
+  ), y = B.useCallback(
     (k) => {
       l.current.isDragging = !1;
       const p = d(c);
       p && (i?.(p), p.startPosX = void 0, p.startPosY = void 0, l.current = p);
     },
     [d, c]
-  ), E = q.useCallback(
+  ), E = B.useCallback(
     (k) => {
       if (console.debug(
         "useDrag > onPointerMove > Is Dragging >",
@@ -4017,18 +4017,18 @@ const aa = Ee.div`
       console.debug("useDrag > onPointerMove > Drag Result >", p), p && (t?.(p), l.current = p);
     },
     [d, c]
-  ), M = q.useCallback(async () => {
+  ), M = B.useCallback(async () => {
     if (!a.current) {
       for (; !e?.current; )
         await new Promise((k) => setTimeout(k, 300));
       a.current = !0, e.current.onpointerdown = g, e.current.style.touchAction = "none";
     }
   }, [e?.current, g]);
-  q.useEffect(() => {
+  B.useEffect(() => {
     M();
-  }, [M]), q.useEffect(() => {
+  }, [M]), B.useEffect(() => {
     E();
-  }, [c]), q.useEffect(() => {
+  }, [c]), B.useEffect(() => {
     u !== s.current && (s.current = u, u || y());
   }, [u, s.current]);
 }, us = () => {
@@ -4092,13 +4092,13 @@ const aa = Ee.div`
   };
 };
 function cs(e) {
-  const [t, r] = Ar(!1), i = q.useMemo(
+  const [t, r] = Ar(!1), i = B.useMemo(
     () => new IntersectionObserver(
       ([a]) => r(a.isIntersecting)
     ),
     []
   );
-  return q.useEffect(() => (e?.current && i.observe(e?.current), () => i.disconnect()), [e, i.disconnect, i.observe]), t;
+  return B.useEffect(() => (e?.current && i.observe(e?.current), () => i.disconnect()), [e, i.disconnect, i.observe]), t;
 }
 const ca = {
   xs: 0,
@@ -4888,7 +4888,7 @@ function Ua() {
     e
   ), c = /* @__PURE__ */ $.createElement($.Fragment, null, /* @__PURE__ */ $.createElement("p", null, "💿 Hey developer 👋"), /* @__PURE__ */ $.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /* @__PURE__ */ $.createElement("code", { style: s }, "ErrorBoundary"), " or", " ", /* @__PURE__ */ $.createElement("code", { style: s }, "errorElement"), " prop on your route.")), /* @__PURE__ */ $.createElement($.Fragment, null, /* @__PURE__ */ $.createElement("h2", null, "Unexpected Application Error!"), /* @__PURE__ */ $.createElement("h3", { style: { fontStyle: "italic" } }, t), r ? /* @__PURE__ */ $.createElement("pre", { style: a }, r) : null, c);
 }
-var Ya = /* @__PURE__ */ $.createElement(Ua, null), qa = class extends $.Component {
+var Ya = /* @__PURE__ */ $.createElement(Ua, null), Ba = class extends $.Component {
   constructor(e) {
     super(e), this.state = {
       location: e.location,
@@ -4927,7 +4927,7 @@ var Ya = /* @__PURE__ */ $.createElement(Ua, null), qa = class extends $.Compone
     )) : this.props.children;
   }
 };
-function Ba({ routeContext: e, match: t, children: r }) {
+function qa({ routeContext: e, match: t, children: r }) {
   let i = $.useContext($e);
   return i && i.static && i.staticContext && (t.route.errorElement || t.route.ErrorBoundary) && (i.staticContext._deepestRenderedBoundaryId = t.route.id), /* @__PURE__ */ $.createElement(ke.Provider, { value: e }, r);
 }
@@ -4979,7 +4979,7 @@ function Xa(e, t = [], r = null, i = null) {
     let p = t.concat(a.slice(0, g + 1)), R = () => {
       let S;
       return y ? S = M : E ? S = k : d.route.Component ? S = /* @__PURE__ */ $.createElement(d.route.Component, null) : d.route.element ? S = d.route.element : S = l, /* @__PURE__ */ $.createElement(
-        Ba,
+        qa,
         {
           match: d,
           routeContext: {
@@ -4992,7 +4992,7 @@ function Xa(e, t = [], r = null, i = null) {
       );
     };
     return r && (d.route.ErrorBoundary || d.route.errorElement || g === 0) ? /* @__PURE__ */ $.createElement(
-      qa,
+      Ba,
       {
         location: r.location,
         revalidation: r.revalidation,
@@ -5855,7 +5855,7 @@ function zo(e, t = {}) {
 [
   ...So
 ];
-const Sn = q.createContext({
+const Sn = B.createContext({
   history: [],
   addToHistory: () => {
   },
@@ -5931,19 +5931,19 @@ const Sn = q.createContext({
     return l.params && Object.entries(l.params).forEach(([g, y]) => {
       y != null && d.searchParams.set(g, String(y));
     }), d.pathname + d.search;
-  }, s = q.useCallback(
+  }, s = B.useCallback(
     (l) => {
       const d = a(l);
       l.addToHistory !== !1 ? (e(d), i.addToHistory(d)) : (e(d, { replace: !0 }), i.history.length > 0 && (i.popFromHistory(1), i.addToHistory(d)));
     },
     [e, i.history]
-  ), c = q.useCallback(
+  ), c = B.useCallback(
     (l) => {
       let d = l || 1;
       i.history.length < d && (d = i.history.length), e(-d), i.popFromHistory(d);
     },
     [e]
-  ), u = q.useCallback(() => {
+  ), u = B.useCallback(() => {
     i.replaceHistory([]);
   }, [e]);
   return {
@@ -5959,7 +5959,7 @@ const Sn = q.createContext({
   routes: t,
   children: r
 }) => {
-  const i = q.useRef([]), [a, s] = q.useState([]), c = q.useCallback((y) => {
+  const i = B.useRef([]), [a, s] = B.useState([]), c = B.useCallback((y) => {
     i.current = y, s(y);
   }, []), u = (y, E = !1) => {
     let M = [...i.current];
@@ -5985,7 +5985,7 @@ const Sn = q.createContext({
       ] }) })
     }
   );
-}, xn = q.createContext(
+}, xn = B.createContext(
   {
     visibleItems: [],
     isItemVisible: () => !1,
@@ -5995,14 +5995,14 @@ const Sn = q.createContext({
     }
   }
 ), ms = ({ children: e }) => {
-  const t = q.useRef([]), [r, i] = q.useState([]), a = q.useCallback((l) => {
+  const t = B.useRef([]), [r, i] = B.useState([]), a = B.useCallback((l) => {
     t.current = l, i(l);
-  }, []), s = q.useCallback((l) => t.current.some((d) => d === l), []), c = q.useCallback(
+  }, []), s = B.useCallback((l) => t.current.some((d) => d === l), []), c = B.useCallback(
     (l) => {
       s(l) || a([...t.current, l]);
     },
     [s, a]
-  ), u = q.useCallback(
+  ), u = B.useCallback(
     (l) => {
       s(l) && a(
         t.current.filter((g) => g !== l)
@@ -6039,9 +6039,9 @@ const Sn = q.createContext({
   onCloseDrawer: t,
   drawerCloseOffset: r = 15
 }) => {
-  const { isItemVisible: i } = Ct(), [a, s] = q.useState({
+  const { isItemVisible: i } = Ct(), [a, s] = B.useState({
     isDragging: !1
-  }), c = q.useRef(null), u = q.useRef(null), l = q.useRef(null), [d, g] = q.useState(0), y = (k) => {
+  }), c = B.useRef(null), u = B.useRef(null), l = B.useRef(null), [d, g] = B.useState(0), y = (k) => {
     s(k);
   }, E = (k) => {
     s(k), g(0);
@@ -6145,7 +6145,7 @@ const Sn = q.createContext({
   onMount: i,
   configurations: a
 }) => {
-  const s = q.useRef(null), c = q.useRef(!1), u = (R) => ({
+  const s = B.useRef(null), c = B.useRef(!1), u = (R) => ({
     name: R.name,
     value: R.value
   }), l = () => {
@@ -6228,7 +6228,7 @@ const Sn = q.createContext({
     );
     const A = S.find((W) => W.error !== void 0);
     return { fields: S, hasErrors: A !== void 0 };
-  }, []), E = q.useCallback(
+  }, []), E = B.useCallback(
     async (R) => {
       try {
         if (c.current)
@@ -6241,7 +6241,7 @@ const Sn = q.createContext({
       }
     },
     [t, e]
-  ), M = q.useCallback(
+  ), M = B.useCallback(
     async (R) => {
       try {
         const A = R.target;
@@ -6257,7 +6257,7 @@ const Sn = q.createContext({
       }
     },
     [t, e]
-  ), k = q.useCallback(async () => {
+  ), k = B.useCallback(async () => {
     try {
       const R = await y("mount");
       i?.(R.fields, R.hasErrors);
@@ -6277,7 +6277,7 @@ const Sn = q.createContext({
   };
 }, Vo = Ee.div`
   display: flex;
-  width: 100%;
+  flex: 1,
   align-items: center;
   justify-content: center;
   background: none;
@@ -6291,7 +6291,7 @@ const Sn = q.createContext({
     pointer-events: none;
   }
 `, gs = (e) => {
-  const { children: t, styles: r, childrenStyles: i, submitButton: a } = e, { ref: s, handleFormSubmission: c, submitForm: u, handleFormChange: l } = Wo(e);
+  const { children: t, styles: r, childrenStyles: i, submitSection: a } = e, { ref: s, handleFormSubmission: c, submitForm: u, handleFormChange: l } = Wo(e);
   return /* @__PURE__ */ X.jsxs(
     "form",
     {
@@ -6321,14 +6321,33 @@ const Sn = q.createContext({
             children: t
           }
         ),
-        /* @__PURE__ */ X.jsx(
-          Vo,
+        /* @__PURE__ */ X.jsxs(
+          "div",
           {
-            onClick: u,
-            styles: {
+            style: {
+              width: "100%",
+              flexDirection: "row",
+              gap: "10px",
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              justifyContent: "center",
               ...a.styles
             },
-            children: a.content
+            children: [
+              a.renderBeforeSubmitButton,
+              /* @__PURE__ */ X.jsx(
+                Vo,
+                {
+                  onClick: u,
+                  styles: {
+                    ...a.submitButton.styles
+                  },
+                  children: a.submitButton.content
+                }
+              ),
+              a.renderAfterSubmitButton
+            ]
           }
         )
       ]
@@ -6384,7 +6403,7 @@ const Sn = q.createContext({
   input:-webkit-autofill {
     background-color: #00000000;
   }
-`, qo = (e) => {
+`, Bo = (e) => {
   const { onValueChanged: t, handleOnBlur: r, handleOnFocus: i, handleOnClick: a } = Uo(e), {
     ref: s,
     name: c,
@@ -6561,7 +6580,7 @@ const Sn = q.createContext({
       )
     }
   ) });
-}, Bo = (e) => {
+}, qo = (e) => {
   const t = Pn(""), r = me(
     (u) => (e.allowNegatives ? (u = u.replace(/-/g, (l, d) => d === 0 ? "-" : ""), u.indexOf("-") > 0 && (u = u.replace(/-/g, ""), u = "-" + u)) : u = u.replace(/-/g, ""), u),
     [e]
@@ -6610,29 +6629,29 @@ const Sn = q.createContext({
   decimalScale: r = 2,
   ...i
 }) => {
-  const { props: a } = Bo({
+  const { props: a } = qo({
     allowNegatives: e,
     allowDecimals: t,
     decimalScale: r,
     ...i
   });
-  return /* @__PURE__ */ X.jsx(qo, { type: "text", ...a });
+  return /* @__PURE__ */ X.jsx(Bo, { type: "text", ...a });
 }, Xo = (e) => {
-  const t = q.useRef(null), r = q.useRef(null), i = q.useRef(null), [a, s] = q.useState(24), [c, u] = q.useState(24), [l, d] = q.useState(300), g = q.useCallback(() => {
+  const t = B.useRef(null), r = B.useRef(null), i = B.useRef(null), [a, s] = B.useState(24), [c, u] = B.useState(24), [l, d] = B.useState(300), g = B.useCallback(() => {
     t.current && s(t.current.clientHeight);
-  }, [t, t.current]), y = q.useCallback(() => {
+  }, [t, t.current]), y = B.useCallback(() => {
     r.current && u(r.current.clientHeight);
-  }, [r, r.current]), E = q.useCallback(() => {
+  }, [r, r.current]), E = B.useCallback(() => {
     i.current && d(i.current.clientWidth);
-  }, [i, i.current]), M = q.useCallback(() => {
+  }, [i, i.current]), M = B.useCallback(() => {
     let k = 0;
     return e.header?.visibility === "always" && (k = k + (a || 0)), e.footer?.visibility === "always" && (k = k + (c || 0)), k;
   }, [r, r.current]);
-  return q.useEffect(() => {
+  return B.useEffect(() => {
     g();
-  }, [g, t, t.current]), q.useEffect(() => {
+  }, [g, t, t.current]), B.useEffect(() => {
     y();
-  }, [y, r, r.current]), q.useEffect(() => {
+  }, [y, r, r.current]), B.useEffect(() => {
     E();
   }, [E, i, i.current]), {
     header: {
@@ -6953,8 +6972,8 @@ function Zo() {
             case y:
               return v ? f(1, D) : f(0, D + 1);
             case g:
-              var U = this.$locale().weekStart || 0, B = (I < U ? I + 7 : I) - U;
-              return f(v ? N - B : N + (6 - B), D);
+              var U = this.$locale().weekStart || 0, q = (I < U ? I + 7 : I) - U;
+              return f(v ? N - q : N + (6 - q), D);
             case d:
             case k:
               return O(V + "Hours", 0);
@@ -7000,7 +7019,7 @@ function Zo() {
           if (!this.isValid()) return z.invalidDate || p;
           var v = L || "YYYY-MM-DDTHH:mm:ssZ", n = C.z(this), f = this.$H, O = this.$m, I = this.$M, D = z.weekdays, N = z.months, V = z.meridiem, U = function(G, J, te, Z) {
             return G && (G[J] || G(o, v)) || te[J].slice(0, Z);
-          }, B = function(G) {
+          }, q = function(G) {
             return C.s(f % 12 || 12, G, "0");
           }, K = V || function(G, J, te) {
             var Z = G < 12 ? "AM" : "PM";
@@ -7038,9 +7057,9 @@ function Zo() {
                 case "HH":
                   return C.s(f, 2, "0");
                 case "h":
-                  return B(1);
+                  return q(1);
                 case "hh":
-                  return B(2);
+                  return q(2);
                 case "a":
                   return K(f, O, !0);
                 case "A":
@@ -7481,8 +7500,8 @@ const Es = ({
   styles: r,
   durationInSeconds: i = 3
 }) => {
-  const a = q.useRef(!1), { isItemVisible: s, hideItem: c } = Ct();
-  return q.useEffect(() => {
+  const a = B.useRef(!1), { isItemVisible: s, hideItem: c } = Ct();
+  return B.useEffect(() => {
     const u = s(e);
     a.current !== u && (a.current = u, u && setTimeout(() => c(e), i * 1e3));
   }, [a, s, c]), /* @__PURE__ */ X.jsx(X.Fragment, { children: s(e) && /* @__PURE__ */ X.jsx(
@@ -7545,7 +7564,7 @@ export {
   gs as Form,
   On as FormsHelper,
   ys as Image,
-  qo as InputField,
+  Bo as InputField,
   bs as Loader,
   ws as Modal,
   ps as NavigationProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eliseubatista99/react-scaffold-core",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "private": false,
   "description": "A library which provides basic components, hooks, helpers and providers to easily build a React application and avoid repeating the usual code.",
   "main": "dist/index.cjs.js",