zuii 1.5.1 → 1.5.3

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{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%)}}
+@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;justify-content:center}.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/Color/react/index.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { tokens as m } from "../../../packages/core/src/styles/tokens.js";
-import '../../../packages/cookie-consent/src/style/index.css';import '../../Slider/style/index.css';import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../../Errorpage/style/index.css';import '../../Lang-selector/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Button/style/index.css';import '../style/index.css';import '../../../packages/core/src/styles/main.css';/* empty css                                          */
+import '../../Slider/style/index.css';import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../../Errorpage/style/index.css';import '../../Lang-selector/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Button/style/index.css';import '../style/index.css';import '../../../packages/core/src/styles/main.css';/* empty css                                          */
 /* empty css                  */
 import "react-bootstrap";
 /* empty css                            */
@@ -37,7 +37,7 @@ import "../../Menu/react/index.js";
 import "@splidejs/react-splide";
 /* empty css                            */
 import "../../Card/react/index.js";
-/* empty css                                                    */
+import "../../../packages/cookie-consent/src/js/cookie-consent.js";
 const S = ({ name: r }) => {
   const p = m.brands[r];
   return /* @__PURE__ */ i(t, { children: [

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

@@ -1,6 +1,6 @@
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { useNavigate as p } from "react-router-dom";
-import '../../../packages/cookie-consent/src/style/index.css';import '../../Slider/style/index.css';import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../style/index.css';import '../../Lang-selector/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Color/style/index.css';import '../../../packages/core/src/styles/main.css';/* empty css                                          */
+import '../../Slider/style/index.css';import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../style/index.css';import '../../Lang-selector/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Color/style/index.css';import '../../../packages/core/src/styles/main.css';/* empty css                                          */
 /* empty css                           */
 import { Button as e } from "../../Button/react/index.js";
 import { Icon as a } from "../../Icon/react/index.js";
@@ -36,7 +36,7 @@ import "../../Menu/react/index.js";
 import "@splidejs/react-splide";
 /* empty css                            */
 import "../../Card/react/index.js";
-/* empty css                                                    */
+import "../../../packages/cookie-consent/src/js/cookie-consent.js";
 const U = ({ code: t = 404 }) => {
   const m = p();
   return /* @__PURE__ */ r("main", { className: "error-page", children: /* @__PURE__ */ r("div", { className: "error-page__container ", children: /* @__PURE__ */ i("div", { className: "container", children: [

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

@@ -12,7 +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                  */
+import '../../../packages/core/src/styles/form/index.css';/* empty css                                                */
 const g = ({
   label: n,
   floating: a,

package/dist/components/Lang-selector/js/language-selector.js

@@ -1,34 +1,34 @@
-import f from "choices.js";
+import v from "choices.js";
 import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';/* empty css                                                                                          */
-const x = (s, p, m, v = !1, $ = "", g = !1) => {
+const S = (s, p, m, g = !1, $ = "", f = !1) => {
   s.innerHTML = "";
-  const b = new f(s, {
+  const b = new v(s, {
     choices: p.map((t) => ({
       value: t.value,
       label: t.label || "",
       selected: t.selected,
       customProperties: { flag: t.flag, label: t.label }
     })),
-    searchEnabled: v,
+    searchEnabled: g,
     itemSelectText: "",
     shouldSort: !1,
     placeholder: !!$,
     placeholderValue: $,
     callbackOnCreateTemplates: (t) => {
-      const a = (l) => l.placeholder ? `<span>${l.label}</span>` : `<span class="fi fi-${l.customProperties.flag} lang-selector__flag"></span>${l.customProperties.label ? ` ${l.label}` : ""}`;
+      const a = (e) => e.placeholder ? `<span>${e.label}</span>` : `<span class="fi fi-${e.customProperties.flag} lang-selector__flag"></span>${e.customProperties.label ? ` ${e.label}` : ""}`;
       return {
-        item: (l, e) => {
-          const { item: c, highlightedState: i, itemSelectable: r, placeholder: o } = l.classNames, d = e.highlighted ? i : r, n = e.active ? 'aria-selected="true"' : "", h = e.disabled ? 'aria-disabled="true"' : "", u = e.placeholder ? o : "";
+        item: (e, l) => {
+          const { item: i, highlightedState: c, itemSelectable: o, placeholder: n } = e.classNames, r = l.highlighted ? c : o, d = l.active ? 'aria-selected="true"' : "", h = l.disabled ? 'aria-disabled="true"' : "", u = l.placeholder ? n : "";
           return t(`
-						<div class="${c} ${d} ${u}" data-item data-id="${e.id}" data-value="${e.value}" ${n} ${h}>
-							${a(e)}
+						<div class="${i} ${r} ${u}" data-item data-id="${l.id}" data-value="${l.value}" ${d} ${h}>
+							${a(l)}
 						</div>`.trim());
         },
-        choice: (l, e) => {
-          const { item: c, itemChoice: i, itemDisabled: r, itemSelectable: o, placeholder: d } = l.classNames, n = e.disabled ? r : o, h = e.disabled ? 'data-choice-disabled aria-disabled="true"' : "data-choice-selectable", u = e.placeholder ? d : "";
+        choice: (e, l) => {
+          const { item: i, itemChoice: c, itemDisabled: o, itemSelectable: n, placeholder: r } = e.classNames, d = l.disabled ? o : n, h = l.disabled ? 'data-choice-disabled aria-disabled="true"' : "data-choice-selectable", u = l.placeholder ? r : "";
           return t(`
-						<div class="${c} ${i} ${n} ${u}" data-select-text="${l.itemSelectText}" data-choice ${h} data-id="${e.id}" data-value="${e.value}" role="option">
-							${a(e)}
+						<div class="${i} ${c} ${d} ${u}" data-select-text="${e.itemSelectText}" data-choice ${h} data-id="${l.id}" data-value="${l.value}" role="option">
+							${a(l)}
 						</div>`.trim());
         }
       };
@@ -36,13 +36,13 @@ const x = (s, p, m, v = !1, $ = "", g = !1) => {
   });
   if (m) {
     const t = (a) => {
-      const l = a.detail.value;
-      g || (document.documentElement.lang = l), m(l);
+      const e = a.detail.value;
+      f || (document.documentElement.lang = e), window.CookieConsent && typeof window.CookieConsent.setLanguage == "function" && window.CookieConsent.setLanguage(e), m(e);
     };
     s.addEventListener("change", t), b._handleChange = t;
   }
   return b;
 };
 export {
-  x as initLanguageSelector
+  S as initLanguageSelector
 };

package/dist/components/Modal/js/modal.d.ts

@@ -1,4 +1,45 @@
 /**
- * Logique JavaScript pour le composant Modal.
+ * Interface pour les options de la modale.
+ */
+export interface ModalOptions {
+    title?: string;
+    body?: string;
+    footer?: string;
+    size?: 'sm' | 'lg' | 'xl';
+    centered?: boolean;
+}
+/**
+ * Composant Modal Vanilla JS.
+ * Utilise Bootstrap 5 en interne.
+ */
+export declare class Modal {
+    private element;
+    private instance;
+    /**
+     * Ouvre une modale de manière statique.
+     * @param {ModalOptions} options - Options de configuration.
+     * @returns {Modal} Instance de la modale.
+     */
+    static open(options: ModalOptions): Modal;
+    /**
+     * Crée la structure HTML de la modale.
+     * @param {ModalOptions} options - Les options de rendu.
+     */
+    private create;
+    /**
+     * Affiche la modale.
+     */
+    show(): void;
+    /**
+     * Ferme la modale.
+     */
+    hide(): void;
+    /**
+     * Détruit la modale et la retire du DOM.
+     */
+    destroy(): void;
+}
+/**
+ * Logique d'initialisation par défaut.
  */
 export declare const initModal: () => void;

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

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as _, Fragment as v } from "react/jsx-runtime";
 import { useEffect as u } from "react";
-import '../../../packages/cookie-consent/src/style/index.css';import '../../Slider/style/index.css';import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../../Errorpage/style/index.css';import '../../Lang-selector/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Group/style/index.css';import '../../Color/style/index.css';import '../../../packages/core/src/styles/main.css';import '../style/index.css';/* empty css                  */
+import '../../Slider/style/index.css';import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../../Errorpage/style/index.css';import '../../Lang-selector/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Group/style/index.css';import '../../Color/style/index.css';import '../../../packages/core/src/styles/main.css';import '../style/index.css';/* empty css                  */
 /* empty css                                          */
 /* empty css                           */
 import { Button as $ } from "../../Button/react/index.js";
@@ -36,7 +36,7 @@ import "../../Menu/react/index.js";
 import "@splidejs/react-splide";
 /* empty css                            */
 import "../../Card/react/index.js";
-/* empty css                                                    */
+import "../../../packages/cookie-consent/src/js/cookie-consent.js";
 import { initNav as g } from "../js/nav.js";
 const h = ({
   children: s,

package/dist/components/Table/js/table.d.ts

@@ -116,6 +116,10 @@ export interface TableOptions {
      * Par défaut: 50px
      */
     emptyRowsHeight?: string;
+    /**
+     * Active le layout autoHeight d'AG Grid (par défaut: true). Passer null pour désactiver.
+     */
+    autoHeight?: boolean | null;
     /**
      * Hauteur des lignes.
      */

package/dist/components/Table/react/index.d.ts

@@ -10,5 +10,5 @@ interface Props extends TableOptions {
  * @param {Props} props - Les propriétés du composant.
  * @returns {JSX.Element} Le rendu du composant.
  */
-export declare const Table: ({ rowData, columnDefs, theme, className, selectable, pagination, paginationPageSize, pageSizeOptions, resizable, locale, selectionColumnDef, rowClassRules, rowModelType, datasource, cacheBlockSize, maxBlocksInCache, onGridReady, sortable, icons, emptyRowsHeight, rowHeight, getRowHeight, isRowSelectable }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ rowData, columnDefs, theme, className, selectable, pagination, paginationPageSize, pageSizeOptions, resizable, locale, selectionColumnDef, rowClassRules, rowModelType, datasource, cacheBlockSize, maxBlocksInCache, onGridReady, sortable, icons, emptyRowsHeight, rowHeight, getRowHeight, isRowSelectable, autoHeight }: Props) => import("react/jsx-runtime").JSX.Element;
 export type { RowData, ColumnDef, TableOptions };

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

@@ -1,96 +1,99 @@
-import { jsxs as O, jsx as r } from "react/jsx-runtime";
-import { useRef as U, useState as z, useMemo as x, useCallback as n, useEffect as J } from "react";
-import { AgGridReact as Q } from "ag-grid-react";
-import { ModuleRegistry as V, AllCommunityModule as X } from "ag-grid-community";
-import { processColumnDefs as Y, getLocaleText as Z } from "../js/table.js";
-import { TablePagination as v } from "./TablePagination.js";
+import { jsxs as U, jsx as g } from "react/jsx-runtime";
+import { useRef as J, useState as G, useMemo as T, useCallback as n, useEffect as Q } from "react";
+import { AgGridReact as V } from "ag-grid-react";
+import { ModuleRegistry as X, AllCommunityModule as Y } from "ag-grid-community";
+import { processColumnDefs as Z, getLocaleText as ee } from "../js/table.js";
+import { TablePagination as te } from "./TablePagination.js";
 import '../style/index.css';/* empty css                  */
-V.registerModules([X]);
-const re = ({
+X.registerModules([Y]);
+const ce = ({
   rowData: c,
-  columnDefs: g = [],
-  theme: G = "ag-theme-alpine",
-  className: T = "",
-  selectable: u = !1,
-  pagination: p = !1,
-  paginationPageSize: M = 10,
-  pageSizeOptions: y,
-  resizable: D = !1,
-  locale: f = "fr",
-  selectionColumnDef: H,
-  rowClassRules: k,
+  columnDefs: u = [],
+  theme: y = "ag-theme-alpine",
+  className: M = "",
+  selectable: p = !1,
+  pagination: f = !1,
+  paginationPageSize: A = 10,
+  pageSizeOptions: D,
+  resizable: H = !1,
+  locale: d = "fr",
+  selectionColumnDef: k,
+  rowClassRules: $,
   rowModelType: m,
-  datasource: d,
-  cacheBlockSize: A,
-  maxBlocksInCache: $ = 1,
+  datasource: P,
+  cacheBlockSize: L,
+  maxBlocksInCache: W = 1,
   onGridReady: s,
-  sortable: P = !1,
+  sortable: h = !1,
   icons: S,
-  emptyRowsHeight: h = "2rem",
-  rowHeight: L = 25,
-  getRowHeight: W,
-  isRowSelectable: j
+  emptyRowsHeight: C = "2rem",
+  rowHeight: j = 25,
+  getRowHeight: E,
+  isRowSelectable: N,
+  autoHeight: w = !0
 }) => {
-  const E = `datagrid ${G} ${T}`.trim(), l = U(null), [a, N] = z(null), [t, _] = z({
+  const _ = `datagrid ${y} ${M}`.trim(), l = J(null), [a, q] = G(null), [t, v] = G({
     currentPage: 0,
     totalPages: 0,
-    pageSize: M,
+    pageSize: A,
     totalRows: 0
-  }), q = x(() => Y(g), [g]), C = x(() => Z(f), [f]), B = n((e) => {
-    N(e.api), s && s(e);
-  }, [s]), F = n((e) => {
+  }), B = T(() => Z(u), [u]), R = T(() => ee(d), [d]), F = n((e) => {
+    q(e.api), s && s(e);
+  }, [s]), I = n((e) => {
     if (e.api) {
-      const i = e.api.paginationGetCurrentPage(), w = e.api.paginationGetTotalPages(), R = e.api.paginationGetPageSize(), b = e.api.paginationGetRowCount();
-      _((o) => o.currentPage === i && o.totalPages === w && o.pageSize === R && o.totalRows === b ? o : {
+      const i = e.api.paginationGetCurrentPage(), b = e.api.paginationGetTotalPages(), z = e.api.paginationGetPageSize(), x = e.api.paginationGetRowCount();
+      v((o) => o.currentPage === i && o.totalPages === b && o.pageSize === z && o.totalRows === x ? o : {
         currentPage: i,
-        totalPages: w,
-        pageSize: R,
-        totalRows: b
+        totalPages: b,
+        pageSize: z,
+        totalRows: x
       });
     }
-  }, []), I = n((e) => {
+  }, []), K = n((e) => {
     a?.paginationGoToPage(e);
-  }, [a]), K = n((e) => {
+  }, [a]), O = n((e) => {
     a?.setGridOption("paginationPageSize", e);
   }, [a]);
-  return J(() => {
+  Q(() => {
     if (!l.current) return;
     const e = l.current.querySelector(".ag-floating-bottom");
     if (e instanceof HTMLElement) {
       const i = t.totalRows > 0;
-      e.style.minHeight = i ? "0" : `${h}`;
+      e.style.minHeight = i ? "0" : `${C}`;
     }
-  }, [h, a, c, d, t.totalRows]), /* @__PURE__ */ O("div", { className: E, style: { width: "100%" }, ref: l, children: [
-    /* @__PURE__ */ r("div", { className: "datagrid__container", children: /* @__PURE__ */ r(
-      Q,
+  }, [C, a, c, P, t.totalRows]);
+  const r = w !== null && w !== !1;
+  return /* @__PURE__ */ U("div", { className: _, style: { width: "100%", height: r ? void 0 : "100%" }, ref: l, children: [
+    /* @__PURE__ */ g("div", { className: "datagrid__container", style: { height: r ? void 0 : "100%" }, children: /* @__PURE__ */ g(
+      V,
       {
         theme: "legacy",
         rowData: m === "infinite" ? void 0 : c || [],
-        columnDefs: q,
-        domLayout: "autoHeight",
-        pagination: p,
+        columnDefs: B,
+        domLayout: r ? "autoHeight" : void 0,
+        pagination: f,
         paginationPageSize: t.pageSize,
         suppressPaginationPanel: !0,
-        onPaginationChanged: F,
+        onPaginationChanged: I,
         rowModelType: m,
-        datasource: d,
-        cacheBlockSize: A,
-        maxBlocksInCache: $,
-        onGridReady: B,
-        localeText: C,
-        rowClassRules: k,
+        datasource: P,
+        cacheBlockSize: L,
+        maxBlocksInCache: W,
+        onGridReady: F,
+        localeText: R,
+        rowClassRules: $,
         icons: S || {
           sortUnSort: '<i class="icon-list-filter"></i>'
         },
-        rowSelection: u ? {
+        rowSelection: p ? {
           mode: "multiRow",
           headerCheckbox: !0,
           checkboxes: !0,
           enableSelectionWithoutKeys: !0,
           enableClickSelection: !1,
-          isRowSelectable: j
+          isRowSelectable: N
         } : void 0,
-        selectionColumnDef: u ? {
+        selectionColumnDef: p ? {
           pinned: "left",
           width: 40,
           minWidth: 40,
@@ -100,35 +103,35 @@ const re = ({
           suppressHeaderMenu: !0,
           suppressHeaderFilter: !0,
           resizable: !1,
-          ...H
+          ...k
         } : void 0,
         suppressMovableColumns: !0,
         suppressMenuHide: !0,
-        rowHeight: L,
-        getRowHeight: W,
+        rowHeight: j,
+        getRowHeight: E,
         defaultColDef: {
           flex: 1,
-          resizable: D,
-          sortable: P,
-          unSortIcon: P
+          resizable: H,
+          sortable: h,
+          unSortIcon: h
         }
       }
     ) }),
-    p && /* @__PURE__ */ r(
-      v,
+    f && /* @__PURE__ */ g(
+      te,
       {
         currentPage: t.currentPage,
         totalPages: t.totalPages,
         pageSize: t.pageSize,
         totalRows: t.totalRows,
-        pageSizeOptions: y,
-        onPageChange: I,
-        onPageSizeChange: K,
-        localeText: C
+        pageSizeOptions: D,
+        onPageChange: K,
+        onPageSizeChange: O,
+        localeText: R
       }
     )
   ] });
 };
 export {
-  re as Table
+  ce as Table
 };

package/dist/index.d.ts

@@ -28,5 +28,5 @@ export * from './components/Grid/react';
 export * from './components/Menu/react';
 export * from './components/Slider/react';
 export * from './components/Card/react';
-export * from '../packages/core/src/utils/getName';
+export * from '../packages/cookie-consent/src/js/cookie-consent.ts';
 export * from '../packages/cookie-consent/src/react/index.tsx';