@kanso-labs/kanso-ui 0.44.0 → 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;
   }
@@ -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;
   }
@@ -471,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 {
@@ -581,6 +606,10 @@
     -webkit-line-clamp: 2;
   }
 
+  .x10ukxgv {
+    align-content: start;
+  }
+
   .x1pha0wt {
     align-items: baseline;
   }
@@ -613,6 +642,10 @@
     align-self: flex-start;
   }
 
+  .xnav3zx {
+    align-self: last baseline;
+  }
+
   .xkh2ocl {
     align-self: stretch;
   }
@@ -669,10 +702,6 @@
     animation-iteration-count: infinite;
   }
 
-  .x1a5igra {
-    animation-name: none;
-  }
-
   .x1dwmuk9 {
     animation-name: x15b941j-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);
   }
@@ -1313,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 {
@@ -1329,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);
   }
@@ -1377,6 +1418,14 @@
     caret-color: #0000;
   }
 
+  .x11twi6n {
+    caret-color: var(--x12p1wyw);
+  }
+
+  .x1jie568 {
+    caret-color: var(--x1cjupv7);
+  }
+
   .x1hyvwdk {
     clip-path: inset(50%);
   }
@@ -1953,6 +2002,10 @@
     grid-column-start: 2;
   }
 
+  .xx9t13c {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
   .x1rkzygb {
     grid-template-columns: auto minmax(0, 1fr);
   }
@@ -1977,6 +2030,10 @@
     grid-template-rows: 1fr;
   }
 
+  .x1xxtoay {
+    grid-template-rows: var(--x-gridTemplateRows);
+  }
+
   .xkjl1po {
     hyphens: auto;
   }
@@ -2277,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);
@@ -2382,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 {
@@ -2422,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 {
@@ -2727,10 +2796,6 @@
     transition-property: background-color, color;
   }
 
-  .x8u3r54 {
-    transition-property: background-color, min-block-size;
-  }
-
   .x15406qy {
     transition-property: background-color;
   }
@@ -2739,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 {
@@ -2763,10 +2828,6 @@
     transition-property: color;
   }
 
-  .x1nxaspg {
-    transition-property: font-size, letter-spacing, line-height;
-  }
-
   .x1qn9uv2 {
     transition-property: grid-template-rows;
   }
@@ -2921,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);
   }
@@ -3725,6 +3790,10 @@
     margin-top: calc((var(--xol8812) - var(--x67cwyw)) / 2);
   }
 
+  .x1vhfslr {
+    margin-top: var(--x-marginBlockStart);
+  }
+
   .x1yhnu8z {
     margin-top: var(--x196ey9q);
   }
@@ -4617,6 +4686,10 @@
     }
   }
 
+  .x1vlsijy:after {
+    grid-area: text;
+  }
+
   @media (width < 840px) {
     .x17udjhq.x17udjhq {
       grid-auto-rows: 336px;
@@ -4961,6 +5034,10 @@
 }
 
 @layer kanso.priority9 {
+  .x1mna9mr:after {
+    align-self: last baseline;
+  }
+
   .xx38sju:after {
     box-sizing: border-box;
   }
@@ -5011,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: "";
@@ -5053,6 +5144,11 @@
   inherits: false
 }
 
+@property --x-gridTemplateRows {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-inlineSize {
   syntax: "*";
   inherits: false
@@ -5078,6 +5174,11 @@
   inherits: false
 }
 
+@property --x-marginBlockStart {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-maskImage {
   syntax: "*";
   inherits: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.44.0",
+  "version": "0.44.1",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",

package/dist/overlay/modal.js

@@ -1,7 +0,0 @@
-import { createContext } from "react";
-//#region src/overlay/modal.ts
-const InsideModalContext = createContext(false);
-//#endregion
-export { InsideModalContext };
-
-//# sourceMappingURL=modal.js.map

package/dist/overlay/modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modal.js","names":["createContext","InsideModalContext"],"sources":["../../src/overlay/modal.ts"],"sourcesContent":["import { createContext } from 'react'\n\n// Whether a modal is open around what reads it. Every modal draws its own\n// scrim across the whole window, so one opened from inside another laid a\n// second over the first: the page darkened twice over, and the first modal's\n// own surface was dimmed with it. A modal set inside another reads this as\n// true and draws its scrim without a fill, leaving the first modal's as the\n// one the page is dimmed by. Its scrim is still there, empty, since it is\n// what React Aria reads a press outside the modal from.\n//\n// Set by a modal around its content rather than by `OverlayScope`, which\n// popovers set too: a modal opened from a popover is over a modal only if the\n// popover is inside one, and the context reaching it through the popover from\n// further out says exactly that. Apart from the components so their modules\n// export components alone, which is what keeps fast refresh working for them.\nconst InsideModalContext = createContext(false)\n\nexport { InsideModalContext }\n"],"mappings":";;AAeA,MAAMC,qBAAqBD,cAAc,KAAK"}