@warp-ds/elements 1.0.0-alpha.26 → 1.0.0-alpha.27

package/dist/index.js

@@ -637,26 +637,26 @@ const T = {
   titleType: "h4"
 }, j = {
   // Buttontypes
-  buttonSecondary: "py-10 px-14 border-2 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
+  buttonSecondary: "py-10 px-14 border-2 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
   // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
-  buttonPrimary: "py-12 px-16 border-0 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover! active:i-bg-$color-button-primary-background-active",
+  buttonPrimary: "py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover! active:i-bg-$color-button-primary-background-active",
   // .button--primary, .button--cta
-  buttonFlat: "py-12 px-16 border-0! font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-quiet-background! i-text-$color-button-quiet-text! hover:i-bg-$color-button-quiet-background-hover! active:i-bg-$color-button-quiet-background-active!",
+  buttonFlat: "py-12 px-16 border-0! font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-quiet-background! i-text-$color-button-quiet-text! hover:i-bg-$color-button-quiet-background-hover! active:i-bg-$color-button-quiet-background-active!",
   // .button--quiet, .button--flat
-  buttonDestructive: "py-12 px-16 border-0 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover! active:i-bg-$color-button-negative-background-active!",
+  buttonDestructive: "py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover! active:i-bg-$color-button-negative-background-active!",
   // .button--destructive
-  buttonDestructiveFlat: "py-12 px-16 border-0 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-quiet-background! i-text-$color-button-negative-quiet-text! hover:i-bg-$color-button-negative-quiet-background-hover! active:i-bg-$color-button-negative-quiet-background-active!",
+  buttonDestructiveFlat: "py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-quiet-background! i-text-$color-button-negative-quiet-text! hover:i-bg-$color-button-negative-quiet-background-hover! active:i-bg-$color-button-negative-quiet-background-active!",
   // .button--destructive-flat
-  buttonUtility: "px-[15px] py-[11px] font-bold leading-24 max-w-max focusable justify-center transition-colors ease-in-out border rounded-4 i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover! active:i-border-$color-button-utility-border-active!",
+  buttonUtility: "px-[15px] py-[11px] font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out border rounded-4 i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover! active:i-border-$color-button-utility-border-active!",
   // .button--utility
-  buttonUtilityFlat: "py-12 px-16 bg-transparent border-0 font-bold leading-24 max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover rounded-4",
+  buttonUtilityFlat: "py-12 px-16 bg-transparent border-0 font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover rounded-4",
   // .button--utility-flat
-  buttonPill: "font-bold leading-24 max-w-max focusable justify-center transition-colors ease-in-out rounded-full! min-h-[44px] min-w-[44px] border-0! p-4 i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover acive:i-bg-$color-button-pill-background-active inline-flex items-center justify-center hover:bg-clip-padding",
+  buttonPill: "font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out rounded-full! min-h-[44px] min-w-[44px] border-0! p-4 i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover acive:i-bg-$color-button-pill-background-active inline-flex items-center justify-center hover:bg-clip-padding",
   // .button--pill   missing:  hover:background-color: rgba(var(--f-blue-600-rgb), 0.1) , and:  hover:border-color: hsla(0, 0%, 100%, 0.4);
-  buttonLink: "leading-24 max-w-max focusable ease-in-out inline s-text-link active:underline hover:underline",
+  buttonLink: "leading-[24] max-w-max bg-transparent focusable ease-in-out inline s-text-link active:underline hover:underline",
   //.button--link /* Buttons pretending to be links, (Should rather inherit the actual link setup in the future?)  */
   // Sizestuff
-  buttonSmall: "px-16 py-6 text-xs leading-xs",
+  buttonSmall: "px-16 py-6 text-xs!",
   // .button--small
   buttonSmallOverride: "py-8",
   // .button--small.button--primary, .button--small.button--destructive, .button--small.button--destructive-flat, .button--small.button--order, .button--small.button--quiet
@@ -669,10 +669,10 @@ const T = {
   buttonSmallButtonLink: "p-0",
   // .button--small.button--link
   // Disabled
-  buttonIsDisabled: "py-10 px-14 font-bold leading-24 max-w-max justify-center transition-colors ease-in-out i-bg-$color-button-disabled-background! i-text-$color-button-disabled-text cursor-default pointer-events-none",
+  buttonIsDisabled: "py-10 px-14 font-bold leading-[24] max-w-max justify-center transition-colors ease-in-out i-bg-$color-button-disabled-background! i-text-$color-button-disabled-text cursor-default pointer-events-none",
   // .button:disabled, .button--is-disabled
   // Progress indicator
-  buttonInProgress: "py-10 px-14 border-0 font-bold rounded-8 leading-24 max-w-max focusable justify-center transition-colors ease-in-out animate-inprogress i-text-$color-button-loading-text! pointer-events-none i-bg-$color-button-loading-background!",
+  buttonInProgress: "py-10 px-14 border-0 font-bold rounded-8 leading-[24] max-w-max focusable justify-center transition-colors ease-in-out animate-inprogress i-text-$color-button-loading-text! pointer-events-none i-bg-$color-button-loading-background!",
   // .button--in-progress, a.button--in-progress:visited
   linkAsButton: "inline-block hover:no-underline",
   a11y: "sr-only"
@@ -717,13 +717,13 @@ const T = {
   helpText: "text-xs mt-4 block i-text-$color-helptext-text",
   helpTextValid: "i-text-$color-helptext-text-positive",
   helpTextInvalid: "i-text-$color-helptext-text-negative"
-}, ke = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] ", et = {
-  wrapper: ke + "right-0",
+}, ke = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent", et = {
+  wrapper: `${ke} right-0`,
   wrapperWithLabel: "w-max pr-12",
   wrapperWithIcon: "w-40",
   label: `${G.label} pb-0! text-xs!`
 }, tt = {
-  wrapper: ke + "left-0",
+  wrapper: `${ke} left-0`,
   wrapperWithLabel: "w-max pl-12",
   wrapperWithIcon: "w-40",
   label: `${G.label} pb-0! text-xs!`
@@ -936,8 +936,9 @@ w(nr, "styles", q`
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -1275,6 +1276,7 @@ w(nr, "styles", q`
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -1302,6 +1304,7 @@ w(nr, "styles", q`
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -1480,7 +1483,7 @@ w(nr, "styles", q`
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -1746,8 +1749,9 @@ w(Co, "shadowRootOptions", { ...k.shadowRootOptions, delegatesFocus: !0 }), w(Co
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -2085,6 +2089,7 @@ w(Co, "shadowRootOptions", { ...k.shadowRootOptions, delegatesFocus: !0 }), w(Co
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -2112,6 +2117,7 @@ w(Co, "shadowRootOptions", { ...k.shadowRootOptions, delegatesFocus: !0 }), w(Co
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -2289,7 +2295,7 @@ w(Co, "shadowRootOptions", { ...k.shadowRootOptions, delegatesFocus: !0 }), w(Co
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -2441,8 +2447,9 @@ w(br, "styles", [
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -2780,6 +2787,7 @@ w(br, "styles", [
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -2807,6 +2815,7 @@ w(br, "styles", [
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -2984,7 +2993,7 @@ w(br, "styles", [
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -3229,9 +3238,9 @@ Do = new WeakSet(), ze = function() {
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.text{color:var(--w-color-text);}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -3569,6 +3578,7 @@ Do = new WeakSet(), ze = function() {
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -3596,6 +3606,7 @@ Do = new WeakSet(), ze = function() {
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -3773,7 +3784,7 @@ Do = new WeakSet(), ze = function() {
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -3897,8 +3908,9 @@ w(ur, "styles", q`
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -4236,6 +4248,7 @@ w(ur, "styles", q`
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -4263,6 +4276,7 @@ w(ur, "styles", q`
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -4440,7 +4454,7 @@ w(ur, "styles", q`
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -4573,8 +4587,9 @@ w(vr, "styles", q`
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -4912,6 +4927,7 @@ w(vr, "styles", q`
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -4939,6 +4955,7 @@ w(vr, "styles", q`
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -5116,7 +5133,7 @@ w(vr, "styles", q`
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -5420,9 +5437,9 @@ w(pr, "styles", [
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.text{color:var(--w-color-text);}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -5760,6 +5777,7 @@ w(pr, "styles", [
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -5787,6 +5805,7 @@ w(pr, "styles", [
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -5964,7 +5983,7 @@ w(pr, "styles", [
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -6272,9 +6291,9 @@ w(hr, "styles", [
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.text{color:var(--w-color-text);}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -6612,6 +6631,7 @@ w(hr, "styles", [
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -6639,6 +6659,7 @@ w(hr, "styles", [
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -6816,7 +6837,7 @@ w(hr, "styles", [
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -7000,8 +7021,9 @@ w(wr, "properties", {
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -7339,6 +7361,7 @@ w(wr, "properties", {
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -7366,6 +7389,7 @@ w(wr, "properties", {
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -7544,7 +7568,7 @@ w(wr, "properties", {
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -8145,8 +8169,9 @@ w(fr, "properties", {
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -8484,6 +8509,7 @@ w(fr, "properties", {
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -8511,6 +8537,7 @@ w(fr, "properties", {
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -8688,7 +8715,7 @@ w(fr, "properties", {
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -8913,9 +8940,9 @@ w(kr, "styles", [
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.text{color:var(--w-color-text);}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -9253,6 +9280,7 @@ w(kr, "styles", [
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -9280,6 +9308,7 @@ w(kr, "styles", [
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -9457,7 +9486,7 @@ w(kr, "styles", [
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -9650,8 +9679,9 @@ w($r, "styles", [
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -9989,6 +10019,7 @@ w($r, "styles", [
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -10016,6 +10047,7 @@ w($r, "styles", [
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -10193,7 +10225,7 @@ w($r, "styles", [
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -10384,8 +10416,9 @@ w(yr, "styles", q`
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -10723,6 +10756,7 @@ w(yr, "styles", q`
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -10750,6 +10784,7 @@ w(yr, "styles", q`
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -10927,7 +10962,7 @@ w(yr, "styles", q`
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -11065,8 +11100,9 @@ w(zr, "properties", {
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -11404,6 +11440,7 @@ w(zr, "properties", {
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -11431,6 +11468,7 @@ w(zr, "properties", {
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -11608,7 +11646,7 @@ w(zr, "properties", {
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}
@@ -11724,8 +11762,9 @@ w(_r, "properties", {
 .caret-current{caret-color:currentColor;}
 .before\\:opacity-25::before,
 .opacity-25{opacity:25%;}
-.flex{display:flex;}
+.before\\:flex\\!::before,
 .flex\\!{display:flex !important;}
+.flex{display:flex;}
 .inline-flex{display:inline-flex;}
 .inline-flex\\!{display:inline-flex !important;}
 .grid{display:grid;}
@@ -12063,6 +12102,7 @@ w(_r, "properties", {
 .focus\\:outline-none:focus,
 .outline-none{outline:2px solid transparent;outline-offset:2px;}
 .items-end{align-items:flex-end;}
+.before\\:items-center::before,
 .items-center{align-items:center;}
 .self-center{align-self:center;}
 .inset-0{inset:0rem;}
@@ -12090,6 +12130,7 @@ w(_r, "properties", {
 .top-20{top:2rem;}
 .top-4{top:0.4rem;}
 .justify-end{justify-content:flex-end;}
+.before\\:justify-center::before,
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .justify-items-center{justify-items:center;}
@@ -12267,7 +12308,7 @@ w(_r, "properties", {
 .text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs);}
 .text-xs\\!{font-size:var(--w-font-size-xs) !important;line-height:var(--w-line-height-xs) !important;}
 .leading-m{line-height:var(--w-line-height-m);}
-.leading-xs{line-height:var(--w-line-height-xs);}
+.leading-\\[24\\]{line-height:2.4rem;}
 @media (min-width: 480px){
 .sm\\:border-b-0{border-bottom-width:0;}
 .sm\\:rounded-8{border-radius:8px;}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "1.0.0-alpha.26",
+  "version": "1.0.0-alpha.27",
   "description": "Custom elements for Warp",
   "exports": {
     ".": "./dist/index.js",
@@ -43,8 +43,6 @@
     "@eik/cli": "^2.0.22",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@warp-ds/uno": "^1.0.0-alpha.45",
-    "@warp-ds/component-classes": "1.0.0-alpha.110",
     "autoprefixer": "10.4.14",
     "cors": "2.8.5",
     "cz-conventional-changelog": "3.3.0",
@@ -74,6 +72,8 @@
     "@fabric-ds/icons": "0.6.7",
     "@open-wc/testing": "3.2.0",
     "@warp-ds/core": "1.0.0",
+    "@warp-ds/uno": "^1.0.0-alpha.49",
+    "@warp-ds/component-classes": "^1.0.0-alpha.116",
     "glob": "8.1.0",
     "html-format": "1.1.2",
     "lit": "2.7.5"