winduum 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +4 -4
  2. package/dist/main.css +1 -1
  3. package/dist/tailwind.css +1 -1
  4. package/package.json +3 -5
  5. package/src/base/index.css +8 -0
  6. package/src/base/tailwind/utilities.css +1 -1
  7. package/src/components/+.css +0 -3
  8. package/src/components/Dialog.css +18 -0
  9. package/src/components/Field.css +0 -22
  10. package/src/libraries/+.css +1 -2
  11. package/src/libraries/Dialog.css +33 -0
  12. package/src/libraries/Dialog.js +88 -0
  13. package/src/libraries/Ripple.css +11 -0
  14. package/src/libraries/Ripple.js +27 -0
  15. package/src/main.css +1 -8
  16. package/utils/tailwind.cjs +1 -1
  17. package/utils/tailwind.js +1 -1
  18. package/src/components/Drawer.css +0 -3
  19. package/src/components/Dropdown.css +0 -3
  20. package/src/components/Table.css +0 -3
  21. package/src/libraries/Hint.css +0 -3
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  <p align="center">
2
- <a href="https://stackblitz.com/github/vituum/winduum/tree/main" target="_blank" rel="noopener noreferrer">
3
- <img width="180" src="https://raw.githubusercontent.com/vituum/winduum/main/logo.svg" alt="Logo">
2
+ <a href="https://stackblitz.com/github/winduum/winduum/tree/main" target="_blank" rel="noopener noreferrer">
3
+ <img width="180" src="https://raw.githubusercontent.com/winduum/winduum/main/logo.svg" alt="Logo">
4
4
  </a>
5
5
  </p>
6
6
  <p align="center">
@@ -12,7 +12,7 @@
12
12
 
13
13
  > Still in very-early development.
14
14
 
15
- Modern, modular, lightweight CSS component framework build on top of **Tailwind**
15
+ Modern, modular, small CSS component framework build on top of **TailwindCSS**
16
16
 
17
17
  - 💡 Modern
18
18
  - 📦 Modular
@@ -22,4 +22,4 @@ Modern, modular, lightweight CSS component framework build on top of **Tailwind*
22
22
  It's a mix of words **Tailwind** _(Popular CSS utility framework)_ and **Tuum** _(Estonian word for "core")_.<br>
23
23
 
24
24
  Winduum approach to **Tailwind** is little different. It encourages to write components in CSS or other (pre/post)-processors.
25
- And to use Tailwind only for utility classes to enhance the components. It also leverages the use of CSS properties as much possible.<br>
25
+ And to use TailwindCSS only for utility classes to enhance the components. It also leverages the use of CSS properties as much possible.
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- *:where(:not(html,iframe,canvas,img,svg,video,audio,svg *,symbol *,ol,ul)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}:where(ol:not([type]),ul,menu){list-style:none}img{max-width:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}::-moz-placeholder{color:unset}::placeholder{color:unset}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(html){cursor:default;color:rgb(var(--color-default))}:where(input,textarea){cursor:text}:where(a[href],button){cursor:pointer}:where(svg,use,path,symbol){all:revert-layer}::-moz-selection{color:rgb(var(--color-light));background-color:rgb(var(--color-accent))}::selection{color:rgb(var(--color-light));background-color:rgb(var(--color-accent))}:where(*){outline:none;-webkit-tap-highlight-color:rgb(255 255 255 / 0)}:where([hidden]){display:none}:where(svg){stroke-width:1.5}:where(hr){display:block;border-top:2px solid rgb(var(--color-current) / var(--tw-border-opacity, 1));border-radius:var(--rounded)}:root{--font-default: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-primary: var(--font-default);--font-secondary: var(--font-default);--color-google: 49 45 45;--color-linkedin: 40 103 178;--color-youtube: 255 0 0;--color-instagram: 193 53 132;--color-twitter: 29 161 242;--color-facebook: 24 119 242;--color-apple: 0 0 0;--container-width: 80rem;--container-width-sm: 58rem;--container-padding: 5vw;--container-padding-calc: max(calc(50vw - (var(--container-width) / 2) + var(--container-padding)), var(--container-padding));--font-bold: 700;--font-semibold: 600;--font-medium: 500;--font-normal: 400;--font-light: 300;--font-thin: 200;--z-10: 10;--z-20: 20;--z-30: 30;--z-40: 40;--z-50: 50;--rounded: .75rem;--rounded-xs: .5rem;--rounded-sm: .875rem;--rounded-base: 1rem;--rounded-md: 1.125rem;--rounded-lg: 1.5rem;--rounded-xl: 3rem;--rounded-2xl: 6rem;--rounded-3xl: 8rem;--rounded-full: 9999px;--spacing-xs: .5rem;--spacing-sm: .875rem;--spacing-base: 1rem;--spacing-md: 1.125rem;--spacing-lg: 1.5rem;--spacing-xl: 3rem;--spacing-2xl: 6rem;--spacing-3xl: 8rem;--transition-duration: .15s;--transition-color: color var(--transition-duration) ease;--transition-background: background var(--transition-duration) ease;--transition-opacity: opacity var(--transition-duration) ease;--transition-transform: transform var(--transition-duration) ease;--transition-border: border-color var(--transition-duration) ease;--transition-shadow: box-shadow var(--transition-duration) ease}@media (prefers-reduced-motion){:root{--transition-duration: 0}}:root{--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;--icon-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;--icon-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>') no-repeat 50% 50% / contain;--icon-chevron-left: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>') no-repeat 50% 50% / contain;--icon-angle-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" /></svg>') no-repeat 50% 50% / contain;--icon-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain;--icon-upload: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>') no-repeat 50% 50% / contain}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes move-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-5rem)}to{opacity:1;transform:none}}@keyframes fade-in-right{0%{opacity:0;transform:translate(5rem)}to{opacity:1;transform:none}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out-left{0%{opacity:1;transform:none}to{opacity:0;transform:translate(-5rem)}}@keyframes fade-out-right{0%{opacity:1;transform:none}to{opacity:0;transform:translate(5rem)}}@keyframes fade-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2rem)}}@keyframes fade-out-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(2rem)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes ripple{to{transform:scale(2.5);opacity:0}}@keyframes loading-skeleton{to{background-position:250% 0}}:root{--color-accent: var(--color-primary);--color-current: var(--color-default);--color-default: 17 19 21;--color-primary: 3 138 255;--color-secondary: 69 71 72;--color-light: 255 255 255;--color-dark: 17 19 21;--color-success: 33 154 67;--color-error: 254 50 75;--color-warning: 254 179 53;--color-info: 45 168 234;--color-background: 255 255 255;--color-background-100: 249 250 252;--color-background-200: 235 235 235;--color-background-300: 225 225 225}:root.dark{--color-default: 201 209 217;--color-invert: 14 17 22;--color-secondary: 39 41 46;--color-background: 25 26 27;--color-background-100: 14 15 16;--color-background-200: 26 32 38;--color-background-300: 30 36 46}:where(.ui-badge){--color-current: var(--color-light);--ui-badge-width: max-content;--ui-badge-height: 1.5rem;--ui-badge-py: 0;--ui-badge-px: .5rem;--ui-badge-border-radius: var(--rounded-xs);--ui-badge-font-size: .75rem;--ui-badge-font-weight: var(--font-normal);--ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));--ui-badge-bg-opacity: var(--tw-bg-opacity, 1);--ui-badge-color: rgb(var(--color-current) / var(--ui-badge-color-opacity));--ui-badge-color-opacity: var(--tw-text-opacity, 1);--ui-badge-outline-width: 1px;--ui-badge-outline-opacity: .75;--ui-badge-icon-font-size: .875rem;--ui-badge-gap: .25rem;--ui-badge-focus-opacity: .3;--ui-badge-hover-opacity: .8;width:var(--ui-badge-width);height:var(--ui-badge-height);padding:var(--ui-badge-py) var(--ui-badge-px);border-radius:var(--ui-badge-border-radius);font-size:var(--ui-badge-font-size);font-weight:var(--ui-badge-font-weight);background-color:var(--ui-badge-bg);color:var(--ui-badge-color);display:inline-flex;align-items:center;text-align:center;justify-content:center;white-space:nowrap;flex-shrink:0;position:relative;z-index:0;gap:var(--ui-badge-gap);transition:var(--transition-opacity)}:where(.ui-badge) :where(svg){width:1em;height:1em;font-size:var(--ui-badge-icon-font-size)}:where(.ui-badge):where(.is-sm){--ui-badge-height: 1.25rem;--ui-badge-font-size: .625rem}:where(.ui-badge):where(.is-lg){--ui-badge-height: 1.75rem}:where(.ui-badge):where(.is-outline){outline:var(--ui-badge-outline-width) solid rgb(var(--color-accent) / var(--ui-badge-outline-opacity));outline-offset:calc(var(--ui-badge-outline-width) * -1)}:where(.ui-badge):where(.is-outline,.is-muted){--color-current: var(--color-accent);--ui-badge-bg: transparent}:where(.ui-badge):where(.is-muted){background-color:rgb(var(--color-current) / .1)}:where(.ui-badge):where(.is-square,.is-circle){--ui-badge-px: var(--ui-badge-py);--ui-badge-width: var(--ui-badge-height)}:where(.ui-badge):where(.is-circle){--ui-badge-border-radius: var(--rounded-full)}@media (hover: hover) and (pointer: fine){:where(.ui-badge):where([href],button):hover{opacity:var(--ui-badge-hover-opacity)}}:where(.ui-badge):where([href],button):focus-visible{z-index:2;box-shadow:0 0 0 0 rgb(var(--color-current)),0 0 0 max(2px,var(--ui-badge-outline-width)) rgb(var(--color-accent) / var(--ui-badge-focus-opacity))}:where(.ui-badge-group){display:flex}:where(.ui-badge-group) :where(.ui-badge):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(var(--ui-badge-outline-width) * -1)}:where(.ui-badge-group) :where(.ui-badge):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-btn){--color-current: var(--color-light);--ui-btn-width: max-content;--ui-btn-height: 2.25rem;--ui-btn-py: .375rem;--ui-btn-px: .75rem;--ui-btn-border-radius: var(--rounded);--ui-btn-font-size: .875rem;--ui-btn-font-weight: var(--font-medium);--ui-btn-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));--ui-btn-bg-opacity: var(--tw-bg-opacity, 1);--ui-btn-color: rgb(var(--color-current) / var(--ui-btn-color-opacity));--ui-btn-color-opacity: var(--tw-text-opacity, 1);--ui-btn-hover-filter: invert(1);--ui-btn-hover-opacity: .2;--ui-btn-focus-opacity: .3;--ui-btn-disabled-opacity: .7;--ui-btn-outline-width: 2px;--ui-btn-outline-opacity: .5;--ui-btn-icon-font-size: 1.25rem;--ui-btn-gap: .375rem;--ui-btn-loading-width: 1rem;--ui-btn-loading-border-width: 2px;width:var(--ui-btn-width);height:var(--ui-btn-height);padding:var(--ui-btn-py) var(--ui-btn-px);border-radius:var(--ui-btn-border-radius);font-size:var(--ui-btn-font-size);font-weight:var(--ui-btn-font-weight);background-color:var(--ui-btn-bg);color:var(--ui-btn-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;display:inline-flex;align-items:center;text-align:center;justify-content:center;white-space:nowrap;flex-shrink:0;position:relative;z-index:0;transition:var(--transition-opacity),var(--transition-background),var(--transition-color),var(--transition-shadow);gap:var(--ui-btn-gap)}:where(.ui-btn):before{content:"";position:absolute;inset:0;background-color:rgb(var(--color-current));filter:var(--ui-btn-hover-filter);z-index:-1;opacity:0;transition:var(--transition-opacity)}:where(.ui-btn) :where(svg){width:1em;height:1em;font-size:var(--ui-btn-icon-font-size)}:where(.ui-btn):where(.is-sm){--ui-btn-height: 2rem;--ui-btn-px: 1rem}:where(.ui-btn):where(.is-lg){--ui-btn-height: 3rem;--ui-btn-px: 1.75rem}:where(.ui-btn):where(.is-loading){pointer-events:none;color:transparent!important}:where(.ui-btn):where(.is-loading)>*{opacity:0}:where(.ui-btn):where(.is-loading):after{z-index:1;width:var(--ui-btn-loading-width);height:var(--ui-btn-loading-width);content:"";border:var(--ui-btn-loading-border-width) solid rgb(var(--color-current));border-right-color:transparent;border-radius:50%;animation:spin .45s infinite linear;position:absolute;margin-left:calc(var(--ui-btn-loading-width) / 2 * -1);margin-top:calc(var(--ui-btn-loading-width) / 2 * -1);left:50%;top:50%}:where(.ui-btn):where(.is-wide){padding-left:calc(var(--ui-btn-px) * 2);padding-right:calc(var(--ui-btn-px) * 2)}:where(.ui-btn):where(.is-outline,.is-muted,.is-text){--color-current: var(--color-accent);--ui-btn-hover-opacity: .1;--ui-btn-hover-filter: none;background-color:transparent}:where(.ui-btn):where(.is-outline,.is-muted,.is-text):before{background-color:var(--ui-btn-bg)}:where(.ui-btn):where(.is-outline){--ui-btn-focus-opacity: .15;outline:var(--ui-btn-outline-width) solid rgb(var(--color-accent) / var(--ui-btn-outline-opacity));outline-offset:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn):where(.is-outline-gradient){--ui-btn-focus-opacity: .15;--color-accent: var(--color-default);--color-current: var(--color-accent)}.is-loading.is-hover-fill:where(.ui-btn):where(.is-outline-gradient){--color-current: var(--color-light)}:where(.ui-btn):where(.is-outline-gradient):not(.is-loading):after{content:"";position:absolute;background-color:rgb(var(--color-background));inset:var(--ui-btn-outline-width);border-radius:calc(var(--ui-btn-border-radius) / 1.25);z-index:-1;transition:var(--transition-opacity)}:where(.ui-btn):where(.is-muted){--ui-btn-hover-opacity: .3}:where(.ui-btn):where(.is-muted):before{opacity:.1}:where(.ui-btn):where(.is-raised){--ui-btn-outline-opacity: .15;outline:var(--ui-btn-outline-width) solid rgb(var(--color-current) / var(--ui-btn-outline-opacity));outline-offset:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn):where(.is-square,.is-circle){--ui-btn-py: var(--ui-btn-py);--ui-btn-width: var(--ui-btn-height)}:where(.ui-btn):where(.is-circle){--ui-btn-border-radius: var(--rounded-full)}:where(.ui-btn):where(.is-hover-fill){--ui-btn-hover-opacity: 1}@media (hover: hover) and (pointer: fine){:where(.ui-btn):not(:disabled):hover:before{opacity:var(--ui-btn-hover-opacity)}.is-hover-fill:where(.ui-btn):not(:disabled):hover{--color-current: var(--color-light)}.is-outline-gradient:where(.ui-btn):not(:disabled):hover:before,.is-outline-gradient:where(.ui-btn):not(:disabled):hover:after{opacity:0}}:where(.ui-btn):is(:not(:disabled):active,.is-active):before{opacity:var(--ui-btn-hover-opacity)}.is-outline-gradient:where(.ui-btn):is(:not(:disabled):active,.is-active):before,.is-outline-gradient:where(.ui-btn):is(:not(:disabled):active,.is-active):after{opacity:0}.is-hover-fill:where(.ui-btn):is(:not(:disabled):active,.is-active){--color-current: var(--color-light)}:where(.ui-btn):focus-visible{z-index:2;box-shadow:0 0 0 0 rgb(var(--color-current)),0 0 0 max(2px,var(--ui-btn-outline-width)) rgb(var(--color-accent) / var(--ui-btn-focus-opacity))}:where(.ui-btn):disabled{opacity:var(--ui-btn-disabled-opacity);cursor:not-allowed}:where(.ui-btn-group){display:flex}:where(.ui-btn-group) :where(.ui-btn):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn-group) :where(.ui-btn):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-checkbox,.ui-radio){--ui-checkbox-width: 1.375rem;--ui-checkbox-font-size: .875rem;--ui-checkbox-gap: .625rem;--ui-checkbox-bg-raw: var(--color-background);--ui-checkbox-bg-opacity: .1;--ui-checkbox-border-color-raw: var(--color-current);--ui-checkbox-border-color-opacity: .2;--ui-checkbox-checked-bg-raw: var(--color-accent);--ui-checkbox-radius: .5rem;--ui-checkbox-icon: var(--icon-check);--ui-checkbox-icon-font-size: 1.125rem;--ui-checkbox-validity-font-size: .875rem;--ui-checkbox-validity-offset: .375rem;--ui-checkbox-box-shadow: none;display:flex;align-items:center;gap:0 var(--ui-checkbox-gap);flex-wrap:wrap;width:-moz-max-content;width:max-content;font-size:var(--ui-checkbox-font-size)}:where(.ui-checkbox,.ui-radio) :where(label[for],input){cursor:pointer}:where(.ui-checkbox,.ui-radio) a{color:rgb(var(--color-accent));text-decoration:underline}:where(.ui-checkbox,.ui-radio) input{--color-current: var(--color-light);display:flex;width:var(--ui-checkbox-width);height:var(--ui-checkbox-width);background-color:rgb(var(--ui-checkbox-bg-raw) / var(--tw-bg-opacity, var(--ui-checkbox-bg-opacity)));border:1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--tw-border-opacity, var(--ui-checkbox-border-color-opacity)));border-radius:var(--ui-checkbox-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;transition:var(--transition-border),var(--transition-background),var(--transition-shadow);box-shadow:var(--ui-checkbox-box-shadow);font-size:var(--ui-checkbox-icon-font-size)}:where(.ui-checkbox,.ui-radio) input:before{line-height:var(--ui-checkbox-icon-font-size);text-indent:0;display:block;transition:var(--transition-color),var(--transition-opacity),var(--transition-transform);color:rgb(var(--color-current));content:"";background-color:currentColor;-webkit-mask:var(--ui-checkbox-icon);mask:var(--ui-checkbox-icon);opacity:0;transform:scale(0);will-change:transform;width:1em;height:1em}:is(:where(.ui-checkbox,.ui-radio) input:where(:required))+*:after{color:rgb(var(--color-error));content:" *"}:where(.ui-checkbox,.ui-radio) input:is(:hover,:focus-visible){--ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);--ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);--tw-border-opacity: .75;--tw-bg-opacity: .1}:where(.ui-checkbox,.ui-radio) input:focus{--ui-checkbox-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-checkbox,.ui-radio) input:checked{--tw-border-opacity: 0;background-color:rgb(var(--ui-checkbox-checked-bg-raw))}:where(.ui-checkbox,.ui-radio) input:checked:before{opacity:1;transform:scale(1)}.is-invalid:where(.ui-checkbox,.ui-radio),.is-validated :where(.ui-checkbox,.ui-radio) :where(input):invalid{--ui-checkbox-bg-raw: var(--color-error);--ui-checkbox-border-color-raw: var(--color-error);--ui-checkbox-checked-bg-raw: var(--color-error);--color-current: var(--color-error);--tw-border-opacity: 1}:where(.ui-heading){--ui-heading-font-family: var(--font-primary);--ui-heading-font-weight: var(--font-semibold);--ui-heading-font-size: 1.25rem;--ui-heading-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));--ui-heading-line-height-ratio: .375rem;font-family:var(--ui-heading-font-family);font-size:var(--ui-heading-font-size);line-height:var(--ui-heading-line-height);font-weight:var(--ui-heading-font-weight)}:where(.ui-heading):where(.is-sm){--ui-heading-font-size: 1.125rem;--ui-heading-line-height-ratio: .125rem}:where(.ui-heading):where(.is-lg){--ui-heading-font-size: 1.875rem}:where(.ui-image){--ui-image-bg: rgb(var(--color-background-200));--ui-image-border-radius: 0;position:relative;display:block;background-color:var(--ui-image-bg);border-radius:var(--ui-image-border-radius)}:where(.ui-image)>*{width:100%;height:100%;border-radius:inherit}:where(.ui-info){--ui-info-font-size: .75rem;--ui-info-font-weight: var(--font-normal);font-size:var(--ui-info-font-size);font-weight:var(--ui-info-font-weight)}:where(.ui-input,.ui-select){--ui-input-height: 3rem;--ui-input-height-textarea: 8rem;--ui-input-pt-floating: 1.25rem;--ui-input-pb-floating: .4375rem;--ui-input-py: .875rem;--ui-input-px: .875rem;--ui-input-pl: var(--ui-input-px);--ui-input-pr: var(--ui-input-px);--ui-input-bg: rgb(var(--color-background));--ui-input-color: currentColor;--ui-input-placeholder-color: currentColor;--ui-input-placeholder-opacity: .5;--ui-input-font-size: .875rem;--ui-input-font-weight: var(--font-medium);--ui-input-border-width: 1px;--ui-input-border-color: var(--color-current);--ui-input-border-opacity: .15;--ui-input-border-radius: var(--rounded);--ui-input-box-shadow: none;--ui-input-icon-font-size: 1.25rem;--ui-input-icon-count-l: 1;--ui-input-icon-count-r: 1;--ui-input-icon-gap: .375rem;--ui-input-icon-inset-x: calc(var(--ui-input-px) - .25rem);--ui-input-icon-inset-x-gap: .125rem;--ui-input-icon-offset-l: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-l));--ui-input-icon-offset-r: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-r));--ui-input-label-floating-font-size: .875rem;--ui-input-label-floating-font-weight: var(--font-medium);--ui-input-label-floating-focus-transform: translateY(-.6875rem) scale(.8);--ui-input-label-floating-focus-opacity: .5;display:grid;grid-template-areas:"input";font-size:var(--ui-input-font-size);position:relative}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-15]{--ui-input-pl: var(--ui-input-icon-offset-l)}:where(.ui-input,.ui-select):has(.icon-l){--ui-input-pl: var(--ui-input-icon-offset-l)}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-15]{--ui-input-pr: var(--ui-input-icon-offset-r)}:where(.ui-input,.ui-select):has(.icon-r){--ui-input-pr: var(--ui-input-icon-offset-r)}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-w-1q-w-16-1m-32-38-2w-19-2r-2w-2x-30-2s-14-1e-15-15]:not(.does-not-exist){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select):has(.icon-l > *:nth-child(2)){--ui-input-icon-count-r: 2}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-w-1q-w-16-1m-32-38-2w-19-2r-2w-2x-30-2s-14-1e-15-15]:not(.does-not-exist){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select):has(.icon-r > *:nth-child(2)){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select) :where(svg){font-size:var(--ui-input-icon-font-size);width:1em;height:var(--ui-input-height)}:where(.ui-input,.ui-select) :where(input,textarea,select){grid-area:input;background-clip:padding-box;background-color:var(--ui-input-bg);padding:var(--ui-input-py) var(--ui-input-pr) var(--ui-input-py) var(--ui-input-pl);transition:var(--transition-border),var(--transition-shadow);box-shadow:var(--ui-input-box-shadow);line-height:normal;font-size:inherit;height:var(--ui-input-height);font-weight:var(--ui-input-font-weight);border-radius:var(--ui-input-border-radius);color:var(--ui-input-color);border:var(--ui-input-border-width) solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity))}:where(.ui-input,.ui-select) :where(input,textarea,select):focus{--ui-input-border-opacity: 1;--ui-input-border-color: var(--color-accent);--ui-input-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-accent) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-input,.ui-select) :where(input,textarea,select):disabled{cursor:default;background-color:rgb(var(--color-default) / .1)}:is(:where(.ui-input,.ui-select) :where(input,textarea,select)):required~label:after{color:rgb(var(--color-error));content:" *"}:where(.ui-input,.ui-select) :where(input,textarea)::-moz-placeholder{color:var(--ui-input-placeholder-color);opacity:var(--ui-input-placeholder-opacity)}:where(.ui-input,.ui-select) :where(input,textarea)::placeholder{color:var(--ui-input-placeholder-color);opacity:var(--ui-input-placeholder-opacity)}:where(.ui-input,.ui-select) :where(textarea){resize:vertical;overflow:hidden;min-height:var(--ui-input-height-textarea)}:where(.ui-input,.ui-select) :where([class^="icon-"]){grid-area:input;content:"";position:relative;line-height:1em;display:flex;flex-direction:row;flex-shrink:0;align-items:center;gap:var(--ui-input-icon-gap);transition:var(--transition-opacity)}:where(.ui-input,.ui-select) :where([class^="icon-"]):where(.icon-l){left:var(--ui-input-icon-inset-x);margin-right:auto}:where(.ui-input,.ui-select) :where([class^="icon-"]):where(.icon-r){right:var(--ui-input-icon-inset-x);margin-left:auto}:where(.ui-input,.ui-select) :where([aria-label]):after{content:attr(aria-label);font-size:var(--ui-input-font-size);min-width:var(--ui-input-icon-font-size);text-align:center;line-height:var(--ui-input-icon-font-size);display:block}:where(.ui-input,.ui-select) :where([class*="lib-hint"]):after{white-space:normal;line-height:1.5;word-wrap:normal;width:10rem;font-weight:var(--font-normal);font-size:.75rem}:where(.ui-input,.ui-select):where(.is-floating){--ui-input-placeholder-color: transparent}:where(.ui-input,.ui-select):where(.is-floating) :where(label){grid-area:input;align-self:start;pointer-events:none;transition:transform .4s cubic-bezier(.25,.8,.25,1),var(--transition-color),var(--transition-opacity);transform-origin:0 50%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transform:perspective(100px);will-change:transform;font-weight:var(--ui-input-label-floating-font-weight);margin-left:var(--ui-input-pl);margin-right:var(--ui-input-pr);line-height:var(--ui-input-label-floating-font-size);margin-top:calc(var(--ui-input-height) / 2 - (var(--ui-input-font-size) / 2))}:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select){padding-top:calc(var(--ui-input-pt-floating));padding-bottom:calc(var(--ui-input-pb-floating))}:is(:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select)):is(:focus,:not(:-moz-placeholder-shown))~label{transform:var(--ui-input-label-floating-focus-transform);opacity:var(--ui-input-label-floating-focus-opacity)}:is(:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select)):is(:focus,:not(:placeholder-shown))~label{transform:var(--ui-input-label-floating-focus-transform);opacity:var(--ui-input-label-floating-focus-opacity)}.is-invalid:where(.ui-input,.ui-select),.is-validated :where(.ui-input,.ui-select) :where(input,textarea,select):invalid{--ui-input-bg: rgb(var(--color-error) / .1);--ui-input-border-opacity: 1;--ui-input-border-color: var(--color-error);--ui-input-color: rgb(var(--color-error));--color-accent: var(--color-error)}:where(.ui-input-group){display:flex;flex-wrap:wrap}:where(.ui-input-group) :where(.ui-btn){--ui-btn-outline-width: 1px;--ui-btn-height: 3rem;flex-grow:1;height:auto}:where(.ui-input-group)>*:not(:first-child){margin-left:calc(var(--ui-input-border-width) * -1)}:where(.ui-input-group)>*:not(:first-child),:where(.ui-input-group)>*:not(:first-child) :where(input,select){border-top-left-radius:0;border-bottom-left-radius:0}:where(.ui-input-group)>*:not(:last-child),:where(.ui-input-group)>*:not(:last-child) :where(input,select){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-label){--ui-label-font-size: .875rem;--ui-label-font-weight: var(--font-medium);font-size:var(--ui-label-font-size);font-weight:var(--ui-label-font-weight)}:where(.ui-link){--ui-link-font-size: .875rem;--ui-link-font-weight: var(--font-semibold);--ui-link-hover-color: rgb(var(--color-accent));--ui-link-hover-opacity: .8;--ui-link-underline-width: 1px;--ui-link-underline-opacity: 0;--ui-link-underline-transform: translateY(-.125rem);font-size:var(--ui-link-font-size);font-weight:var(--ui-link-font-weight);transition:var(--transition-opacity),var(--transition-color);display:flex;align-items:center;position:relative}:where(.ui-link):where(.is-underline):after{content:"";border-bottom:var(--ui-link-underline-width) solid currentColor;opacity:var(--ui-link-underline-opacity);position:absolute;inset:auto 0 0 0;transition:var(--transition-opacity),var(--transition-transform);transform:var(--ui-link-underline-transform)}@media (hover: hover) and (pointer: fine){:where(.ui-link):hover{--ui-link-underline-opacity: 1;--ui-link-underline-transform: none;color:var(--ui-link-hover-color);opacity:var(--ui-link-hover-opacity)}}:where(.ui-link):active{opacity:var(--ui-link-hover-opacity)}:where(.ui-link):where(:focus-visible){--ui-link-underline-opacity: 1;--ui-link-underline-transform: none}:where(.ui-notice){--color-current: var(--color-accent);--ui-notice-bg: rgb(var(--color-accent));--ui-notice-py: 1.25rem;--ui-notice-px: 1.5rem;--ui-notice-font-size: .875rem;--ui-notice-border-radius: var(--rounded);--ui-notice-outline-opacity: .1;--ui-notice-gap: 1.25rem;position:relative;display:flex;flex-direction:column;padding:var(--ui-notice-py) var(--ui-notice-px);font-size:var(--ui-notice-font-size);border-radius:var(--ui-notice-border-radius);color:rgb(var(--color-current));gap:var(--ui-notice-gap)}:where(.ui-notice) :where(hr){--tw-border-opacity: .2}:where(.ui-notice):before,:where(.ui-notice):after{position:absolute;inset:0;border-radius:var(--ui-notice-border-radius);z-index:-1;content:""}:where(.ui-notice):before{background-color:var(--ui-notice-bg);opacity:var(--ui-notice-outline-opacity)}:where(.ui-notice):after{box-shadow:inset 0 0 0 1px var(--ui-notice-bg);opacity:var(--ui-notice-outline-opacity)}:where(.ui-progress){--ui-progress-height: 1rem;--ui-progress-border-radius: var(--rounded-full);--ui-progress-bg: var(--color-background-200);--ui-progress-bg-opacity: 1;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:0;height:var(--ui-progress-height);border-radius:var(--ui-progress-border-radius);background-color:rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity));color:rgb(var(--color-accent));width:100%}:where(.ui-progress):where(.is-sm){--ui-progress-height: .5rem}:where(.ui-progress):where(.is-lg){--ui-progress-height: 1.5rem}:where(.ui-progress)::-webkit-progress-bar{background-color:transparent}:where(.ui-progress)::-webkit-progress-value{background-color:currentColor;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress)::-moz-progress-bar{background-color:currentColor;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress):indeterminate{animation:1.5s linear 0s forwards infinite move-indeterminate;background-image:linear-gradient(to right,currentColor 30%,rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity)) 30%);background-position:top left;background-repeat:no-repeat;background-size:150% 150%;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress):indeterminate::-moz-progress-bar{background-color:transparent}:where(.ui-radio){--ui-checkbox-icon: var(--icon-radio);--ui-checkbox-radius: 50%}:where(.ui-select){--ui-input-icon-select-icon-font-size: 1.5rem;--ui-input-icon-count-r: 2;--ui-input-pr: var(--ui-input-icon-offset-r)}:where(.ui-select) :where([class^="icon-"]){margin-right:calc(var(--ui-input-icon-font-size) + var(--ui-input-icon-gap))}:where(.ui-select):after{width:1em;height:1em;background-color:currentColor;content:"";position:absolute;z-index:1;font-size:var(--ui-input-icon-select-icon-font-size);right:calc(var(--ui-input-height) / 4);top:calc(var(--ui-input-height) / 2);margin-top:calc(var(--ui-input-icon-select-icon-font-size) / 2 * -1);will-change:transform;transition:transform .2s;-webkit-mask:var(--icon-angle-down);mask:var(--icon-angle-down);pointer-events:none;grid-area:input}:where(.ui-switch){--ui-switch-width: 3rem;--ui-switch-height: 1.5rem;--ui-switch-padding: .375rem;--ui-switch-bg-raw: var(--color-dark);--ui-switch-radius: 999px;--ui-switch-validity-font-size: .875rem;--ui-switch-validity-offset: .375rem;--ui-switch-box-shadow: none;display:flex;align-items:center;flex-wrap:wrap;width:-moz-max-content;width:max-content}.dark :where(.ui-switch){--ui-switch-bg-raw: var(--color-background-300)}:where(.ui-switch):where(.is-sm){--ui-switch-width: 2.5rem;--ui-switch-height: 1.25rem}:where(.ui-switch):where(.is-lg){--ui-switch-width: 4rem;--ui-switch-height: 2rem}:where(.ui-switch) :where(input){width:var(--ui-switch-width);height:var(--ui-switch-height);display:block;position:relative;border-radius:var(--ui-switch-radius);background-color:rgb(var(--ui-switch-bg-raw));transition:var(--transition-background),var(--transition-shadow);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;color:inherit;box-shadow:var(--ui-switch-box-shadow)}:where(.ui-switch) :where(input):before{width:calc(var(--ui-switch-height) - var(--ui-switch-padding));height:calc(var(--ui-switch-height) - var(--ui-switch-padding));background-color:rgb(var(--color-light));border-radius:var(--ui-switch-radius);position:absolute;left:var(--ui-switch-height);top:50%;content:"";display:block;margin-left:calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);transition:left var(--transition-duration),var(--transition-background);transform:translateY(-50%)}:where(.ui-switch) :where(input):disabled{opacity:.8;pointer-events:none}:where(.ui-switch) :where(input):focus{--ui-switch-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-current) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-switch) :where(input):checked{background-color:rgb(var(--color-accent))}:where(.ui-switch) :where(input):checked:focus{--ui-switch-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-accent) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-switch) :where(input):checked:before{background-color:rgb(var(--color-light));left:100%}:where(.ui-text){--ui-text-size: .875rem;--ui-text-size-line: .75rem;--ui-text-weight: var(--font-normal);--ui-text-weight-bold: var(--font-semibold);--ui-text-content-my: 1.5rem;--ui-text-content-my-sm: 1rem;--ui-text-content-my-lg: 2rem;font-weight:var(--ui-text-weight);font-size:var(--ui-text-size);line-height:calc(var(--ui-text-size) + var(--ui-text-size-line))}:where(.ui-text):where(.is-lg){--ui-text-size: 1.125rem}:where(.ui-text) :where(a){text-decoration:underline;transition:var(--transition-color);color:rgb(var(--color-accent))}@media (hover: hover) and (pointer: fine){:where(.ui-text) :where(a):hover{color:rgb(var(--color-accent) / .7)}}:where(.ui-text) :where(a):focus-visible{color:rgb(var(--color-accent) / .7)}:where(.ui-text) :where(b,strong){font-weight:var(--ui-text-weight-bold)}:where(.ui-text) :where(i,em){display:inline;font-style:italic}:where(.ui-text) :where(figure){margin:var(--ui-text-content-my) 0}:where(.ui-text) :where(figcaption){font-size:.875rem;font-weight:var(--font-semibold);margin-top:.25rem;line-height:1.5}:where(.ui-text) :where(img){height:auto}:where(.ui-text) :where(p){line-height:inherit}:where(.ui-text) :where(p):not(:only-child){margin:var(--ui-text-content-my-sm) 0}:where(.ui-text) :where(p):last-child{margin-bottom:0}:where(.ui-text) :where(p):empty{line-height:var(--ui-text-content-my-sm);margin:0}:where(.ui-text) :where(p):after{content:"\a0"}:where(.ui-text) :where(hr){--tw-border-opacity: .1;margin:var(--ui-text-content-my-lg) 0}:where(.ui-text) :where(h1,h2,h3,h4,h5,h6){font-weight:var(--ui-text-weight-bold);font-family:var(--font-secondary);font-size:var(--ui-text-heading-size, 1rem);line-height:calc(var(--ui-text-heading-size) + .5rem);margin:var(--ui-text-content-my) 0 var(--ui-text-content-my-sm)}:where(.ui-text) :where(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}:where(.ui-text) :where(h1){--ui-text-heading-size: 2.25rem}:where(.ui-text) :where(h2){--ui-text-heading-size: 1.75rem}:where(.ui-text) :where(h3,h4){--ui-text-heading-size: 1.25rem}:where(.ui-text) :where(table){border:0;min-width:100%}:where(.ui-text) :where(table) :where(td,th){padding:1rem 1.25rem;text-align:left}:where(.ui-text) :where(table) :where(thead){font-weight:var(--ui-text-weight-bold);border-bottom:1px solid rgb(var(--color-current) / .075)}:where(.ui-text) :where(table) :where(tbody tr):nth-of-type(even){background-color:rgb(var(--color-current) / .05)}:where(.ui-text) :where(iframe){max-width:100%}:where(.ui-text) :where(iframe):where([src*="youtube.com"]){aspect-ratio:16/9;height:auto}:where(.ui-text) :where(blockquote){border-left:.3125rem solid rgb(var(--color-accent) / 1);padding:.5rem 1.25rem;margin:1rem 0;font-size:inherit}:where(.ui-text) :where(code){margin:0 .25rem;border-radius:var(--rounded-xs);padding:.25rem .375rem;font-size:.85em;color:rgb(var(--color-accent));font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:#1b1f230d}.dark :is(:where(.ui-text) :where(code)){background-color:rgb(var(--color-background-200))}:where(.ui-text) :where(ol){margin:var(--ui-text-content-my) 0;padding:0 0 0 1rem}:where(.ui-text) :where(ol):not([type]){list-style:decimal}:where(.ui-text) :where(ol) :where(li){padding-left:.5rem}:where(.ui-text) :where(ol) :where(li):not(:last-child){margin:0 0 .5rem}:where(.ui-text) :where(ol) :where(li)::marker{color:rgb(var(--color-accent));font-weight:var(--ui-text-weight-bold)}:where(.ui-text) :where(ul){list-style-type:none!important;margin:var(--ui-text-content-my) 0;padding:0}:where(.ui-text) :where(ul) :where(li){position:relative;line-height:inherit;padding-left:1.25rem}:where(.ui-text) :where(ul) :where(li):not(:last-child){margin:0 0 .5rem}:where(.ui-text) :where(ul) :where(li):before{width:.375rem;height:.375rem;position:absolute;content:"";border:1px solid rgb(var(--color-accent));background-color:rgb(var(--color-accent));left:0;top:.6875rem;text-indent:0;border-radius:50%}:where(.ui-text) [style*=square]:where(ul) :where(li):before{border-radius:0}:where(.ui-text) [style*=circle]:where(ul) :where(li):before{border-radius:50%;background-color:transparent}:where(.ui-title){--ui-title-font-family: var(--font-secondary);--ui-title-font-weight: var(--font-semibold);--ui-title-font-size: .875rem;--ui-title-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));--ui-title-line-height-ratio: .375rem;font-family:var(--ui-title-font-family);font-size:var(--ui-title-font-size);line-height:var(--ui-title-line-height);font-weight:var(--ui-title-font-weight)}:where(.ui-title):where(.is-sm){--ui-title-font-size: .75rem}:where(.ui-title):where(.is-lg){--ui-title-font-size: 1.125rem}:where(.c-field){--c-field-gap: .5rem;--c-field-input-height: 3rem;display:flex;flex-direction:column;gap:var(--c-field-gap)}.js-has-pseudo [csstools-has-1a-2x-37-19-3a-2p-30-2x-2s-2p-38-2t-2s-w-1m-3b-2w-2t-36-2t-14-1a-2r-19-2u-2x-2t-30-2s-15-1m-2w-2p-37-14-1m-2x-32-3a-2p-30-2x-2s-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-2u-33-2j-2w-2x-2s-2s-2t-32-2l-15]:not(.does-not-exist){display:block}.is-validated :where(.c-field):has(:invalid) :where(.ui-info[hidden]){display:block}:where(.c-field):where(.is-horizontal){align-items:flex-start;flex-direction:row}:where(.c-field):where(.is-horizontal) :where(.ui-label){min-height:var(--ui-input-height);align-items:center;display:flex}:where(.c-field):where(.is-horizontal)>:where(.col){gap:var(--c-field-gap);justify-content:center}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-2r-19-2u-2x-2t-30-2s-15-1m-2w-2p-37-14-2j-36-2t-35-39-2x-36-2t-2s-2l-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-30-2p-2q-2t-30-15]:after{color:rgb(var(--color-error));content:" *"}:where(.c-field):has([required]) :where(.ui-label):after{color:rgb(var(--color-error));content:" *"}:where(.c-field) :where(.is-input-offset){min-height:var(--c-field-input-height);justify-content:center}
1
+ *:where(:not(html,iframe,canvas,img,svg,video,audio,svg *,symbol *,ol,ul)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}:where(ol:not([type]),ul,menu){list-style:none}img{max-width:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}::-moz-placeholder{color:unset}::placeholder{color:unset}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(html){cursor:default;color:rgb(var(--color-default))}:where(input,textarea){cursor:text}:where(a[href],button){cursor:pointer}:where(svg,use,path,symbol){all:revert-layer}::-moz-selection{color:rgb(var(--color-light));background-color:rgb(var(--color-accent))}::selection{color:rgb(var(--color-light));background-color:rgb(var(--color-accent))}:where(*){outline:none;-webkit-tap-highlight-color:rgb(255 255 255 / 0)}:where([hidden]){display:none}:where(svg){stroke-width:1.5}:where(hr){display:block;border-top:2px solid rgb(var(--color-current) / var(--tw-border-opacity, 1));border-radius:var(--rounded)}:root{--font-default: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-primary: var(--font-default);--font-secondary: var(--font-default);--color-google: 49 45 45;--color-linkedin: 40 103 178;--color-youtube: 255 0 0;--color-instagram: 193 53 132;--color-twitter: 29 161 242;--color-facebook: 24 119 242;--color-apple: 0 0 0;--container-width: 80rem;--container-width-sm: 58rem;--container-padding: 5vw;--container-padding-calc: max(calc(50vw - (var(--container-width) / 2) + var(--container-padding)), var(--container-padding));--font-bold: 700;--font-semibold: 600;--font-medium: 500;--font-normal: 400;--font-light: 300;--font-thin: 200;--z-10: 10;--z-20: 20;--z-30: 30;--z-40: 40;--z-50: 50;--rounded: .75rem;--rounded-xs: .5rem;--rounded-sm: .875rem;--rounded-base: 1rem;--rounded-md: 1.125rem;--rounded-lg: 1.5rem;--rounded-xl: 3rem;--rounded-2xl: 6rem;--rounded-3xl: 8rem;--rounded-full: 9999px;--spacing-xs: .5rem;--spacing-sm: .875rem;--spacing-base: 1rem;--spacing-md: 1.125rem;--spacing-lg: 1.5rem;--spacing-xl: 3rem;--spacing-2xl: 6rem;--spacing-3xl: 8rem;--transition-duration: .15s;--transition-color: color var(--transition-duration) ease;--transition-background: background var(--transition-duration) ease;--transition-opacity: opacity var(--transition-duration) ease;--transition-transform: transform var(--transition-duration) ease;--transition-border: border-color var(--transition-duration) ease;--transition-shadow: box-shadow var(--transition-duration) ease}@media (prefers-reduced-motion){:root{--transition-duration: 0}}:root{--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;--icon-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;--icon-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>') no-repeat 50% 50% / contain;--icon-chevron-left: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>') no-repeat 50% 50% / contain;--icon-angle-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" /></svg>') no-repeat 50% 50% / contain;--icon-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain;--icon-upload: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>') no-repeat 50% 50% / contain}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes move-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-5rem)}to{opacity:1;transform:none}}@keyframes fade-in-right{0%{opacity:0;transform:translate(5rem)}to{opacity:1;transform:none}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out-left{0%{opacity:1;transform:none}to{opacity:0;transform:translate(-5rem)}}@keyframes fade-out-right{0%{opacity:1;transform:none}to{opacity:0;transform:translate(5rem)}}@keyframes fade-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2rem)}}@keyframes fade-out-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(2rem)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes ripple{to{transform:scale(2.5);opacity:0}}@keyframes loading-skeleton{to{background-position:250% 0}}:root{--color-accent: var(--color-primary);--color-current: var(--color-default);--color-default: 17 19 21;--color-primary: 3 138 255;--color-secondary: 69 71 72;--color-light: 255 255 255;--color-dark: 17 19 21;--color-success: 33 154 67;--color-error: 254 50 75;--color-warning: 254 179 53;--color-info: 45 168 234;--color-background: 255 255 255;--color-background-100: 249 250 252;--color-background-200: 235 235 235;--color-background-300: 225 225 225}:root.dark{--color-default: 201 209 217;--color-invert: 14 17 22;--color-secondary: 39 41 46;--color-background: 25 26 27;--color-background-100: 14 15 16;--color-background-200: 26 32 38;--color-background-300: 30 36 46}:where(.ui-badge){--color-current: var(--color-light);--ui-badge-width: max-content;--ui-badge-height: 1.5rem;--ui-badge-py: 0;--ui-badge-px: .5rem;--ui-badge-border-radius: var(--rounded-xs);--ui-badge-font-size: .75rem;--ui-badge-font-weight: var(--font-normal);--ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));--ui-badge-bg-opacity: var(--tw-bg-opacity, 1);--ui-badge-color: rgb(var(--color-current) / var(--ui-badge-color-opacity));--ui-badge-color-opacity: var(--tw-text-opacity, 1);--ui-badge-outline-width: 1px;--ui-badge-outline-opacity: .75;--ui-badge-icon-font-size: .875rem;--ui-badge-gap: .25rem;--ui-badge-focus-opacity: .3;--ui-badge-hover-opacity: .8;width:var(--ui-badge-width);height:var(--ui-badge-height);padding:var(--ui-badge-py) var(--ui-badge-px);border-radius:var(--ui-badge-border-radius);font-size:var(--ui-badge-font-size);font-weight:var(--ui-badge-font-weight);background-color:var(--ui-badge-bg);color:var(--ui-badge-color);display:inline-flex;align-items:center;text-align:center;justify-content:center;white-space:nowrap;flex-shrink:0;position:relative;z-index:0;gap:var(--ui-badge-gap);transition:var(--transition-opacity)}:where(.ui-badge) :where(svg){width:1em;height:1em;font-size:var(--ui-badge-icon-font-size)}:where(.ui-badge):where(.is-sm){--ui-badge-height: 1.25rem;--ui-badge-font-size: .625rem}:where(.ui-badge):where(.is-lg){--ui-badge-height: 1.75rem}:where(.ui-badge):where(.is-outline){outline:var(--ui-badge-outline-width) solid rgb(var(--color-accent) / var(--ui-badge-outline-opacity));outline-offset:calc(var(--ui-badge-outline-width) * -1)}:where(.ui-badge):where(.is-outline,.is-muted){--color-current: var(--color-accent);--ui-badge-bg: transparent}:where(.ui-badge):where(.is-muted){background-color:rgb(var(--color-current) / .1)}:where(.ui-badge):where(.is-square,.is-circle){--ui-badge-px: var(--ui-badge-py);--ui-badge-width: var(--ui-badge-height)}:where(.ui-badge):where(.is-circle){--ui-badge-border-radius: var(--rounded-full)}@media (hover: hover) and (pointer: fine){:where(.ui-badge):where([href],button):hover{opacity:var(--ui-badge-hover-opacity)}}:where(.ui-badge):where([href],button):focus-visible{z-index:2;box-shadow:0 0 0 0 rgb(var(--color-current)),0 0 0 max(2px,var(--ui-badge-outline-width)) rgb(var(--color-accent) / var(--ui-badge-focus-opacity))}:where(.ui-badge-group){display:flex}:where(.ui-badge-group) :where(.ui-badge):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(var(--ui-badge-outline-width) * -1)}:where(.ui-badge-group) :where(.ui-badge):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-btn){--color-current: var(--color-light);--ui-btn-width: max-content;--ui-btn-height: 2.25rem;--ui-btn-py: .375rem;--ui-btn-px: .75rem;--ui-btn-border-radius: var(--rounded);--ui-btn-font-size: .875rem;--ui-btn-font-weight: var(--font-medium);--ui-btn-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));--ui-btn-bg-opacity: var(--tw-bg-opacity, 1);--ui-btn-color: rgb(var(--color-current) / var(--ui-btn-color-opacity));--ui-btn-color-opacity: var(--tw-text-opacity, 1);--ui-btn-hover-filter: invert(1);--ui-btn-hover-opacity: .2;--ui-btn-focus-opacity: .3;--ui-btn-disabled-opacity: .7;--ui-btn-outline-width: 2px;--ui-btn-outline-opacity: .5;--ui-btn-icon-font-size: 1.25rem;--ui-btn-gap: .375rem;--ui-btn-loading-width: 1rem;--ui-btn-loading-border-width: 2px;width:var(--ui-btn-width);height:var(--ui-btn-height);padding:var(--ui-btn-py) var(--ui-btn-px);border-radius:var(--ui-btn-border-radius);font-size:var(--ui-btn-font-size);font-weight:var(--ui-btn-font-weight);background-color:var(--ui-btn-bg);color:var(--ui-btn-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;display:inline-flex;align-items:center;text-align:center;justify-content:center;white-space:nowrap;flex-shrink:0;position:relative;z-index:0;transition:var(--transition-opacity),var(--transition-background),var(--transition-color),var(--transition-shadow);gap:var(--ui-btn-gap)}:where(.ui-btn):before{content:"";position:absolute;inset:0;background-color:rgb(var(--color-current));filter:var(--ui-btn-hover-filter);z-index:-1;opacity:0;transition:var(--transition-opacity)}:where(.ui-btn) :where(svg){width:1em;height:1em;font-size:var(--ui-btn-icon-font-size)}:where(.ui-btn):where(.is-sm){--ui-btn-height: 2rem;--ui-btn-px: 1rem}:where(.ui-btn):where(.is-lg){--ui-btn-height: 3rem;--ui-btn-px: 1.75rem}:where(.ui-btn):where(.is-loading){pointer-events:none;color:transparent!important}:where(.ui-btn):where(.is-loading)>*{opacity:0}:where(.ui-btn):where(.is-loading):after{z-index:1;width:var(--ui-btn-loading-width);height:var(--ui-btn-loading-width);content:"";border:var(--ui-btn-loading-border-width) solid rgb(var(--color-current));border-right-color:transparent;border-radius:50%;animation:spin .45s infinite linear;position:absolute;margin-left:calc(var(--ui-btn-loading-width) / 2 * -1);margin-top:calc(var(--ui-btn-loading-width) / 2 * -1);left:50%;top:50%}:where(.ui-btn):where(.is-wide){padding-left:calc(var(--ui-btn-px) * 2);padding-right:calc(var(--ui-btn-px) * 2)}:where(.ui-btn):where(.is-outline,.is-muted,.is-text){--color-current: var(--color-accent);--ui-btn-hover-opacity: .1;--ui-btn-hover-filter: none;background-color:transparent}:where(.ui-btn):where(.is-outline,.is-muted,.is-text):before{background-color:var(--ui-btn-bg)}:where(.ui-btn):where(.is-outline){--ui-btn-focus-opacity: .15;outline:var(--ui-btn-outline-width) solid rgb(var(--color-accent) / var(--ui-btn-outline-opacity));outline-offset:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn):where(.is-outline-gradient){--ui-btn-focus-opacity: .15;--color-accent: var(--color-default);--color-current: var(--color-accent)}.is-loading.is-hover-fill:where(.ui-btn):where(.is-outline-gradient){--color-current: var(--color-light)}:where(.ui-btn):where(.is-outline-gradient):not(.is-loading):after{content:"";position:absolute;background-color:rgb(var(--color-background));inset:var(--ui-btn-outline-width);border-radius:calc(var(--ui-btn-border-radius) / 1.25);z-index:-1;transition:var(--transition-opacity)}:where(.ui-btn):where(.is-muted){--ui-btn-hover-opacity: .3}:where(.ui-btn):where(.is-muted):before{opacity:.1}:where(.ui-btn):where(.is-raised){--ui-btn-outline-opacity: .15;outline:var(--ui-btn-outline-width) solid rgb(var(--color-current) / var(--ui-btn-outline-opacity));outline-offset:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn):where(.is-square,.is-circle){--ui-btn-py: var(--ui-btn-py);--ui-btn-width: var(--ui-btn-height)}:where(.ui-btn):where(.is-circle){--ui-btn-border-radius: var(--rounded-full)}:where(.ui-btn):where(.is-hover-fill){--ui-btn-hover-opacity: 1}@media (hover: hover) and (pointer: fine){:where(.ui-btn):not(:disabled):hover:before{opacity:var(--ui-btn-hover-opacity)}.is-hover-fill:where(.ui-btn):not(:disabled):hover{--color-current: var(--color-light)}.is-outline-gradient:where(.ui-btn):not(:disabled):hover:before,.is-outline-gradient:where(.ui-btn):not(:disabled):hover:after{opacity:0}}:where(.ui-btn):is(:not(:disabled):active,.is-active):before{opacity:var(--ui-btn-hover-opacity)}.is-outline-gradient:where(.ui-btn):is(:not(:disabled):active,.is-active):before,.is-outline-gradient:where(.ui-btn):is(:not(:disabled):active,.is-active):after{opacity:0}.is-hover-fill:where(.ui-btn):is(:not(:disabled):active,.is-active){--color-current: var(--color-light)}:where(.ui-btn):focus-visible{z-index:2;box-shadow:0 0 0 0 rgb(var(--color-current)),0 0 0 max(2px,var(--ui-btn-outline-width)) rgb(var(--color-accent) / var(--ui-btn-focus-opacity))}:where(.ui-btn):disabled{opacity:var(--ui-btn-disabled-opacity);cursor:not-allowed}:where(.ui-btn-group){display:flex}:where(.ui-btn-group) :where(.ui-btn):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn-group) :where(.ui-btn):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-checkbox,.ui-radio){--ui-checkbox-width: 1.375rem;--ui-checkbox-font-size: .875rem;--ui-checkbox-gap: .625rem;--ui-checkbox-bg-raw: var(--color-background);--ui-checkbox-bg-opacity: .1;--ui-checkbox-border-color-raw: var(--color-current);--ui-checkbox-border-color-opacity: .2;--ui-checkbox-checked-bg-raw: var(--color-accent);--ui-checkbox-radius: .5rem;--ui-checkbox-icon: var(--icon-check);--ui-checkbox-icon-font-size: 1.125rem;--ui-checkbox-validity-font-size: .875rem;--ui-checkbox-validity-offset: .375rem;--ui-checkbox-box-shadow: none;display:flex;align-items:center;gap:0 var(--ui-checkbox-gap);flex-wrap:wrap;width:-moz-max-content;width:max-content;font-size:var(--ui-checkbox-font-size)}:where(.ui-checkbox,.ui-radio) :where(label[for],input){cursor:pointer}:where(.ui-checkbox,.ui-radio) a{color:rgb(var(--color-accent));text-decoration:underline}:where(.ui-checkbox,.ui-radio) input{--color-current: var(--color-light);display:flex;width:var(--ui-checkbox-width);height:var(--ui-checkbox-width);background-color:rgb(var(--ui-checkbox-bg-raw) / var(--tw-bg-opacity, var(--ui-checkbox-bg-opacity)));border:1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--tw-border-opacity, var(--ui-checkbox-border-color-opacity)));border-radius:var(--ui-checkbox-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;transition:var(--transition-border),var(--transition-background),var(--transition-shadow);box-shadow:var(--ui-checkbox-box-shadow);font-size:var(--ui-checkbox-icon-font-size)}:where(.ui-checkbox,.ui-radio) input:before{line-height:var(--ui-checkbox-icon-font-size);text-indent:0;display:block;transition:var(--transition-color),var(--transition-opacity),var(--transition-transform);color:rgb(var(--color-current));content:"";background-color:currentColor;-webkit-mask:var(--ui-checkbox-icon);mask:var(--ui-checkbox-icon);opacity:0;transform:scale(0);will-change:transform;width:1em;height:1em}:is(:where(.ui-checkbox,.ui-radio) input:where(:required))+*:after{color:rgb(var(--color-error));content:" *"}:where(.ui-checkbox,.ui-radio) input:is(:hover,:focus-visible){--ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);--ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);--tw-border-opacity: .75;--tw-bg-opacity: .1}:where(.ui-checkbox,.ui-radio) input:focus{--ui-checkbox-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-checkbox,.ui-radio) input:checked{--tw-border-opacity: 0;background-color:rgb(var(--ui-checkbox-checked-bg-raw))}:where(.ui-checkbox,.ui-radio) input:checked:before{opacity:1;transform:scale(1)}.is-invalid:where(.ui-checkbox,.ui-radio),.is-validated :where(.ui-checkbox,.ui-radio) :where(input):invalid{--ui-checkbox-bg-raw: var(--color-error);--ui-checkbox-border-color-raw: var(--color-error);--ui-checkbox-checked-bg-raw: var(--color-error);--color-current: var(--color-error);--tw-border-opacity: 1}:where(.ui-heading){--ui-heading-font-family: var(--font-primary);--ui-heading-font-weight: var(--font-semibold);--ui-heading-font-size: 1.25rem;--ui-heading-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));--ui-heading-line-height-ratio: .375rem;font-family:var(--ui-heading-font-family);font-size:var(--ui-heading-font-size);line-height:var(--ui-heading-line-height);font-weight:var(--ui-heading-font-weight)}:where(.ui-heading):where(.is-sm){--ui-heading-font-size: 1.125rem;--ui-heading-line-height-ratio: .125rem}:where(.ui-heading):where(.is-lg){--ui-heading-font-size: 1.875rem}:where(.ui-image){--ui-image-bg: rgb(var(--color-background-200));--ui-image-border-radius: 0;position:relative;display:block;background-color:var(--ui-image-bg);border-radius:var(--ui-image-border-radius)}:where(.ui-image)>*{width:100%;height:100%;border-radius:inherit}:where(.ui-info){--ui-info-font-size: .75rem;--ui-info-font-weight: var(--font-normal);font-size:var(--ui-info-font-size);font-weight:var(--ui-info-font-weight)}:where(.ui-input,.ui-select){--ui-input-height: 3rem;--ui-input-height-textarea: 8rem;--ui-input-pt-floating: 1.25rem;--ui-input-pb-floating: .4375rem;--ui-input-py: .875rem;--ui-input-px: .875rem;--ui-input-pl: var(--ui-input-px);--ui-input-pr: var(--ui-input-px);--ui-input-bg: rgb(var(--color-background));--ui-input-color: currentColor;--ui-input-placeholder-color: currentColor;--ui-input-placeholder-opacity: .5;--ui-input-font-size: .875rem;--ui-input-font-weight: var(--font-medium);--ui-input-border-width: 1px;--ui-input-border-color: var(--color-current);--ui-input-border-opacity: .15;--ui-input-border-radius: var(--rounded);--ui-input-box-shadow: none;--ui-input-icon-font-size: 1.25rem;--ui-input-icon-count-l: 1;--ui-input-icon-count-r: 1;--ui-input-icon-gap: .375rem;--ui-input-icon-inset-x: calc(var(--ui-input-px) - .25rem);--ui-input-icon-inset-x-gap: .125rem;--ui-input-icon-offset-l: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-l));--ui-input-icon-offset-r: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-r));--ui-input-label-floating-font-size: .875rem;--ui-input-label-floating-font-weight: var(--font-medium);--ui-input-label-floating-focus-transform: translateY(-.6875rem) scale(.8);--ui-input-label-floating-focus-opacity: .5;display:grid;grid-template-areas:"input";font-size:var(--ui-input-font-size);position:relative}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-15]{--ui-input-pl: var(--ui-input-icon-offset-l)}:where(.ui-input,.ui-select):has(.icon-l){--ui-input-pl: var(--ui-input-icon-offset-l)}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-15]{--ui-input-pr: var(--ui-input-icon-offset-r)}:where(.ui-input,.ui-select):has(.icon-r){--ui-input-pr: var(--ui-input-icon-offset-r)}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-w-1q-w-16-1m-32-38-2w-19-2r-2w-2x-30-2s-14-1e-15-15]:not(.does-not-exist){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select):has(.icon-l > *:nth-child(2)){--ui-input-icon-count-r: 2}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-w-1q-w-16-1m-32-38-2w-19-2r-2w-2x-30-2s-14-1e-15-15]:not(.does-not-exist){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select):has(.icon-r > *:nth-child(2)){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select) :where(svg){font-size:var(--ui-input-icon-font-size);width:1em;height:var(--ui-input-height)}:where(.ui-input,.ui-select) :where(input,textarea,select){grid-area:input;background-clip:padding-box;background-color:var(--ui-input-bg);padding:var(--ui-input-py) var(--ui-input-pr) var(--ui-input-py) var(--ui-input-pl);transition:var(--transition-border),var(--transition-shadow);box-shadow:var(--ui-input-box-shadow);line-height:normal;font-size:inherit;height:var(--ui-input-height);font-weight:var(--ui-input-font-weight);border-radius:var(--ui-input-border-radius);color:var(--ui-input-color);border:var(--ui-input-border-width) solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity))}:where(.ui-input,.ui-select) :where(input,textarea,select):focus{--ui-input-border-opacity: 1;--ui-input-border-color: var(--color-accent);--ui-input-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-accent) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-input,.ui-select) :where(input,textarea,select):disabled{cursor:default;background-color:rgb(var(--color-default) / .1)}:is(:where(.ui-input,.ui-select) :where(input,textarea,select)):required~label:after{color:rgb(var(--color-error));content:" *"}:where(.ui-input,.ui-select) :where(input,textarea)::-moz-placeholder{color:var(--ui-input-placeholder-color);opacity:var(--ui-input-placeholder-opacity)}:where(.ui-input,.ui-select) :where(input,textarea)::placeholder{color:var(--ui-input-placeholder-color);opacity:var(--ui-input-placeholder-opacity)}:where(.ui-input,.ui-select) :where(textarea){resize:vertical;overflow:hidden;min-height:var(--ui-input-height-textarea)}:where(.ui-input,.ui-select) :where([class^="icon-"]){grid-area:input;content:"";position:relative;line-height:1em;display:flex;flex-direction:row;flex-shrink:0;align-items:center;gap:var(--ui-input-icon-gap);transition:var(--transition-opacity)}:where(.ui-input,.ui-select) :where([class^="icon-"]):where(.icon-l){left:var(--ui-input-icon-inset-x);margin-right:auto}:where(.ui-input,.ui-select) :where([class^="icon-"]):where(.icon-r){right:var(--ui-input-icon-inset-x);margin-left:auto}:where(.ui-input,.ui-select) :where([aria-label]):after{content:attr(aria-label);font-size:var(--ui-input-font-size);min-width:var(--ui-input-icon-font-size);text-align:center;line-height:var(--ui-input-icon-font-size);display:block}:where(.ui-input,.ui-select) :where([class*="lib-hint"]):after{white-space:normal;line-height:1.5;word-wrap:normal;width:10rem;font-weight:var(--font-normal);font-size:.75rem}:where(.ui-input,.ui-select):where(.is-floating){--ui-input-placeholder-color: transparent}:where(.ui-input,.ui-select):where(.is-floating) :where(label){grid-area:input;align-self:start;pointer-events:none;transition:transform .4s cubic-bezier(.25,.8,.25,1),var(--transition-color),var(--transition-opacity);transform-origin:0 50%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transform:perspective(100px);will-change:transform;font-weight:var(--ui-input-label-floating-font-weight);margin-left:var(--ui-input-pl);margin-right:var(--ui-input-pr);line-height:var(--ui-input-label-floating-font-size);margin-top:calc(var(--ui-input-height) / 2 - (var(--ui-input-font-size) / 2))}:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select){padding-top:calc(var(--ui-input-pt-floating));padding-bottom:calc(var(--ui-input-pb-floating))}:is(:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select)):is(:focus,:not(:-moz-placeholder-shown))~label{transform:var(--ui-input-label-floating-focus-transform);opacity:var(--ui-input-label-floating-focus-opacity)}:is(:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select)):is(:focus,:not(:placeholder-shown))~label{transform:var(--ui-input-label-floating-focus-transform);opacity:var(--ui-input-label-floating-focus-opacity)}.is-invalid:where(.ui-input,.ui-select),.is-validated :where(.ui-input,.ui-select) :where(input,textarea,select):invalid{--ui-input-bg: rgb(var(--color-error) / .1);--ui-input-border-opacity: 1;--ui-input-border-color: var(--color-error);--ui-input-color: rgb(var(--color-error));--color-accent: var(--color-error)}:where(.ui-input-group){display:flex;flex-wrap:wrap}:where(.ui-input-group) :where(.ui-btn){--ui-btn-outline-width: 1px;--ui-btn-height: 3rem;flex-grow:1;height:auto}:where(.ui-input-group)>*:not(:first-child){margin-left:calc(var(--ui-input-border-width) * -1)}:where(.ui-input-group)>*:not(:first-child),:where(.ui-input-group)>*:not(:first-child) :where(input,select){border-top-left-radius:0;border-bottom-left-radius:0}:where(.ui-input-group)>*:not(:last-child),:where(.ui-input-group)>*:not(:last-child) :where(input,select){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-label){--ui-label-font-size: .875rem;--ui-label-font-weight: var(--font-medium);font-size:var(--ui-label-font-size);font-weight:var(--ui-label-font-weight)}:where(.ui-link){--ui-link-font-size: .875rem;--ui-link-font-weight: var(--font-semibold);--ui-link-hover-color: rgb(var(--color-accent));--ui-link-hover-opacity: .8;--ui-link-underline-width: 1px;--ui-link-underline-opacity: 0;--ui-link-underline-transform: translateY(-.125rem);font-size:var(--ui-link-font-size);font-weight:var(--ui-link-font-weight);transition:var(--transition-opacity),var(--transition-color);display:flex;align-items:center;position:relative}:where(.ui-link):where(.is-underline):after{content:"";border-bottom:var(--ui-link-underline-width) solid currentColor;opacity:var(--ui-link-underline-opacity);position:absolute;inset:auto 0 0 0;transition:var(--transition-opacity),var(--transition-transform);transform:var(--ui-link-underline-transform)}@media (hover: hover) and (pointer: fine){:where(.ui-link):hover{--ui-link-underline-opacity: 1;--ui-link-underline-transform: none;color:var(--ui-link-hover-color);opacity:var(--ui-link-hover-opacity)}}:where(.ui-link):active{opacity:var(--ui-link-hover-opacity)}:where(.ui-link):where(:focus-visible){--ui-link-underline-opacity: 1;--ui-link-underline-transform: none}:where(.ui-notice){--color-current: var(--color-accent);--ui-notice-bg: rgb(var(--color-accent));--ui-notice-py: 1.25rem;--ui-notice-px: 1.5rem;--ui-notice-font-size: .875rem;--ui-notice-border-radius: var(--rounded);--ui-notice-outline-opacity: .1;--ui-notice-gap: 1.25rem;position:relative;display:flex;flex-direction:column;padding:var(--ui-notice-py) var(--ui-notice-px);font-size:var(--ui-notice-font-size);border-radius:var(--ui-notice-border-radius);color:rgb(var(--color-current));gap:var(--ui-notice-gap)}:where(.ui-notice) :where(hr){--tw-border-opacity: .2}:where(.ui-notice):before,:where(.ui-notice):after{position:absolute;inset:0;border-radius:var(--ui-notice-border-radius);z-index:-1;content:""}:where(.ui-notice):before{background-color:var(--ui-notice-bg);opacity:var(--ui-notice-outline-opacity)}:where(.ui-notice):after{box-shadow:inset 0 0 0 1px var(--ui-notice-bg);opacity:var(--ui-notice-outline-opacity)}:where(.ui-progress){--ui-progress-height: 1rem;--ui-progress-border-radius: var(--rounded-full);--ui-progress-bg: var(--color-background-200);--ui-progress-bg-opacity: 1;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:0;height:var(--ui-progress-height);border-radius:var(--ui-progress-border-radius);background-color:rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity));color:rgb(var(--color-accent));width:100%}:where(.ui-progress):where(.is-sm){--ui-progress-height: .5rem}:where(.ui-progress):where(.is-lg){--ui-progress-height: 1.5rem}:where(.ui-progress)::-webkit-progress-bar{background-color:transparent}:where(.ui-progress)::-webkit-progress-value{background-color:currentColor;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress)::-moz-progress-bar{background-color:currentColor;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress):indeterminate{animation:1.5s linear 0s forwards infinite move-indeterminate;background-image:linear-gradient(to right,currentColor 30%,rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity)) 30%);background-position:top left;background-repeat:no-repeat;background-size:150% 150%;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress):indeterminate::-moz-progress-bar{background-color:transparent}:where(.ui-radio){--ui-checkbox-icon: var(--icon-radio);--ui-checkbox-radius: 50%}:where(.ui-select){--ui-input-icon-select-icon-font-size: 1.5rem;--ui-input-icon-count-r: 2;--ui-input-pr: var(--ui-input-icon-offset-r)}:where(.ui-select) :where([class^="icon-"]){margin-right:calc(var(--ui-input-icon-font-size) + var(--ui-input-icon-gap))}:where(.ui-select):after{width:1em;height:1em;background-color:currentColor;content:"";position:absolute;z-index:1;font-size:var(--ui-input-icon-select-icon-font-size);right:calc(var(--ui-input-height) / 4);top:calc(var(--ui-input-height) / 2);margin-top:calc(var(--ui-input-icon-select-icon-font-size) / 2 * -1);will-change:transform;transition:transform .2s;-webkit-mask:var(--icon-angle-down);mask:var(--icon-angle-down);pointer-events:none;grid-area:input}:where(.ui-switch){--ui-switch-width: 3rem;--ui-switch-height: 1.5rem;--ui-switch-padding: .375rem;--ui-switch-bg-raw: var(--color-dark);--ui-switch-radius: 999px;--ui-switch-validity-font-size: .875rem;--ui-switch-validity-offset: .375rem;--ui-switch-box-shadow: none;display:flex;align-items:center;flex-wrap:wrap;width:-moz-max-content;width:max-content}.dark :where(.ui-switch){--ui-switch-bg-raw: var(--color-background-300)}:where(.ui-switch):where(.is-sm){--ui-switch-width: 2.5rem;--ui-switch-height: 1.25rem}:where(.ui-switch):where(.is-lg){--ui-switch-width: 4rem;--ui-switch-height: 2rem}:where(.ui-switch) :where(input){width:var(--ui-switch-width);height:var(--ui-switch-height);display:block;position:relative;border-radius:var(--ui-switch-radius);background-color:rgb(var(--ui-switch-bg-raw));transition:var(--transition-background),var(--transition-shadow);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;color:inherit;box-shadow:var(--ui-switch-box-shadow)}:where(.ui-switch) :where(input):before{width:calc(var(--ui-switch-height) - var(--ui-switch-padding));height:calc(var(--ui-switch-height) - var(--ui-switch-padding));background-color:rgb(var(--color-light));border-radius:var(--ui-switch-radius);position:absolute;left:var(--ui-switch-height);top:50%;content:"";display:block;margin-left:calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);transition:left var(--transition-duration),var(--transition-background);transform:translateY(-50%)}:where(.ui-switch) :where(input):disabled{opacity:.8;pointer-events:none}:where(.ui-switch) :where(input):focus{--ui-switch-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-current) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-switch) :where(input):checked{background-color:rgb(var(--color-accent))}:where(.ui-switch) :where(input):checked:focus{--ui-switch-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-accent) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-switch) :where(input):checked:before{background-color:rgb(var(--color-light));left:100%}:where(.ui-text){--ui-text-size: .875rem;--ui-text-size-line: .75rem;--ui-text-weight: var(--font-normal);--ui-text-weight-bold: var(--font-semibold);--ui-text-content-my: 1.5rem;--ui-text-content-my-sm: 1rem;--ui-text-content-my-lg: 2rem;font-weight:var(--ui-text-weight);font-size:var(--ui-text-size);line-height:calc(var(--ui-text-size) + var(--ui-text-size-line))}:where(.ui-text):where(.is-lg){--ui-text-size: 1.125rem}:where(.ui-text) :where(a){text-decoration:underline;transition:var(--transition-color);color:rgb(var(--color-accent))}@media (hover: hover) and (pointer: fine){:where(.ui-text) :where(a):hover{color:rgb(var(--color-accent) / .7)}}:where(.ui-text) :where(a):focus-visible{color:rgb(var(--color-accent) / .7)}:where(.ui-text) :where(b,strong){font-weight:var(--ui-text-weight-bold)}:where(.ui-text) :where(i,em){display:inline;font-style:italic}:where(.ui-text) :where(figure){margin:var(--ui-text-content-my) 0}:where(.ui-text) :where(figcaption){font-size:.875rem;font-weight:var(--font-semibold);margin-top:.25rem;line-height:1.5}:where(.ui-text) :where(img){height:auto}:where(.ui-text) :where(p){line-height:inherit}:where(.ui-text) :where(p):not(:only-child){margin:var(--ui-text-content-my-sm) 0}:where(.ui-text) :where(p):last-child{margin-bottom:0}:where(.ui-text) :where(p):empty{line-height:var(--ui-text-content-my-sm);margin:0}:where(.ui-text) :where(p):after{content:"\a0"}:where(.ui-text) :where(hr){--tw-border-opacity: .1;margin:var(--ui-text-content-my-lg) 0}:where(.ui-text) :where(h1,h2,h3,h4,h5,h6){font-weight:var(--ui-text-weight-bold);font-family:var(--font-secondary);font-size:var(--ui-text-heading-size, 1rem);line-height:calc(var(--ui-text-heading-size) + .5rem);margin:var(--ui-text-content-my) 0 var(--ui-text-content-my-sm)}:where(.ui-text) :where(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}:where(.ui-text) :where(h1){--ui-text-heading-size: 2.25rem}:where(.ui-text) :where(h2){--ui-text-heading-size: 1.75rem}:where(.ui-text) :where(h3,h4){--ui-text-heading-size: 1.25rem}:where(.ui-text) :where(table){border:0;min-width:100%}:where(.ui-text) :where(table) :where(td,th){padding:1rem 1.25rem;text-align:left}:where(.ui-text) :where(table) :where(thead){font-weight:var(--ui-text-weight-bold);border-bottom:1px solid rgb(var(--color-current) / .075)}:where(.ui-text) :where(table) :where(tbody tr):nth-of-type(even){background-color:rgb(var(--color-current) / .05)}:where(.ui-text) :where(iframe){max-width:100%}:where(.ui-text) :where(iframe):where([src*="youtube.com"]){aspect-ratio:16/9;height:auto}:where(.ui-text) :where(blockquote){border-left:.3125rem solid rgb(var(--color-accent) / 1);padding:.5rem 1.25rem;margin:1rem 0;font-size:inherit}:where(.ui-text) :where(code){margin:0 .25rem;border-radius:var(--rounded-xs);padding:.25rem .375rem;font-size:.85em;color:rgb(var(--color-accent));font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:#1b1f230d}.dark :is(:where(.ui-text) :where(code)){background-color:rgb(var(--color-background-200))}:where(.ui-text) :where(ol){margin:var(--ui-text-content-my) 0;padding:0 0 0 1rem}:where(.ui-text) :where(ol):not([type]){list-style:decimal}:where(.ui-text) :where(ol) :where(li){padding-left:.5rem}:where(.ui-text) :where(ol) :where(li):not(:last-child){margin:0 0 .5rem}:where(.ui-text) :where(ol) :where(li)::marker{color:rgb(var(--color-accent));font-weight:var(--ui-text-weight-bold)}:where(.ui-text) :where(ul){list-style-type:none!important;margin:var(--ui-text-content-my) 0;padding:0}:where(.ui-text) :where(ul) :where(li){position:relative;line-height:inherit;padding-left:1.25rem}:where(.ui-text) :where(ul) :where(li):not(:last-child){margin:0 0 .5rem}:where(.ui-text) :where(ul) :where(li):before{width:.375rem;height:.375rem;position:absolute;content:"";border:1px solid rgb(var(--color-accent));background-color:rgb(var(--color-accent));left:0;top:.6875rem;text-indent:0;border-radius:50%}:where(.ui-text) [style*=square]:where(ul) :where(li):before{border-radius:0}:where(.ui-text) [style*=circle]:where(ul) :where(li):before{border-radius:50%;background-color:transparent}:where(.ui-title){--ui-title-font-family: var(--font-secondary);--ui-title-font-weight: var(--font-semibold);--ui-title-font-size: .875rem;--ui-title-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));--ui-title-line-height-ratio: .375rem;font-family:var(--ui-title-font-family);font-size:var(--ui-title-font-size);line-height:var(--ui-title-line-height);font-weight:var(--ui-title-font-weight)}:where(.ui-title):where(.is-sm){--ui-title-font-size: .75rem}:where(.ui-title):where(.is-lg){--ui-title-font-size: 1.125rem}:where(.c-dialog){--c-dialog-py: 1.5rem;--c-dialog-px: 1.5rem;--c-dialog-width: 35rem;--c-dialog-offset-y: 2rem;--c-dialog-animation-duration: var(--transition-duration);animation:var(--c-dialog-animation-duration) ease 0s backwards 1 fade-in-down;position:relative;z-index:var(--z-20);margin:auto;background-color:rgb(var(--color-background));width:100%;max-width:var(--c-dialog-width);border-radius:var(--rounded-md);padding:var(--c-dialog-py) var(--c-dialog-px)}:where(dialog:not([open])) :where(.c-dialog){animation:var(--c-dialog-animation-duration) ease 0s forwards 1 fade-out-up}:where(.c-field){--c-field-gap: .5rem;display:flex;flex-direction:column;gap:var(--c-field-gap)}.js-has-pseudo [csstools-has-1a-2x-37-19-3a-2p-30-2x-2s-2p-38-2t-2s-w-1m-3b-2w-2t-36-2t-14-1a-2r-19-2u-2x-2t-30-2s-15-1m-2w-2p-37-14-1m-2x-32-3a-2p-30-2x-2s-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-2u-33-2j-2w-2x-2s-2s-2t-32-2l-15]:not(.does-not-exist){display:block}.is-validated :where(.c-field):has(:invalid) :where(.ui-info[hidden]){display:block}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-2r-19-2u-2x-2t-30-2s-15-1m-2w-2p-37-14-2j-36-2t-35-39-2x-36-2t-2s-2l-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-30-2p-2q-2t-30-15]:after{color:rgb(var(--color-error));content:" *"}:where(.c-field):has([required]) :where(.ui-label):after{color:rgb(var(--color-error));content:" *"}:where(.lib-dialog){--lib-dialog-bg: var(--color-dark);--lib-dialog-opacity: .8;--lib-dialog-py: 2rem;--lib-dialog-px: 1.5rem;--lib-dialog-animation-duration: var(--transition-duration);inset:0;z-index:var(--z-30);position:fixed;overflow:auto;-webkit-overflow-scrolling:touch;background-color:rgb(var(--lib-dialog-bg) / var(--lib-dialog-opacity));overscroll-behavior:contain;display:flex;visibility:hidden;padding:var(--lib-dialog-py) var(--lib-dialog-px)}:where(.lib-dialog):not([open]){animation:var(--lib-dialog-animation-duration) ease 0s forwards 1 fade-out;pointer-events:none}[open]:where(.lib-dialog){animation:var(--lib-dialog-animation-duration) ease 0s backwards 1 fade-in}.is-lib-dialog-open :where(.lib-dialog){visibility:visible}.is-lib-dialog-open{overflow:hidden;padding-right:var(--lib-dialog-scrollbar-width, 0)}:where(.lib-ripple){--lib-ripple-animation-duration: 1s;--lib-ripple-bg: rgb(var(--color-background) / var(--tw-bg-opacity, .4));position:absolute;background:var(--lib-ripple-bg);border-radius:50%;transform:scale(0);animation-duration:var(--lib-ripple-animation-duration);pointer-events:none}
package/dist/tailwind.css CHANGED
@@ -1 +1 @@
1
- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.col-span-12{grid-column:span 12 / span 12}.col-span-3{grid-column:span 3 / span 3}.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.w-24{width:6rem}.w-full{width:100%}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.rounded{border-radius:var(--rounded)}.rounded-full{border-radius:var(--rounded-full)}.bg-accent{--tw-bg-opacity: 1;background-color:rgb(var(--color-accent) / var(--tw-bg-opacity))}.bg-background{--tw-bg-opacity: 1;background-color:rgb(var(--color-background) / var(--tw-bg-opacity))}.bg-blue-100\/10{background-color:#dbeafe1a}.bg-current{--tw-bg-opacity: 1;background-color:rgb(var(--color-current) / var(--tw-bg-opacity))}.bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.bg-default{--tw-bg-opacity: 1;background-color:rgb(var(--color-default) / var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity: 1;background-color:rgb(var(--color-error) / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity: 1;background-color:rgb(var(--color-info) / var(--tw-bg-opacity))}.bg-light{--tw-bg-opacity: 1;background-color:rgb(var(--color-light) / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(var(--color-secondary) / var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity: 1;background-color:rgb(var(--color-success) / var(--tw-bg-opacity))}.bg-warning{--tw-bg-opacity: 1;background-color:rgb(var(--color-warning) / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-opacity-10{--tw-bg-opacity: .1}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-purple-600{--tw-gradient-from: #9333ea;--tw-gradient-to: rgb(147 51 234 / 0);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6}.p-md{padding:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-secondary{font-family:var(--font-secondary)}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:var(--font-bold)}.font-extrabold{font-weight:var(--font-extrabold)}.font-light{font-weight:var(--font-light)}.font-medium{font-weight:var(--font-medium)}.font-normal{font-weight:var(--font-normal)}.font-semibold{font-weight:var(--font-semibold)}.uppercase{text-transform:uppercase}.text-accent{--tw-text-opacity: 1;color:rgb(var(--color-accent) / var(--tw-text-opacity))}.text-background{--tw-text-opacity: 1;color:rgb(var(--color-background) / var(--tw-text-opacity))}.text-current{--tw-text-opacity: 1;color:rgb(var(--color-current) / var(--tw-text-opacity))}.text-dark{--tw-text-opacity: 1;color:rgb(var(--color-dark) / var(--tw-text-opacity))}.text-default{--tw-text-opacity: 1;color:rgb(var(--color-default) / var(--tw-text-opacity))}.text-error{--tw-text-opacity: 1;color:rgb(var(--color-error) / var(--tw-text-opacity))}.text-info{--tw-text-opacity: 1;color:rgb(var(--color-info) / var(--tw-text-opacity))}.text-light{--tw-text-opacity: 1;color:rgb(var(--color-light) / var(--tw-text-opacity))}.text-primary{--tw-text-opacity: 1;color:rgb(var(--color-primary) / var(--tw-text-opacity))}.text-primary\/50{color:rgb(var(--color-primary) / .5)}.text-secondary{--tw-text-opacity: 1;color:rgb(var(--color-secondary) / var(--tw-text-opacity))}.text-success{--tw-text-opacity: 1;color:rgb(var(--color-success) / var(--tw-text-opacity))}.text-warning{--tw-text-opacity: 1;color:rgb(var(--color-warning) / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.accent-accent{accent-color:rgb(var(--color-accent))}.accent-amber-600{accent-color:#d97706}.accent-background{accent-color:rgb(var(--color-background))}.accent-current{accent-color:rgb(var(--color-current))}.accent-dark{accent-color:rgb(var(--color-dark))}.accent-default{accent-color:rgb(var(--color-default))}.accent-error{accent-color:rgb(var(--color-error))}.accent-info{accent-color:rgb(var(--color-info))}.accent-light{accent-color:rgb(var(--color-light))}.accent-primary{accent-color:rgb(var(--color-primary))}.accent-secondary{accent-color:rgb(var(--color-secondary))}.accent-success{accent-color:rgb(var(--color-success))}.accent-warning{accent-color:rgb(var(--color-warning))}.accent-current{--color-accent: var(--color-current)}.accent-amber-600{--color-accent: 217 119 6}.accent-background{--color-accent: var(--color-background)}.accent-default{--color-accent: var(--color-default)}.accent-light{--color-accent: var(--color-light)}.accent-dark{--color-accent: var(--color-dark)}.accent-primary{--color-accent: var(--color-primary)}.accent-secondary{--color-accent: var(--color-secondary)}.accent-warning{--color-accent: var(--color-warning)}.accent-error{--color-accent: var(--color-error)}.accent-info{--color-accent: var(--color-info)}.accent-success{--color-accent: var(--color-success)}.accent-accent{--color-accent: var(--color-accent)}.text-current{--color-current: var(--color-current)}.text-background{--color-current: var(--color-background)}.text-default{--color-current: var(--color-default)}.text-light{--color-current: var(--color-light)}.text-dark{--color-current: var(--color-dark)}.text-primary{--color-current: var(--color-primary)}.text-secondary{--color-current: var(--color-secondary)}.text-warning{--color-current: var(--color-warning)}.text-error{--color-current: var(--color-error)}.text-info{--color-current: var(--color-info)}.text-success{--color-current: var(--color-success)}.text-accent{--color-current: var(--color-accent)}:where(.container){margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding);max-width:var(--container-width)}:where(.container):where(.is-sm){--container-width: var(--container-width-sm)}:where(.row){--gx: 0rem;--gy: 0rem;display:flex;margin:calc(var(--gy) / -2) calc(var(--gx) / -2) calc(var(--gy) / -2) calc(var(--gx) / -2)}:where(.row)>*{padding:calc(var(--gy) / 2) calc(var(--gx) / 2) calc(var(--gy) / 2) calc(var(--gx) / 2)}:where(.col){display:flex;flex-direction:column}.dark .dark\:bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.dark .dark\:text-light{--tw-text-opacity: 1;color:rgb(var(--color-light) / var(--tw-text-opacity));--color-current: var(--color-light)}
1
+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.col-span-12{grid-column:span 12 / span 12}.col-span-3{grid-column:span 3 / span 3}.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.min-h-\[200vh\]{min-height:200vh}.w-24{width:6rem}.w-full{width:100%}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.rounded{border-radius:var(--rounded)}.rounded-full{border-radius:var(--rounded-full)}.bg-accent{--tw-bg-opacity: 1;background-color:rgb(var(--color-accent) / var(--tw-bg-opacity))}.bg-background{--tw-bg-opacity: 1;background-color:rgb(var(--color-background) / var(--tw-bg-opacity))}.bg-blue-100\/10{background-color:#dbeafe1a}.bg-current{--tw-bg-opacity: 1;background-color:rgb(var(--color-current) / var(--tw-bg-opacity))}.bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.bg-default{--tw-bg-opacity: 1;background-color:rgb(var(--color-default) / var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity: 1;background-color:rgb(var(--color-error) / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity: 1;background-color:rgb(var(--color-info) / var(--tw-bg-opacity))}.bg-light{--tw-bg-opacity: 1;background-color:rgb(var(--color-light) / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(var(--color-secondary) / var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity: 1;background-color:rgb(var(--color-success) / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-warning{--tw-bg-opacity: 1;background-color:rgb(var(--color-warning) / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-opacity-10{--tw-bg-opacity: .1}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-purple-600{--tw-gradient-from: #9333ea;--tw-gradient-to: rgb(147 51 234 / 0);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6}.p-md{padding:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-secondary{font-family:var(--font-secondary)}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:var(--font-bold)}.font-extrabold{font-weight:var(--font-extrabold)}.font-light{font-weight:var(--font-light)}.font-medium{font-weight:var(--font-medium)}.font-normal{font-weight:var(--font-normal)}.font-semibold{font-weight:var(--font-semibold)}.uppercase{text-transform:uppercase}.text-accent{--tw-text-opacity: 1;color:rgb(var(--color-accent) / var(--tw-text-opacity))}.text-background{--tw-text-opacity: 1;color:rgb(var(--color-background) / var(--tw-text-opacity))}.text-current{--tw-text-opacity: 1;color:rgb(var(--color-current) / var(--tw-text-opacity))}.text-dark{--tw-text-opacity: 1;color:rgb(var(--color-dark) / var(--tw-text-opacity))}.text-default{--tw-text-opacity: 1;color:rgb(var(--color-default) / var(--tw-text-opacity))}.text-error{--tw-text-opacity: 1;color:rgb(var(--color-error) / var(--tw-text-opacity))}.text-info{--tw-text-opacity: 1;color:rgb(var(--color-info) / var(--tw-text-opacity))}.text-light{--tw-text-opacity: 1;color:rgb(var(--color-light) / var(--tw-text-opacity))}.text-primary{--tw-text-opacity: 1;color:rgb(var(--color-primary) / var(--tw-text-opacity))}.text-primary\/50{color:rgb(var(--color-primary) / .5)}.text-secondary{--tw-text-opacity: 1;color:rgb(var(--color-secondary) / var(--tw-text-opacity))}.text-success{--tw-text-opacity: 1;color:rgb(var(--color-success) / var(--tw-text-opacity))}.text-warning{--tw-text-opacity: 1;color:rgb(var(--color-warning) / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.accent-accent{accent-color:rgb(var(--color-accent))}.accent-amber-600{accent-color:#d97706}.accent-background{accent-color:rgb(var(--color-background))}.accent-current{accent-color:rgb(var(--color-current))}.accent-dark{accent-color:rgb(var(--color-dark))}.accent-default{accent-color:rgb(var(--color-default))}.accent-error{accent-color:rgb(var(--color-error))}.accent-info{accent-color:rgb(var(--color-info))}.accent-light{accent-color:rgb(var(--color-light))}.accent-primary{accent-color:rgb(var(--color-primary))}.accent-secondary{accent-color:rgb(var(--color-secondary))}.accent-success{accent-color:rgb(var(--color-success))}.accent-warning{accent-color:rgb(var(--color-warning))}.accent-current{--color-accent: var(--color-current)}.accent-amber-600{--color-accent: 217 119 6}.accent-background{--color-accent: var(--color-background)}.accent-default{--color-accent: var(--color-default)}.accent-light{--color-accent: var(--color-light)}.accent-dark{--color-accent: var(--color-dark)}.accent-primary{--color-accent: var(--color-primary)}.accent-secondary{--color-accent: var(--color-secondary)}.accent-warning{--color-accent: var(--color-warning)}.accent-error{--color-accent: var(--color-error)}.accent-info{--color-accent: var(--color-info)}.accent-success{--color-accent: var(--color-success)}.accent-accent{--color-accent: var(--color-accent)}.text-current{--color-current: var(--color-current)}.text-background{--color-current: var(--color-background)}.text-default{--color-current: var(--color-default)}.text-light{--color-current: var(--color-light)}.text-dark{--color-current: var(--color-dark)}.text-primary{--color-current: var(--color-primary)}.text-secondary{--color-current: var(--color-secondary)}.text-warning{--color-current: var(--color-warning)}.text-error{--color-current: var(--color-error)}.text-info{--color-current: var(--color-info)}.text-success{--color-current: var(--color-success)}.text-accent{--color-current: var(--color-accent)}.animation-ripple{animation-name:ripple}:where(.container){margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding);max-width:var(--container-width)}:where(.container):where(.is-sm){--container-width: var(--container-width-sm)}:where(.row){--gx: 0rem;--gy: 0rem;display:flex;margin:calc(var(--gy) / -2) calc(var(--gx) / -2) calc(var(--gy) / -2) calc(var(--gx) / -2)}:where(.row)>*{padding:calc(var(--gy) / 2) calc(var(--gx) / 2) calc(var(--gy) / 2) calc(var(--gx) / 2)}:where(.col){display:flex;flex-direction:column}.dark .dark\:bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.dark .dark\:text-light{--tw-text-opacity: 1;color:rgb(var(--color-light) / var(--tw-text-opacity));--color-current: var(--color-light)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "winduum",
3
- "version": "0.1.8",
3
+ "version": "0.1.10",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -21,15 +21,13 @@
21
21
  "eslint": "^8.34.0",
22
22
  "eslint-config-standard": "^17.0.0",
23
23
  "postcss": "^8.4.21",
24
- "postcss-custom-media": "^9.1.2",
25
- "postcss-custom-properties": "^13.1.3",
26
- "postcss-custom-selectors": "^7.1.2",
27
24
  "postcss-import": "^15.1.0",
28
25
  "postcss-nesting": "^11.2.1",
26
+ "postcss-custom-media": "^9.1.2",
29
27
  "stylelint-config-standard": "^29.0.0",
30
28
  "tailwindcss": "^3.2.7",
31
29
  "fast-glob": "^3.2.12",
32
- "vite": "^4.1.1",
30
+ "vite": "^4.1.4",
33
31
  "vue": "^3.2.47"
34
32
  },
35
33
  "files": [
package/src/base/index.css ADDED
@@ -0,0 +1,8 @@
1
+ @import "reset.css";
2
+ @import "default.css";
3
+ @import "breakpoints.css";
4
+ @import "config.css";
5
+ @import "icons.css";
6
+ @import "keyframes.css";
7
+ @import "theme/default.css";
8
+ @import "theme/dark.css";
package/src/base/tailwind/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer utilities {
2
- .animation {
2
+ :where(.animate) {
3
3
  animation-duration: var(--transition-duration);
4
4
  animation-fill-mode: both;
5
5
  }
package/src/components/+.css CHANGED
@@ -1,5 +1,2 @@
1
1
  @import "Dialog.css";
2
- @import "Drawer.css";
3
- @import "Dropdown.css";
4
2
  @import "Field.css";
5
- @import "Table.css";
package/src/components/Dialog.css CHANGED
@@ -1,3 +1,21 @@
1
1
  :where(.c-dialog) {
2
+ --c-dialog-py: 1.5rem;
3
+ --c-dialog-px: 1.5rem;
4
+ --c-dialog-width: 35rem;
5
+ --c-dialog-offset-y: 2rem;
6
+ --c-dialog-animation-duration: var(--transition-duration);
2
7
 
8
+ animation: var(--c-dialog-animation-duration) ease 0s backwards 1 fade-in-down;
9
+ position: relative;
10
+ z-index: var(--z-20);
11
+ margin: auto;
12
+ background-color: rgb(var(--color-background));
13
+ width: 100%;
14
+ max-width: var(--c-dialog-width);
15
+ border-radius: var(--rounded-md);
16
+ padding: var(--c-dialog-py) var(--c-dialog-px);
17
+
18
+ :where(dialog:not([open])) & {
19
+ animation: var(--c-dialog-animation-duration) ease 0s forwards 1 fade-out-up;
20
+ }
3
21
  }
package/src/components/Field.css CHANGED
@@ -1,6 +1,5 @@
1
1
  :where(.c-field) {
2
2
  --c-field-gap: 0.5rem;
3
- --c-field-input-height: 3rem;
4
3
 
5
4
  display: flex;
6
5
  flex-direction: column;
@@ -12,31 +11,10 @@
12
11
  }
13
12
  }
14
13
 
15
- &:where(.is-horizontal) {
16
- align-items: flex-start;
17
- flex-direction: row;
18
-
19
- & :where(.ui-label) {
20
- min-height: var(--ui-input-height);
21
- align-items: center;
22
- display: flex;
23
- }
24
-
25
- & > :where(.col) {
26
- gap: var(--c-field-gap);
27
- justify-content: center;
28
- }
29
- }
30
-
31
14
  &:has([required]) :where(.ui-label) {
32
15
  &::after {
33
16
  color: rgb(var(--color-error));
34
17
  content: " *";
35
18
  }
36
19
  }
37
-
38
- & :where(.is-input-offset) {
39
- min-height: var(--c-field-input-height);
40
- justify-content: center;
41
- }
42
20
  }
package/src/libraries/+.css CHANGED
@@ -1,3 +1,2 @@
1
1
  @import "Dialog.css";
2
- @import "Hint.css";
3
-
2
+ @import "Ripple.css";
package/src/libraries/Dialog.css CHANGED
@@ -1,3 +1,36 @@
1
1
  :where(.lib-dialog) {
2
+ --lib-dialog-bg: var(--color-dark);
3
+ --lib-dialog-opacity: 0.8;
4
+ --lib-dialog-py: 2rem;
5
+ --lib-dialog-px: 1.5rem;
6
+ --lib-dialog-animation-duration: var(--transition-duration);
2
7
 
8
+ inset: 0;
9
+ z-index: var(--z-30);
10
+ position: fixed;
11
+ overflow: auto;
12
+ -webkit-overflow-scrolling: touch;
13
+ background-color: rgb(var(--lib-dialog-bg) / var(--lib-dialog-opacity));
14
+ overscroll-behavior: contain;
15
+ display: flex;
16
+ visibility: hidden;
17
+ padding: var(--lib-dialog-py) var(--lib-dialog-px);
18
+
19
+ &:not([open]) {
20
+ animation: var(--lib-dialog-animation-duration) ease 0s forwards 1 fade-out;
21
+ pointer-events: none;
22
+ }
23
+
24
+ &[open] {
25
+ animation: var(--lib-dialog-animation-duration) ease 0s backwards 1 fade-in;
26
+ }
27
+
28
+ .is-lib-dialog-open & {
29
+ visibility: visible;
30
+ }
31
+ }
32
+
33
+ .is-lib-dialog-open {
34
+ overflow: hidden;
35
+ padding-right: var(--lib-dialog-scrollbar-width, 0);
3
36
  }
package/src/libraries/Dialog.js CHANGED
@@ -0,0 +1,88 @@
1
+ const defaultOptions = {
2
+ openClass: 'is-lib-dialog-open',
3
+ show: {
4
+ content: undefined ?? null,
5
+ selector: '.lib-dialog.is-inserted' ?? null,
6
+ remove: false ?? null,
7
+ append: false ?? null,
8
+ closable: true ?? null,
9
+ class: 'lib-dialog' ?? null
10
+ },
11
+ close: {
12
+ selector: '.lib-dialog.is-inserted[open]' ?? null,
13
+ remove: false ?? null
14
+ }
15
+ }
16
+
17
+ const dialogSelector = selector => typeof selector === 'string'
18
+ ? document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1] ?? null
19
+ : selector
20
+
21
+ const dialogDismiss = async (options) => {
22
+ await Promise.allSettled(dialogSelector(options.selector).getAnimations().map(animation => animation.finished))
23
+ options.remove && dialogSelector(options.selector).remove()
24
+ dialogSelector(options.selector).setAttribute('inert', '')
25
+
26
+ if (!document.querySelector('dialog[open]')) {
27
+ document.documentElement.classList.remove(defaultOptions.openClass)
28
+ }
29
+ }
30
+
31
+ const showDialog = async (options = defaultOptions.show) => {
32
+ options = Object.assign({}, defaultOptions.show, options)
33
+
34
+ if (options.content && !options.append && dialogSelector(options.selector)) {
35
+ dialogSelector(options.selector)?.firstElementChild?.remove()
36
+ }
37
+
38
+ if (options.content && (options.append || !dialogSelector(options.selector))) {
39
+ document.body.insertAdjacentHTML('beforeend', `<dialog class="${defaultOptions.show.class} is-inserted"></dialog>`)
40
+ }
41
+
42
+ if (!dialogSelector(options.selector)._dialogHasEvents && options.closable) {
43
+ dialogSelector(options.selector).addEventListener('keydown', async ({ key }) => {
44
+ if (key === 'Escape') {
45
+ setTimeout(() => dialogDismiss(options), 1)
46
+ }
47
+ })
48
+
49
+ dialogSelector(options.selector).addEventListener('click', ({ target }) => {
50
+ if (target.nodeName === 'DIALOG') {
51
+ closeDialog(options)
52
+ }
53
+ })
54
+
55
+ dialogSelector(options.selector)._dialogHasEvents = true
56
+ }
57
+
58
+ dialogSelector(options.selector).removeAttribute('inert')
59
+
60
+ options.content &&
61
+ dialogSelector(options.selector).insertAdjacentHTML('beforeend', options.content)
62
+
63
+ document.documentElement.classList.add(defaultOptions.openClass)
64
+
65
+ window.HTMLDialogElement
66
+ ? dialogSelector(options.selector).showModal()
67
+ : dialogSelector(options.selector).setAttribute('open', '')
68
+
69
+ document.documentElement.style.setProperty('--lib-dialog-scrollbar-width', `${window.innerWidth - document.body.clientWidth}px`)
70
+ }
71
+
72
+ const closeDialog = async (options = defaultOptions.close) => {
73
+ options = Object.assign({}, defaultOptions.close, options)
74
+
75
+ window.HTMLDialogElement
76
+ ? dialogSelector(options.selector).close()
77
+ : dialogSelector(options.selector).removeAttribute('open')
78
+
79
+ await dialogDismiss(options)
80
+ }
81
+
82
+ const fetchDialog = async ({ url, showOptions = {} }) => {
83
+ await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
84
+ .then(response => response.json())
85
+ .then(async ({ content }) => await showDialog({ content, ...showOptions }))
86
+ }
87
+
88
+ export { showDialog, closeDialog, fetchDialog }
package/src/libraries/Ripple.css ADDED
@@ -0,0 +1,11 @@
1
+ :where(.lib-ripple) {
2
+ --lib-ripple-animation-duration: 1s;
3
+ --lib-ripple-bg: rgb(var(--color-background) / var(--tw-bg-opacity, 0.4));
4
+
5
+ position: absolute;
6
+ background: var(--lib-ripple-bg);
7
+ border-radius: 50%;
8
+ transform: scale(0);
9
+ animation-duration: var(--lib-ripple-animation-duration);
10
+ pointer-events: none;
11
+ }
package/src/libraries/Ripple.js ADDED
@@ -0,0 +1,27 @@
1
+ const showRipple = ({ currentTarget, pageX, pageY }) => {
2
+ if (currentTarget.querySelector('.lib-ripple') === null) {
3
+ currentTarget.insertAdjacentHTML('beforeend', "<div class='lib-ripple'></div>")
4
+ }
5
+
6
+ const ripple = currentTarget.querySelector('.lib-ripple')
7
+
8
+ ripple.classList.remove('animation-ripple')
9
+
10
+ if (ripple.clientWidth === 0 && ripple.clientHeight === 0) {
11
+ const d = Math.max(currentTarget.offsetWidth, currentTarget.offsetHeight)
12
+
13
+ ripple.style.width = d + 'px'
14
+ ripple.style.height = d + 'px'
15
+ }
16
+
17
+ let x, y
18
+
19
+ x = pageX - currentTarget.offsetLeft - (ripple.clientWidth / 2)
20
+ y = pageY - currentTarget.offsetTop - (ripple.clientHeight / 2)
21
+
22
+ ripple.style.top = y + 'px'
23
+ ripple.style.left = x + 'px'
24
+ ripple.classList.add('animation-ripple')
25
+ }
26
+
27
+ export { showRipple }
package/src/main.css CHANGED
@@ -1,11 +1,4 @@
1
- @import "base/reset.css";
2
- @import "base/default.css";
3
- @import "base/breakpoints.css";
4
- @import "base/config.css";
5
- @import "base/icons.css";
6
- @import "base/keyframes.css";
7
- @import "base/theme/default.css";
8
- @import "base/theme/dark.css";
1
+ @import "base/index.css";
9
2
  @import "ui/+.css";
10
3
  @import "components/+.css";
11
4
  @import "libraries/+.css";
package/utils/tailwind.cjs CHANGED
@@ -15,7 +15,7 @@ const defaultConfig = {
15
15
  zIndex: [10, 20, 30, 40, 50, 60],
16
16
  spacing: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section'],
17
17
  borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
18
- animations: ['fade-in', 'fade-out'],
18
+ animations: ['fade-in', 'fade-out', 'ripple'],
19
19
  screens: {
20
20
  'xs': '22.5em',
21
21
  'sm': '26em',
package/utils/tailwind.js CHANGED
@@ -12,7 +12,7 @@ export const defaultConfig = {
12
12
  zIndex: [10, 20, 30, 40, 50, 60],
13
13
  spacing: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section'],
14
14
  borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
15
- animations: ['fade-in', 'fade-out'],
15
+ animations: ['fade-in', 'fade-out', 'ripple'],
16
16
  screens: {
17
17
  'xs': '22.5em',
18
18
  'sm': '26em',
package/src/components/Drawer.css DELETED
@@ -1,3 +0,0 @@
1
- :where(.c-drawer) {
2
-
3
- }
package/src/components/Dropdown.css DELETED
@@ -1,3 +0,0 @@
1
- :where(.c-dropdown) {
2
-
3
- }
package/src/components/Table.css DELETED
@@ -1,3 +0,0 @@
1
- :where(.c-table) {
2
-
3
- }
package/src/libraries/Hint.css DELETED
@@ -1,3 +0,0 @@
1
- :where(.lib-hint) {
2
-
3
- }