@functionalcms/svelte-components 4.36.10 → 5.0.0-beta1

package/css/functional.css

@@ -1 +1,48 @@
-:where(html){--warning-border-accent-modelight: #ecd386;--warning-border-modelight: #f0e3b9;--warning-light-modelight: #fff5d4;--warning-dark-modelight: #634902;--secondary-hover-modelight: #bc583d;--secondary-modelight: #c94d2b;--primary-extra-light-modelight: #f1faff;--primary-light-modelight: #dcf1ff;--primary-dark-modelight: #063f69;--primary-border-modelight: #c1d9e9;--primary-hover-modelight: #2087d0;--primary-modelight: #077acb;--light-modelight: #fff;--dark-modelight: #333;--gray-dark-modelight: #717171;--gray-mid-dark-modelight: #ccc;--gray-mid-modelight: #d8d8d8;--gray-light-modelight: #e9e9e9;--gray-extra-light-modelight: #f8f8f8;--error-border-modelight: #eec8c8;--error-light-modelight: #ffe0e0;--error-dark-modelight: #771414;--error-modelight: #e02e2e;--action-border-modelight: #c7f0d1;--action-light-modelight: #e2ffe9;--action-dark-modelight: #0a3414;--action-hover-modelight: #3dd262;--action-modelight: #2fb751;--disabled-color-modelight: var(--gray-dark-modelight);--disabled-bg-modelight: var(--gray-light-modelight)}:where(html){--warning-border-accent-modedark: #433507;--warning-border-modedark: #fff5d4;--warning-light-modedark: #faecc0;--warning-dark-modedark: #221b01;--secondary-hover-modedark: #000;--secondary-modedark: #e89982;--primary-extra-light-modedark: #172c38;--primary-light-modedark: #90d0fd;--primary-dark-modedark: #021421;--primary-border-modedark: #63b9f7;--primary-hover-modedark: #63b9f7;--primary-modedark: #91d1ff;--light-modedark: #1a202c;--dark-modedark: #d0d0d0;--gray-dark-modedark: rgb(255 255 255 / 40%);--gray-mid-dark-modedark: rgba(255 255 255 / 32%);--gray-mid-modedark: rgba(255 255 255 / 8%);--gray-light-modedark: rgba(255 255 255 / 6%);--gray-extra-light-modedark: rgba(255 255 255 / 4%);--error-border-modedark: #ffe0e0;--error-light-modedark: #ffe0e0;--error-dark-modedark: #260202;--error-modedark: #fd9e9e;--action-border-modedark: #e7ffed;--action-light-modedark: #baf9ca;--action-dark-modedark: #011e08;--action-hover-modedark: #9fe0af;--action-modedark: #baf9ca;--disabled-color-modedark: var(--gray-dark-modedark);--disabled-bg-modedark: var(--gray-light-modedark) }:root{color-scheme:light;--warning-border-accent: var(--warning-border-accent-modelight);--warning-border: var(--warning-border-modelight);--warning-light: var(--warning-light-modelight);--warning-dark: var(--warning-dark-modelight);--secondary-hover: var(--secondary-hover-modelight);--secondary: var(--secondary-modelight);--primary-light: var(--primary-light-modelight);--primary-dark: var(--primary-dark-modelight);--primary-border: var(--primary-border-modelight);--primary-hover: var(--primary-hover-modelight);--primary: var(--primary-modelight);--light: var(--light-modelight);--dark: var(--dark-modelight);--gray-dark: var(--gray-dark-modelight);--gray-mid-dark: var(--gray-mid-dark-modelight);--gray-mid: var(--gray-mid-modelight);--gray-light: var(--gray-light-modelight);--gray-extra-light: var(--gray-extra-light-modelight);--error: var(--error-modelight);--error-light: var(--error-light-modelight);--error-dark: var(--error-dark-modelight);--error-border: var(--error-border-modelight);--disabled-color: var(--gray-dark-modelight);--disabled-bg: var(--gray-light-modelight);--action-border: var(--action-border-modelight);--action-light: var(--action-light-modelight);--action-dark: var(--action-dark-modelight);--action-hover: var(--action-hover-modelight);--action: var(--action-modelight) }@media(prefers-color-scheme: dark){:root{color-scheme:dark;--warning-border-accent: var(--warning-border-accent-modedark);--warning-border: var(--warning-border-modedark);--warning-light: var(--warning-light-modedark);--warning-dark: var(--warning-dark-modedark);--secondary-hover: var(--secondary-hover-modedark);--secondary: var(--secondary-modedark);--primary-light: var(--primary-light-modedark);--primary-dark: var(--primary-dark-modedark);--primary-border: var(--primary-border-modedark);--primary-hover: var(--primary-hover-modedark);--primary: var(--primary-modedark);--light: var(--light-modedark);--dark: var(--dark-modedark);--gray-dark: var(--gray-dark-modedark);--gray-mid-dark: var(--gray-mid-dark-modedark);--gray-mid: var(--gray-mid-modedark);--gray-light: var(--gray-light-modedark);--gray-extra-light: var(--gray-extra-light-modedark);--error: var(--error-modedark);--error-light: var(--error-light-modedark);--error-dark: var(--error-dark-modedark);--error-border: var(--error-border-modedark);--disabled-color: var(--gray-dark-modedark);--disabled-bg: var(--gray-light-modedark);--action-border: var(--action-border-modedark);--action-light: var(--action-light-modedark);--action-dark: var(--action-dark-modedark);--action-hover: var(--action-hover-modedark);--action: var(--action-modedark) }}[color-scheme=light]{color-scheme:light;--warning-border-accent: var(--warning-border-accent-modelight);--warning-border: var(--warning-border-modelight);--warning-light: var(--warning-light-modelight);--warning-dark: var(--warning-dark-modelight);--secondary-hover: var(--secondary-hover-modelight);--secondary: var(--secondary-modelight);--primary-light: var(--primary-light-modelight);--primary-dark: var(--primary-dark-modelight);--primary-border: var(--primary-border-modelight);--primary-hover: var(--primary-hover-modelight);--primary: var(--primary-modelight);--light: var(--light-modelight);--dark: var(--dark-modelight);--gray-dark: var(--gray-dark-modelight);--gray-mid-dark: var(--gray-mid-dark-modelight);--gray-mid: var(--gray-mid-modelight);--gray-light: var(--gray-light-modelight);--gray-extra-light: var(--gray-extra-light-modelight);--error: var(--error-modelight);--error-light: var(--error-light-modelight);--error-dark: var(--error-dark-modelight);--error-border: var(--error-border-modelight);--disabled-color: var(--gray-dark-modelight);--disabled-bg: var(--gray-light-modelight);--action-border: var(--action-border-modelight);--action-light: var(--action-light-modelight);--action-dark: var(--action-dark-modelight);--action-hover: var(--action-hover-modelight);--action: var(--action-modelight) }[color-scheme=dark]{color-scheme:dark;--warning-border-accent: var(--warning-border-accent-modedark);--warning-border: var(--warning-border-modedark);--warning-light: var(--warning-light-modedark);--warning-dark: var(--warning-dark-modedark);--secondary-hover: var(--secondary-hover-modedark);--secondary: var(--secondary-modedark);--primary-light: var(--primary-light-modedark);--primary-dark: var(--primary-dark-modedark);--primary-border: var(--primary-border-modedark);--primary-hover: var(--primary-hover-modedark);--primary: var(--primary-modedark);--light: var(--light-modedark);--dark: var(--dark-modedark);--gray-dark: var(--gray-dark-modedark);--gray-mid-dark: var(--gray-mid-dark-modedark);--gray-mid: var(--gray-mid-modedark);--gray-light: var(--gray-light-modedark);--gray-extra-light: var(--gray-extra-light-modedark);--error: var(--error-modedark);--error-light: var(--error-light-modedark);--error-dark: var(--error-dark-modedark);--error-border: var(--error-border-modedark);--disabled-color: var(--gray-dark-modedark);--disabled-bg: var(--gray-light-modedark);--action-border: var(--action-border-modedark);--action-light: var(--action-light-modedark);--action-dark: var(--action-dark-modedark);--action-hover: var(--action-hover-modedark);--action: var(--action-modedark) }:where(html){--focus-ring-outline-color: transparent;--focus-ring-outline-style: solid;--focus-ring-outline-width: 3px;--focus-ring-color: rgb(55 149 225 / 50%) }:where(html){--fluid-80: 5rem;--fluid-72: 4.5rem;--fluid-64: 4rem;--fluid-56: 3.5rem;--fluid-48: 3rem;--fluid-40: 2.5rem;--fluid-36: 2.25rem;--fluid-32: 2rem;--fluid-24: 1.5rem;--fluid-20: 1.25rem;--fluid-18: 1.125rem;--fluid-16: 1rem;--fluid-14: 0.875rem;--fluid-12: 0.75rem;--fluid-10: 0.625rem;--fluid-8: 0.5rem;--fluid-6: 0.375rem;--fluid-4: 0.25rem;--fluid-2: 0.125rem;--vertical-pad: var(--fluid-8);--line-height: var(--fluid-20);--side-padding: var(--fluid-12);--input-side-padding: var(--fluid-12) }:where(html){--small: 0.875rem;--body: 1rem;--h6: 0.75rem;--h5: 1.125rem;--h4: 1.5rem;--h3: 2.25rem;--h2: 3rem;--h1: 4rem;--font-color: var(--dark);--font-weight-bold: 600;--font-weight-light: 300;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;--font-family-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif }:where(html){--timing-slow: 450ms;--timing-medium: 300ms;--timing-fast: 200ms }:where(html){--mobile-content-width: 95%;--content-width: 75%}:root{--radius: var(--fluid-4, 0.25rem);--radius-capsule: 9999px }html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}:where(body){line-height:1.5}:where(ul){list-style:none}:where(button,[role=button]){cursor:pointer}:where(input,button,select,optgroup,textarea){margin:0;font-family:inherit;font-size:inherit;color:inherit;line-height:inherit}:where(table){border-collapse:collapse}:where(th){text-align:-webkit-match-parent;text-align:match-parent;text-align:inherit}:where(thead,tbody,tfoot,tr,td,th){border-color:inherit;border-style:solid;border-width:0}:where(html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,button,pre,hr,h1,h2,h3,h4,h5,h6){margin:0;padding:0}a{--link-color: var(--primary, #077acb);color:var(--link-color);text-decoration:none}a:hover{text-decoration:underline}a:focus{box-shadow:0 0 0 var(--focus-ring-outline-width) var(--focus-ring-color);outline:var(--focus-ring-outline-width) var(--focus-ring-outline-style) var(--focus-ring-outline-color);transition:box-shadow var(--timing-fast) ease-out}@media(prefers-reduced-motion),(update: slow){a:focus{transition-duration:.001ms !important}}.screenreader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.w-100{width:100% !important}.text-lowercase{text-transform:lowercase !important}.text-uppercase{text-transform:uppercase !important}.text-capitalize{text-transform:capitalize !important}.text-center{text-align:center !important}.h1{font-size:var(--h1) !important}.h2{font-size:var(--h2) !important}.h3{font-size:var(--h3) !important}.h4{font-size:var(--h4) !important}.h5{font-size:var(--h5) !important}.h6{font-size:var(--h6) !important}.top{top:0 !important}.bottom{bottom:0 !important}.start{left:var(--fluid-16) !important}.end{right:var(--fluid-16) !important}.center{left:50% !important;transform:translateX(-50%) !important}.flex{display:flex !important}.flex-inline{display:inline-flex !important}.flex-fill{flex:1 1 auto !important}.flex-row{flex-direction:row !important}.flex-column{flex-direction:column !important}.flex-row-reverse{flex-direction:row-reverse !important}.flex-column-reverse{flex-direction:column-reverse !important}.flex-grow-0{flex-grow:0 !important}.flex-grow-1{flex-grow:1 !important}.flex-shrink-0{flex-shrink:0 !important}.flex-shrink-1{flex-shrink:1 !important}.flex-wrap{flex-wrap:wrap !important}.flex-nowrap{flex-wrap:nowrap !important}.items-start{align-items:flex-start !important}.items-end{align-items:flex-end !important}.items-center{align-items:center !important}.items-baseline{align-items:baseline !important}.items-stretch{align-items:stretch !important}.self-start{align-self:flex-start !important}.self-end{align-self:flex-end !important}.self-center{align-self:center !important}.self-baseline{align-self:baseline !important}.self-stretch{align-self:stretch !important}.justify-start{justify-content:flex-start !important}.justify-end{justify-content:flex-end !important}.justify-center{justify-content:center !important}.justify-between{justify-content:space-between !important}.justify-around{justify-content:space-around !important}.content-start{align-content:flex-start !important}.content-end{align-content:flex-end !important}.content-center{align-content:center !important}.content-between{align-content:space-between !important}.content-around{align-content:space-around !important}.content-stretch{align-content:stretch !important}.m0{margin:0 !important}.m2{margin:var(--fluid-2) !important}.m4{margin:var(--fluid-4) !important}.m6{margin:var(--fluid-6) !important}.m8{margin:var(--fluid-8) !important}.m10{margin:var(--fluid-10) !important}.m12{margin:var(--fluid-12) !important}.m14{margin:var(--fluid-14) !important}.m16{margin:var(--fluid-16) !important}.m18{margin:var(--fluid-18) !important}.m20{margin:var(--fluid-20) !important}.m24{margin:var(--fluid-24) !important}.m32{margin:var(--fluid-32) !important}.m36{margin:var(--fluid-36) !important}.m40{margin:var(--fluid-40) !important}.m48{margin:var(--fluid-48) !important}.m56{margin:var(--fluid-56) !important}.m64{margin:var(--fluid-64) !important}.mis0{-webkit-margin-start:0 !important;margin-inline-start:0 !important}.mis2{-webkit-margin-start:var(--fluid-2) !important;margin-inline-start:var(--fluid-2) !important}.mis4{-webkit-margin-start:var(--fluid-4) !important;margin-inline-start:var(--fluid-4) !important}.mis6{-webkit-margin-start:var(--fluid-6) !important;margin-inline-start:var(--fluid-6) !important}.mis8{-webkit-margin-start:var(--fluid-8) !important;margin-inline-start:var(--fluid-8) !important}.mis10{-webkit-margin-start:var(--fluid-10) !important;margin-inline-start:var(--fluid-10) !important}.mis12{-webkit-margin-start:var(--fluid-12) !important;margin-inline-start:var(--fluid-12) !important}.mis14{-webkit-margin-start:var(--fluid-14) !important;margin-inline-start:var(--fluid-14) !important}.mis16{-webkit-margin-start:var(--fluid-16) !important;margin-inline-start:var(--fluid-16) !important}.mis18{-webkit-margin-start:var(--fluid-18) !important;margin-inline-start:var(--fluid-18) !important}.mis20{-webkit-margin-start:var(--fluid-20) !important;margin-inline-start:var(--fluid-20) !important}.mis24{-webkit-margin-start:var(--fluid-24) !important;margin-inline-start:var(--fluid-24) !important}.mis32{-webkit-margin-start:var(--fluid-32) !important;margin-inline-start:var(--fluid-32) !important}.mis36{-webkit-margin-start:var(--fluid-36) !important;margin-inline-start:var(--fluid-36) !important}.mis40{-webkit-margin-start:var(--fluid-40) !important;margin-inline-start:var(--fluid-40) !important}.mis48{-webkit-margin-start:var(--fluid-48) !important;margin-inline-start:var(--fluid-48) !important}.mis56{-webkit-margin-start:var(--fluid-56) !important;margin-inline-start:var(--fluid-56) !important}.mis64{-webkit-margin-start:var(--fluid-64) !important;margin-inline-start:var(--fluid-64) !important}.mie0{-webkit-margin-end:0 !important;margin-inline-end:0 !important}.mie2{-webkit-margin-end:var(--fluid-2) !important;margin-inline-end:var(--fluid-2) !important}.mie4{-webkit-margin-end:var(--fluid-4) !important;margin-inline-end:var(--fluid-4) !important}.mie6{-webkit-margin-end:var(--fluid-6) !important;margin-inline-end:var(--fluid-6) !important}.mie8{-webkit-margin-end:var(--fluid-8) !important;margin-inline-end:var(--fluid-8) !important}.mie10{-webkit-margin-end:var(--fluid-10) !important;margin-inline-end:var(--fluid-10) !important}.mie12{-webkit-margin-end:var(--fluid-12) !important;margin-inline-end:var(--fluid-12) !important}.mie14{-webkit-margin-end:var(--fluid-14) !important;margin-inline-end:var(--fluid-14) !important}.mie16{-webkit-margin-end:var(--fluid-16) !important;margin-inline-end:var(--fluid-16) !important}.mie18{-webkit-margin-end:var(--fluid-18) !important;margin-inline-end:var(--fluid-18) !important}.mie20{-webkit-margin-end:var(--fluid-20) !important;margin-inline-end:var(--fluid-20) !important}.mie24{-webkit-margin-end:var(--fluid-24) !important;margin-inline-end:var(--fluid-24) !important}.mie32{-webkit-margin-end:var(--fluid-32) !important;margin-inline-end:var(--fluid-32) !important}.mie36{-webkit-margin-end:var(--fluid-36) !important;margin-inline-end:var(--fluid-36) !important}.mie40{-webkit-margin-end:var(--fluid-40) !important;margin-inline-end:var(--fluid-40) !important}.mie48{-webkit-margin-end:var(--fluid-48) !important;margin-inline-end:var(--fluid-48) !important}.mie56{-webkit-margin-end:var(--fluid-56) !important;margin-inline-end:var(--fluid-56) !important}.mie64{-webkit-margin-end:var(--fluid-64) !important;margin-inline-end:var(--fluid-64) !important}.mbs0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.mbs2{-webkit-margin-before:var(--fluid-2) !important;margin-block-start:var(--fluid-2) !important}.mbs4{-webkit-margin-before:var(--fluid-4) !important;margin-block-start:var(--fluid-4) !important}.mbs6{-webkit-margin-before:var(--fluid-6) !important;margin-block-start:var(--fluid-6) !important}.mbs8{-webkit-margin-before:var(--fluid-8) !important;margin-block-start:var(--fluid-8) !important}.mbs10{-webkit-margin-before:var(--fluid-10) !important;margin-block-start:var(--fluid-10) !important}.mbs12{-webkit-margin-before:var(--fluid-12) !important;margin-block-start:var(--fluid-12) !important}.mbs14{-webkit-margin-before:var(--fluid-14) !important;margin-block-start:var(--fluid-14) !important}.mbs16{-webkit-margin-before:var(--fluid-16) !important;margin-block-start:var(--fluid-16) !important}.mbs18{-webkit-margin-before:var(--fluid-18) !important;margin-block-start:var(--fluid-18) !important}.mbs20{-webkit-margin-before:var(--fluid-20) !important;margin-block-start:var(--fluid-20) !important}.mbs24{-webkit-margin-before:var(--fluid-24) !important;margin-block-start:var(--fluid-24) !important}.mbs32{-webkit-margin-before:var(--fluid-32) !important;margin-block-start:var(--fluid-32) !important}.mbs36{-webkit-margin-before:var(--fluid-36) !important;margin-block-start:var(--fluid-36) !important}.mbs40{-webkit-margin-before:var(--fluid-40) !important;margin-block-start:var(--fluid-40) !important}.mbs48{-webkit-margin-before:var(--fluid-48) !important;margin-block-start:var(--fluid-48) !important}.mbs56{-webkit-margin-before:var(--fluid-56) !important;margin-block-start:var(--fluid-56) !important}.mbs64{-webkit-margin-before:var(--fluid-64) !important;margin-block-start:var(--fluid-64) !important}.mbe0{-webkit-margin-after:0 !important;margin-block-end:0 !important}.mbe2{-webkit-margin-after:var(--fluid-2) !important;margin-block-end:var(--fluid-2) !important}.mbe4{-webkit-margin-after:var(--fluid-4) !important;margin-block-end:var(--fluid-4) !important}.mbe6{-webkit-margin-after:var(--fluid-6) !important;margin-block-end:var(--fluid-6) !important}.mbe8{-webkit-margin-after:var(--fluid-8) !important;margin-block-end:var(--fluid-8) !important}.mbe10{-webkit-margin-after:var(--fluid-10) !important;margin-block-end:var(--fluid-10) !important}.mbe12{-webkit-margin-after:var(--fluid-12) !important;margin-block-end:var(--fluid-12) !important}.mbe14{-webkit-margin-after:var(--fluid-14) !important;margin-block-end:var(--fluid-14) !important}.mbe16{-webkit-margin-after:var(--fluid-16) !important;margin-block-end:var(--fluid-16) !important}.mbe18{-webkit-margin-after:var(--fluid-18) !important;margin-block-end:var(--fluid-18) !important}.mbe20{-webkit-margin-after:var(--fluid-20) !important;margin-block-end:var(--fluid-20) !important}.mbe24{-webkit-margin-after:var(--fluid-24) !important;margin-block-end:var(--fluid-24) !important}.mbe32{-webkit-margin-after:var(--fluid-32) !important;margin-block-end:var(--fluid-32) !important}.mbe36{-webkit-margin-after:var(--fluid-36) !important;margin-block-end:var(--fluid-36) !important}.mbe40{-webkit-margin-after:var(--fluid-40) !important;margin-block-end:var(--fluid-40) !important}.mbe48{-webkit-margin-after:var(--fluid-48) !important;margin-block-end:var(--fluid-48) !important}.mbe56{-webkit-margin-after:var(--fluid-56) !important;margin-block-end:var(--fluid-56) !important}.mbe64{-webkit-margin-after:var(--fluid-64) !important;margin-block-end:var(--fluid-64) !important}.p0{padding:0 !important}.p2{padding:var(--fluid-2) !important}.p4{padding:var(--fluid-4) !important}.p6{padding:var(--fluid-6) !important}.p8{padding:var(--fluid-8) !important}.p10{padding:var(--fluid-10) !important}.p12{padding:var(--fluid-12) !important}.p14{padding:var(--fluid-14) !important}.p16{padding:var(--fluid-16) !important}.p18{padding:var(--fluid-18) !important}.p20{padding:var(--fluid-20) !important}.p24{padding:var(--fluid-24) !important}.p32{padding:var(--fluid-32) !important}.p36{padding:var(--fluid-36) !important}.p40{padding:var(--fluid-40) !important}.p48{padding:var(--fluid-48) !important}.p56{padding:var(--fluid-56) !important}.p64{padding:var(--fluid-64) !important}.pis0{-webkit-padding-start:0 !important;padding-inline-start:0 !important}.pis2{-webkit-padding-start:var(--fluid-2) !important;padding-inline-start:var(--fluid-2) !important}.pis4{-webkit-padding-start:var(--fluid-4) !important;padding-inline-start:var(--fluid-4) !important}.pis6{-webkit-padding-start:var(--fluid-6) !important;padding-inline-start:var(--fluid-6) !important}.pis8{-webkit-padding-start:var(--fluid-8) !important;padding-inline-start:var(--fluid-8) !important}.pis10{-webkit-padding-start:var(--fluid-10) !important;padding-inline-start:var(--fluid-10) !important}.pis12{-webkit-padding-start:var(--fluid-12) !important;padding-inline-start:var(--fluid-12) !important}.pis14{-webkit-padding-start:var(--fluid-14) !important;padding-inline-start:var(--fluid-14) !important}.pis16{-webkit-padding-start:var(--fluid-16) !important;padding-inline-start:var(--fluid-16) !important}.pis18{-webkit-padding-start:var(--fluid-18) !important;padding-inline-start:var(--fluid-18) !important}.pis20{-webkit-padding-start:var(--fluid-20) !important;padding-inline-start:var(--fluid-20) !important}.pis24{-webkit-padding-start:var(--fluid-24) !important;padding-inline-start:var(--fluid-24) !important}.pis32{-webkit-padding-start:var(--fluid-32) !important;padding-inline-start:var(--fluid-32) !important}.pis36{-webkit-padding-start:var(--fluid-36) !important;padding-inline-start:var(--fluid-36) !important}.pis40{-webkit-padding-start:var(--fluid-40) !important;padding-inline-start:var(--fluid-40) !important}.pis48{-webkit-padding-start:var(--fluid-48) !important;padding-inline-start:var(--fluid-48) !important}.pis56{-webkit-padding-start:var(--fluid-56) !important;padding-inline-start:var(--fluid-56) !important}.pis64{-webkit-padding-start:var(--fluid-64) !important;padding-inline-start:var(--fluid-64) !important}.pie0{-webkit-padding-end:0 !important;padding-inline-end:0 !important}.pie2{-webkit-padding-end:var(--fluid-2) !important;padding-inline-end:var(--fluid-2) !important}.pie4{-webkit-padding-end:var(--fluid-4) !important;padding-inline-end:var(--fluid-4) !important}.pie6{-webkit-padding-end:var(--fluid-6) !important;padding-inline-end:var(--fluid-6) !important}.pie8{-webkit-padding-end:var(--fluid-8) !important;padding-inline-end:var(--fluid-8) !important}.pie10{-webkit-padding-end:var(--fluid-10) !important;padding-inline-end:var(--fluid-10) !important}.pie12{-webkit-padding-end:var(--fluid-12) !important;padding-inline-end:var(--fluid-12) !important}.pie14{-webkit-padding-end:var(--fluid-14) !important;padding-inline-end:var(--fluid-14) !important}.pie16{-webkit-padding-end:var(--fluid-16) !important;padding-inline-end:var(--fluid-16) !important}.pie18{-webkit-padding-end:var(--fluid-18) !important;padding-inline-end:var(--fluid-18) !important}.pie20{-webkit-padding-end:var(--fluid-20) !important;padding-inline-end:var(--fluid-20) !important}.pie24{-webkit-padding-end:var(--fluid-24) !important;padding-inline-end:var(--fluid-24) !important}.pie32{-webkit-padding-end:var(--fluid-32) !important;padding-inline-end:var(--fluid-32) !important}.pie36{-webkit-padding-end:var(--fluid-36) !important;padding-inline-end:var(--fluid-36) !important}.pie40{-webkit-padding-end:var(--fluid-40) !important;padding-inline-end:var(--fluid-40) !important}.pie48{-webkit-padding-end:var(--fluid-48) !important;padding-inline-end:var(--fluid-48) !important}.pie56{-webkit-padding-end:var(--fluid-56) !important;padding-inline-end:var(--fluid-56) !important}.pie64{-webkit-padding-end:var(--fluid-64) !important;padding-inline-end:var(--fluid-64) !important}.pbs0{-webkit-padding-before:0 !important;padding-block-start:0 !important}.pbs2{-webkit-padding-before:var(--fluid-2) !important;padding-block-start:var(--fluid-2) !important}.pbs4{-webkit-padding-before:var(--fluid-4) !important;padding-block-start:var(--fluid-4) !important}.pbs6{-webkit-padding-before:var(--fluid-6) !important;padding-block-start:var(--fluid-6) !important}.pbs8{-webkit-padding-before:var(--fluid-8) !important;padding-block-start:var(--fluid-8) !important}.pbs10{-webkit-padding-before:var(--fluid-10) !important;padding-block-start:var(--fluid-10) !important}.pbs12{-webkit-padding-before:var(--fluid-12) !important;padding-block-start:var(--fluid-12) !important}.pbs14{-webkit-padding-before:var(--fluid-14) !important;padding-block-start:var(--fluid-14) !important}.pbs16{-webkit-padding-before:var(--fluid-16) !important;padding-block-start:var(--fluid-16) !important}.pbs18{-webkit-padding-before:var(--fluid-18) !important;padding-block-start:var(--fluid-18) !important}.pbs20{-webkit-padding-before:var(--fluid-20) !important;padding-block-start:var(--fluid-20) !important}.pbs24{-webkit-padding-before:var(--fluid-24) !important;padding-block-start:var(--fluid-24) !important}.pbs32{-webkit-padding-before:var(--fluid-32) !important;padding-block-start:var(--fluid-32) !important}.pbs36{-webkit-padding-before:var(--fluid-36) !important;padding-block-start:var(--fluid-36) !important}.pbs40{-webkit-padding-before:var(--fluid-40) !important;padding-block-start:var(--fluid-40) !important}.pbs48{-webkit-padding-before:var(--fluid-48) !important;padding-block-start:var(--fluid-48) !important}.pbs56{-webkit-padding-before:var(--fluid-56) !important;padding-block-start:var(--fluid-56) !important}.pbs64{-webkit-padding-before:var(--fluid-64) !important;padding-block-start:var(--fluid-64) !important}.pbe0{-webkit-padding-after:0 !important;padding-block-end:0 !important}.pbe2{-webkit-padding-after:var(--fluid-2) !important;padding-block-end:var(--fluid-2) !important}.pbe4{-webkit-padding-after:var(--fluid-4) !important;padding-block-end:var(--fluid-4) !important}.pbe6{-webkit-padding-after:var(--fluid-6) !important;padding-block-end:var(--fluid-6) !important}.pbe8{-webkit-padding-after:var(--fluid-8) !important;padding-block-end:var(--fluid-8) !important}.pbe10{-webkit-padding-after:var(--fluid-10) !important;padding-block-end:var(--fluid-10) !important}.pbe12{-webkit-padding-after:var(--fluid-12) !important;padding-block-end:var(--fluid-12) !important}.pbe14{-webkit-padding-after:var(--fluid-14) !important;padding-block-end:var(--fluid-14) !important}.pbe16{-webkit-padding-after:var(--fluid-16) !important;padding-block-end:var(--fluid-16) !important}.pbe18{-webkit-padding-after:var(--fluid-18) !important;padding-block-end:var(--fluid-18) !important}.pbe20{-webkit-padding-after:var(--fluid-20) !important;padding-block-end:var(--fluid-20) !important}.pbe24{-webkit-padding-after:var(--fluid-24) !important;padding-block-end:var(--fluid-24) !important}.pbe32{-webkit-padding-after:var(--fluid-32) !important;padding-block-end:var(--fluid-32) !important}.pbe36{-webkit-padding-after:var(--fluid-36) !important;padding-block-end:var(--fluid-36) !important}.pbe40{-webkit-padding-after:var(--fluid-40) !important;padding-block-end:var(--fluid-40) !important}.pbe48{-webkit-padding-after:var(--fluid-48) !important;padding-block-end:var(--fluid-48) !important}.pbe56{-webkit-padding-after:var(--fluid-56) !important;padding-block-end:var(--fluid-56) !important}.pbe64{-webkit-padding-after:var(--fluid-64) !important;padding-block-end:var(--fluid-64) !important}:where(html){scrollbar-gutter:stable both-edges}:where(img,picture,canvas,video,iframe){max-inline-size:100%;block-size:auto;vertical-align:middle}:where(body){font-family:var(--font-family-body);font-size:var(--body);-webkit-font-smoothing:antialiased}:where(h1){font-size:var(--h1)}:where(h2){font-size:var(--h2)}:where(h3){font-size:var(--h3)}:where(h4){font-size:var(--h4)}:where(h5){font-size:var(--h5)}:where(h6){font-size:var(--h6)}:root{--menu-margin: 0px;--menu-padding: 0px;--menu-background: none;--menu-item-color: var(--primary);--menu-item-margin: 0px;--menu-item-padding: 0px;--menu-item-border-top: 0px;--menu-item-border-right: 0px;--menu-item-border-bottom: 0px;--menu-item-border-left: 0px;--menu-item-selected-radius: var(--radius, 0);--menu-item-hover-color: var(--menu-item-color);--menu-item-hover-background: var(--menu-item-background);--menu-item-hover-margin: var(--menu-item-margin);--menu-item-hover-padding: var(--menu-item-padding);--menu-item-hover-border-top: var(--menu-item-hover-border-top);--menu-item-hover-border-right: var(--menu-item-hover-border-right);--menu-item-hover-border-bottom: var(--menu-item-hover-border-bottom);--menu-item-hover-border-left: var(--menu-item-hover-border-left);--menu-item-hover-radius: var(--menu-item-radius);--menu-item-selected-color: var(--menu-item-color);--menu-item-selected-background: var(--menu-item-background);--menu-item-selected-margin: var(--menu-item-margin);--menu-item-selected-padding: var(--menu-item-padding);--menu-item-selected-border-top:var(--menu-item-border-top);--menu-item-selected-border-right:var(--menu-item-border-right);--menu-item-selected-border-bottom:var(--menu-item-border-bottom);--menu-item-selected-border-left:var(--menu-item-border-left);--menu-item-selected-radius: var(--menu-item-radius)}.sticky{position:sticky;top:0;z-index:10000}:root{--mobile-logo-margin: 0px;--mobile-logo-padding: 0px;--logo-margin: var(--mobile-logo-margin);--logo-padding: var(--mobile-logo-padding)}.display-block{display:block}.display-inline{display:inline}.display-inline-block{display:inline-block}.display-flex{display:flex}.display-inline-flex{display:inline-flex}.display-grid{display:grid}.display-inline-grid{display:inline-grid}.display-flow-root{display:flow-root}.display-none{display:none}.display-contents{display:contents}.display-block-flex{display:block flex}.display-block-flow{display:block flow}.display-block-flow-root{display:block flow-root}.display-block-grid{display:block grid}.display-inline-flex{display:inline flex}.display-inline-flow{display:inline flow}.display-inline-flow-root{display:inline flow-root}.display-inline-grid{display:inline grid}.display-table{display:table}.display-table-row{display:table-row}.display-list-item{display:list-item}.display-inherit{display:inherit}.display-initial{display:initial}.display-revert{display:revert}.display-revert-layer{display:revert-layer}.display-unset{display:unset}html,body,body>div{height:100%}body{display:flex;flex-direction:column}#defaultLayout{flex:1 0 auto}.fw{width:100% !important}.fh{height:100% !important}.flex-row{flex-direction:row !important}.flex-column{flex-direction:column !important}.flex-row-dynamic{flex-direction:column !important}.h0{height:0 !important}.h2{height:var(--fluid-2) !important}.h4{height:var(--fluid-4) !important}.h6{height:var(--fluid-6) !important}.h8{height:var(--fluid-8) !important}.h10{height:var(--fluid-10) !important}.h12{height:var(--fluid-12) !important}.h14{height:var(--fluid-14) !important}.h16{height:var(--fluid-16) !important}.h18{height:var(--fluid-18) !important}.h20{height:var(--fluid-20) !important}.h24{height:var(--fluid-24) !important}.h32{height:var(--fluid-32) !important}.h36{height:var(--fluid-36) !important}.h40{height:var(--fluid-40) !important}.h48{height:var(--fluid-48) !important}.h56{height:var(--fluid-56) !important}.h64{height:var(--fluid-64) !important}.h20p{height:20% !important}.h10p{height:10% !important}.h30p{height:30% !important}.h40p{height:40% !important}.h50p{height:50% !important}.h60p{height:60% !important}.h70p{height:70% !important}.h80p{height:80% !important}.h90p{height:90% !important}.h100p{height:100% !important}.h33p{height:33% !important}.h66p{height:66% !important}.h25p{height:25% !important}.h75p{height:75% !important}.h50p{height:50% !important}.w0{width:0 !important}.w2{width:var(--fluid-2) !important}.w4{width:var(--fluid-4) !important}.w6{width:var(--fluid-6) !important}.w8{width:var(--fluid-8) !important}.w10{width:var(--fluid-10) !important}.w12{width:var(--fluid-12) !important}.w14{width:var(--fluid-14) !important}.w16{width:var(--fluid-16) !important}.w18{width:var(--fluid-18) !important}.w20{width:var(--fluid-20) !important}.w24{width:var(--fluid-24) !important}.w32{width:var(--fluid-32) !important}.w36{width:var(--fluid-36) !important}.w40{width:var(--fluid-40) !important}.w48{width:var(--fluid-48) !important}.w56{width:var(--fluid-56) !important}.w64{width:var(--fluid-64) !important}.w10p{width:10% !important}.w20p{width:20% !important}.w30p{width:30% !important}.w40p{width:40% !important}.w50p{width:50% !important}.w60p{width:60% !important}.w70p{width:70% !important}.w80p{width:80% !important}.w90p{width:90% !important}.w100p{width:100% !important}.w33p{width:100% !important}.w66p{width:100% !important}.w25p{width:100% !important}.w45p{width:100% !important}.w75p{width:100% !important}.w50p{width:100% !important}@media(min-width: 960px){.flex-row-dynamic{flex-direction:row !important}.w33p{width:33% !important}.w66p{width:66% !important}.w25p{width:25% !important}.w75p{width:75% !important}.w50p{width:50% !important}.w10p{width:10% !important}.w20p{width:20% !important}.w30p{width:30% !important}.w40p{width:40% !important}.w50p{width:50% !important}.w60p{width:60% !important}.w70p{width:70% !important}.w80p{width:80% !important}.w90p{width:90% !important}.h33p{height:33% !important}.h66p{height:66% !important}.h25p{height:25% !important}.h75p{height:75% !important}.h50p{height:50% !important}}/*# sourceMappingURL=functional.css.map */
+@import "tailwindcss";
+
+@plugin 'flowbite/plugin';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary-50:  oklch(from var(--color-primary) 0.97 calc(c * 0.25) h);
+  --color-primary-100: oklch(from var(--color-primary) 0.94 calc(c * 0.35) h);
+  --color-primary-200: oklch(from var(--color-primary) 0.87 calc(c * 0.55) h);
+  --color-primary-300: oklch(from var(--color-primary) 0.79 calc(c * 0.70) h);
+  --color-primary-400: oklch(from var(--color-primary) 0.68 calc(c * 0.85) h);
+  --color-primary-500: oklch(from var(--color-primary) l c h);
+  --color-primary-600: oklch(from var(--color-primary) 0.46 c h);
+  --color-primary-700: oklch(from var(--color-primary) 0.39 calc(c * 0.95) h);
+  --color-primary-800: oklch(from var(--color-primary) 0.32 calc(c * 0.85) h);
+  --color-primary-900: oklch(from var(--color-primary) 0.24 calc(c * 0.70) h);
+  
+   --color-secondary-50:  oklch(from var(--color-secondary) 0.97 calc(c * 0.25) h);
+  --color-secondary-100: oklch(from var(--color-secondary) 0.94 calc(c * 0.35) h);
+  --color-secondary-200: oklch(from var(--color-secondary) 0.87 calc(c * 0.55) h);
+  --color-secondary-300: oklch(from var(--color-secondary) 0.79 calc(c * 0.70) h);
+  --color-secondary-400: oklch(from var(--color-secondary) 0.68 calc(c * 0.85) h);
+  --color-secondary-500: oklch(from var(--color-secondary) l c h);
+  --color-secondary-600: oklch(from var(--color-secondary) 0.46 c h);
+  --color-secondary-700: oklch(from var(--color-secondary) 0.39 calc(c * 0.95) h);
+  --color-secondary-800: oklch(from var(--color-secondary) 0.32 calc(c * 0.85) h);
+  --color-secondary-900: oklch(from var(--color-secondary) 0.24 calc(c * 0.70) h);
+}
+
+@source "../dist";
+@source "../src";
+@source "../node_modules/flowbite-svelte/dist";
+@source "../node_modules/flowbite-svelte-icons/dist";
+
+@layer base {
+  /* disable chrome cancel button */
+  input[type="search"]::-webkit-search-cancel-button {
+    display: none;
+  }
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}

package/dist/auth/getMachineAccessToken.d.ts

@@ -1,3 +1,3 @@
-export declare const createMachineTokenApprovedLocals: (scope?: string) => Promise<{
+export declare const createMachineTokenApprovedLocals: (AUTH_KEYCLOAK_ID: string, AUTH_KEYCLOAK_SECRET: string, AUTH_KEYCLOAK_ISSUER: string, scope?: string) => Promise<{
     token: any;
 }>;

package/dist/auth/getMachineAccessToken.js

@@ -1,5 +1,4 @@
-import { AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER } from '$env/static/private';
-export const createMachineTokenApprovedLocals = async (scope = '') => {
+export const createMachineTokenApprovedLocals = async (AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER, scope = '') => {
     const url = `${AUTH_KEYCLOAK_ISSUER}/protocol/openid-connect/token`;
     const body = new URLSearchParams({
         grant_type: "client_credentials",

package/dist/auth/machineAuthenticationProvider.d.ts

@@ -1,5 +1,5 @@
 import type { Token } from './types.js';
-export declare const machineAuthenticationProvider: (scope?: string, redirectPath?: string) => {
+export declare const machineAuthenticationProvider: (AUTH_KEYCLOAK_ID: string, AUTH_KEYCLOAK_SECRET: string, AUTH_KEYCLOAK_ISSUER: string, scope?: string, redirectPath?: string) => {
     getAuthIdentity: (domain: string) => Promise<any>;
     getValidation: (event: any) => Promise<Token>;
     getUser: (token: Token) => Promise<any>;

package/dist/auth/machineAuthenticationProvider.js

@@ -1,4 +1,3 @@
-import { AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER } from '$env/static/private';
 const getKeycloakIdentity = async (issuer, client_id, scope, redirectUrl) => {
     const headers = new Headers();
     headers.append('Location', '/auth/validate');
@@ -48,7 +47,7 @@ const getUser = async (issuer, token) => {
         });
     }
 };
-export const machineAuthenticationProvider = (scope = '', redirectPath = '/') => {
+export const machineAuthenticationProvider = (AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER, scope = '', redirectPath = '/') => {
     const extendedScope = `openid profile offline_access ${scope}`;
     const redirectUrl = "/auth/validate";
     return {

package/dist/auth/tokenRefresh.d.ts

@@ -1,3 +1,3 @@
 import { type Handle } from '@sveltejs/kit';
 import type { ISessionStorage } from './types.js';
-export declare const tokenRefreshHandle: (sessionProvider: ISessionStorage) => Handle;
+export declare const tokenRefreshHandle: (sessionProvider: ISessionStorage, AUTH_KEYCLOAK_ID: string, AUTH_KEYCLOAK_SECRET: string, AUTH_KEYCLOAK_ISSUER: string) => Handle;

package/dist/auth/tokenRefresh.js

@@ -1,5 +1,4 @@
 import {} from '@sveltejs/kit';
-import { AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER } from '$env/static/private';
 const authSessionCookieName = `auth_session`;
 function isTokenExpired(token) {
     const base64Url = token.split(".")[1];
@@ -14,8 +13,8 @@ function isTokenExpired(token) {
     const expired = Date.now() >= exp * 1000;
     return expired;
 }
-async function refreshToken(clientId, clientSecret, refresh_token) {
-    const response = await fetch(`${AUTH_KEYCLOAK_ISSUER}/protocol/openid-connect/token`, {
+async function refreshToken(clientId, clientSecret, issuer, refresh_token) {
+    const response = await fetch(`${issuer}/protocol/openid-connect/token`, {
         method: "POST",
         body: new URLSearchParams({
             grant_type: "refresh_token",
@@ -31,13 +30,13 @@ async function refreshToken(clientId, clientSecret, refresh_token) {
     const newToken = await response.json();
     return newToken;
 }
-export const tokenRefreshHandle = (sessionProvider) => {
+export const tokenRefreshHandle = (sessionProvider, AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER) => {
     return async ({ event, resolve }) => {
         const locals = event.locals;
         if (locals?.token?.refresh_token) {
             const isExpired = isTokenExpired(locals.token.access_token);
             if (isExpired) {
-                const newToken = await refreshToken(AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, locals.token.refresh_token);
+                const newToken = await refreshToken(AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER, locals.token.refresh_token);
                 locals.token = newToken;
                 const sid = event.cookies.get(authSessionCookieName);
                 sessionProvider.updateSession(sid, locals, newToken.expires_in);

package/dist/auth/types.js

@@ -1,10 +1,6 @@
 export class Token {
-    access_token = "";
-    expires_in = 0;
-    id_token;
-    refresh_expires_in;
-    refresh_token;
-    scope;
-    session_state;
-    token_type;
+    constructor() {
+        this.access_token = "";
+        this.expires_in = 0;
+    }
 }

package/dist/auth/userAuthenticationProvider.d.ts

@@ -1,5 +1,5 @@
 import type { Token } from './types.js';
-export declare const userAuthenticationProvider: (scope?: string, redirectPath?: string) => {
+export declare const userAuthenticationProvider: (AUTH_KEYCLOAK_ID: string, AUTH_KEYCLOAK_ISSUER: string, scope?: string, redirectPath?: string) => {
     getAuthIdentity: (domain: string) => Promise<any>;
     getValidation: (event: any) => Promise<Token>;
     getUser: (token: Token) => Promise<any>;

package/dist/auth/userAuthenticationProvider.js

@@ -1,4 +1,3 @@
-import { AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_ISSUER } from '$env/static/private';
 import * as o from "oauth4webapi";
 const authStateCookieName = 'auth_state';
 const stateIdGenerator = () => crypto.randomUUID();
@@ -76,7 +75,7 @@ const getUser = async (issuer, token) => {
         });
     }
 };
-export const userAuthenticationProvider = (scope = '', redirectPath = '/') => {
+export const userAuthenticationProvider = (AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_ISSUER, scope = '', redirectPath = '/') => {
     const extendedScope = `openid profile offline_access ${scope}`;
     const redirectUrl = "/auth/validate";
     return {

package/dist/components/Icon.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import * as FlowbiteIcons from "flowbite-svelte-icons"
+    import { IconSize } from "./icons.js";
+
+    interface Props {
+        icon?: string;
+        size?: IconSize;
+        class?: string;
+    }
+    let { icon, size = IconSize.Medium, class: className = '' } : Props = $props();
+</script>
+
+{#if icon != undefined}
+{@const Component = FlowbiteIcons[icon]}
+<Component class={`${className} ${size}`} />
+{/if}

package/dist/components/Icon.svelte.d.ts

@@ -0,0 +1,9 @@
+import { IconSize } from "./icons.js";
+interface Props {
+    icon?: string;
+    size?: IconSize;
+    class?: string;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/content/Markdown.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { marked } from 'marked';
 
 	/** @type {{ data: import('./$types').PageData }} */
@@ -7,4 +7,4 @@
     const code = $derived(marked.parse(source));
 </script>
 
-{@html code}
+{@html code} -->

package/dist/components/content/Markdown.svelte.d.ts

@@ -1,5 +1,18 @@
-declare const Markdown: import("svelte").Component<{
-    source?: any;
-}, {}, "source">;
-type Markdown = ReturnType<typeof Markdown>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Markdown: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Markdown = InstanceType<typeof Markdown>;
 export default Markdown;

package/dist/components/form/Dropzone.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { displaySize, type FileDropZoneProps, type FileRejectedReason } from './dropzone.js';
-	import { cn } from '../../utils.js';
 
 	let {
 		id,
@@ -15,6 +14,7 @@
 		class: css,
 		...rest
 	}: FileDropZoneProps = $props();
+	
 
 	if (maxFiles !== undefined && fileCount === undefined) {
 		console.warn(
@@ -122,10 +122,7 @@
 	ondrop={drop}
 	for={id}
 	aria-disabled={!canUploadFiles}
-	class={cn(
-		'flex h-48 w-full place-items-center justify-center rounded-lg border-2 border-dashed border-border p-6 transition-all hover:cursor-pointer hover:bg-accent/25 aria-disabled:opacity-50 aria-disabled:hover:cursor-not-allowed',
-		className
-	)}
+	class=''
 >
 	{#if children}
 		{@render children()}

package/dist/components/form/SmartForm.svelte

@@ -1,104 +1,250 @@
 <script lang="ts">
-	import Input from './Input.svelte';
-	import { type Field, FieldType, InputType, SubmitResult} from './form.js';
+	import {
+		type Field,
+		type SelectField,
+		type CollectionField,
+		type TextareaField,
+		type FieldType,
+		type InputField,
+		type FilePickerField,
+		type PhoneInputField,
+		type TimePickerField,
+		SubmitResult,
+		type ButtonConfig
+	} from './form.js';
+	import {
+		Button,
+		Label,
+		Fileupload,
+		Select,
+		MultiSelect,
+		Textarea,
+		Toggle,
+		Input,
+		FloatingLabelInput,
+		Timepicker,
+		PhoneInput
+	} from 'flowbite-svelte';
 	import { fade } from 'svelte/transition';
 
 	interface Props {
 		action: string;
 		css?: string;
 		successMessage?: string;
-		submitButonText?: string;
 		fields?: Array<Field>;
 		onMessageSubmitted?: (result: SubmitResult) => void;
+		buttons: Array<ButtonConfig>;
 	}
 
 	let {
 		action,
 		fields = [],
 		css = '',
-		submitButonText = 'Submit',
 		successMessage,
 		onMessageSubmitted,
+		buttons = [
+			{
+				label: 'Submit',
+				type: 'submit',
+				action: undefined
+			}
+		]
 	}: Props = $props();
 
-	let form: any;
+	let form: HTMLFormElement;
 	let showMessage = $state(false);
 	let isSendingMessage = $state(false);
+	let loading = $state(false);
 
-	const submitContactForm = async (event: Event) => {
+	const handleSubmit = async (event: Event) => {
+		event.preventDefault();
+		console.log('Submitting form to:', action);
+		loading = true;
 		try {
-			if (isSendingMessage) {
-				return;
+			if (!isSendingMessage) {
+				isSendingMessage = true;
+				const formData = new FormData(form);
+				const response = await fetch(action, {
+					method: 'POST',
+					body: formData
+				});
+				showMessage = response.status === 200;
+				onMessageSubmitted?.(showMessage ? SubmitResult.Success : SubmitResult.Error);
+				setTimeout(() => {
+					showMessage = false;
+				}, 3000);
 			}
-			isSendingMessage = true;
-			event.preventDefault();
-			const formData = new FormData(form);
-			const response = await fetch(action, {
-				method: 'POST',
-				body: formData
-			});
-			showMessage = response.status === 200;
-			onMessageSubmitted?.(showMessage ? SubmitResult.Success : SubmitResult.Error);
-			isSendingMessage = false;
 		} catch (error) {
 			console.error('Error submitting form:', error);
+		} finally {
+			isSendingMessage = false;
 		}
+		loading = false;
 	};
 </script>
 
+{#snippet renderInput(field: InputField)}
+	{#if field.isFloat}
+		<FloatingLabelInput
+			id={field.id}
+			name={field.id}
+			required={field.required}
+			readonly={field.readonly}
+			disabled={field.disabled}
+			class={field.class}
+			size={field.size == 'sm' ? 'small' : 'default'}
+			type={field.type}
+			variant={field.floatVariant}
+			placeholder={field.placeholder}
+		>
+			{field.label}
+		</FloatingLabelInput>
+	{:else}
+		<Label for={field.id} class={field.labelClass}>{field.label}</Label>
+		<Input
+			id={field.id}
+			name={field.id}
+			required={field.required}
+			readonly={field.readonly}
+			disabled={field.disabled}
+			class={field.class}
+			size={field.size}
+			type={field.type}
+			placeholder={field.placeholder}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet renderTextarea(field: TextareaField)}
+	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
+	<Textarea
+		id={field.id}
+		name={field.id}
+		required={field.required}
+		readonly={field.readonly}
+		disabled={field.disabled}
+		class={field.class}
+		label={field.label}
+		rows={field.rows}
+		cols={field.cols}
+		placeholder={field.placeholder}
+	/>
+{/snippet}
+
+{#snippet renderSelect(field: SelectField)}
+	<Label class={field.labelClass}
+		>{field.label}
+		{#if field.type === 'single'}
+			<Select
+				id={field.id}
+				name={field.id}
+				required={field.required}
+				readonly={field.readonly}
+				disabled={field.disabled}
+				class={field.class}
+				items={field.options}
+				bind:value={field.value}
+			/>
+		{:else}
+			<MultiSelect class={field.class} items={field.options} bind:value={field.value} />
+		{/if}
+	</Label>
+{/snippet}
+
+{#snippet renderCollection(field: CollectionField)}
+	{#if field.type === 'checkbox'}{:else if field.type === 'radio'}{:else if field.type === 'toggle'}
+		<Toggle
+			id={field.id}
+			name={field.id}
+			required={field.required}
+			readonly={field.readonly}
+			disabled={field.disabled}
+			class={field.class}
+			checked={field.checked}
+		>
+			{field.label}
+		</Toggle>
+	{/if}
+{/snippet}
+
+{#snippet renderFile(field: FilePickerField)}
+	<Label class={field.labelClass}>{field.label}</Label>
+	<Fileupload
+		id={field.id}
+		name={field.id}
+		required={field.required}
+		readonly={field.readonly}
+		disabled={field.disabled}
+		class={field.class}
+	/>
+{/snippet}
+
+{#snippet renderPhoneInput(field: PhoneInputField)}
+	<PhoneInput
+		id={field.id}
+		name={field.id}
+		required={field.required}
+		readonly={field.readonly}
+		disabled={field.disabled}
+		class={field.class}
+		size={field.size}
+		placeholder={field.placeholder}
+	/>
+{/snippet}
+
+{#snippet renderTimePicker(field: TimePickerField)}
+	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
+	<Timepicker id={field.id} required={field.required} disabled={field.disabled} />
+{/snippet}
+
 {#if showMessage}
 	<div class="alert alert-success" transition:fade={{ duration: 2000 }}>
 		{successMessage}
 	</div>
 {:else}
-	<form method="POST" bind:this={form} class={css}>
+	<form method="POST" {action} class={css} bind:this={form}>
 		<fieldset>
 			{#each fields as field}
-				{#if field.type === FieldType.Input}
-					<Input
-						name={field.name}
-						id={field.name}
-						label={field.label}
-						placeholder={field.placeholder}
-						type={field.subType}
-						isRequired={field.isRequired || false}
-					/>
-				{:else if field.type === FieldType.Textarea}
-					<Input
-						name={field.name}
-						id={field.name}
-						label={field.label}
-						type={InputType.Textarea}
-						placeholder={field.placeholder}
-						isRequired={field.isRequired || false}
-					/>
-				{:else if field.type === FieldType.Radio}
-					{#each field.options as option}
-						<label>
-							{#if option.checked}
-								<input type="radio" name={field.name} value={option.value} required={field.isRequired} checked/>
-							{:else}
-								<input type="radio" name={field.name} value={option.value} required={field.isRequired}/>
-							{/if}
-							{option.label}
-						</label> 	
-					{/each}
-				{:else if field.type === FieldType.Checkbox}
-					{#each field.options as option}
-						<label>
-							{#if option.checked}
-							<input type="checkbox" name={field.name} value={option.value} required={field.isRequired} checked/>
-							{:else}
-							<input type="checkbox" name={field.name} value={option.value} required={field.isRequired} />
-							{/if}
-							{option.label}
-						</label>
-					{/each}
+				{#if field.typeOfField === 'input'}
+					{@render renderInput(field)}
+				{:else if field.typeOfField === 'textarea'}
+					{@render renderTextarea(field)}
+				{:else if field.typeOfField === 'select'}
+					{@render renderSelect(field)}
+				{:else if field.typeOfField === 'collection'}
+					{@render renderCollection(field)}
+				{:else if field.typeOfField === 'file'}
+					{@render renderFile(field)}
+				{:else if field.typeOfField === 'phoneInput'}
+					{@render renderPhoneInput(field)}
+				{:else if field.typeOfField === 'timepicker'}
+					{@render renderTimePicker(field)}
 				{/if}
 			{/each}
 
 			<div class="buttons">
-				<button onclick={submitContactForm} class="btn btn-primary">{submitButonText}</button>
+				{#each buttons as button}
+					{#if button.type === 'submit'}
+						<Button
+							type="button"
+							class={button.class}
+							color={button.color}
+							onclick={handleSubmit}
+							{loading}
+						>
+							{button.label}
+						</Button>
+					{:else}
+						<Button
+							type={button.type}
+							class={button.class}
+							color={button.color}
+							onclick={button.action}
+						>
+							{button.label}
+						</Button>
+					{/if}
+				{/each}
 			</div>
 		</fieldset>
 	</form>

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

@@ -1,11 +1,11 @@
-import { type Field, SubmitResult } from './form.js';
+import { type Field, SubmitResult, type ButtonConfig } from './form.js';
 interface Props {
     action: string;
     css?: string;
     successMessage?: string;
-    submitButonText?: string;
     fields?: Array<Field>;
     onMessageSubmitted?: (result: SubmitResult) => void;
+    buttons: Array<ButtonConfig>;
 }
 declare const SmartForm: import("svelte").Component<Props, {}, "">;
 type SmartForm = ReturnType<typeof SmartForm>;