@kanso-labs/kanso-ui 0.44.0 → 0.45.0

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;
   }
@@ -199,6 +211,10 @@
     border-style: dashed;
   }
 
+  .xng3xce {
+    border-style: none;
+  }
+
   .x1y0btm7 {
     border-style: solid;
   }
@@ -231,10 +247,6 @@
     gap: 24px;
   }
 
-  .x1jnr06f {
-    gap: 4px;
-  }
-
   .x1r8zjiw {
     gap: calc(48px - var(--x1ww3f7m));
   }
@@ -279,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;
   }
@@ -395,6 +416,10 @@
     padding-block: calc((40px - var(--xol8812)) / 2);
   }
 
+  .xs2ltda {
+    padding-block: max(0px,calc((var(--x1ww3f7m) - var(--xkj6wu1)) / 2));
+  }
+
   .xny1cbh {
     padding-block: var(--x196ey9q);
   }
@@ -471,8 +496,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 {
@@ -581,6 +610,10 @@
     -webkit-line-clamp: 2;
   }
 
+  .x10ukxgv {
+    align-content: start;
+  }
+
   .x1pha0wt {
     align-items: baseline;
   }
@@ -613,6 +646,10 @@
     align-self: flex-start;
   }
 
+  .xnav3zx {
+    align-self: last baseline;
+  }
+
   .xkh2ocl {
     align-self: stretch;
   }
@@ -669,18 +706,10 @@
     animation-iteration-count: infinite;
   }
 
-  .x1a5igra {
-    animation-name: none;
-  }
-
   .x1dwmuk9 {
     animation-name: x15b941j-B;
   }
 
-  .xu2fq7p {
-    animation-name: x17cjob-B;
-  }
-
   .xz09zy6 {
     animation-name: x17j028-B, x26nhu8-B;
   }
@@ -945,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);
   }
@@ -1265,6 +1298,10 @@
     border-start-end-radius: var(--x1s0h5j3);
   }
 
+  .x1u81hx7 {
+    border-start-end-radius: var(--x1w5u0jm);
+  }
+
   .x1pixlao {
     border-start-end-radius: var(--x3hih16);
   }
@@ -1293,6 +1330,10 @@
     border-start-start-radius: var(--x1s0h5j3);
   }
 
+  .x1uop38w {
+    border-start-start-radius: var(--x1w5u0jm);
+  }
+
   .xyooppx {
     border-start-start-radius: var(--x3hih16);
   }
@@ -1313,8 +1354,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 {
@@ -1329,6 +1370,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);
   }
@@ -1377,6 +1426,14 @@
     caret-color: #0000;
   }
 
+  .x11twi6n {
+    caret-color: var(--x12p1wyw);
+  }
+
+  .x1jie568 {
+    caret-color: var(--x1cjupv7);
+  }
+
   .x1hyvwdk {
     clip-path: inset(50%);
   }
@@ -1417,6 +1474,10 @@
     color: #0000;
   }
 
+  .x11wi6qo {
+    color: var(--icon-button-standard-color, var(--x28n2pw));
+  }
+
   .x4ii1qj {
     color: var(--x12p1wyw);
   }
@@ -1977,6 +2038,10 @@
     grid-template-rows: 1fr;
   }
 
+  .x1xxtoay {
+    grid-template-rows: var(--x-gridTemplateRows);
+  }
+
   .xkjl1po {
     hyphens: auto;
   }
@@ -2009,6 +2074,10 @@
     inset-inline-end: var(--x-insetInlineEnd);
   }
 
+  .x5pnq3g {
+    inset-inline-start: -2px;
+  }
+
   .x1o0tod {
     inset-inline-start: 0;
   }
@@ -2085,6 +2154,14 @@
     justify-items: center;
   }
 
+  .x1qab1bc {
+    justify-self: end;
+  }
+
+  .x1lqcxt8 {
+    justify-self: start;
+  }
+
   .x1qn8t5l {
     letter-spacing: var(--x10nh56i);
   }
@@ -2241,6 +2318,10 @@
     margin-inline-end: calc(var(--x6borv4) - var(--x3km7fe));
   }
 
+  .x1c9tiao {
+    margin-inline-end: var(--x-marginInlineEnd);
+  }
+
   .xdf1gh2 {
     margin-inline-end: var(--x3km7fe);
   }
@@ -2261,6 +2342,10 @@
     margin-inline-start: 0;
   }
 
+  .xdwrcjd {
+    margin-inline-start: 4px;
+  }
+
   .xvc5jky {
     margin-inline-start: auto;
   }
@@ -2277,6 +2362,10 @@
     margin-inline-start: var(--xbmbo34);
   }
 
+  .xq0p5jb {
+    margin-inline-start: var(--xod9tvo);
+  }
+
   .xwjwp01 {
     -webkit-mask-image: var(--x-maskImage);
     mask-image: var(--x-maskImage);
@@ -2294,6 +2383,10 @@
     opacity: 0;
   }
 
+  .x1hc1fzr {
+    opacity: 1;
+  }
+
   .xcl2av {
     opacity: var(--x124j18r);
   }
@@ -2314,6 +2407,10 @@
     outline-color: currentColor;
   }
 
+  .xat36cu {
+    outline-color: var(--x189y34t);
+  }
+
   .x1ulcdur {
     outline-color: var(--x1balm44);
   }
@@ -2322,6 +2419,10 @@
     outline-color: var(--x1cjupv7);
   }
 
+  .xnzrtil {
+    outline-color: var(--xn0syi6);
+  }
+
   .x2ssjo2 {
     outline-offset: -2px;
   }
@@ -2382,8 +2483,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 {
@@ -2422,8 +2527,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 {
@@ -2615,6 +2724,18 @@
     transform: rotate(90deg);
   }
 
+  .x1a33avv {
+    transform: scale(.5);
+  }
+
+  .x1f85oc2 {
+    transform: scale(0);
+  }
+
+  .x3oybdh {
+    transform: scale(1);
+  }
+
   .xpk2tj9 {
     transform: scaleX(-1);
   }
@@ -2711,10 +2832,6 @@
     transition-property: background-color, border-color, box-shadow, color;
   }
 
-  .x1eaenvl {
-    transition-property: background-color, border-color, color;
-  }
-
   .xts7igz {
     transition-property: background-color, border-color;
   }
@@ -2727,8 +2844,8 @@
     transition-property: background-color, color;
   }
 
-  .x8u3r54 {
-    transition-property: background-color, min-block-size;
+  .xuo13n2 {
+    transition-property: background-color, transform;
   }
 
   .x15406qy {
@@ -2739,8 +2856,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 {
@@ -2763,10 +2880,6 @@
     transition-property: color;
   }
 
-  .x1nxaspg {
-    transition-property: font-size, letter-spacing, line-height;
-  }
-
   .x1qn9uv2 {
     transition-property: grid-template-rows;
   }
@@ -2791,10 +2904,6 @@
     transition-property: inline-size, opacity;
   }
 
-  .x1j4rzew {
-    transition-property: inline-size;
-  }
-
   .x2hifos {
     transition-property: inset-inline-start;
   }
@@ -2807,6 +2916,10 @@
     transition-property: none;
   }
 
+  .x6o7n8i {
+    transition-property: opacity, transform;
+  }
+
   .x19991ni {
     transition-property: opacity;
   }
@@ -2921,6 +3034,14 @@
     z-index: 900;
   }
 
+  .x10oam47:focus-visible {
+    background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x124j18r) * 100%),transparent);
+  }
+
+  .x13aw6e3:focus-within {
+    background-color: var(--x13o0mym);
+  }
+
   .x1lxxh4i:focus-within {
     box-shadow: inset 0 -2px 0 0 var(--x12p1wyw);
   }
@@ -3001,10 +3122,6 @@
     line-height: var(--x1lrg4gv);
   }
 
-  .x1ioi8j8:dir(rtl) {
-    animation-name: x18x3npg-B;
-  }
-
   .x1kbcym6:dir(rtl) {
     box-shadow: inset 1px 0 0 0 var(--x7dbk6n);
   }
@@ -3081,6 +3198,10 @@
     background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xhaltwz) * 100%),var(--xi1exwt));
   }
 
+  .xpk4wdd:active {
+    box-shadow: none;
+  }
+
   .x1g60mc1:active {
     box-shadow: var(--xt04dnm);
   }
@@ -3235,6 +3356,10 @@
     .x1g12otp.x1g12otp {
       forced-color-adjust: none;
     }
+
+    .x1tbh5bv.x1tbh5bv {
+      opacity: 1;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -3311,6 +3436,12 @@
     background-color: var(--x1xbp8h6);
   }
 
+  @media (hover: hover) {
+    .xkl27de.xkl27de:focus-visible {
+      background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x124j18r) * 100%),transparent);
+    }
+  }
+
   @media (forced-colors: active) {
     .xi9ts3s.xi9ts3s:focus-within {
       outline-style: solid;
@@ -3375,6 +3506,10 @@
     .xqmo4o3.xqmo4o3:hover {
       box-shadow: var(--x14ermby);
     }
+
+    .x1jblvwk.x1jblvwk:hover {
+      box-shadow: var(--xt04dnm);
+    }
   }
 
   @media (forced-colors: active) {
@@ -3404,6 +3539,10 @@
       background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xhaltwz) * 100%),var(--xi1exwt));
     }
 
+    .x1xzfgx1.x1xzfgx1:active {
+      box-shadow: none;
+    }
+
     .x14zlms8.x14zlms8:active {
       box-shadow: var(--xt04dnm);
     }
@@ -3725,6 +3864,10 @@
     margin-top: calc((var(--xol8812) - var(--x67cwyw)) / 2);
   }
 
+  .x1vhfslr {
+    margin-top: var(--x-marginBlockStart);
+  }
+
   .x1yhnu8z {
     margin-top: var(--x196ey9q);
   }
@@ -3749,6 +3892,10 @@
     max-height: 100%;
   }
 
+  .xv4ka1z {
+    max-height: calc(100dvh - 72px);
+  }
+
   .xfwfbzp {
     max-height: calc(100dvh * 2 / 3 - var(--x1hfhk6y) - 1px);
   }
@@ -3757,10 +3904,6 @@
     max-height: inherit;
   }
 
-  .x7ab17h {
-    max-height: none;
-  }
-
   .x193iq5w {
     max-width: 100%;
   }
@@ -3985,6 +4128,10 @@
     overflow-y: auto;
   }
 
+  .x1s73dr8 {
+    overflow-y: clip;
+  }
+
   .x10wlt62 {
     overflow-y: hidden;
   }
@@ -4007,6 +4154,10 @@
     padding-bottom: 0;
   }
 
+  .x11wnguw {
+    padding-bottom: calc(var(--x3km7fe) - max(0px,calc((var(--x1ww3f7m) - var(--xkj6wu1)) / 2)));
+  }
+
   .x1u7mh7p {
     padding-bottom: calc(var(--xod9tvo) + env(safe-area-inset-bottom, 0px));
   }
@@ -4031,14 +4182,14 @@
     padding-bottom: var(--xod9tvo);
   }
 
-  .x1uhho1l {
-    padding-left: 0;
-  }
-
   .xbpsoft {
     padding-left: calc(var(--xod9tvo) + env(safe-area-inset-left, 0px));
   }
 
+  .x196z7tn {
+    padding-left: env(safe-area-inset-left, 0px);
+  }
+
   .xq5vm52 {
     padding-right: calc(var(--xod9tvo) + env(safe-area-inset-right, 0px));
   }
@@ -4055,6 +4206,10 @@
     padding-top: 44px;
   }
 
+  .x1837goc {
+    padding-top: calc(var(--x196ey9q) - max(0px,calc((var(--x1ww3f7m) - var(--xkj6wu1)) / 2)));
+  }
+
   .x1mrd0q {
     padding-top: env(safe-area-inset-top, 0px);
   }
@@ -4325,14 +4480,6 @@
     }
   }
 
-  .x1lodr2j:dir(rtl) {
-    padding-left: env(safe-area-inset-left, 0px);
-  }
-
-  .xg4bq00:dir(rtl) {
-    padding-right: 0;
-  }
-
   .x1g31smg:first-child {
     border-top-width: 0;
   }
@@ -4437,7 +4584,15 @@
     .x1nouyz5.x1nouyz5 {
       padding-block: 0;
     }
+  }
 
+  @media (width < 600px) {
+    .xa4amcs.xa4amcs {
+      padding-block: 0;
+    }
+  }
+
+  @media (width >= 600px) {
     .xze1m75.xze1m75 {
       padding-inline: var(--x3km7fe);
     }
@@ -4472,10 +4627,6 @@
   }
 
   @media (width < 600px) {
-    .x18ihq2d.x18ihq2d {
-      animation-name: x15b941j-B;
-    }
-
     .x1ebxanj.x1ebxanj {
       animation-name: x1itx4s0-B;
     }
@@ -4516,18 +4667,6 @@
   }
 
   @media (width < 600px) {
-    .xb0nsol.xb0nsol {
-      border-end-start-radius: var(--x1lckk6t);
-    }
-
-    .xys6ro8.xys6ro8 {
-      border-start-end-radius: var(--x1w5u0jm);
-    }
-
-    .x9t1vth.x9t1vth {
-      border-start-start-radius: var(--x1w5u0jm);
-    }
-
     .xzvmenf.xzvmenf {
       box-shadow: none;
     }
@@ -4617,6 +4756,10 @@
     }
   }
 
+  .x1vlsijy:after {
+    grid-area: text;
+  }
+
   @media (width < 840px) {
     .x17udjhq.x17udjhq {
       grid-auto-rows: 336px;
@@ -4672,10 +4815,6 @@
       inset-inline-start: 0 !important;
     }
 
-    .x1upgybz.x1upgybz {
-      inset-inline-start: 0;
-    }
-
     .x1khanjg.x1khanjg {
       letter-spacing: var(--xt8l743);
     }
@@ -4715,12 +4854,6 @@
     .xa9fysw.xa9fysw {
       transform-origin: center;
     }
-
-    @media (forced-colors: active) {
-      .x1cfajip.x1cfajip.x1cfajip {
-        border-inline-start-style: none;
-      }
-    }
   }
 }
 
@@ -4844,10 +4977,6 @@
       max-height: calc(100dvh - 2 * var(--x3km7fe)) !important;
     }
 
-    .x11ijow0.x11ijow0 {
-      max-height: calc(100dvh - 72px);
-    }
-
     .x10iheve.x10iheve {
       max-height: none !important;
     }
@@ -4900,10 +5029,6 @@
       padding-right: env(safe-area-inset-right, 0px);
     }
 
-    .x5ubeis.x5ubeis {
-      padding-top: 0;
-    }
-
     .xg8iv3o.xg8iv3o {
       padding-top: env(safe-area-inset-top, 0px);
     }
@@ -4919,10 +5044,6 @@
     .xbvrusa.xbvrusa {
       top: 0 !important;
     }
-
-    .xmpip4z.xmpip4z {
-      top: auto;
-    }
   }
 
   @media (width >= 600px) {
@@ -4932,10 +5053,6 @@
   }
 
   @media (width < 600px) {
-    .xwvxfow.xwvxfow {
-      width: 100%;
-    }
-
     .x14gilbs.x14gilbs {
       width: 100vw;
     }
@@ -4950,17 +5067,13 @@
       border-style: dashed;
     }
   }
-
-  @media (width < 600px) {
-    @media (forced-colors: active) {
-      .xuz63mn.xuz63mn.xuz63mn {
-        border-top-style: solid;
-      }
-    }
-  }
 }
 
 @layer kanso.priority9 {
+  .x1mna9mr:after {
+    align-self: last baseline;
+  }
+
   .xx38sju:after {
     box-sizing: border-box;
   }
@@ -5011,6 +5124,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: "";
@@ -5053,6 +5180,11 @@
   inherits: false
 }
 
+@property --x-gridTemplateRows {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-inlineSize {
   syntax: "*";
   inherits: false
@@ -5078,6 +5210,16 @@
   inherits: false
 }
 
+@property --x-marginBlockStart {
+  syntax: "*";
+  inherits: false
+}
+
+@property --x-marginInlineEnd {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-maskImage {
   syntax: "*";
   inherits: false
@@ -5208,30 +5350,6 @@
   }
 }
 
-@keyframes x17cjob-B {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes x18x3npg-B {
-  from {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 @keyframes x15b941j-B {
   from {
     opacity: 0;
@@ -5978,6 +6096,10 @@
   --x1mnnhxz: #efb8c8;
 }
 
+.x155k8fu {
+  --icon-button-standard-color: var(--xn0syi6);
+}
+
 .x111hk5a {
   --segment-indicator-radius-end: var(--x1lckk6t);
 }