@fastwork/xosmoz-css 0.0.34 → 0.0.35

package/dist/atomic.css

@@ -1850,8 +1850,8 @@
   color: var(--xz-color-surface-400) !important;
 }
 
-._cl-fg-100 {
-  color: var(--xz-color-fg-100) !important;
+._cl-text-fg {
+  color: var(--xz-color-text-fg) !important;
 }
 
 ._cl-text-100 {
@@ -1866,6 +1866,10 @@
   color: var(--xz-color-text-300) !important;
 }
 
+._cl-line-50 {
+  color: var(--xz-color-line-50) !important;
+}
+
 ._cl-line-100 {
   color: var(--xz-color-line-100) !important;
 }
@@ -1906,8 +1910,8 @@
   color: var(--xz-color-primary-bg-200) !important;
 }
 
-._cl-primary-fg-100 {
-  color: var(--xz-color-primary-fg-100) !important;
+._cl-primary-text-fg {
+  color: var(--xz-color-primary-text-fg) !important;
 }
 
 ._cl-primary-text-100 {
@@ -1946,8 +1950,8 @@
   color: var(--xz-color-danger-bg-200) !important;
 }
 
-._cl-danger-fg-100 {
-  color: var(--xz-color-danger-fg-100) !important;
+._cl-danger-text-fg {
+  color: var(--xz-color-danger-text-fg) !important;
 }
 
 ._cl-danger-text-100 {
@@ -1986,8 +1990,8 @@
   color: var(--xz-color-success-bg-200) !important;
 }
 
-._cl-success-fg-100 {
-  color: var(--xz-color-success-fg-100) !important;
+._cl-success-text-fg {
+  color: var(--xz-color-success-text-fg) !important;
 }
 
 ._cl-success-text-100 {
@@ -2026,8 +2030,8 @@
   color: var(--xz-color-warning-bg-200) !important;
 }
 
-._cl-warning-fg-100 {
-  color: var(--xz-color-warning-fg-100) !important;
+._cl-warning-text-fg {
+  color: var(--xz-color-warning-text-fg) !important;
 }
 
 ._cl-warning-text-100 {
@@ -2066,8 +2070,8 @@
   color: var(--xz-color-info-bg-200) !important;
 }
 
-._cl-info-fg-100 {
-  color: var(--xz-color-info-fg-100) !important;
+._cl-info-text-fg {
+  color: var(--xz-color-info-text-fg) !important;
 }
 
 ._cl-info-text-100 {
@@ -2106,8 +2110,8 @@
   color: var(--xz-color-neutral-bg-200) !important;
 }
 
-._cl-neutral-fg-100 {
-  color: var(--xz-color-neutral-fg-100) !important;
+._cl-neutral-text-fg {
+  color: var(--xz-color-neutral-text-fg) !important;
 }
 
 ._cl-neutral-text-100 {
@@ -2146,8 +2150,8 @@
   color: var(--xz-color-orange-bg-200) !important;
 }
 
-._cl-orange-fg-100 {
-  color: var(--xz-color-orange-fg-100) !important;
+._cl-orange-text-fg {
+  color: var(--xz-color-orange-text-fg) !important;
 }
 
 ._cl-orange-text-100 {
@@ -2182,8 +2186,8 @@
   color: var(--xz-color-purple-bg-200) !important;
 }
 
-._cl-purple-fg-100 {
-  color: var(--xz-color-purple-fg-100) !important;
+._cl-purple-text-fg {
+  color: var(--xz-color-purple-text-fg) !important;
 }
 
 ._cl-purple-text-100 {
@@ -2255,8 +2259,8 @@
   background-color: var(--xz-color-surface-400) !important;
 }
 
-._bgcl-fg-100 {
-  background-color: var(--xz-color-fg-100) !important;
+._bgcl-text-fg {
+  background-color: var(--xz-color-text-fg) !important;
 }
 
 ._bgcl-text-100 {
@@ -2271,6 +2275,10 @@
   background-color: var(--xz-color-text-300) !important;
 }
 
+._bgcl-line-50 {
+  background-color: var(--xz-color-line-50) !important;
+}
+
 ._bgcl-line-100 {
   background-color: var(--xz-color-line-100) !important;
 }
@@ -2311,8 +2319,8 @@
   background-color: var(--xz-color-primary-bg-200) !important;
 }
 
-._bgcl-primary-fg-100 {
-  background-color: var(--xz-color-primary-fg-100) !important;
+._bgcl-primary-text-fg {
+  background-color: var(--xz-color-primary-text-fg) !important;
 }
 
 ._bgcl-primary-text-100 {
@@ -2351,8 +2359,8 @@
   background-color: var(--xz-color-danger-bg-200) !important;
 }
 
-._bgcl-danger-fg-100 {
-  background-color: var(--xz-color-danger-fg-100) !important;
+._bgcl-danger-text-fg {
+  background-color: var(--xz-color-danger-text-fg) !important;
 }
 
 ._bgcl-danger-text-100 {
@@ -2391,8 +2399,8 @@
   background-color: var(--xz-color-success-bg-200) !important;
 }
 
-._bgcl-success-fg-100 {
-  background-color: var(--xz-color-success-fg-100) !important;
+._bgcl-success-text-fg {
+  background-color: var(--xz-color-success-text-fg) !important;
 }
 
 ._bgcl-success-text-100 {
@@ -2431,8 +2439,8 @@
   background-color: var(--xz-color-warning-bg-200) !important;
 }
 
-._bgcl-warning-fg-100 {
-  background-color: var(--xz-color-warning-fg-100) !important;
+._bgcl-warning-text-fg {
+  background-color: var(--xz-color-warning-text-fg) !important;
 }
 
 ._bgcl-warning-text-100 {
@@ -2471,8 +2479,8 @@
   background-color: var(--xz-color-info-bg-200) !important;
 }
 
-._bgcl-info-fg-100 {
-  background-color: var(--xz-color-info-fg-100) !important;
+._bgcl-info-text-fg {
+  background-color: var(--xz-color-info-text-fg) !important;
 }
 
 ._bgcl-info-text-100 {
@@ -2511,8 +2519,8 @@
   background-color: var(--xz-color-neutral-bg-200) !important;
 }
 
-._bgcl-neutral-fg-100 {
-  background-color: var(--xz-color-neutral-fg-100) !important;
+._bgcl-neutral-text-fg {
+  background-color: var(--xz-color-neutral-text-fg) !important;
 }
 
 ._bgcl-neutral-text-100 {
@@ -2551,8 +2559,8 @@
   background-color: var(--xz-color-orange-bg-200) !important;
 }
 
-._bgcl-orange-fg-100 {
-  background-color: var(--xz-color-orange-fg-100) !important;
+._bgcl-orange-text-fg {
+  background-color: var(--xz-color-orange-text-fg) !important;
 }
 
 ._bgcl-orange-text-100 {
@@ -2587,8 +2595,8 @@
   background-color: var(--xz-color-purple-bg-200) !important;
 }
 
-._bgcl-purple-fg-100 {
-  background-color: var(--xz-color-purple-fg-100) !important;
+._bgcl-purple-text-fg {
+  background-color: var(--xz-color-purple-text-fg) !important;
 }
 
 ._bgcl-purple-text-100 {
@@ -2660,8 +2668,8 @@
   border-color: var(--xz-color-surface-400) !important;
 }
 
-._bdcl-fg-100 {
-  border-color: var(--xz-color-fg-100) !important;
+._bdcl-text-fg {
+  border-color: var(--xz-color-text-fg) !important;
 }
 
 ._bdcl-text-100 {
@@ -2676,6 +2684,10 @@
   border-color: var(--xz-color-text-300) !important;
 }
 
+._bdcl-line-50 {
+  border-color: var(--xz-color-line-50) !important;
+}
+
 ._bdcl-line-100 {
   border-color: var(--xz-color-line-100) !important;
 }
@@ -2716,8 +2728,8 @@
   border-color: var(--xz-color-primary-bg-200) !important;
 }
 
-._bdcl-primary-fg-100 {
-  border-color: var(--xz-color-primary-fg-100) !important;
+._bdcl-primary-text-fg {
+  border-color: var(--xz-color-primary-text-fg) !important;
 }
 
 ._bdcl-primary-text-100 {
@@ -2756,8 +2768,8 @@
   border-color: var(--xz-color-danger-bg-200) !important;
 }
 
-._bdcl-danger-fg-100 {
-  border-color: var(--xz-color-danger-fg-100) !important;
+._bdcl-danger-text-fg {
+  border-color: var(--xz-color-danger-text-fg) !important;
 }
 
 ._bdcl-danger-text-100 {
@@ -2796,8 +2808,8 @@
   border-color: var(--xz-color-success-bg-200) !important;
 }
 
-._bdcl-success-fg-100 {
-  border-color: var(--xz-color-success-fg-100) !important;
+._bdcl-success-text-fg {
+  border-color: var(--xz-color-success-text-fg) !important;
 }
 
 ._bdcl-success-text-100 {
@@ -2836,8 +2848,8 @@
   border-color: var(--xz-color-warning-bg-200) !important;
 }
 
-._bdcl-warning-fg-100 {
-  border-color: var(--xz-color-warning-fg-100) !important;
+._bdcl-warning-text-fg {
+  border-color: var(--xz-color-warning-text-fg) !important;
 }
 
 ._bdcl-warning-text-100 {
@@ -2876,8 +2888,8 @@
   border-color: var(--xz-color-info-bg-200) !important;
 }
 
-._bdcl-info-fg-100 {
-  border-color: var(--xz-color-info-fg-100) !important;
+._bdcl-info-text-fg {
+  border-color: var(--xz-color-info-text-fg) !important;
 }
 
 ._bdcl-info-text-100 {
@@ -2916,8 +2928,8 @@
   border-color: var(--xz-color-neutral-bg-200) !important;
 }
 
-._bdcl-neutral-fg-100 {
-  border-color: var(--xz-color-neutral-fg-100) !important;
+._bdcl-neutral-text-fg {
+  border-color: var(--xz-color-neutral-text-fg) !important;
 }
 
 ._bdcl-neutral-text-100 {
@@ -2956,8 +2968,8 @@
   border-color: var(--xz-color-orange-bg-200) !important;
 }
 
-._bdcl-orange-fg-100 {
-  border-color: var(--xz-color-orange-fg-100) !important;
+._bdcl-orange-text-fg {
+  border-color: var(--xz-color-orange-text-fg) !important;
 }
 
 ._bdcl-orange-text-100 {
@@ -2992,8 +3004,8 @@
   border-color: var(--xz-color-purple-bg-200) !important;
 }
 
-._bdcl-purple-fg-100 {
-  border-color: var(--xz-color-purple-fg-100) !important;
+._bdcl-purple-text-fg {
+  border-color: var(--xz-color-purple-text-fg) !important;
 }
 
 ._bdcl-purple-text-100 {

package/dist/component.css

@@ -1 +1 @@
-.xz-button{--button-font-family: var(--xz-font-family-primary, system-ui, sans-serif);--button-font-weight: 600;--button-border-radius: 0.5rem;--button-small-height: 2rem;--button-small-font-size: 0.8125rem;--button-medium-height: 2.5rem;--button-medium-font-size: 0.875rem;--button-large-height: 3rem;--button-large-font-size: 1rem;position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;min-height:var(--button-medium-height);padding:0 1.125rem;border:none;border-radius:var(--button-border-radius);background:var(--xz-color-primary-bg-100);color:var(--xz-color-primary-fg-100);outline:none;font-weight:var(--button-font-weight);font-size:var(--button-medium-font-size);font-family:var(--button-font-family);line-height:100%;cursor:pointer;user-select:none;transition:all .16s ease-in-out}@media(hover: hover){.xz-button:hover::before{background:var(--xz-color-black-alpha-100)}.xz-button:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}}.xz-button>span{z-index:1}.xz-button .start-icon,.xz-button .end-icon{display:flex;align-items:center;min-width:1.375rem}.xz-button .end-icon{justify-content:flex-end}.xz-button::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:all .16s ease-in-out}.xz-button.is-size-small{min-height:var(--button-small-height);padding:0 1rem;font-size:var(--button-small-font-size)}.xz-button.is-size-small .start-icon,.xz-button.is-size-small .end-icon{min-width:1.125rem}.xz-button.is-size-medium{min-height:var(--button-medium-height);padding:0 1.125rem;font-size:var(--button-medium-font-size)}.xz-button.is-size-medium .start-icon,.xz-button.is-size-medium .end-icon{min-width:1.375rem}.xz-button.is-size-large{min-height:var(--button-large-height);padding:0 1.25rem;font-size:var(--button-large-font-size)}.xz-button.is-size-large .start-icon,.xz-button.is-size-large .end-icon{min-width:1.625rem}.xz-button.is-variant-danger{background:var(--xz-color-danger-bg-100)}@media(hover: hover){.xz-button.is-variant-danger:focus{box-shadow:0 0 0 0.175rem var(--xz-color-danger-line-200)}}.xz-button.is-variant-danger.is-loading::after{border-top-color:var(--xz-color-danger-fg-100);border-right-color:var(--xz-color-danger-fg-100)}.xz-button.is-variant-success{background:var(--xz-color-success-bg-100)}@media(hover: hover){.xz-button.is-variant-success:focus{box-shadow:0 0 0 0.175rem var(--xz-color-success-line-200)}}.xz-button.is-variant-success.is-loading::after{border-top-color:var(--xz-color-success-fg-100);border-right-color:var(--xz-color-success-fg-100)}.xz-button.is-variant-secondary{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-primary-text-100)}@media(hover: hover){.xz-button.is-variant-secondary:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}.xz-button.is-variant-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-primary-text-100)}.xz-button.is-variant-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-secondary.is-loading::after{border-top-color:var(--xz-color-primary-text-100);border-right-color:var(--xz-color-primary-text-100)}.xz-button.is-variant-outline{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-text-200)}@media(hover: hover){.xz-button.is-variant-outline:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}.xz-button.is-variant-outline:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-text-100)}.xz-button.is-variant-outline:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-outline.is-loading::after{border-top-color:var(--xz-color-text-200);border-right-color:var(--xz-color-text-200)}.xz-button.is-variant-tertiary{border:unset;background:var(--xz-color-neutral-soft-100);color:var(--xz-color-text-100)}@media(hover: hover){.xz-button.is-variant-tertiary:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-tertiary.is-loading::after{border-top-color:var(--xz-color-text-200);border-right-color:var(--xz-color-text-200)}.xz-button.is-variant-ghost{border:unset;background:rgba(0,0,0,0);color:var(--xz-color-text-200)}@media(hover: hover){.xz-button.is-variant-ghost:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-ghost.is-loading::after{border-top-color:var(--xz-color-text-200);border-right-color:var(--xz-color-text-200)}.xz-button.is-variant-white{border:1px solid var(--xz-color-line-100);background:var(--xz-color-surface-100);color:var(--xz-color-primary-text-100)}@media(hover: hover){.xz-button.is-variant-white:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-white.is-loading::after{border-top-color:var(--xz-color-primary-text-100);border-right-color:var(--xz-color-primary-text-100)}.xz-button.is-variant-white-secondary{border:1px solid var(--xz-color-white-alpha-1000);background:rgba(0,0,0,0);color:var(--xz-color-white-alpha-1000)}@media(hover: hover){.xz-button.is-variant-white-secondary:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}.xz-button.is-variant-white-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-white-alpha-1000)}.xz-button.is-variant-white-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-white-secondary.is-loading::after{border-top-color:var(--xz-color-white-alpha-1000);border-right-color:var(--xz-color-white-alpha-1000)}.xz-button.is-loading{color:rgba(0,0,0,0);pointer-events:none}.xz-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border:2px solid;border-top-color:var(--xz-color-primary-fg-100);border-right-color:var(--xz-color-primary-fg-100);border-radius:999px;animation:button-loading-spin .48s infinite linear}.xz-button[disabled],.xz-button.is-disabled{opacity:.6;cursor:not-allowed}.xz-button.is-fluid{width:100%}.xz-button.is-pill{border-radius:999px}.xz-button.is-square{aspect-ratio:1/1}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
+.xz-button{--button-font-family: var( --xz-font-family-secondary, system-ui, sans-serif );--button-font-weight: 600;--button-border-radius: 999px;--button-gap: 0.375em;--button-transition: all 0.08s ease-in-out;--button-small-height: 2rem;--button-small-min-width: 6rem;--button-small-font-size: 0.8125rem;--button-small-padding: 1rem;--button-small-icon-padding: 0.75rem;--button-small-icon-size: 1rem;--button-medium-height: 2.5rem;--button-medium-min-width: 7.5rem;--button-medium-font-size: 0.875rem;--button-medium-padding: 1.125rem;--button-medium-icon-padding: 0.875rem;--button-medium-icon-size: 1.125rem;--button-large-height: 3rem;--button-large-min-width: 9rem;--button-large-font-size: 1rem;--button-large-padding: 1.25rem;--button-large-icon-padding: 1rem;--button-large-icon-size: 1.25rem;--button-disabled-opacity: 0.4;--button-outline-border-width: 1px;--button-loading-border-width: 2px;--button-loading-speed: 0.48s;position:relative;display:inline-flex;gap:var(--button-gap);justify-content:center;align-items:center;overflow:hidden;min-width:var(--button-medium-min-width);min-height:var(--button-medium-height);padding:0 var(--button-medium-padding);border:none;border-radius:var(--button-border-radius);corner-shape:superellipse(1.25);background:var(--xz-color-bg-100);color:var(--xz-color-text-fg);outline:none;font-weight:var(--button-font-weight);font-size:var(--button-medium-font-size);font-family:var(--button-font-family, var(--xz-font-family-secondary));line-height:100%;cursor:pointer;user-select:none;transition:var(--button-transition)}.xz-button:hover{background:var(--xz-color-bg-200)}.xz-button>span{z-index:1}.xz-button .icon{display:flex;justify-content:center;align-items:center;width:var(--button-medium-icon-size);height:var(--button-medium-icon-size)}.xz-button.is-size-small{min-width:var(--button-small-min-width);min-height:var(--button-small-height);padding:0 var(--button-small-padding);font-size:var(--button-small-font-size)}.xz-button.is-size-small .icon{width:var(--button-small-icon-size);height:var(--button-small-icon-size)}.xz-button.is-size-medium{min-width:var(--button-medium-min-width);min-height:var(--button-medium-height);padding:0 var(--button-medium-padding);font-size:var(--button-medium-font-size)}.xz-button.is-size-medium .icon{width:var(--button-medium-icon-size);height:var(--button-medium-icon-size)}.xz-button.is-size-large{min-width:var(--button-large-min-width);min-height:var(--button-large-height);padding:0 var(--button-large-padding);font-size:var(--button-large-font-size)}.xz-button.is-size-large .icon{width:var(--button-large-icon-size);height:var(--button-large-icon-size)}.xz-button.has-left-icon{padding-left:var(--button-medium-icon-padding)}.xz-button.has-right-icon{padding-right:var(--button-medium-icon-padding)}.xz-button.is-size-small.has-left-icon{padding-left:var(--button-small-icon-padding)}.xz-button.is-size-small.has-right-icon{padding-right:var(--button-small-icon-padding)}.xz-button.is-size-large.has-left-icon{padding-left:var(--button-large-icon-padding)}.xz-button.is-size-large.has-right-icon{padding-right:var(--button-large-icon-padding)}.xz-button.is-variant-primary{background:var(--xz-color-primary-bg-100);color:var(--xz-color-primary-text-fg)}.xz-button.is-variant-primary:hover{background:var(--xz-color-primary-bg-200)}.xz-button.is-variant-danger{background:var(--xz-color-danger-bg-100);color:var(--xz-color-danger-text-fg)}.xz-button.is-variant-danger:hover{background:var(--xz-color-danger-bg-200)}.xz-button.is-variant-success{background:var(--xz-color-success-bg-100);color:var(--xz-color-success-text-fg)}.xz-button.is-variant-success:hover{background:var(--xz-color-success-bg-200)}.xz-button.is-variant-warning{background:var(--xz-color-warning-bg-100);color:var(--xz-color-warning-text-fg)}.xz-button.is-variant-warning:hover{background:var(--xz-color-warning-bg-200)}.xz-button.is-variant-orange{background:var(--xz-color-orange-bg-100);color:var(--xz-color-orange-text-fg)}.xz-button.is-variant-orange:hover{background:var(--xz-color-orange-bg-200)}.xz-button.is-variant-purple{background:var(--xz-color-purple-bg-100);color:var(--xz-color-purple-text-fg)}.xz-button.is-variant-purple:hover{background:var(--xz-color-purple-bg-200)}.xz-button.is-variant-soft{background:var(--xz-color-neutral-soft-100);color:var(--xz-color-text-100)}.xz-button.is-variant-soft:hover{background:var(--xz-color-neutral-soft-200)}.xz-button.is-variant-primary-soft{background:var(--xz-color-primary-soft-100);color:var(--xz-color-primary-text-200)}.xz-button.is-variant-primary-soft:hover{background:var(--xz-color-primary-soft-200)}.xz-button.is-variant-danger-soft{background:var(--xz-color-danger-soft-100);color:var(--xz-color-danger-text-200)}.xz-button.is-variant-danger-soft:hover{background:var(--xz-color-danger-soft-200)}.xz-button.is-variant-success-soft{background:var(--xz-color-success-soft-100);color:var(--xz-color-success-text-200)}.xz-button.is-variant-success-soft:hover{background:var(--xz-color-success-soft-200)}.xz-button.is-variant-warning-soft{background:var(--xz-color-warning-soft-100);color:var(--xz-color-warning-text-200)}.xz-button.is-variant-warning-soft:hover{background:var(--xz-color-warning-soft-200)}.xz-button.is-variant-orange-soft{background:var(--xz-color-orange-soft-100);color:var(--xz-color-orange-text-200)}.xz-button.is-variant-orange-soft:hover{background:var(--xz-color-orange-soft-200)}.xz-button.is-variant-purple-soft{background:var(--xz-color-purple-soft-100);color:var(--xz-color-purple-text-200)}.xz-button.is-variant-purple-soft:hover{background:var(--xz-color-purple-soft-200)}.xz-button.is-variant-outline{border:var(--button-outline-border-width) solid var(--xz-color-neutral-line-100);background:rgba(0,0,0,0);color:var(--xz-color-text-100)}.xz-button.is-variant-outline:hover{background:var(--xz-color-neutral-soft-100)}.xz-button.is-variant-primary-outline{border:var(--button-outline-border-width) solid var(--xz-color-primary-line-100);background:rgba(0,0,0,0);color:var(--xz-color-primary-text-100)}.xz-button.is-variant-primary-outline:hover{background:var(--xz-color-primary-soft-100)}.xz-button.is-variant-danger-outline{border:var(--button-outline-border-width) solid var(--xz-color-danger-line-100);background:rgba(0,0,0,0);color:var(--xz-color-danger-text-100)}.xz-button.is-variant-danger-outline:hover{background:var(--xz-color-danger-soft-100)}.xz-button.is-variant-success-outline{border:var(--button-outline-border-width) solid var(--xz-color-success-line-100);background:rgba(0,0,0,0);color:var(--xz-color-success-text-100)}.xz-button.is-variant-success-outline:hover{background:var(--xz-color-success-soft-100)}.xz-button.is-variant-warning-outline{border:var(--button-outline-border-width) solid var(--xz-color-warning-line-100);background:rgba(0,0,0,0);color:var(--xz-color-warning-text-100)}.xz-button.is-variant-warning-outline:hover{background:var(--xz-color-warning-soft-100)}.xz-button.is-variant-orange-outline{border:var(--button-outline-border-width) solid var(--xz-color-orange-line-100);background:rgba(0,0,0,0);color:var(--xz-color-orange-text-100)}.xz-button.is-variant-orange-outline:hover{background:var(--xz-color-orange-soft-100)}.xz-button.is-variant-purple-outline{border:var(--button-outline-border-width) solid var(--xz-color-purple-line-100);background:rgba(0,0,0,0);color:var(--xz-color-purple-text-100)}.xz-button.is-variant-purple-outline:hover{background:var(--xz-color-purple-soft-100)}.xz-button.is-variant-ghost{background:rgba(0,0,0,0);color:var(--xz-color-text-100)}.xz-button.is-variant-ghost:hover{background:var(--xz-color-neutral-soft-100)}.xz-button.is-variant-primary-ghost{background:rgba(0,0,0,0);color:var(--xz-color-primary-text-100)}.xz-button.is-variant-primary-ghost:hover{background:var(--xz-color-primary-soft-100)}.xz-button.is-variant-danger-ghost{background:rgba(0,0,0,0);color:var(--xz-color-danger-text-100)}.xz-button.is-variant-danger-ghost:hover{background:var(--xz-color-danger-soft-100)}.xz-button.is-variant-success-ghost{background:rgba(0,0,0,0);color:var(--xz-color-success-text-100)}.xz-button.is-variant-success-ghost:hover{background:var(--xz-color-success-soft-100)}.xz-button.is-variant-warning-ghost{background:rgba(0,0,0,0);color:var(--xz-color-warning-text-100)}.xz-button.is-variant-warning-ghost:hover{background:var(--xz-color-warning-soft-100)}.xz-button.is-variant-orange-ghost{background:rgba(0,0,0,0);color:var(--xz-color-orange-text-100)}.xz-button.is-variant-orange-ghost:hover{background:var(--xz-color-orange-soft-100)}.xz-button.is-variant-purple-ghost{background:rgba(0,0,0,0);color:var(--xz-color-purple-text-100)}.xz-button.is-variant-purple-ghost:hover{background:var(--xz-color-purple-soft-100)}.xz-button.is-loading{pointer-events:none}.xz-button.is-loading>span,.xz-button.is-loading .icon{visibility:hidden}.xz-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border-width:var(--button-loading-border-width);border-style:solid;border-color:rgba(0,0,0,0);border-top-color:currentcolor;border-right-color:currentcolor;border-radius:999px;animation:button-loading-spin var(--button-loading-speed) infinite linear}.xz-button[disabled],.xz-button.is-disabled{opacity:var(--button-disabled-opacity);cursor:not-allowed}.xz-button.is-fluid{width:100%}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.xz-button-group{display:flex;gap:0.5rem}.xz-button-group-button{display:flex;gap:0.375rem;align-items:center;padding:0.375em 0.875em;border:1px solid var(--xz-color-line-50);border-radius:62.4375rem;background:rgba(0,0,0,0);color:var(--xz-color-text-200);font-weight:600;font-size:0.8125rem;font-family:var(--xz-font-family-secondary);line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.xz-button-group-button:hover{background:var(--xz-color-neutral-soft-100)}.xz-button-group-button.is-active{border-color:var(--xz-color-primary-line-300);background:var(--xz-color-primary-soft-100);color:var(--xz-color-primary-text-100)}.xz-button-group-button.is-size-small{padding:0 0.75rem;font-size:0.75rem}.xz-button-group-button.is-size-large{padding:0 1.125rem;font-size:1rem}.xz-button-group-button[disabled]{opacity:.5;cursor:not-allowed}.xz-badge{--badge-font-weight: 500;--badge-border-radius: 999px;--badge-line-height: 1.2;--badge-gap: 0.25em;--badge-medium-min-height: 1.25rem;--badge-medium-padding-y: 0.375em;--badge-medium-padding-x: 0.9375em;--badge-medium-font-size: 0.75rem;--badge-medium-icon-size: 1rem;--badge-medium-icon-padding: 0.625em;--badge-small-min-height: 1.25rem;--badge-small-padding-y: 0.1875em;--badge-small-padding-x: 0.75em;--badge-small-font-size: 0.75rem;--badge-small-icon-padding: 0.5em;display:inline-flex;gap:var(--badge-gap);justify-content:center;align-items:center;min-height:var(--badge-medium-min-height);padding:var(--badge-medium-padding-y) var(--badge-medium-padding-x);border-radius:var(--badge-border-radius);corner-shape:superellipse(1.25);background:var(--xz-color-neutral-bg-100);color:var(--xz-color-neutral-text-fg);font-weight:var(--badge-font-weight);font-size:var(--xz-font-size-200, var(--badge-medium-font-size));font-family:var(--xz-font-family-primary, system-ui, sans-serif);line-height:var(--badge-line-height)}.xz-badge .icon{display:flex;justify-content:center;align-items:center;width:var(--badge-medium-icon-size);height:var(--badge-medium-icon-size)}.xz-badge.is-size-small{min-height:var(--badge-small-min-height);padding:var(--badge-small-padding-y) var(--badge-small-padding-x);font-size:var(--badge-small-font-size)}.xz-badge.has-left-icon{padding-left:var(--badge-medium-icon-padding)}.xz-badge.has-right-icon{padding-right:var(--badge-medium-icon-padding)}.xz-badge.is-size-small.has-left-icon{padding-left:var(--badge-small-icon-padding)}.xz-badge.is-size-small.has-right-icon{padding-right:var(--badge-small-icon-padding)}.xz-badge.is-variant-primary-soft{background:var(--xz-color-primary-soft-100);color:var(--xz-color-primary-text-200)}.xz-badge.is-variant-success-soft{background:var(--xz-color-success-soft-100);color:var(--xz-color-success-text-200)}.xz-badge.is-variant-danger-soft{background:var(--xz-color-danger-soft-100);color:var(--xz-color-danger-text-200)}.xz-badge.is-variant-warning-soft{background:var(--xz-color-warning-soft-100);color:var(--xz-color-warning-text-200)}.xz-badge.is-variant-info-soft{background:var(--xz-color-info-soft-100);color:var(--xz-color-info-text-200)}.xz-badge.is-variant-neutral-soft{background:var(--xz-color-neutral-soft-100);color:var(--xz-color-neutral-text-200)}.xz-badge.is-variant-orange-soft{background:var(--xz-color-orange-soft-100);color:var(--xz-color-orange-text-200)}.xz-badge.is-variant-purple-soft{background:var(--xz-color-purple-soft-100);color:var(--xz-color-purple-text-200)}.xz-badge.is-variant-primary-soft-solid{background:var(--xz-color-primary-soft-solid-100);color:var(--xz-color-primary-text-200)}.xz-badge.is-variant-info-soft-solid{background:var(--xz-color-info-soft-solid-100);color:var(--xz-color-info-text-200)}.xz-badge.is-variant-warning-soft-solid{background:var(--xz-color-warning-soft-solid-100);color:var(--xz-color-warning-text-200)}.xz-badge.is-variant-success-soft-solid{background:var(--xz-color-success-soft-solid-100);color:var(--xz-color-success-text-200)}.xz-badge.is-variant-danger-soft-solid{background:var(--xz-color-danger-soft-solid-100);color:var(--xz-color-danger-text-200)}.xz-badge.is-variant-neutral-soft-solid{background:var(--xz-color-neutral-soft-solid-100);color:var(--xz-color-neutral-text-200)}.xz-badge.is-variant-orange-soft-solid{background:var(--xz-color-orange-soft-solid-100);color:var(--xz-color-orange-text-200)}.xz-badge.is-variant-purple-soft-solid{background:var(--xz-color-purple-soft-solid-100);color:var(--xz-color-purple-text-200)}.xz-badge.is-variant-primary{background:var(--xz-color-primary-bg-100);color:var(--xz-color-primary-text-fg)}.xz-badge.is-variant-success{background:var(--xz-color-success-bg-100);color:var(--xz-color-success-text-fg)}.xz-badge.is-variant-danger{background:var(--xz-color-danger-bg-100);color:var(--xz-color-danger-text-fg)}.xz-badge.is-variant-warning{background:var(--xz-color-warning-bg-100);color:var(--xz-color-warning-text-fg)}.xz-badge.is-variant-info{background:var(--xz-color-info-bg-100);color:var(--xz-color-info-text-fg)}.xz-badge.is-variant-neutral{background:var(--xz-color-neutral-bg-100);color:var(--xz-color-neutral-text-fg)}.xz-badge.is-variant-orange{background:var(--xz-color-orange-bg-100);color:var(--xz-color-orange-text-fg)}.xz-badge.is-variant-purple{background:var(--xz-color-purple-bg-100);color:var(--xz-color-purple-text-fg)}.xz-badge.is-fluid{width:100%}.xz-chip{--color-bg: var(--xz-color-bg-100);display:inline-flex;justify-content:center;align-items:center;height:2rem;padding:0.375em 1em;border:none;border-radius:62.4375rem;background:var(--xz-color-neutral-soft-100);color:var(--xz-color-text-100);font-weight:600;font-size:0.8125rem;font-family:var(--xz-font-family-secondary);line-height:1.4;white-space:nowrap;cursor:pointer;transition:background .16s ease,color .16s ease}.xz-chip.is-full-width{width:100%}.xz-chip:hover:not(.is-active){background:var(--xz-color-neutral-soft-200)}.xz-chip.is-active{background:var(--color-bg);color:var(--xz-color-text-fg)}.xz-message{position:relative;display:flex;padding:0.625em 1.25em;border:1px solid var(--xz-color-neutral-line-100);border-radius:0.5rem;background:var(--xz-color-neutral-soft-100);color:var(--xz-color-neutral-text-100);font-weight:400;font-size:14px}.xz-message>.content{flex:1;font-size:inherit}.xz-message .icon{display:flex;flex-shrink:0;justify-content:center;align-items:center;align-self:flex-start;height:23px;font-size:1em;line-height:1.5}.xz-message .close{position:absolute;top:0.5rem;right:0.5rem;display:flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--xz-color-neutral-line-100);opacity:.5;cursor:pointer;transition:opacity .16s ease-in-out}.xz-message .close:hover{opacity:1}.xz-message .close::before,.xz-message .close::after{content:" ";position:absolute;left:0.6875rem;width:0.125rem;height:1rem;background-color:currentcolor}.xz-message .close::before{transform:rotate(45deg)}.xz-message .close::after{transform:rotate(-45deg)}.xz-message.is-show-close{padding-right:2.75em}.xz-message.is-variant-primary{border:1px solid var(--xz-color-primary-line-100);background:var(--xz-color-primary-soft-100);color:var(--xz-color-primary-text-100)}.xz-message.is-variant-primary .close{background:var(--xz-color-primary-line-100)}.xz-message.is-variant-success{border:1px solid var(--xz-color-success-line-100);background:var(--xz-color-success-soft-100);color:var(--xz-color-success-text-100)}.xz-message.is-variant-success .close{background:var(--xz-color-success-line-100)}.xz-message.is-variant-danger{border:1px solid var(--xz-color-danger-line-100);background:var(--xz-color-danger-soft-100);color:var(--xz-color-danger-text-100)}.xz-message.is-variant-danger .close{background:var(--xz-color-danger-line-100)}.xz-message.is-variant-warning{border:1px solid var(--xz-color-warning-line-100);background:var(--xz-color-warning-soft-100);color:var(--xz-color-warning-text-100)}.xz-message.is-variant-warning .close{background:var(--xz-color-warning-line-100)}.xz-message.is-variant-info{border:1px solid var(--xz-color-info-line-100);background:var(--xz-color-info-soft-100);color:var(--xz-color-info-text-100)}.xz-message.is-variant-info .close{background:var(--xz-color-info-line-100)}.xz-message.is-variant-orange{border:1px solid var(--xz-color-orange-line-100);background:var(--xz-color-orange-soft-100);color:var(--xz-color-orange-text-100)}.xz-message.is-variant-orange .close{background:var(--xz-color-orange-line-100)}.xz-message.is-variant-purple{border:1px solid var(--xz-color-purple-line-100);background:var(--xz-color-purple-soft-100);color:var(--xz-color-purple-text-100)}.xz-message.is-variant-purple .close{background:var(--xz-color-purple-line-100)}.xz-message.is-size-small{padding:0.5em 1em;font-size:13px}.xz-message.is-size-small .icon{height:21.45px}.xz-message.is-size-large{padding:0.875em 1.5em;font-size:16px}.xz-message.is-size-large .icon{height:26.4px}.xz-message.is-show-icon{gap:0.5em}.xz-message.is-borderless{border-width:0}.content{line-height:1.5}.xz-field{--form-element-small-height: 1.75rem;--form-element-small-font-size: 0.75rem;--form-element-medium-height: 2.5rem;--form-element-medium-font-size: 0.875rem;--form-element-large-height: 3rem;--form-element-large-font-size: 1rem;--form-element-border-radius: 0.375rem;display:flex;flex-direction:column;gap:0.375rem}.xz-field label{display:flex;gap:0.25rem;align-items:baseline;color:var(--xz-color-text-100);font-weight:600;font-size:0.875rem;font-family:var(--xz-font-family-secondary)}.xz-field .description{margin-bottom:0.25rem;color:var(--xz-color-text-300);font-size:0.875rem;line-height:1.5}.xz-field .info{color:var(--xz-color-text-300);font-size:0.875rem}.xz-field.is-fluid{width:100%}.xz-field.is-size-small .xz-input{height:var(--form-element-small-height)}.xz-field.is-size-small .xz-input .prefix,.xz-field.is-size-small .xz-input .suffix,.xz-field.is-size-small .xz-input .password-suffix{font-size:var(--form-element-small-font-size)}.xz-field.is-size-small .xz-input input{font-size:var(--form-element-small-font-size)}.xz-field.is-size-large .xz-input{height:var(--form-element-large-height)}.xz-field.is-size-large .xz-input .prefix,.xz-field.is-size-large .xz-input .suffix,.xz-field.is-size-large .xz-input .password-suffix{font-size:var(--form-element-large-font-size)}.xz-field.is-size-large .xz-input input{font-size:var(--form-element-large-font-size)}.xz-field.is-variant-success .info{color:var(--xz-color-success-text-100)}.xz-field.is-variant-success input,.xz-field.is-variant-success textarea,.xz-field.is-variant-success select{border-color:var(--xz-color-success-line-200)}.xz-field.is-variant-success input:focus,.xz-field.is-variant-success input:active,.xz-field.is-variant-success textarea:focus,.xz-field.is-variant-success textarea:active,.xz-field.is-variant-success select:focus,.xz-field.is-variant-success select:active{border-color:var(--xz-color-success-line-200);box-shadow:0 0 0 .175rem var(--xz-color-success-soft-200)}.xz-field.is-variant-danger .info{color:var(--xz-color-danger-text-100)}.xz-field.is-variant-danger input,.xz-field.is-variant-danger textarea,.xz-field.is-variant-danger select{border-color:var(--xz-color-danger-line-200)}.xz-field.is-variant-danger input:focus,.xz-field.is-variant-danger input:active,.xz-field.is-variant-danger textarea:focus,.xz-field.is-variant-danger textarea:active,.xz-field.is-variant-danger select:focus,.xz-field.is-variant-danger select:active{border-color:var(--xz-color-danger-line-200);box-shadow:0 0 0 .175rem var(--xz-color-danger-soft-200)}.xz-input{position:relative;display:inline-flex;flex-direction:column;gap:0.375em;height:var(--form-element-medium-height);padding-top:0;border-radius:var(--form-element-border-radius)}.xz-input .prefix,.xz-input .suffix,.xz-input .password-suffix{position:absolute;top:50%;color:var(--xz-color-text-300);font-size:var(--form-element-medium-font-size);transform:translate3d(0, -50%, 0)}.xz-input .prefix{left:1em;pointer-events:none}.xz-input .suffix{right:1em;pointer-events:none}.xz-input .password-suffix{right:0;display:flex;justify-content:center;align-items:center;width:40px;height:100%;padding-right:12px;padding-left:12px;cursor:pointer}.xz-input input{width:100%;height:100%;padding:0 0.75em;border:1px solid var(--xz-color-line-100);border-radius:inherit;background-color:var(--xz-color-surface-50);color:var(--xz-color-text-100);outline:none;font-weight:400;font-size:var(--form-element-medium-font-size);font-family:var(--xz-font-family-primary);transition:border .16s ease-in-out;appearance:none}.xz-input input:hover{border-color:var(--xz-color-line-200)}.xz-input input:focus,.xz-input input:active{border-color:var(--xz-color-primary-line-200);box-shadow:0 0 0 .175rem var(--xz-color-primary-soft-200)}.xz-input input[readonly]{background:var(--xz-color-neutral-soft-100)}.xz-input input[disabled]{background:var(--xz-color-neutral-soft-100);cursor:not-allowed}.xz-input input[type=number]::-webkit-outer-spin-button,.xz-input input[type=number]::-webkit-inner-spin-button{margin:0;appearance:none}.xz-input input[type=number]{appearance:textfield}.xz-textarea{position:relative;display:flex;flex-direction:column;gap:0.375em;width:100%;border-radius:var(--form-element-border-radius)}.xz-textarea textarea{width:100%;height:100%;min-height:7.5rem;padding:0 0.75em;padding:.5em .75em;border:1px solid var(--xz-color-line-50);border-radius:inherit;background-color:var(--xz-color-surface-50);color:var(--xz-color-text-100);outline:none;font-weight:400;font-size:var(--form-element-medium-font-size);font-family:inherit;line-height:1.5;resize:vertical;transition:border .16s ease-in-out;appearance:none}.xz-textarea textarea:hover{border-color:var(--xz-color-line-200)}.xz-textarea textarea:focus,.xz-textarea textarea:active{border-color:var(--xz-color-primary-line-200);box-shadow:0 0 0 .175rem var(--xz-color-primary-soft-200);outline:none}.xz-textarea textarea[readonly]{background:var(--xz-color-neutral-soft-100)}.xz-textarea textarea[disabled]{background:var(--xz-color-neutral-soft-100);cursor:not-allowed}.xz-textarea .textarea-maxlength{position:absolute;right:12px;bottom:0.25em;z-index:1;color:var(--xz-color-text-200);font-size:.75em;font-family:var(--xz-font-family-primary);font-variant-numeric:tabular-nums}.xz-textarea .textarea-maxlength.is-negative{color:var(--xz-color-danger-text-100)}.xz-field.is-maxlength textarea{padding-bottom:24px;scroll-padding-bottom:24px}.xz-field.is-maxlength .xz-textarea::after{content:"";position:absolute;right:1px;bottom:1px;left:1px;height:32px;border-bottom-right-radius:var(--form-element-border-radius);border-bottom-left-radius:var(--form-element-border-radius);background:linear-gradient(to bottom, transparent, var(--xz-color-surface-50) 70%);pointer-events:none}.xz-field.is-disabled textarea{background-color:var(--xz-color-neutral-soft-100);cursor:not-allowed}@keyframes checkbox-animate{0%{transform:scale(0.85)}100%{transform:scale(1)}}@keyframes checkbox-int-animate{0%{transform:scale(0.85)}100%{transform:scale(1)}}.xz-checkbox{display:flex;gap:0.5em;align-items:center}.xz-checkbox.is-indeterminate input,.xz-checkbox input:indeterminate{position:relative;border-color:var(--xz-color-primary-bg-100);background-color:#fff;background-image:linear-gradient(90deg, transparent 80%, var(--xz-color-primary-bg-100) 80%),linear-gradient(-90deg, transparent 80%, var(--xz-color-primary-bg-100) 80%),linear-gradient(0deg, var(--xz-color-primary-bg-100) 38%, transparent 38%, transparent 62%, var(--xz-color-primary-bg-100) 62%);animation:checkbox-int-animate .16s ease}.xz-checkbox.is-indeterminate input[disabled],.xz-checkbox input:indeterminate[disabled]{background-color:#fff;opacity:.7}.xz-checkbox input{flex-shrink:0;width:1.375em;height:1.375em;border-width:0.0625em;border-style:solid;border-color:var(--xz-color-line-200);border-radius:0.375rem;background:rgba(0,0,0,0);cursor:pointer;appearance:none}.xz-checkbox input:checked{border-color:var(--xz-color-primary-bg-100);background-image:linear-gradient(-45deg, transparent 68%, var(--xz-color-primary-bg-100) 68%),linear-gradient(45deg, transparent 78%, var(--xz-color-primary-bg-100) 78%),linear-gradient(-45deg, var(--xz-color-primary-bg-100) 40%, transparent 40%),linear-gradient(45deg, var(--xz-color-primary-bg-100) 28%, white 28%, white 40%, transparent 40%),linear-gradient(-45deg, white 52%, var(--xz-color-primary-bg-100) 52%);animation:checkbox-animate .16s ease}.xz-checkbox input:checked[disabled]{opacity:.7}.xz-checkbox input[disabled],.xz-checkbox input[disabled]+label{color:var(--xz-color-text-200);cursor:not-allowed}.xz-checkbox input[disabled]{background-color:var(--xz-color-neutral-soft-100);opacity:.7}.xz-checkbox label{color:var(--xz-color-text-100);font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}@keyframes radio-animate{0%{box-shadow:0 0 0 0 var(--xz-color-surface-50) inset,0 0 0 0 var(--xz-color-surface-50) inset}100%{box-shadow:0 0 0 0.25em var(--xz-color-surface-50) inset,0 0 0 0.25em var(--xz-color-surface-50) inset}}.xz-radio{display:flex;gap:0.5em;align-items:center}.xz-radio input{flex-shrink:0;width:1.375em;height:1.375em;border-width:0.0625em;border-style:solid;border-color:var(--xz-color-line-200);border-radius:100%;background:rgba(0,0,0,0);cursor:pointer;transition:all .16s ease-in-out;appearance:none}.xz-radio input:checked{border-style:solid;border-color:var(--xz-color-primary-bg-100);background:var(--xz-color-primary-bg-100);box-shadow:0 0 0 0.25em var(--xz-color-surface-50) inset,0 0 0 0.25em var(--xz-color-surface-50) inset;animation:radio-animate .16s cubic-bezier(0.42, 0, 0.23, 1.89)}.xz-radio input:checked[disabled]{background:var(--xz-color-primary-bg-100);opacity:.7}.xz-radio input[disabled],.xz-radio input[disabled]+label{color:var(--xz-color-text-200);cursor:not-allowed}.xz-radio input[disabled]{background-color:var(--xz-color-neutral-soft-100);opacity:.7}.xz-radio label{color:var(--xz-color-text-100);font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}.xz-switch{display:inline-flex;gap:0.5rem;align-items:center}.xz-switch input[type=checkbox]{--handleoffset: 1.5rem;--handleoffsetcalculator: calc(var(--handleoffset) * -1);--handle-color: white;--handle-opacity: 1;--base-color: var(--xz-color-neutral-soft-solid-200);--base-opacity: 1;flex-shrink:0;width:3rem;height:1.5rem;border-color:var(--xz-color-line-200);border-radius:999px;background-color:var(--handle-color);box-shadow:var(--handleoffsetcalculator) 0 0 2px var(--base-color) inset,0 0 0 2px var(--base-color) inset,0 0;cursor:pointer;transition:all .16s ease-in-out;transition-timing-function:ease-in-out;transition-duration:.28s;appearance:none}.xz-switch input[type=checkbox]:checked{--handleoffsetcalculator: calc(var(--handleoffset));--handle-opacity: 1;--base-opacity: 1;--handle-color: white;--base-color: var(--xz-color-primary-bg-100)}.xz-switch input[type=checkbox][disabled]{opacity:.85;cursor:not-allowed}.xz-switch input[type=checkbox]:not(:checked)[disabled]{--base-color: var(--xz-color-neutral-soft-200);background-color:var(--xz-color-neutral-soft-100)}.xz-switch label{color:var(--xz-color-text-100);font-weight:600;font-size:0.9375rem;cursor:pointer;user-select:none}.xz-switch.is-size-small input[type=checkbox]{--handleoffset: 1.125rem;width:2.25rem;height:1.125rem}.xz-switch.is-size-small label{font-size:0.8125rem}.xz-switch.is-size-large input[type=checkbox]{--handleoffset: 1.875rem;width:3.75rem;height:1.875rem}.xz-switch.is-size-large label{font-size:1rem}.xz-link{color:var(--xz-color-text-100);font-weight:inherit;text-decoration:underline;cursor:pointer;transition:color .16s ease-in-out;text-underline-offset:2px}.xz-link:hover{color:var(--xz-color-text-200)}.xz-link.is-variant-primary{color:var(--xz-color-primary-text-100)}.xz-link.is-variant-primary:hover{color:var(--xz-color-primary-text-200)}.xz-link.is-variant-danger{color:var(--xz-color-danger-text-100)}.xz-link.is-variant-danger:hover{color:var(--xz-color-danger-text-200)}.xz-link.is-variant-success{color:var(--xz-color-success-text-100)}.xz-link.is-variant-success:hover{color:var(--xz-color-success-text-200)}.xz-link.is-variant-warning{color:var(--xz-color-warning-text-100)}.xz-link.is-variant-warning:hover{color:var(--xz-color-warning-text-200)}.xz-link.is-variant-info{color:var(--xz-color-info-text-100)}.xz-link.is-variant-info:hover{color:var(--xz-color-info-text-200)}.xz-link.is-no-underline{text-decoration:none}.xz-tab-list{--height: 2.5rem;--padding: 0.25rem;--gap: 0.25rem;--radius: 0.75rem;display:inline-flex;gap:var(--gap);padding:var(--padding);border-radius:var(--radius);background:var(--xz-color-neutral-soft-100)}.xz-tab-list.is-round{border-radius:62.4375rem}.xz-tab-list.is-round .xz-tab-list-item{border-radius:62.4375rem}.xz-tab-list.is-fluid{display:flex;width:100%}.xz-tab-list.is-fluid .xz-tab-list-item{flex:1}.xz-tab-list-item{display:inline-flex;gap:0.375rem;justify-content:center;align-items:center;min-width:2.5rem;height:calc(var(--height) - var(--padding)*2);padding:0 0.625rem;border:none;border-radius:0.5rem;background:rgba(0,0,0,0);color:var(--xz-color-text-200);font-weight:600;font-size:0.8125rem;font-family:var(--xz-font-family-secondary);line-height:1;cursor:pointer;transition:background .16s ease,color .16s ease,box-shadow .16s ease}.xz-tab-list-item:hover:not(.is-active){background:var(--xz-color-neutral-soft-200)}.xz-tab-list-item.is-active{background:var(--xz-color-surface-50);color:var(--xz-color-text-100);box-shadow:var(--xz-box-shadow-100)}.xz-loader{--loader-color: var(--xz-color-neutral-bg-200)}@keyframes xz-loader1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes xz-loader3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes xz-loader2{0%{transform:translate(0, 0)}100%{transform:translate(1.5rem, 0)}}.xz-loader{position:relative;display:inline-block;width:5rem;height:0.8125rem;color:var(--loader-color)}.xz-loader div{position:absolute;top:0;width:0.8125rem;height:0.8125rem;border-radius:50%;background:currentcolor;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.xz-loader div:nth-child(1){left:0.5rem;animation:xz-loader1 .6s infinite}.xz-loader div:nth-child(2){left:0.5rem;animation:xz-loader2 .6s infinite}.xz-loader div:nth-child(3){left:2rem;animation:xz-loader2 .6s infinite}.xz-loader div:nth-child(4){left:3.5rem;animation:xz-loader3 .6s infinite}.xz-fw-spinner{stroke:var(--xz-color-neutral-bg-200);animation:xz-fw-spinner-dash 1.2s linear infinite;stroke-width:2px;stroke-dashoffset:0;stroke-dasharray:79.2296,40}@keyframes xz-fw-spinner-dash{from{stroke-dashoffset:0}to{stroke-dashoffset:-119.2296px}}.xz-blank-slate{display:flex;justify-content:center;align-items:center;padding:1.25rem 0.75rem;border-radius:0.75rem;background-color:var(--xz-color-neutral-soft-100)}.xz-blank-slate .content{display:flex;flex-direction:column;align-items:center}.xz-blank-slate .image{display:flex;justify-content:center;align-items:center;margin-bottom:1rem}.xz-blank-slate .text{color:var(--xz-color-neutral-text-100);font-weight:600;font-size:0.9375rem;font-family:var(--xz-font-family-secondary);text-align:center}.xz-blank-slate .description{margin-top:0.25rem;color:var(--xz-color-neutral-text-100);font-size:0.875rem;text-align:center;opacity:.8}.xz-blank-slate .description:empty{display:none}

package/dist/reset.css

@@ -241,7 +241,7 @@ hr {
   height: 1px;
   margin: 0;
   border: none;
-  background: var(--xz-color-line-100);
+  background: var(--xz-color-line-50);
 }
 
 img,

package/dist/utilities.css

@@ -1 +1 @@
-.lo-container{display:grid;grid-template-rows:auto;grid-template-columns:12px minmax(0, auto) 12px;width:100%}.lo-container>*{grid-column:2/3}@media(min-width: 640px){.lo-container{grid-template-columns:1fr 600px 1fr}}@media(min-width: 768px){.lo-container{grid-template-columns:1fr 728px 1fr}}@media(min-width: 1024px){.lo-container{grid-template-columns:1fr 984px 1fr}}@media(min-width: 1280px){.lo-container{grid-template-columns:1fr 1240px 1fr}}@media(min-width: 1536px){.lo-container{grid-template-columns:1fr 1496px 1fr}}.lo-desktop-container{width:1064px;margin-right:auto;margin-left:auto}.lo-1-11{display:grid;grid-template-columns:1fr 11fr;min-width:0;min-height:0}.lo-2-10{display:grid;grid-template-columns:2fr 10fr;min-width:0;min-height:0}.lo-3-9{display:grid;grid-template-columns:3fr 9fr;min-width:0;min-height:0}.lo-4-8{display:grid;grid-template-columns:4fr 8fr;min-width:0;min-height:0}.lo-5-7{display:grid;grid-template-columns:5fr 7fr;min-width:0;min-height:0}.lo-7-5{display:grid;grid-template-columns:7fr 5fr;min-width:0;min-height:0}.lo-8-4{display:grid;grid-template-columns:8fr 4fr;min-width:0;min-height:0}.lo-9-3{display:grid;grid-template-columns:9fr 3fr;min-width:0;min-height:0}.lo-10-2{display:grid;grid-template-columns:10fr 2fr;min-width:0;min-height:0}.lo-11-1{display:grid;grid-template-columns:11fr 1fr;min-width:0;min-height:0}.lo-1{display:grid;grid-template-columns:repeat(12, 1fr);min-width:0;min-height:0}.lo-2{display:grid;grid-template-columns:repeat(6, 1fr);min-width:0;min-height:0}.lo-3{display:grid;grid-template-columns:repeat(4, 1fr);min-width:0;min-height:0}.lo-4{display:grid;grid-template-columns:repeat(3, 1fr);min-width:0;min-height:0}.lo-6{display:grid;grid-template-columns:repeat(2, 1fr);min-width:0;min-height:0}.lo-12{display:grid;grid-template-columns:1fr;min-width:0;min-height:0}.lo-fluid-right{display:grid;grid-template-columns:max-content 1fr;min-width:0;min-height:0}.lo-fluid-left{display:grid;grid-template-columns:1fr max-content;min-width:0;min-height:0}.lo-fluid-center{display:grid;grid-template-columns:max-content 1fr max-content;min-width:0;min-height:0}.u-scroll-container{flex-grow:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--xz-color-line-200) rgba(0,0,0,0)}.u-scroll-container::-webkit-scrollbar{width:4px}.u-scroll-container::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.u-scroll-container::-webkit-scrollbar-thumb{border-radius:999px;background:var(--xz-color-line-200)}.u-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--xz-color-line-300)}[data-theme=dark] .u-theme-image{filter:opacity(0.5);mix-blend-mode:color-burn}.u-all-tap-highlight-transparent *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.u-1by1{aspect-ratio:1/1}.u-3by2{aspect-ratio:3/2}.u-4by3{aspect-ratio:4/3}.u-2by1{aspect-ratio:2/1}.u-16by9{aspect-ratio:16/9}.u-16by10{aspect-ratio:16/10}button.unstyled{all:unset;box-sizing:border-box;cursor:pointer}
+.lo-container{display:grid;grid-template-rows:auto;grid-template-columns:12px minmax(0, auto) 12px;width:100%}.lo-container>*{grid-column:2/3}@media(min-width: 640px){.lo-container{grid-template-columns:1fr 600px 1fr}}@media(min-width: 768px){.lo-container{grid-template-columns:1fr 728px 1fr}}@media(min-width: 1024px){.lo-container{grid-template-columns:1fr 984px 1fr}}@media(min-width: 1280px){.lo-container{grid-template-columns:1fr 1240px 1fr}}@media(min-width: 1536px){.lo-container{grid-template-columns:1fr 1496px 1fr}}.lo-desktop-container{width:1064px;margin-right:auto;margin-left:auto}.lo-1-11{display:grid;grid-template-columns:1fr 11fr;min-width:0;min-height:0}.lo-2-10{display:grid;grid-template-columns:2fr 10fr;min-width:0;min-height:0}.lo-3-9{display:grid;grid-template-columns:3fr 9fr;min-width:0;min-height:0}.lo-4-8{display:grid;grid-template-columns:4fr 8fr;min-width:0;min-height:0}.lo-5-7{display:grid;grid-template-columns:5fr 7fr;min-width:0;min-height:0}.lo-7-5{display:grid;grid-template-columns:7fr 5fr;min-width:0;min-height:0}.lo-8-4{display:grid;grid-template-columns:8fr 4fr;min-width:0;min-height:0}.lo-9-3{display:grid;grid-template-columns:9fr 3fr;min-width:0;min-height:0}.lo-10-2{display:grid;grid-template-columns:10fr 2fr;min-width:0;min-height:0}.lo-11-1{display:grid;grid-template-columns:11fr 1fr;min-width:0;min-height:0}.lo-1{display:grid;grid-template-columns:repeat(12, 1fr);min-width:0;min-height:0}.lo-2{display:grid;grid-template-columns:repeat(6, 1fr);min-width:0;min-height:0}.lo-3{display:grid;grid-template-columns:repeat(4, 1fr);min-width:0;min-height:0}.lo-4{display:grid;grid-template-columns:repeat(3, 1fr);min-width:0;min-height:0}.lo-6{display:grid;grid-template-columns:repeat(2, 1fr);min-width:0;min-height:0}.lo-12{display:grid;grid-template-columns:1fr;min-width:0;min-height:0}.lo-fluid-right{display:grid;grid-template-columns:max-content 1fr;min-width:0;min-height:0}.lo-fluid-left{display:grid;grid-template-columns:1fr max-content;min-width:0;min-height:0}.lo-fluid-center{display:grid;grid-template-columns:max-content 1fr max-content;min-width:0;min-height:0}.u-scroll-container{flex-grow:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--xz-color-line-100) rgba(0,0,0,0)}.u-scroll-container::-webkit-scrollbar{width:4px}.u-scroll-container::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.u-scroll-container::-webkit-scrollbar-thumb{border-radius:999px;background:var(--xz-color-line-100)}.u-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--xz-color-line-200)}[data-theme=dark] .u-theme-image{filter:opacity(0.5);mix-blend-mode:color-burn}.u-all-tap-highlight-transparent *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.u-1by1{aspect-ratio:1/1}.u-3by2{aspect-ratio:3/2}.u-4by3{aspect-ratio:4/3}.u-2by1{aspect-ratio:2/1}.u-16by9{aspect-ratio:16/9}.u-16by10{aspect-ratio:16/10}button.unstyled{all:unset;box-sizing:border-box;cursor:pointer}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fastwork/xosmoz-css",
-	"version": "0.0.34",
+	"version": "0.0.35",
 	"description": "CSS utility classes and component styles for Xosmoz design system",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
@@ -36,11 +36,15 @@
 		"clean": "rm -rf dist"
 	},
 	"dependencies": {
-		"@fastwork/xosmoz-theme": "^0.48.0"
+		"@fastwork/xosmoz-theme": "^0.71.0"
 	},
 	"devDependencies": {
 		"@types/node": "^20.11.0",
+		"postcss-scss": "^4.0.9",
 		"sass": "^1.94.0",
+		"stylelint": "^16.26.1",
+		"stylelint-config-standard-scss": "^17.0.0",
+		"stylelint-order": "^8.1.1",
 		"tsup": "^8.0.0",
 		"typescript": "^5.4.0"
 	},