@kanso-labs/kanso-ui 0.43.7 → 0.44.1

package/dist/styles.css

@@ -13,6 +13,18 @@
     grid-area: 1 / 1;
   }
 
+  .x1kxrqrs {
+    grid-area: leading;
+  }
+
+  .x12gd1sl {
+    grid-area: text;
+  }
+
+  .x1txd71x {
+    grid-area: trailing;
+  }
+
   .x1jz8bvi {
     inset: -1px;
   }
@@ -71,6 +83,10 @@
     border-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xu361ij) * 100%),var(--x1dzgr7y));
   }
 
+  .x1pojj9x {
+    border-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xu361ij) * 100%),var(--x1xbp8h6));
+  }
+
   .x1r7ld26 {
     border-color: currentColor;
   }
@@ -103,6 +119,10 @@
     border-color: var(--x7dbk6n);
   }
 
+  .xpdgbdc {
+    border-color: var(--x7wk2f4);
+  }
+
   .xm76mbg {
     border-color: var(--xiob6mg);
   }
@@ -131,6 +151,10 @@
     border-radius: inherit;
   }
 
+  .x5a2xki {
+    border-radius: max(0px,calc(var(--xslt97v) - 1px));
+  }
+
   .x39tcx0 {
     border-radius: min(var(--x3hih16),calc(var(--x1eqeuls) / 2));
   }
@@ -267,6 +291,15 @@
     grid-row: auto;
   }
 
+  .xc3o5yk {
+    grid-template-areas: "leading . trailing"
+                         "text text text";
+  }
+
+  .x97ohe {
+    grid-template-areas: "leading text trailing";
+  }
+
   .x10no89f {
     inset-block: 0;
   }
@@ -459,8 +492,12 @@
     padding-inline: calc(var(--x3km7fe) - 1px);
   }
 
-  .x1mhv0kc {
-    padding-inline: calc(var(--x3km7fe) - var(--xbmbo34));
+  .xgnwbya {
+    padding-inline: calc(var(--x3km7fe) - var(--xbmbo34) - 1px);
+  }
+
+  .x1cmmxig {
+    padding-inline: calc(var(--x3km7fe) - var(--xbmbo34) - 2px);
   }
 
   .x140yoea {
@@ -569,6 +606,10 @@
     -webkit-line-clamp: 2;
   }
 
+  .x10ukxgv {
+    align-content: start;
+  }
+
   .x1pha0wt {
     align-items: baseline;
   }
@@ -593,10 +634,18 @@
     align-items: stretch;
   }
 
+  .xamitd3 {
+    align-self: center;
+  }
+
   .xqcrz7y {
     align-self: flex-start;
   }
 
+  .xnav3zx {
+    align-self: last baseline;
+  }
+
   .xkh2ocl {
     align-self: stretch;
   }
@@ -641,6 +690,10 @@
     animation-duration: var(--xaryv6b);
   }
 
+  .x10e4vud {
+    animation-fill-mode: forwards;
+  }
+
   .x77zgwx {
     animation-iteration-count: infinite, infinite;
   }
@@ -677,6 +730,10 @@
     animation-name: x1fy8ia8-B;
   }
 
+  .xxp0q0x {
+    animation-name: x1jn504y-B;
+  }
+
   .x97zbip {
     animation-name: x1k48ry3-B;
   }
@@ -733,6 +790,10 @@
     animation-timing-function: var(--x77wm8g);
   }
 
+  .xi22y15 {
+    animation-timing-function: var(--xm20gsr);
+  }
+
   .x16dv9tl {
     animation-timing-function: var(--xtxwhk6);
   }
@@ -913,6 +974,10 @@
     background-color: color-mix(in srgb,var(--xkltk4j) calc(var(--xhaltwz) * 100%),var(--x189y34t));
   }
 
+  .x1ojo7np {
+    background-color: color-mix(in srgb,var(--xn0syi6) 4%,var(--x1dzgr7y));
+  }
+
   .xwqhyid {
     background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x124j18r) * 100%),transparent);
   }
@@ -961,6 +1026,14 @@
     background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xu361ij) * 100%),transparent);
   }
 
+  .xbw18ef {
+    background-color: color-mix(in srgb,var(--xqsbqtq) calc(var(--x8z5t6h) * 100%),var(--x7wk2f4));
+  }
+
+  .xld5jmv {
+    background-color: color-mix(in srgb,var(--xqsbqtq) calc(var(--xhaltwz) * 100%),var(--x7wk2f4));
+  }
+
   .xtwfq29 {
     background-color: currentColor;
   }
@@ -1057,6 +1130,10 @@
     background-color: var(--x7dbk6n);
   }
 
+  .x1skwi6t {
+    background-color: var(--x7wk2f4);
+  }
+
   .x1vnz5z6 {
     background-color: var(--xi1exwt);
   }
@@ -1269,8 +1346,8 @@
     box-shadow: inset -1px 0 0 0 var(--x7dbk6n);
   }
 
-  .x1pqbjc1 {
-    box-shadow: inset 0 -1px 0 0 color-mix(in srgb,var(--xn0syi6) calc(var(--x1cq03z9) * 100%),transparent);
+  .xgloidm {
+    box-shadow: inset 0 -1px 0 0 color-mix(in srgb,var(--xn0syi6) calc(var(--xu361ij) * 100%),transparent);
   }
 
   .x1d6xoej {
@@ -1285,6 +1362,14 @@
     box-shadow: inset 0 -1px 0 0 var(--x7dbk6n);
   }
 
+  .x1ncb8nd {
+    box-shadow: inset 0 -1px 0 0 var(--xn0syi6);
+  }
+
+  .xryshfu {
+    box-shadow: inset 0 -1px 0 0 var(--xqsbqtq);
+  }
+
   .x1ixd52e {
     box-shadow: inset 0 -1px 0 var(--x7dbk6n);
   }
@@ -1333,6 +1418,14 @@
     caret-color: #0000;
   }
 
+  .x11twi6n {
+    caret-color: var(--x12p1wyw);
+  }
+
+  .x1jie568 {
+    caret-color: var(--x1cjupv7);
+  }
+
   .x1hyvwdk {
     clip-path: inset(50%);
   }
@@ -1345,6 +1438,10 @@
     clip-path: var(--x-clipPath);
   }
 
+  .xx09jb7 {
+    color: color-mix(in srgb,var(--x13o0mym) calc(var(--xu361ij) * 100%),transparent);
+  }
+
   .x1ldq0ta {
     color: color-mix(in srgb,var(--xn0syi6) calc(var(--x1cq03z9) * 100%),var(--x1dzgr7y));
   }
@@ -1373,6 +1470,10 @@
     color: var(--x12p1wyw);
   }
 
+  .x5yhsjm {
+    color: var(--x13o0mym);
+  }
+
   .xzakmg9 {
     color: var(--x189y34t);
   }
@@ -1501,6 +1602,10 @@
     cursor: grabbing;
   }
 
+  .xmper1u {
+    cursor: inherit;
+  }
+
   .x1h6gzvc {
     cursor: not-allowed;
   }
@@ -1517,6 +1622,10 @@
     cursor: text;
   }
 
+  .xzt5al7 {
+    direction: ltr;
+  }
+
   .x104kibb {
     display: -webkit-box;
   }
@@ -1685,6 +1794,10 @@
     font-size: .875em;
   }
 
+  .x1j61zf2 {
+    font-size: 16px;
+  }
+
   .xosj86m {
     font-size: 18px;
   }
@@ -1889,6 +2002,10 @@
     grid-column-start: 2;
   }
 
+  .xx9t13c {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
   .x1rkzygb {
     grid-template-columns: auto minmax(0, 1fr);
   }
@@ -1913,6 +2030,10 @@
     grid-template-rows: 1fr;
   }
 
+  .x1xxtoay {
+    grid-template-rows: var(--x-gridTemplateRows);
+  }
+
   .xkjl1po {
     hyphens: auto;
   }
@@ -2193,6 +2314,10 @@
     margin-inline-start: -12px;
   }
 
+  .x1lziwak {
+    margin-inline-start: 0;
+  }
+
   .xvc5jky {
     margin-inline-start: auto;
   }
@@ -2209,6 +2334,10 @@
     margin-inline-start: var(--xbmbo34);
   }
 
+  .xq0p5jb {
+    margin-inline-start: var(--xod9tvo);
+  }
+
   .xwjwp01 {
     -webkit-mask-image: var(--x-maskImage);
     mask-image: var(--x-maskImage);
@@ -2314,8 +2443,12 @@
     padding-inline-end: 64px;
   }
 
-  .x3o381d {
-    padding-inline-end: calc(var(--x6borv4) + 24px + var(--x3km7fe) - var(--xbmbo34));
+  .xflzzte {
+    padding-inline-end: calc(var(--x6borv4) + 24px + var(--x3km7fe) - var(--xbmbo34) - 1px);
+  }
+
+  .x1gwc4xo {
+    padding-inline-end: calc(var(--x6borv4) + 24px + var(--x3km7fe) - var(--xbmbo34) - 2px);
   }
 
   .x120eax6 {
@@ -2334,6 +2467,10 @@
     padding-inline-end: var(--x6borv4);
   }
 
+  .xq7elwu {
+    padding-inline-end: var(--xod9tvo);
+  }
+
   .x1oiqv2n {
     padding-inline-start: 48px;
   }
@@ -2350,8 +2487,12 @@
     padding-inline-start: calc(var(--x3km7fe) + var(--x6borv4));
   }
 
-  .x167ah0f {
-    padding-inline-start: calc(var(--x6borv4) + 24px + var(--x3km7fe) - var(--xbmbo34));
+  .x1e4tv75 {
+    padding-inline-start: calc(var(--x6borv4) + 24px + var(--x3km7fe) - var(--xbmbo34) - 1px);
+  }
+
+  .x2e0ysr {
+    padding-inline-start: calc(var(--x6borv4) + 24px + var(--x3km7fe) - var(--xbmbo34) - 2px);
   }
 
   .xnvo3vl {
@@ -2406,6 +2547,10 @@
     resize: none;
   }
 
+  .xtfsegk {
+    row-gap: 8px;
+  }
+
   .xkcv6ua {
     scroll-behavior: smooth;
   }
@@ -2454,6 +2599,11 @@
     table-layout: fixed;
   }
 
+  .x16pb8o4 {
+    text-align: -webkit-match-parent;
+    text-align: match-parent;
+  }
+
   .x2b8uid {
     text-align: center;
   }
@@ -2646,10 +2796,6 @@
     transition-property: background-color, color;
   }
 
-  .x8u3r54 {
-    transition-property: background-color, min-block-size;
-  }
-
   .x15406qy {
     transition-property: background-color;
   }
@@ -2658,8 +2804,8 @@
     transition-property: block-size;
   }
 
-  .x1aqzbqr {
-    transition-property: border-color, border-width;
+  .x1bj6kjc {
+    transition-property: border-color, border-width, padding-inline-start, padding-inline-end;
   }
 
   .xshfolx {
@@ -2682,10 +2828,6 @@
     transition-property: color;
   }
 
-  .x1nxaspg {
-    transition-property: font-size, letter-spacing, line-height;
-  }
-
   .x1qn9uv2 {
     transition-property: grid-template-rows;
   }
@@ -2698,6 +2840,10 @@
     transition-property: inline-size, margin-inline-end;
   }
 
+  .x17vvy08 {
+    transition-property: inline-size, margin-inline-start, margin-inline-end, opacity;
+  }
+
   .x1pha8k4 {
     transition-property: inline-size, min-inline-size;
   }
@@ -2836,6 +2982,10 @@
     z-index: 900;
   }
 
+  .x13aw6e3:focus-within {
+    background-color: var(--x13o0mym);
+  }
+
   .x1lxxh4i:focus-within {
     box-shadow: inset 0 -2px 0 0 var(--x12p1wyw);
   }
@@ -2924,6 +3074,10 @@
     box-shadow: inset 1px 0 0 0 var(--x7dbk6n);
   }
 
+  .xrgu2gv:dir(rtl) {
+    text-align: right;
+  }
+
   .x1pw7kks:dir(rtl) {
     transform: none;
   }
@@ -2997,10 +3151,6 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .x114jyov.x114jyov {
-      animation-duration: .5s;
-    }
-
     .x1u6grsq.x1u6grsq {
       animation-duration: 0s;
     }
@@ -3024,6 +3174,10 @@
     .x1224tbv.x1224tbv {
       animation-duration: 5.833s;
     }
+
+    .x1aquc0h.x1aquc0h {
+      animation-name: none;
+    }
   }
 
   @media (forced-colors: active) {
@@ -3087,6 +3241,14 @@
       border-inline-start-width: 1px;
     }
 
+    .x1q5838n.x1q5838n {
+      color: buttonface;
+    }
+
+    .x1a46atw.x1a46atw {
+      color: canvas;
+    }
+
     .xs5hli.xs5hli {
       color: canvastext;
     }
@@ -3210,6 +3372,10 @@
     }
   }
 
+  .x5u4zhu:active:has(button:active) {
+    background-color: var(--x1xbp8h6);
+  }
+
   @media (forced-colors: active) {
     .xi9ts3s.xi9ts3s:focus-within {
       outline-style: solid;
@@ -3306,6 +3472,10 @@
     .x14zlms8.x14zlms8:active {
       box-shadow: var(--xt04dnm);
     }
+
+    .x9qvdww.x9qvdww:has(button:hover):hover, .xuwmtp3.xuwmtp3:active:has(button:active) {
+      background-color: var(--x1xbp8h6);
+    }
   }
 }
 
@@ -3462,10 +3632,6 @@
     height: 60%;
   }
 
-  .x1peatla {
-    height: 64px;
-  }
-
   .xols6we {
     height: 6px;
   }
@@ -3624,6 +3790,10 @@
     margin-top: calc((var(--xol8812) - var(--x67cwyw)) / 2);
   }
 
+  .x1vhfslr {
+    margin-top: var(--x-marginBlockStart);
+  }
+
   .x1yhnu8z {
     margin-top: var(--x196ey9q);
   }
@@ -3728,6 +3898,10 @@
     min-height: 160px;
   }
 
+  .x1xaadd7 {
+    min-height: 1em;
+  }
+
   .x1ficeh5 {
     min-height: 240px;
   }
@@ -3872,6 +4046,10 @@
     overflow-x: auto;
   }
 
+  .x101abm8 {
+    overflow-x: clip;
+  }
+
   .x1odjw0f {
     overflow-y: auto;
   }
@@ -3880,6 +4058,10 @@
     overflow-y: hidden;
   }
 
+  .xryxfnj {
+    overflow-y: visible;
+  }
+
   .x7p5m3t {
     overscroll-behavior-x: contain;
   }
@@ -4317,6 +4499,10 @@
   }
 
   @media (width >= 600px) {
+    .xap7i12.xap7i12 {
+      margin-block: 12px;
+    }
+
     .x1nouyz5.x1nouyz5 {
       padding-block: 0;
     }
@@ -4430,12 +4616,6 @@
     }
   }
 
-  @media (width >= 840px) {
-    .x9a4l8x.x9a4l8x {
-      display: block;
-    }
-  }
-
   @media (width < 840px) {
     .x1yrkhk.x1yrkhk {
       display: grid;
@@ -4448,11 +4628,31 @@
     }
   }
 
+  @container (width >= 840px) {
+    .xsfcrho.xsfcrho {
+      display: block;
+    }
+  }
+
   @media (width >= 600px) {
     .x1a6ly76.x1a6ly76 {
       flex-basis: auto;
     }
+  }
+
+  @container (width >= 840px) {
+    .x1kk7mra.x1kk7mra {
+      flex-basis: 360px;
+    }
+  }
+
+  @container (width >= 1600px) {
+    .x7v35i.x7v35i {
+      flex-basis: 412px;
+    }
+  }
 
+  @media (width >= 600px) {
     .xapwh9g.xapwh9g {
       flex-direction: row;
     }
@@ -4462,6 +4662,16 @@
     }
   }
 
+  @container (width >= 840px) {
+    .x11pqzan.x11pqzan {
+      flex-grow: 0;
+    }
+
+    .x1fllpej.x1fllpej {
+      flex-shrink: 0;
+    }
+  }
+
   @media (width < 600px) {
     .xl849ld.xl849ld {
       font-family: var(--xr826oj);
@@ -4476,6 +4686,10 @@
     }
   }
 
+  .x1vlsijy:after {
+    grid-area: text;
+  }
+
   @media (width < 840px) {
     .x17udjhq.x17udjhq {
       grid-auto-rows: 336px;
@@ -4492,12 +4706,6 @@
     }
   }
 
-  @media (width >= 1600px) {
-    .xxxc7o5.xxxc7o5 {
-      grid-template-columns: 412px minmax(0, 1fr);
-    }
-  }
-
   @media (width < 840px) {
     .x1kji8p3.x1kji8p3 {
       grid-template-columns: minmax(0, 1fr);
@@ -4566,6 +4774,10 @@
     .x15m4ytg.x15m4ytg {
       position: relative;
     }
+
+    .xtke4eg.xtke4eg {
+      position: static;
+    }
   }
 
   @media (width < 600px) {
@@ -4724,7 +4936,15 @@
     .x6iovhr.x6iovhr {
       max-width: none;
     }
+  }
+
+  @media (width >= 600px) {
+    .xtyuij1.xtyuij1 {
+      min-height: 0;
+    }
+  }
 
+  @media (width < 600px) {
     .x1iob9gu.x1iob9gu {
       min-height: 0;
     }
@@ -4814,6 +5034,10 @@
 }
 
 @layer kanso.priority9 {
+  .x1mna9mr:after {
+    align-self: last baseline;
+  }
+
   .xx38sju:after {
     box-sizing: border-box;
   }
@@ -4864,6 +5088,20 @@
 }
 
 @layer kanso.priority10 {
+  .x1gmr53x:after {
+    height: 0;
+  }
+
+  .x1v6yq59:after {
+    margin-bottom: 24px;
+  }
+
+  .x1fh8phi:after {
+    margin-bottom: 28px;
+  }
+}
+
+@layer kanso.priority11 {
   @media (width >= 600px) {
     .x1ktxc2h.x1ktxc2h:after {
       content: "";
@@ -4906,6 +5144,11 @@
   inherits: false
 }
 
+@property --x-gridTemplateRows {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-inlineSize {
   syntax: "*";
   inherits: false
@@ -4931,6 +5174,11 @@
   inherits: false
 }
 
+@property --x-marginBlockStart {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-maskImage {
   syntax: "*";
   inherits: false
@@ -5017,6 +5265,16 @@
   }
 }
 
+@keyframes x1jn504y-B {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes x18re5ia-B {
   from {
     opacity: 0;