zuii 1.4.24 → 1.4.26

package/dist/components/Button/style/index.css

@@ -1 +1 @@
-@layer components{.btn{background-color:var(--primary);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-bg: var(--primary-dark);--btn-hover-border-color: var(--primary-dark);--btn-active-bg: var(--primary-dark);--btn-active-border-color: var(--primary-dark);--btn-disabled-bg: var(--gray-300);--btn-disabled-border-color: var(--gray-300);height:fit-content;display:flex;gap:.3rem}.btn:hover,.btn:focus{box-shadow:var(--box-shadow-md)}.btn-content{display:flex;line-height:initial;gap:.3rem;align-items:center}.btn-icon{display:flex;line-height:initial;justify-content:center;align-items:center;padding:.4rem}.btn-icon .btn-content{flex-direction:column}.btn-reverse{flex-direction:row-reverse}.btn-primary{--color: color-mix(in srgb, var(--primary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary);--btn-active-border-color: var(--primary)}.btn-primary-light{--color: color-mix(in srgb, var(--primary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-light-contrast);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-primary-dark{--color: color-mix(in srgb, var(--primary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-dark-contrast);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-outline-primary{--color: color-mix(in srgb, var(--primary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-light{--color: color-mix(in srgb, var(--primary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-light-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-dark{--color: color-mix(in srgb, var(--primary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-dark-contrast);background:transparent;color:var(--primary-dark);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-secondary{--color: color-mix(in srgb, var(--secondary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-contrast);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary);--btn-active-border-color: var(--secondary)}.btn-secondary-light{--color: color-mix(in srgb, var(--secondary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-light-contrast);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-secondary-dark{--color: color-mix(in srgb, var(--secondary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-dark-contrast);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-outline-secondary{--color: color-mix(in srgb, var(--secondary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-light{--color: color-mix(in srgb, var(--secondary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-light-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-dark{--color: color-mix(in srgb, var(--secondary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-dark-contrast);background:transparent;color:var(--secondary-dark);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-accent{--color: color-mix(in srgb, var(--accent), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-contrast);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent);--btn-active-border-color: var(--accent)}.btn-accent-light{--color: color-mix(in srgb, var(--accent-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-light-contrast);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-accent-dark{--color: color-mix(in srgb, var(--accent-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-dark-contrast);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-outline-accent{--color: color-mix(in srgb, var(--accent), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-light{--color: color-mix(in srgb, var(--accent-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-light-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-dark{--color: color-mix(in srgb, var(--accent-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-dark-contrast);background:transparent;color:var(--accent-dark);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-tertiary{--color: color-mix(in srgb, var(--tertiary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-contrast);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary);--btn-active-border-color: var(--tertiary)}.btn-tertiary-light{--color: color-mix(in srgb, var(--tertiary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-light-contrast);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-tertiary-dark{--color: color-mix(in srgb, var(--tertiary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-dark-contrast);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-outline-tertiary{--color: color-mix(in srgb, var(--tertiary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-light{--color: color-mix(in srgb, var(--tertiary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-light-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-dark{--color: color-mix(in srgb, var(--tertiary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-dark-contrast);background:transparent;color:var(--tertiary-dark);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-success{--color: color-mix(in srgb, var(--success), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-contrast);--btn-border-color: var(--success);--btn-hover-border-color: var(--success);--btn-active-border-color: var(--success)}.btn-success-light{--color: color-mix(in srgb, var(--success-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-light-contrast);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-success-dark{--color: color-mix(in srgb, var(--success-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-dark-contrast);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-outline-success{--color: color-mix(in srgb, var(--success), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-light{--color: color-mix(in srgb, var(--success-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-light-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-dark{--color: color-mix(in srgb, var(--success-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-dark-contrast);background:transparent;color:var(--success-dark);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-danger{--color: color-mix(in srgb, var(--danger), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-contrast);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger);--btn-active-border-color: var(--danger)}.btn-danger-light{--color: color-mix(in srgb, var(--danger-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-light-contrast);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-danger-dark{--color: color-mix(in srgb, var(--danger-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-dark-contrast);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-outline-danger{--color: color-mix(in srgb, var(--danger), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-light{--color: color-mix(in srgb, var(--danger-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-light-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-dark{--color: color-mix(in srgb, var(--danger-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-dark-contrast);background:transparent;color:var(--danger-dark);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-warning{--color: color-mix(in srgb, var(--warning), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-contrast);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning);--btn-active-border-color: var(--warning)}.btn-warning-light{--color: color-mix(in srgb, var(--warning-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-light-contrast);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-warning-dark{--color: color-mix(in srgb, var(--warning-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-dark-contrast);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-outline-warning{--color: color-mix(in srgb, var(--warning), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-light{--color: color-mix(in srgb, var(--warning-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-light-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-dark{--color: color-mix(in srgb, var(--warning-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-dark-contrast);background:transparent;color:var(--warning-dark);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-info{--color: color-mix(in srgb, var(--info), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-contrast);--btn-border-color: var(--info);--btn-hover-border-color: var(--info);--btn-active-border-color: var(--info)}.btn-info-light{--color: color-mix(in srgb, var(--info-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-light-contrast);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-info-dark{--color: color-mix(in srgb, var(--info-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-dark-contrast);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-outline-info{--color: color-mix(in srgb, var(--info), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-light{--color: color-mix(in srgb, var(--info-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-light-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-dark{--color: color-mix(in srgb, var(--info-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-dark-contrast);background:transparent;color:var(--info-dark);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-light{--color: color-mix(in srgb, var(--light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-contrast);--btn-border-color: var(--light);--btn-hover-border-color: var(--light);--btn-active-border-color: var(--light)}.btn-light-light{--color: color-mix(in srgb, var(--light-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-light-contrast);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-light-dark{--color: color-mix(in srgb, var(--light-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-dark-contrast);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-outline-light{--color: color-mix(in srgb, var(--light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-light{--color: color-mix(in srgb, var(--light-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-dark{--color: color-mix(in srgb, var(--light-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-dark-contrast);background:transparent;color:var(--light-dark);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-dark{--color: color-mix(in srgb, var(--dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-contrast);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark);--btn-active-border-color: var(--dark)}.btn-dark-light{--color: color-mix(in srgb, var(--dark-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-light-contrast);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-dark-dark{--color: color-mix(in srgb, var(--dark-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-dark-contrast);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-outline-dark{--color: color-mix(in srgb, var(--dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-light{--color: color-mix(in srgb, var(--dark-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-light-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-dark{--color: color-mix(in srgb, var(--dark-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-dark-contrast);background:transparent;color:var(--dark-dark);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-transparent{background:transparent;border:none;color:currentColor}.btn-transparent:hover,.btn-transparent:focus{box-shadow:none}.btn-transparent:hover{color:var(--accent)}.btn-none{--btn-font-size: calc(var(--spacing-none) * 0);--btn-padding-y: calc(var(--spacing-none) * 0 * .5);--btn-padding-x: calc(var(--spacing-none) * 0);--btn-border-radius: var(--border-radius)}.btn-xs{--btn-font-size: calc(var(--spacing-xs) * 3);--btn-padding-y: calc(var(--spacing-xs) * 3 * .5);--btn-padding-x: calc(var(--spacing-xs) * 3);--btn-border-radius: var(--border-radius)}.btn-sm{--btn-font-size: calc(var(--spacing-sm) * 1.75);--btn-padding-y: calc(var(--spacing-sm) * 1.75 * .5);--btn-padding-x: calc(var(--spacing-sm) * 1.75);--btn-border-radius: var(--border-radius)}.btn-md{--btn-font-size: calc(var(--spacing-md) * 1);--btn-padding-y: calc(var(--spacing-md) * 1 * .5);--btn-padding-x: calc(var(--spacing-md) * 1);--btn-border-radius: var(--border-radius)}.btn-lg{--btn-font-size: calc(var(--spacing-lg) * .625);--btn-padding-y: calc(var(--spacing-lg) * .625 * .5);--btn-padding-x: calc(var(--spacing-lg) * .625);--btn-border-radius: var(--border-radius)}.btn-xl{--btn-font-size: calc(var(--spacing-xl) * .375);--btn-padding-y: calc(var(--spacing-xl) * .375 * .5);--btn-padding-x: calc(var(--spacing-xl) * .375);--btn-border-radius: var(--border-radius)}.btn-2xl{--btn-font-size: calc(var(--spacing-2xl) * .25);--btn-padding-y: calc(var(--spacing-2xl) * .25 * .5);--btn-padding-x: calc(var(--spacing-2xl) * .25);--btn-border-radius: var(--border-radius)}.btn-3xl{--btn-font-size: calc(var(--spacing-3xl) * .15);--btn-padding-y: calc(var(--spacing-3xl) * .15 * .5);--btn-padding-x: calc(var(--spacing-3xl) * .15);--btn-border-radius: var(--border-radius)}.btn-4xl{--btn-font-size: calc(var(--spacing-4xl) * .14);--btn-padding-y: calc(var(--spacing-4xl) * .14 * .5);--btn-padding-x: calc(var(--spacing-4xl) * .14);--btn-border-radius: var(--border-radius)}.btn-close{--btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");--btn-close-opacity: .5;--btn-close-hover-opacity: .75;--btn-close-focus-shadow: 0 0 0 .1rem var(--primary);--btn-close-focus-opacity: 1;--btn-close-disabled-opacity: .25;-webkit-mask-image:var(--btn-close-bg);mask-image:var(--btn-close-bg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.btn:disabled{background-color:color-mix(in srgb,var(--primary),white 85%);border-color:color-mix(in srgb,var(--primary),white 85%);color:color-mix(in srgb,var(--primary),white 60%)}}
+@layer components{.btn{background-color:var(--primary);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-bg: var(--primary-dark);--btn-hover-border-color: var(--primary-dark);--btn-active-bg: var(--primary-dark);--btn-active-border-color: var(--primary-dark);--btn-disabled-bg: var(--gray-300);--btn-disabled-border-color: var(--gray-300);height:fit-content;display:flex;gap:.3rem}.btn:hover,.btn:focus{box-shadow:var(--box-shadow-md)}.btn-content{display:flex;line-height:initial;gap:.3rem;align-items:center}.btn-icon{background-color:var(--primary);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-bg: var(--primary-dark);--btn-hover-border-color: var(--primary-dark);--btn-active-bg: var(--primary-dark);--btn-active-border-color: var(--primary-dark);--btn-disabled-bg: var(--gray-300);--btn-disabled-border-color: var(--gray-300);height:fit-content;display:flex;gap:.3rem}.btn-icon:hover,.btn-icon:focus{box-shadow:var(--box-shadow-md)}.btn-icon{display:flex;line-height:initial;justify-content:center;align-items:center;padding:.4rem}.btn-icon .btn-content{flex-direction:column}.btn-reverse{flex-direction:row-reverse}.btn-primary{--color: color-mix(in srgb, var(--primary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary);--btn-active-border-color: var(--primary)}.btn-primary-light{--color: color-mix(in srgb, var(--primary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-light-contrast);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-primary-dark{--color: color-mix(in srgb, var(--primary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-dark-contrast);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-outline-primary{--color: color-mix(in srgb, var(--primary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-light{--color: color-mix(in srgb, var(--primary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-light-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-dark{--color: color-mix(in srgb, var(--primary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--primary-dark-contrast);background:transparent;color:var(--primary-dark);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-secondary{--color: color-mix(in srgb, var(--secondary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-contrast);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary);--btn-active-border-color: var(--secondary)}.btn-secondary-light{--color: color-mix(in srgb, var(--secondary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-light-contrast);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-secondary-dark{--color: color-mix(in srgb, var(--secondary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-dark-contrast);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-outline-secondary{--color: color-mix(in srgb, var(--secondary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-light{--color: color-mix(in srgb, var(--secondary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-light-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-dark{--color: color-mix(in srgb, var(--secondary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--secondary-dark-contrast);background:transparent;color:var(--secondary-dark);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-accent{--color: color-mix(in srgb, var(--accent), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-contrast);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent);--btn-active-border-color: var(--accent)}.btn-accent-light{--color: color-mix(in srgb, var(--accent-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-light-contrast);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-accent-dark{--color: color-mix(in srgb, var(--accent-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-dark-contrast);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-outline-accent{--color: color-mix(in srgb, var(--accent), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-light{--color: color-mix(in srgb, var(--accent-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-light-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-dark{--color: color-mix(in srgb, var(--accent-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--accent-dark-contrast);background:transparent;color:var(--accent-dark);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-tertiary{--color: color-mix(in srgb, var(--tertiary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-contrast);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary);--btn-active-border-color: var(--tertiary)}.btn-tertiary-light{--color: color-mix(in srgb, var(--tertiary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-light-contrast);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-tertiary-dark{--color: color-mix(in srgb, var(--tertiary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-dark-contrast);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-outline-tertiary{--color: color-mix(in srgb, var(--tertiary), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-light{--color: color-mix(in srgb, var(--tertiary-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-light-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-dark{--color: color-mix(in srgb, var(--tertiary-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--tertiary-dark-contrast);background:transparent;color:var(--tertiary-dark);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-success{--color: color-mix(in srgb, var(--success), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-contrast);--btn-border-color: var(--success);--btn-hover-border-color: var(--success);--btn-active-border-color: var(--success)}.btn-success-light{--color: color-mix(in srgb, var(--success-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-light-contrast);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-success-dark{--color: color-mix(in srgb, var(--success-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-dark-contrast);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-outline-success{--color: color-mix(in srgb, var(--success), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-light{--color: color-mix(in srgb, var(--success-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-light-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-dark{--color: color-mix(in srgb, var(--success-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--success-dark-contrast);background:transparent;color:var(--success-dark);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-danger{--color: color-mix(in srgb, var(--danger), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-contrast);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger);--btn-active-border-color: var(--danger)}.btn-danger-light{--color: color-mix(in srgb, var(--danger-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-light-contrast);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-danger-dark{--color: color-mix(in srgb, var(--danger-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-dark-contrast);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-outline-danger{--color: color-mix(in srgb, var(--danger), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-light{--color: color-mix(in srgb, var(--danger-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-light-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-dark{--color: color-mix(in srgb, var(--danger-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--danger-dark-contrast);background:transparent;color:var(--danger-dark);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-warning{--color: color-mix(in srgb, var(--warning), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-contrast);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning);--btn-active-border-color: var(--warning)}.btn-warning-light{--color: color-mix(in srgb, var(--warning-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-light-contrast);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-warning-dark{--color: color-mix(in srgb, var(--warning-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-dark-contrast);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-outline-warning{--color: color-mix(in srgb, var(--warning), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-light{--color: color-mix(in srgb, var(--warning-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-light-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-dark{--color: color-mix(in srgb, var(--warning-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--warning-dark-contrast);background:transparent;color:var(--warning-dark);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-info{--color: color-mix(in srgb, var(--info), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-contrast);--btn-border-color: var(--info);--btn-hover-border-color: var(--info);--btn-active-border-color: var(--info)}.btn-info-light{--color: color-mix(in srgb, var(--info-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-light-contrast);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-info-dark{--color: color-mix(in srgb, var(--info-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-dark-contrast);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-outline-info{--color: color-mix(in srgb, var(--info), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-light{--color: color-mix(in srgb, var(--info-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-light-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-dark{--color: color-mix(in srgb, var(--info-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--info-dark-contrast);background:transparent;color:var(--info-dark);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-light{--color: color-mix(in srgb, var(--light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-contrast);--btn-border-color: var(--light);--btn-hover-border-color: var(--light);--btn-active-border-color: var(--light)}.btn-light-light{--color: color-mix(in srgb, var(--light-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-light-contrast);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-light-dark{--color: color-mix(in srgb, var(--light-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-dark-contrast);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-outline-light{--color: color-mix(in srgb, var(--light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-light{--color: color-mix(in srgb, var(--light-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-dark{--color: color-mix(in srgb, var(--light-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--light-dark-contrast);background:transparent;color:var(--light-dark);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-dark{--color: color-mix(in srgb, var(--dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-contrast);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark);--btn-active-border-color: var(--dark)}.btn-dark-light{--color: color-mix(in srgb, var(--dark-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-light-contrast);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-dark-dark{--color: color-mix(in srgb, var(--dark-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-dark-contrast);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-outline-dark{--color: color-mix(in srgb, var(--dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-light{--color: color-mix(in srgb, var(--dark-light), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-light-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-dark{--color: color-mix(in srgb, var(--dark-dark), var(--bg-tint-color, var(--dark)) var(--bg-tint, 0%));background-color:var(--color);color:var(--dark-dark-contrast);background:transparent;color:var(--dark-dark);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-transparent{background:transparent;border:none;color:currentColor}.btn-transparent:hover,.btn-transparent:focus{box-shadow:none}.btn-transparent:hover{color:var(--accent)}.btn-none{--btn-font-size: calc(var(--spacing-none) * 0);--btn-padding-y: calc(var(--spacing-none) * 0 * .5);--btn-padding-x: calc(var(--spacing-none) * 0);--btn-border-radius: var(--border-radius)}.btn-xs{--btn-font-size: calc(var(--spacing-xs) * 3);--btn-padding-y: calc(var(--spacing-xs) * 3 * .5);--btn-padding-x: calc(var(--spacing-xs) * 3);--btn-border-radius: var(--border-radius)}.btn-sm{--btn-font-size: calc(var(--spacing-sm) * 1.75);--btn-padding-y: calc(var(--spacing-sm) * 1.75 * .5);--btn-padding-x: calc(var(--spacing-sm) * 1.75);--btn-border-radius: var(--border-radius)}.btn-md{--btn-font-size: calc(var(--spacing-md) * 1);--btn-padding-y: calc(var(--spacing-md) * 1 * .5);--btn-padding-x: calc(var(--spacing-md) * 1);--btn-border-radius: var(--border-radius)}.btn-lg{--btn-font-size: calc(var(--spacing-lg) * .625);--btn-padding-y: calc(var(--spacing-lg) * .625 * .5);--btn-padding-x: calc(var(--spacing-lg) * .625);--btn-border-radius: var(--border-radius)}.btn-xl{--btn-font-size: calc(var(--spacing-xl) * .375);--btn-padding-y: calc(var(--spacing-xl) * .375 * .5);--btn-padding-x: calc(var(--spacing-xl) * .375);--btn-border-radius: var(--border-radius)}.btn-2xl{--btn-font-size: calc(var(--spacing-2xl) * .25);--btn-padding-y: calc(var(--spacing-2xl) * .25 * .5);--btn-padding-x: calc(var(--spacing-2xl) * .25);--btn-border-radius: var(--border-radius)}.btn-3xl{--btn-font-size: calc(var(--spacing-3xl) * .15);--btn-padding-y: calc(var(--spacing-3xl) * .15 * .5);--btn-padding-x: calc(var(--spacing-3xl) * .15);--btn-border-radius: var(--border-radius)}.btn-4xl{--btn-font-size: calc(var(--spacing-4xl) * .14);--btn-padding-y: calc(var(--spacing-4xl) * .14 * .5);--btn-padding-x: calc(var(--spacing-4xl) * .14);--btn-border-radius: var(--border-radius)}.btn-close{--btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");--btn-close-opacity: .5;--btn-close-hover-opacity: .75;--btn-close-focus-shadow: 0 0 0 .1rem var(--primary);--btn-close-focus-opacity: 1;--btn-close-disabled-opacity: .25;-webkit-mask-image:var(--btn-close-bg);mask-image:var(--btn-close-bg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.btn:disabled{background-color:color-mix(in srgb,var(--primary),white 85%);border-color:color-mix(in srgb,var(--primary),white 85%);color:color-mix(in srgb,var(--primary),white 60%)}}

package/dist/components/Form/js/uppy.d.ts

@@ -0,0 +1,74 @@
+import { default as Uppy, UppyFile } from '@uppy/core';
+/**
+ * Interface représentant une route de fichier distant.
+ */
+export interface FileInputRoute {
+    route: string;
+    options?: any;
+}
+/**
+ * Interface pour les restrictions Uppy.
+ */
+export interface UppyRestrictions {
+    maxNumberOfFiles?: number | null;
+    maxFileSize?: number | null;
+    allowedFileTypes?: string[] | null;
+}
+/**
+ * Récupère la locale Uppy correspondante à la langue demandée.
+ *
+ * @param {string} [lang] - La langue ('fr' ou 'en'). Par défaut, tente de détecter via le document.
+ * @returns {any} La locale Uppy.
+ */
+export declare const getUppyLocale: (lang?: string) => any;
+/**
+ * Crée et configure une instance Uppy.
+ *
+ * @param {UppyRestrictions} restrictions - Les restrictions de téléchargement.
+ * @param {any} locale - La locale à utiliser.
+ * @param {{ allowVideo?: boolean }} [webcamConfig] - La configuration de la webcam.
+ * @returns {Uppy} L'instance Uppy configurée.
+ */
+export declare const createUppyInstance: (restrictions: UppyRestrictions, locale: any, webcamConfig?: {
+    allowVideo?: boolean;
+}) => Uppy;
+/**
+ * Synchronise les fichiers d'Uppy vers un élément input HTML de type file.
+ *
+ * @param {Uppy} uppy - L'instance Uppy.
+ * @param {HTMLInputElement} input - L'élément input cible.
+ */
+export declare const syncUppyToInput: (uppy: Uppy, input: HTMLInputElement) => void;
+/**
+ * Récupère des fichiers distants et les ajoute à l'instance Uppy.
+ *
+ * @param {Uppy} uppy - L'instance Uppy.
+ * @param {FileInputRoute[]} filesToFetch - Liste des fichiers à charger.
+ * @param {Set<string>} fetchedUrls - Ensemble des URLs déjà traitées pour éviter les doublons.
+ * @param {(error: any) => void} [onError] - Callback en cas d'erreur.
+ */
+export declare const fetchRemoteFiles: (uppy: Uppy, filesToFetch: FileInputRoute[], fetchedUrls: Set<string>, onError?: (error: any) => void) => Promise<void>;
+/**
+ * Ouvre un fichier Uppy dans un nouvel onglet du navigateur.
+ * Crée une URL objet temporaire à partir du blob du fichier, l'ouvre,
+ * puis révoque l'URL après un court délai pour libérer la mémoire.
+ *
+ * @param {UppyFile} file - Le fichier Uppy à ouvrir.
+ */
+export declare const openFileInNewTab: (file: UppyFile<Record<string, unknown>, Record<string, unknown>>) => void;
+/**
+ * Télécharge un fichier Uppy via une balise <a> temporaire.
+ * Crée une URL objet, déclenche le téléchargement, puis révoque l'URL.
+ *
+ * @param {UppyFile} file - Le fichier Uppy à télécharger.
+ */
+export declare const downloadFile: (file: UppyFile<Record<string, unknown>, Record<string, unknown>>) => void;
+/**
+ * Observe le conteneur du Dashboard et injecte les boutons "Ouvrir" et "Télécharger"
+ * pour chaque item Uppy. Les structures générées calquent exactement le HTML/CSS des
+ * composants React Zuii (Group et Button) pour s'affranchir de React ici.
+ *
+ * @param {HTMLElement} container - Le Dashboard Uppy.
+ * @param {Uppy} uppy - L'instance Uppy.
+ */
+export declare const setupFileOpenButtons: (container: HTMLElement, uppy: Uppy) => (() => void);

package/dist/components/Form/js/uppy.js

@@ -0,0 +1,106 @@
+import v from "@uppy/core";
+import w from "@uppy/compressor";
+import R from "@uppy/image-editor";
+import W from "@uppy/webcam";
+import U from "../../../node_modules/.pnpm/@uppy_locales@5.1.1/node_modules/@uppy/locales/lib/fr_FR.js";
+import I from "../../../node_modules/.pnpm/@uppy_locales@5.1.1/node_modules/@uppy/locales/lib/en_US.js";
+const O = (t) => (t || (typeof document < "u" ? document.documentElement.lang : "fr") || "fr").startsWith("en") ? I : U, S = (t, c, s) => {
+  const n = new v({
+    locale: c,
+    restrictions: {
+      maxNumberOfFiles: null,
+      maxFileSize: null,
+      allowedFileTypes: null,
+      ...t
+    }
+  });
+  n.use(w), n.use(R);
+  const o = s?.allowVideo === !1 ? ["picture"] : ["video-audio", "picture"];
+  return n.use(W, { modes: o }), n;
+}, j = (t, c) => {
+  const s = new DataTransfer();
+  t.getFiles().forEach((o) => {
+    if (o.data instanceof File)
+      s.items.add(o.data);
+    else if (o.data instanceof Blob) {
+      const e = new File([o.data], o.name, { type: o.data.type });
+      s.items.add(e);
+    }
+  }), c.files = s.files, c.dispatchEvent(new Event("change", { bubbles: !0 }));
+}, k = async (t, c, s, n) => {
+  for (const o of c)
+    if (!s.has(o.route)) {
+      s.add(o.route);
+      try {
+        if (t.getFiles().some((r) => r.meta?.sourceRoute === o.route)) continue;
+        const i = await fetch(o.route, o.options);
+        if (!i.ok) throw new Error(`Erreur lors de la récupération du fichier : ${i.statusText}`);
+        const l = await i.blob();
+        t.addFile({
+          name: o.route.split("/").pop() || "file",
+          type: o.options?.headers?.["Content-Type"] || l.type,
+          data: l,
+          meta: {
+            sourceRoute: o.route
+          }
+        });
+      } catch (e) {
+        if (e.isRestriction && e.message?.includes("déjà"))
+          continue;
+        console.error("Uppy fetch error:", e), n && n(e), s.delete(o.route);
+      }
+    }
+}, E = (t) => {
+  const c = t.data instanceof Blob ? t.data : null;
+  if (!c) return;
+  const s = URL.createObjectURL(c), n = window.open(s, "_blank");
+  n ? n.addEventListener("load", () => URL.revokeObjectURL(s)) : setTimeout(() => URL.revokeObjectURL(s), 1e4);
+}, F = (t) => {
+  const c = t.data instanceof Blob ? t.data : null;
+  if (!c) return;
+  const s = URL.createObjectURL(c), n = document.createElement("a");
+  n.href = s, n.download = t.name, n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n), setTimeout(() => URL.revokeObjectURL(s), 1e3);
+}, q = (t, c) => {
+  const s = (e) => {
+    if (e.querySelector("[data-zuii-uppy-actions]")) return;
+    const i = e.closest(".uppy-Dashboard-Item");
+    if (!i) return;
+    const l = i.id, r = l?.startsWith("uppy_") ? l.slice(5) : null;
+    if (!r) return;
+    const a = document.createElement("div");
+    a.dataset.zuiiUppyActions = "true", a.className = "group group--gap-none group--center", a.style.marginRight = "8px";
+    const p = (h, d, g) => {
+      const u = document.createElement("button");
+      return u.type = "button", u.title = d, u.setAttribute("aria-label", d), u.className = "btn btn-light uppy-Dashboard-Item-action btn-xs btn-icon btn-transparent", u.innerHTML = `<div class="btn-content"><span class="icon icon--size-xs"><i class="${h}"></i></span></div>`, u.addEventListener("click", (L) => {
+        L.stopPropagation();
+        const m = c.getFile(r);
+        m && g(m);
+      }), u;
+    }, b = p("icon-search", "Ouvrir dans un nouvel onglet", E), y = p("icon-download", "Télécharger le fichier", F);
+    a.appendChild(b), a.appendChild(y);
+    const f = e.querySelector(".uppy-Dashboard-Item-action--remove");
+    e.insertBefore(a, f);
+  }, n = () => {
+    t.querySelectorAll(".uppy-Dashboard-Item-actionWrapper").forEach(s), t.querySelectorAll(".uppy-Webcam-buttonContainer").forEach((e) => {
+      e.className = "group group--gap-sm group--center uppy-Webcam-buttonContainer";
+    }), t.querySelectorAll(".uppy-Webcam-button").forEach((e) => {
+      if (!e.classList.contains("uppy-Webcam-button--submit") && !e.classList.contains("uppy-Webcam-button--discard") && !e.classList.contains("uppy-Webcam-button--picture")) {
+        const r = e.title.toLowerCase().includes("stop") || e.title.toLowerCase().includes("arrêter") ? "icon-square" : "icon-video", a = e.querySelector(".icon i");
+        (!a || !a.className.includes(r)) && (e.className = "btn btn-danger btn-lg btn-icon uppy-Webcam-button", e.innerHTML = `<div class="btn-content"><span class="icon icon--size-md"><i class="${r}"></i></span></div>`);
+      }
+      e.classList.contains("btn") || (e.classList.contains("uppy-Webcam-button--submit") ? (e.className = "btn btn-primary btn-md btn-icon uppy-Webcam-button uppy-Webcam-button--submit", e.innerHTML = '<div class="btn-content"><span class="icon icon--size-md"><i class="icon-check"></i></span></div>') : e.classList.contains("uppy-Webcam-button--discard") ? (e.className = "btn btn-danger btn-md btn-icon btn-transparent uppy-Webcam-button uppy-Webcam-button--discard", e.innerHTML = '<div class="btn-content"><span class="icon icon--size-md"><i class="icon-trash"></i></span></div>') : e.classList.contains("uppy-Webcam-button--picture") && (e.className = "btn btn-primary btn-lg btn-icon uppy-Webcam-button uppy-Webcam-button--picture", e.innerHTML = '<div class="btn-content"><span class="icon icon--size-md"><i class="icon-camera"></i></span></div>'));
+    });
+  }, o = new MutationObserver(n);
+  return o.observe(t, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["title"] }), n(), () => {
+    o.disconnect(), t.querySelectorAll("[data-zuii-uppy-actions]").forEach((e) => e.remove());
+  };
+};
+export {
+  S as createUppyInstance,
+  F as downloadFile,
+  k as fetchRemoteFiles,
+  O as getUppyLocale,
+  E as openFileInNewTab,
+  q as setupFileOpenButtons,
+  j as syncUppyToInput
+};

package/dist/components/Form/react/FileInput.d.ts

@@ -1,3 +1,4 @@
+import { FileInputRoute } from '../js/uppy';
 /**
  * Propriétés du composant FileInput.
  */
@@ -19,6 +20,13 @@ interface FileInputProps {
     onComplete?: (result: any) => void;
     /** Callback appelé en cas d'erreur. */
     onError?: (error: any) => void;
+    /** Fichiers à charger initialement. */
+    files?: FileInputRoute[];
+    /** Configuration de la webcam. */
+    webcam?: {
+        /** Si l'enregistrement vidéo est autorisé (défaut: true). */
+        allowVideo?: boolean;
+    };
 }
 /**
  * Composant FileInput utilisant Uppy.js pour le téléchargement de fichiers.
@@ -27,5 +35,5 @@ interface FileInputProps {
  * @param {FileInputProps} props - Les propriétés du composant.
  * @returns {JSX.Element} Le composant FileInput rendu.
  */
-export declare const FileInput: ({ name, lang, restrictions, onComplete, onError }: FileInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileInput: ({ name, lang, restrictions, onComplete, onError, files, webcam }: FileInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Form/react/FileInput.js

@@ -1,45 +1,23 @@
-import { jsx as f, jsxs as y } from "react/jsx-runtime";
-import { useRef as g, useState as F, useEffect as b } from "react";
-import x from "@uppy/core";
+import { jsx as p, jsxs as x } from "react/jsx-runtime";
+import { useRef as o, useState as b, useEffect as u } from "react";
 import { UppyContextProvider as v } from "@uppy/react";
-import w from "../../../node_modules/.pnpm/@uppy_react@5.2.0_@uppy_core@5.2.0_@uppy_dashboard@5.1.1_@uppy_core@5.2.0__@uppy_image-editor_4567vrulez5sapld32rywmrijm/node_modules/@uppy/react/lib/Dashboard.js";
-import N from "@uppy/compressor";
-import _ from "@uppy/image-editor";
-import U from "../../../node_modules/.pnpm/@uppy_locales@5.1.1/node_modules/@uppy/locales/lib/fr_FR.js";
-import D from "../../../node_modules/.pnpm/@uppy_locales@5.1.1/node_modules/@uppy/locales/lib/en_US.js";
-const M = ({
-  name: o,
-  lang: u,
-  restrictions: m,
-  onComplete: i,
-  onError: n
+import F from "../../../node_modules/.pnpm/@uppy_react@5.2.0_@uppy_core@5.2.0_@uppy_dashboard@5.1.1_@uppy_core@5.2.0__@uppy_image-editor_4567vrulez5sapld32rywmrijm/node_modules/@uppy/react/lib/Dashboard.js";
+import { getUppyLocale as w, createUppyInstance as N, fetchRemoteFiles as R, setupFileOpenButtons as _, syncUppyToInput as B } from "../js/uppy.js";
+const j = ({
+  name: i,
+  lang: y,
+  restrictions: l,
+  onComplete: s,
+  onError: t,
+  files: r,
+  webcam: g
 }) => {
-  const l = {
-    maxNumberOfFiles: null,
-    maxFileSize: null,
-    allowedFileTypes: null,
-    ...m
-  }, a = g(null), c = (u || (typeof document < "u" ? document.documentElement.lang : "fr") || "fr").startsWith("en") ? D : U, [e] = F(() => {
-    const r = new x({
-      locale: c,
-      restrictions: l
-    });
-    return r.use(N), r.use(_), r;
-  });
-  b(() => {
-    i && e.on("complete", i), n && e.on("error", n);
-    const r = () => {
-      if (!a.current) return;
-      const t = new DataTransfer();
-      e.getFiles().forEach((s) => {
-        if (s.data instanceof File)
-          t.items.add(s.data);
-        else if (s.data instanceof Blob) {
-          const h = new File([s.data], s.name, { type: s.data.type });
-          t.items.add(h);
-        }
-      }), a.current.files = t.files, a.current.dispatchEvent(new Event("change", { bubbles: !0 }));
-    }, d = [
+  const c = o(null), f = o(null), U = o(/* @__PURE__ */ new Set()), a = w(y), [e] = b(() => N(l || {}, a, g));
+  u(() => {
+    s && e.on("complete", s), t && e.on("error", t);
+    const m = () => {
+      c.current && B(e, c.current);
+    }, h = [
       "file-added",
       "file-removed",
       "files-added",
@@ -47,38 +25,44 @@ const M = ({
       "preprocess-complete",
       "postprocess-complete"
     ];
-    return d.forEach((t) => e.on(t, r)), () => {
-      i && e.off("complete", i), n && e.off("error", n), d.forEach((t) => e.off(t, r));
+    return h.forEach((n) => e.on(n, m)), () => {
+      s && e.off("complete", s), t && e.off("error", t), h.forEach((n) => e.off(n, m));
     };
-  }, [e, i, n]);
-  const p = l.maxNumberOfFiles === null || l.maxNumberOfFiles === void 0 || l.maxNumberOfFiles > 1;
-  return /* @__PURE__ */ f(v, { uppy: e, children: /* @__PURE__ */ y("div", { className: "file-input__wrapper", id: o, children: [
-    /* @__PURE__ */ f("div", { className: "file-input__content", children: /* @__PURE__ */ f(
-      w,
+  }, [e, s, t]), u(() => {
+    r && r.length > 0 && R(e, r, U.current, t);
+  }, [e, r, t]), u(() => {
+    if (f.current)
+      return _(f.current, e);
+  }, [e]);
+  const d = !l?.maxNumberOfFiles || l.maxNumberOfFiles > 1;
+  return /* @__PURE__ */ p(v, { uppy: e, children: /* @__PURE__ */ x("div", { className: "file-input__wrapper", id: i, children: [
+    /* @__PURE__ */ p("div", { className: "file-input__content", ref: f, children: /* @__PURE__ */ p(
+      F,
       {
         uppy: e,
+        plugins: ["Webcam"],
         width: "100%",
         height: 300,
         hideProgressDetails: !1,
         hideUploadButton: !0,
         proudlyDisplayPoweredByUppy: !1,
         locale: {
-          strings: c.strings
+          strings: a.strings
         }
       }
     ) }),
-    o && /* @__PURE__ */ f(
+    i && /* @__PURE__ */ p(
       "input",
       {
-        ref: a,
+        ref: c,
         type: "file",
-        name: p ? `${o}[]` : o,
-        multiple: p,
+        name: d ? `${i}[]` : i,
+        multiple: d,
         style: { display: "none" }
       }
     )
   ] }) });
 };
 export {
-  M as FileInput
+  j as FileInput
 };

package/dist/components/Form/react/NumberInput.d.ts

@@ -2,6 +2,14 @@
  * Propriétés du composant NumberInput.
  */
 export interface NumberInputProps {
+    /**
+     * Id de l'input.
+     */
+    id?: string;
+    /**
+     * Name de l'input.
+     */
+    name?: string;
     /**
      * Valeur actuelle de l'input.
      */
@@ -10,7 +18,7 @@ export interface NumberInputProps {
      * Callback lors du changement de valeur.
      * @param {number} value - La nouvelle valeur.
      */
-    onChange: (value: number) => void;
+    onChange?: (value: number) => void;
     /**
      * Valeur minimale (défaut: undefined).
      */
@@ -31,6 +39,10 @@ export interface NumberInputProps {
      * Texte d'aide ou de placeholder.
      */
     placeholder?: string;
+    /**
+     * Indique si le champ est requis.
+     */
+    required?: boolean;
 }
 /**
  * Composant NumberInput avec boutons +/- personnalisés.
@@ -38,4 +50,4 @@ export interface NumberInputProps {
  * @param {NumberInputProps} props - Les propriétés du composant.
  * @returns {JSX.Element} Le composant NumberInput rendu.
  */
-export declare const NumberInput: ({ value, onChange, min, max, step, className, placeholder, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberInput: ({ value: propsValue, onChange, min, max, step, className, placeholder, id, name, required, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/react/NumberInput.js

@@ -1,54 +1,67 @@
-import { jsxs as I, jsx as n } from "react/jsx-runtime";
-import { InputGroup as m, Form as _ } from "react-bootstrap";
-import { calculateDecrement as $, calculateIncrement as b } from "../js/form.js";
-import { Icon as i } from "../../Icon/react/index.js";
-const D = ({
-  value: s = 0,
-  onChange: e,
-  min: r,
-  max: t,
-  step: l = 1,
-  className: a = "",
-  placeholder: u
+import { jsxs as j, jsx as n } from "react/jsx-runtime";
+import { useState as k, useEffect as y } from "react";
+import { InputGroup as m, Form as z } from "react-bootstrap";
+import { calculateIncrement as D, calculateDecrement as T } from "../js/form.js";
+import { Icon as h } from "../../Icon/react/index.js";
+const q = ({
+  value: e,
+  onChange: u,
+  min: t,
+  max: c,
+  step: s = 1,
+  className: I = "",
+  placeholder: N,
+  id: _,
+  name: d,
+  required: C
 }) => {
-  const c = "number-input", d = () => {
-    e(b(s, l, t));
+  const r = "number-input", [$, f] = k(e ?? 0);
+  y(() => {
+    e !== void 0 && f(e);
+  }, [e]);
+  const i = e !== void 0 ? e : $, a = (l) => {
+    e === void 0 && f(l), u && u(l);
+  }, b = () => {
+    a(D(i, s, c));
   }, p = () => {
-    e($(s, l, r));
-  }, f = (N) => {
-    const o = parseInt(N.target.value);
-    if (isNaN(o)) {
-      e(0);
+    a(T(i, s, t));
+  }, g = (l) => {
+    const v = parseInt(l.target.value);
+    if (isNaN(v)) {
+      a(0);
       return;
     }
-    if (r !== void 0 && o < r) {
-      e(r);
-      return;
-    }
-    if (t !== void 0 && o > t) {
-      e(t);
-      return;
-    }
-    e(o);
+    let o = v;
+    t !== void 0 && o < t && (o = t), c !== void 0 && o > c && (o = c), a(o);
   };
-  return /* @__PURE__ */ I(m, { className: `${c} ${a}`.trim(), children: [
-    /* @__PURE__ */ n(m.Text, { className: `${c}__addon`, onClick: p, children: /* @__PURE__ */ n(i, { name: "icon-minus", size: "sm" }) }),
+  return /* @__PURE__ */ j(m, { className: `${r} ${I}`.trim(), children: [
+    /* @__PURE__ */ n(m.Text, { className: `${r}__addon`, onClick: p, children: /* @__PURE__ */ n(h, { name: "icon-minus", size: "sm" }) }),
     /* @__PURE__ */ n(
-      _.Control,
+      z.Control,
       {
+        id: _,
         type: "number",
-        className: `${c}__control`,
-        value: s,
-        onChange: f,
-        placeholder: u,
-        min: r,
-        max: t,
-        step: l
+        className: `${r}__control`,
+        value: i,
+        onChange: g,
+        placeholder: N,
+        min: t,
+        max: c,
+        step: s,
+        required: C
       }
     ),
-    /* @__PURE__ */ n(m.Text, { className: `${c}__addon`, onClick: d, children: /* @__PURE__ */ n(i, { name: "icon-plus", size: "sm" }) })
+    /* @__PURE__ */ n(m.Text, { className: `${r}__addon`, onClick: b, children: /* @__PURE__ */ n(h, { name: "icon-plus", size: "sm" }) }),
+    d && /* @__PURE__ */ n(
+      "input",
+      {
+        type: "hidden",
+        name: d,
+        value: i
+      }
+    )
   ] });
 };
 export {
-  D as NumberInput
+  q as NumberInput
 };

package/dist/components/Form/react/index.js

@@ -2,7 +2,6 @@ import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { Form as r, InputGroup as C } from "react-bootstrap";
 import { Icon as c } from "../../Icon/react/index.js";
 import d from "../../../node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/FloatingLabel.js";
-import '../style/index.css';/* empty css                  */
 import { NumberInput as F } from "./NumberInput.js";
 import { TelInput as h } from "./TelInput.js";
 import { PasswordInput as I } from "./PasswordInput.js";
@@ -13,6 +12,7 @@ import { Select as _ } from "./Select.js";
 import { handleNumericKeyDown as x } from "../js/number.js";
 import { FormColor as y } from "./FormColor.js";
 import { FormDate as D } from "./FormDate.js";
+import '../style/index.css';/* empty css                  */
 const g = ({
   label: n,
   floating: a,