@kanso-labs/kanso-ui 0.40.8 → 0.41.0

package/dist/mark/initials.js

@@ -1,40 +1,55 @@
 //#region src/mark/initials.ts
+const INITIAL = /^[\p{L}\p{N}\p{Extended_Pictographic}\p{Regional_Indicator}]/u;
+const JOINING = /^[\p{Script=Arabic}\p{Script=Syriac}\p{Script=Mongolian}\p{Script=Nko}\p{Script=Adlam}\p{Script=Mandaic}\p{Script=Manichaean}\p{Script=Psalter_Pahlavi}\p{Script=Hanifi_Rohingya}\p{Script=Sogdian}\p{Script=Old_Uyghur}]/u;
+const ZERO_WIDTH_NON_JOINER = "‌";
+const TITLE = /^\p{L}{2,4}\.$/u;
+const SUFFIX = /^(?:jr|sr|ii|iii|iv|\d+(?:st|nd|rd|th))\.?,?$/iu;
+const TRAILING_ASIDE = /\s*[([{][^)\]}]*[)\]}]\s*$/u;
+const segmenters = /* @__PURE__ */ new Map();
+function graphemesOf(text, locale) {
+	let segmenter = segmenters.get(locale);
+	if (segmenter === void 0) {
+		segmenter = new Intl.Segmenter(locale, { granularity: "grapheme" });
+		segmenters.set(locale, segmenter);
+	}
+	return Array.from(segmenter.segment(text), ({ segment }) => segment);
+}
+/**
+* The character that stands for `word`: its first grapheme that is a letter,
+* a number or a picture, or its first grapheme where it has none of those,
+* so something always shows. Upper-cased in the locale, and then one
+* grapheme of that, since upper-casing can lengthen it: "ß" is "SS".
+*/
+function initialOf(word, locale) {
+	const graphemes = graphemesOf(word, locale);
+	return graphemesOf((graphemes.find((grapheme) => INITIAL.test(grapheme)) ?? graphemes.at(0) ?? "").toLocaleUpperCase(locale), locale).at(0) ?? "";
+}
 /**
 * One letter, where a person takes two. A person has a first name and a last
 * name to initialise; a thing usually has neither, so the same rule applied
 * to "Second Item" would produce "SI" — a pair of initials for something that
-* was never two words in that sense. Array.from rather than indexing, so a
-* name starting outside the Basic Multilingual Plane yields its whole first
-* character instead of half a surrogate pair.
+* was never two words in that sense.
 */
-function initialOfThing(name) {
-	const trimmed = name.trim();
-	return (Array.from(trimmed)[0] ?? "").toLocaleUpperCase();
+function initialOfThing(name, locale) {
+	return initialOf(name.trim(), locale);
 }
 /**
-* The first character of the first and last word, which handles both "Ada"
-* and "Ada Lovelace" without a separate prop for how many to take.
-*
-* A character is a grapheme, what a reader sees as one, rather than a code
-* point: a code point drops an accent written as a combining mark, splits an
-* Indic conjunct and cuts a flag or a joined emoji in half. And it is
-* upper-cased in the reader's locale, which is what turns a Turkish "i" into
-* "İ" rather than "I".
+* The initials of the first and the last word, which handles both "Ada" and
+* "Ada Lovelace" without a separate prop for how many to take. What a
+* display name carries around the name itself is left out first: a title
+* before it, a generational suffix after it, and an aside in brackets at its
+* end. A name written without spaces between its words — Japanese, Chinese —
+* is one word to this, and takes one initial.
 */
 function initialsOfPerson(name, locale) {
-	const words = name.split(/\s+/u).filter(Boolean);
+	let words = name.replace(TRAILING_ASIDE, "").split(/\s+/u).filter(Boolean);
+	if (words.length > 1 && TITLE.test(words[0] ?? "")) words = words.slice(1);
+	if (words.length > 1 && SUFFIX.test(words.at(-1) ?? "")) words = words.slice(0, -1);
 	if (words.length === 0) return "";
-	return `${firstGrapheme(words[0] ?? "", locale)}${words.length > 1 ? firstGrapheme(words.at(-1) ?? "", locale) : ""}`.toLocaleUpperCase(locale);
-}
-const segmenters = /* @__PURE__ */ new Map();
-function firstGrapheme(word, locale) {
-	let segmenter = segmenters.get(locale);
-	if (segmenter === void 0) {
-		segmenter = new Intl.Segmenter(locale, { granularity: "grapheme" });
-		segmenters.set(locale, segmenter);
-	}
-	for (const { segment } of segmenter.segment(word)) return segment;
-	return "";
+	const first = initialOf(words[0] ?? "", locale);
+	if (words.length === 1) return first;
+	const last = initialOf(words.at(-1) ?? "", locale);
+	return `${first}${JOINING.test(first) && JOINING.test(last) ? ZERO_WIDTH_NON_JOINER : ""}${last}`;
 }
 //#endregion
 export { initialOfThing, initialsOfPerson };

package/dist/mark/initials.js.map

@@ -1 +1 @@
-{"version":3,"file":"initials.js","names":["initialOfThing","name","trimmed","trim","Array","from","toLocaleUpperCase","initialsOfPerson","locale","words","split","filter","Boolean","length","first","firstGrapheme","last","at","segmenters","Map","Intl","Segmenter","word","segmenter","get","undefined","granularity","set","segment"],"sources":["../../src/mark/initials.ts"],"sourcesContent":["// What a mark shows while it has no image: two initials for a person, one for\n// anything else. Beside the mark rather than inside `./index.tsx`, which\n// exports components alone so fast refresh keeps working for it.\n\n/**\n * One letter, where a person takes two. A person has a first name and a last\n * name to initialise; a thing usually has neither, so the same rule applied\n * to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n * was never two words in that sense. Array.from rather than indexing, so a\n * name starting outside the Basic Multilingual Plane yields its whole first\n * character instead of half a surrogate pair.\n */\nfunction initialOfThing(name: string) {\n  const trimmed = name.trim()\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase()\n}\n\n/**\n * The first character of the first and last word, which handles both \"Ada\"\n * and \"Ada Lovelace\" without a separate prop for how many to take.\n *\n * A character is a grapheme, what a reader sees as one, rather than a code\n * point: a code point drops an accent written as a combining mark, splits an\n * Indic conjunct and cuts a flag or a joined emoji in half. And it is\n * upper-cased in the reader's locale, which is what turns a Turkish \"i\" into\n * \"İ\" rather than \"I\".\n */\nfunction initialsOfPerson(name: string, locale: string) {\n  const words = name.split(/\\s+/u).filter(Boolean)\n  if (words.length === 0) {\n    return ''\n  }\n  const first = firstGrapheme(words[0] ?? '', locale)\n  const last = words.length > 1 ? firstGrapheme(words.at(-1) ?? '', locale) : ''\n  return `${first}${last}`.toLocaleUpperCase(locale)\n}\n\nconst segmenters = new Map<string, Intl.Segmenter>()\n\nfunction firstGrapheme(word: string, locale: string) {\n  let segmenter = segmenters.get(locale)\n  if (segmenter === undefined) {\n    segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' })\n    segmenters.set(locale, segmenter)\n  }\n  for (const { segment } of segmenter.segment(word)) {\n    return segment\n  }\n  return ''\n}\n\nexport { initialOfThing, initialsOfPerson }\n"],"mappings":";;;;;;;;;AAYA,SAASA,eAAeC,MAAc;CACpC,MAAMC,UAAUD,KAAKE,KAAK;CAC1B,QAAQC,MAAMC,KAAKH,OAAO,CAAC,CAAC,MAAM,GAAA,CAAII,kBAAkB;AAC1D;;;;;;;;;;;AAYA,SAASC,iBAAiBN,MAAcO,QAAgB;CACtD,MAAMC,QAAQR,KAAKS,MAAM,MAAM,CAAC,CAACC,OAAOC,OAAO;CAC/C,IAAIH,MAAMI,WAAW,GACnB,OAAO;CAIT,OAAO,GAFOE,cAAcN,MAAM,MAAM,IAAID,MAElCM,IADGL,MAAMI,SAAS,IAAIE,cAAcN,MAAMQ,GAAG,EAAE,KAAK,IAAIT,MAAM,IAAI,KACnDF,kBAAkBE,MAAM;AACnD;AAEA,MAAMU,6BAAa,IAAIC,IAA4B;AAEnD,SAASJ,cAAcO,MAAcd,QAAgB;CACnD,IAAIe,YAAYL,WAAWM,IAAIhB,MAAM;CACrC,IAAIe,cAAcE,KAAAA,GAAW;EAC3BF,YAAY,IAAIH,KAAKC,UAAUb,QAAQ,EAAEkB,aAAa,WAAW,CAAC;EAClER,WAAWS,IAAInB,QAAQe,SAAS;CAClC;CACA,KAAK,MAAM,EAAEK,aAAaL,UAAUK,QAAQN,IAAI,GAC9C,OAAOM;CAET,OAAO;AACT"}
+{"version":3,"file":"initials.js","names":["INITIAL","JOINING","ZERO_WIDTH_NON_JOINER","TITLE","SUFFIX","TRAILING_ASIDE","segmenters","Map","Intl","Segmenter","graphemesOf","text","locale","segmenter","get","undefined","granularity","set","Array","from","segment","initialOf","word","graphemes","chosen","find","grapheme","test","at","toLocaleUpperCase","initialOfThing","name","trim","initialsOfPerson","words","replace","split","filter","Boolean","length","slice","first","last","between"],"sources":["../../src/mark/initials.ts"],"sourcesContent":["// What a mark shows while it has no image: two initials for a person, one for\n// anything else. Beside the mark rather than inside `./index.tsx`, which\n// exports components alone so fast refresh keeps working for it.\n//\n// Both take the same rule for which character stands for a word, in\n// `initialOf`, and both work in graphemes — what a reader sees as one\n// character — in the reader's locale. A code point drops an accent written\n// as a combining mark, splits an Indic conjunct and cuts a flag or a joined\n// emoji in half; upper-casing without the locale turns a Turkish \"i\" into\n// \"I\" rather than \"İ\".\n\n// What a word's initial can be: a letter, a number, or a picture — an emoji,\n// or a flag, which is a pair of regional indicators. A word opening with\n// anything else — a bracket, a quote, the @ of a handle, the # of a channel\n// — is initialised by the first of these inside it.\nconst INITIAL = /^[\\p{L}\\p{N}\\p{Extended_Pictographic}\\p{Regional_Indicator}]/u\n\n// The scripts whose letters join to the next one. Two initials in one of\n// them, written side by side, shape into a single connected word rather than\n// two letters, so a zero-width non-joiner goes between them.\nconst JOINING =\n  /^[\\p{Script=Arabic}\\p{Script=Syriac}\\p{Script=Mongolian}\\p{Script=Nko}\\p{Script=Adlam}\\p{Script=Mandaic}\\p{Script=Manichaean}\\p{Script=Psalter_Pahlavi}\\p{Script=Hanifi_Rohingya}\\p{Script=Sogdian}\\p{Script=Old_Uyghur}]/u\n\nconst ZERO_WIDTH_NON_JOINER = '‌'\n\n// A title before a name — \"Dr.\", \"Mrs.\", \"Prof.\" — which is not one of its\n// words. Two letters at least, so a first initial written \"J.\" is kept.\nconst TITLE = /^\\p{L}{2,4}\\.$/u\n\n// A generational suffix after a name — \"Jr.\", \"Sr\", \"III\", \"3rd\" — which is\n// not its last word either. The numerals are the generational ones only, so\n// a surname that reads as a numeral, \"Xi\" say, is kept.\nconst SUFFIX = /^(?:jr|sr|ii|iii|iv|\\d+(?:st|nd|rd|th))\\.?,?$/iu\n\n// Something said about the name rather than part of it, in brackets at its\n// end: \"(she/her)\", \"[away]\".\nconst TRAILING_ASIDE = /\\s*[([{][^)\\]}]*[)\\]}]\\s*$/u\n\nconst segmenters = new Map<string, Intl.Segmenter>()\n\nfunction graphemesOf(text: string, locale: string) {\n  let segmenter = segmenters.get(locale)\n  if (segmenter === undefined) {\n    segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' })\n    segmenters.set(locale, segmenter)\n  }\n  return Array.from(segmenter.segment(text), ({ segment }) => segment)\n}\n\n/**\n * The character that stands for `word`: its first grapheme that is a letter,\n * a number or a picture, or its first grapheme where it has none of those,\n * so something always shows. Upper-cased in the locale, and then one\n * grapheme of that, since upper-casing can lengthen it: \"ß\" is \"SS\".\n */\nfunction initialOf(word: string, locale: string) {\n  const graphemes = graphemesOf(word, locale)\n  const chosen =\n    graphemes.find((grapheme) => INITIAL.test(grapheme)) ??\n    graphemes.at(0) ??\n    ''\n  return graphemesOf(chosen.toLocaleUpperCase(locale), locale).at(0) ?? ''\n}\n\n/**\n * One letter, where a person takes two. A person has a first name and a last\n * name to initialise; a thing usually has neither, so the same rule applied\n * to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n * was never two words in that sense.\n */\nfunction initialOfThing(name: string, locale: string) {\n  return initialOf(name.trim(), locale)\n}\n\n/**\n * The initials of the first and the last word, which handles both \"Ada\" and\n * \"Ada Lovelace\" without a separate prop for how many to take. What a\n * display name carries around the name itself is left out first: a title\n * before it, a generational suffix after it, and an aside in brackets at its\n * end. A name written without spaces between its words — Japanese, Chinese —\n * is one word to this, and takes one initial.\n */\nfunction initialsOfPerson(name: string, locale: string) {\n  let words = name.replace(TRAILING_ASIDE, '').split(/\\s+/u).filter(Boolean)\n  if (words.length > 1 && TITLE.test(words[0] ?? '')) {\n    words = words.slice(1)\n  }\n  if (words.length > 1 && SUFFIX.test(words.at(-1) ?? '')) {\n    words = words.slice(0, -1)\n  }\n  if (words.length === 0) {\n    return ''\n  }\n  const first = initialOf(words[0] ?? '', locale)\n  if (words.length === 1) {\n    return first\n  }\n  const last = initialOf(words.at(-1) ?? '', locale)\n  const between =\n    JOINING.test(first) && JOINING.test(last) ? ZERO_WIDTH_NON_JOINER : ''\n  return `${first}${between}${last}`\n}\n\nexport { initialOfThing, initialsOfPerson }\n"],"mappings":";AAeA,MAAMA,UAAU;AAKhB,MAAMC,UACJ;AAEF,MAAMC,wBAAwB;AAI9B,MAAMC,QAAQ;AAKd,MAAMC,SAAS;AAIf,MAAMC,iBAAiB;AAEvB,MAAMC,6BAAa,IAAIC,IAA4B;AAEnD,SAASG,YAAYC,MAAcC,QAAgB;CACjD,IAAIC,YAAYP,WAAWQ,IAAIF,MAAM;CACrC,IAAIC,cAAcE,KAAAA,GAAW;EAC3BF,YAAY,IAAIL,KAAKC,UAAUG,QAAQ,EAAEI,aAAa,WAAW,CAAC;EAClEV,WAAWW,IAAIL,QAAQC,SAAS;CAClC;CACA,OAAOK,MAAMC,KAAKN,UAAUO,QAAQT,IAAI,IAAI,EAAES,cAAcA,OAAO;AACrE;;;;;;;AAQA,SAASC,UAAUC,MAAcV,QAAgB;CAC/C,MAAMW,YAAYb,YAAYY,MAAMV,MAAM;CAK1C,OAAOF,aAHLa,UAAUE,MAAMC,aAAa1B,QAAQ2B,KAAKD,QAAQ,CAAC,KACnDH,UAAUK,GAAG,CAAC,KACd,GAAA,CACwBC,kBAAkBjB,MAAM,GAAGA,MAAM,CAAC,CAACgB,GAAG,CAAC,KAAK;AACxE;;;;;;;AAQA,SAASE,eAAeC,MAAcnB,QAAgB;CACpD,OAAOS,UAAUU,KAAKC,KAAK,GAAGpB,MAAM;AACtC;;;;;;;;;AAUA,SAASqB,iBAAiBF,MAAcnB,QAAgB;CACtD,IAAIsB,QAAQH,KAAKI,QAAQ9B,gBAAgB,EAAE,CAAC,CAAC+B,MAAM,MAAM,CAAC,CAACC,OAAOC,OAAO;CACzE,IAAIJ,MAAMK,SAAS,KAAKpC,MAAMwB,KAAKO,MAAM,MAAM,EAAE,GAC/CA,QAAQA,MAAMM,MAAM,CAAC;CAEvB,IAAIN,MAAMK,SAAS,KAAKnC,OAAOuB,KAAKO,MAAMN,GAAG,EAAE,KAAK,EAAE,GACpDM,QAAQA,MAAMM,MAAM,GAAG,EAAE;CAE3B,IAAIN,MAAMK,WAAW,GACnB,OAAO;CAET,MAAME,QAAQpB,UAAUa,MAAM,MAAM,IAAItB,MAAM;CAC9C,IAAIsB,MAAMK,WAAW,GACnB,OAAOE;CAET,MAAMC,OAAOrB,UAAUa,MAAMN,GAAG,EAAE,KAAK,IAAIhB,MAAM;CAGjD,OAAO,GAAG6B,QADRxC,QAAQ0B,KAAKc,KAAK,KAAKxC,QAAQ0B,KAAKe,IAAI,IAAIxC,wBAAwB,KAC1CwC;AAC9B"}

package/dist/overlay/index.js

@@ -0,0 +1,24 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { SeparatorContext } from "react-aria-components";
+//#region src/overlay/index.tsx
+const NO_SEPARATOR = {};
+/** Clears, for an overlay's content, the contexts that reach it from outside. */
+function OverlayScope(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(SeparatorContext, {
+			value: NO_SEPARATOR,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+//#endregion
+export { OverlayScope };
+
+//# sourceMappingURL=index.js.map

package/dist/overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","SeparatorContext","NO_SEPARATOR","OverlayScope","t0","$","_c","children","t1","_c"],"sources":["../../src/overlay/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { SeparatorContext } from 'react-aria-components'\n\n// React context crosses the portal an overlay renders through, so what a\n// component around the trigger sets for its own children reaches into the\n// overlay as well. `Toolbar` sets the one that matters: it turns a\n// `Separator` across the bar, and a horizontal rule in a popover opened from\n// the bar took that orientation and drew as a vertical rule 0px long, told\n// to assistive technology as vertical too. An overlay is a surface of its\n// own, so its content starts from none of it, and a `Separator` there falls\n// back to its own horizontal default — as one inside React Aria's `Menu`\n// already did, since `Menu` provides a separator context of its own.\n//\n// Empty rather than null, so the separator reads no props from it rather\n// than finding no context and looking further out; a module constant, so the\n// value is the same object on every render.\nconst NO_SEPARATOR = {}\n\n/** Clears, for an overlay's content, the contexts that reach it from outside. */\nfunction OverlayScope({ children }: { children: ReactNode }) {\n  return <SeparatorContext value={NO_SEPARATOR}>{children}</SeparatorContext>\n}\n\nexport { OverlayScope }\n"],"mappings":";;;;AAiBA,MAAME,eAAe,CAAC;;AAGtB,SAAAC,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAC,aAAAH;CAAqC,IAAAI;CAAA,IAAAH,EAAA,OAAAE,UAAA;EAClDC,KAAA,oBAAC,kBAAD;GAAyBN,OAAAA;GAAeK;EAAvB,CAAA;EAAmDF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAApEG;AAAoE"}

package/dist/styles/scheme.js

@@ -0,0 +1,19 @@
+//#region src/styles/scheme.ts
+const pinnedScheme = {
+	dark: {
+		kWkggS: "x14s9m32",
+		kMwMTN: "x139gbkf",
+		kQNsl9: "xntwwlm",
+		$$css: true
+	},
+	light: {
+		kWkggS: "x14s9m32",
+		kMwMTN: "x139gbkf",
+		kQNsl9: "x19aimcq",
+		$$css: true
+	}
+};
+//#endregion
+export { pinnedScheme };
+
+//# sourceMappingURL=scheme.js.map

package/dist/styles/scheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheme.js","names":["stylex","colors","pinnedScheme","dark","kWkggS","kMwMTN","kQNsl9","$$css","light"],"sources":["../../src/styles/scheme.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors } from '../tokens/design.tokens.stylex';\n\n// What pinning a scheme does beside the colour theme that pins the tokens:\n// the element paints its own surface and text in that scheme, and tells the\n// browser the scheme, which is what native controls, scrollbars, autofill\n// and spellcheck follow — they read `color-scheme` rather than any token.\n//\n// A theme pins the tokens alone. A pinned dark scope on a light page left\n// its own background transparent and its text the page's, so a `Text`\n// inside drew the dark scheme's on surface over the light page, 1.23:1, and\n// an `<input>` inside stayed white with black text.\n//\n// Surface and on surface rather than background and on background: the two\n// pairs hold the same colours in both of the library's schemes, and surface\n// is the pair Material Design draws content on. Shared by `ThemeScope` and\n// the `colorScheme` classes in src/color-scheme.ts, which are the same\n// classes in two forms; an unpinned scope applies neither, so it paints\n// nothing and inherits the scheme around it.\nconst pinnedScheme = {\n  dark: {\n    kWkggS: \"x14s9m32\",\n    kMwMTN: \"x139gbkf\",\n    kQNsl9: \"xntwwlm\",\n    $$css: true\n  },\n  light: {\n    kWkggS: \"x14s9m32\",\n    kMwMTN: \"x139gbkf\",\n    kQNsl9: \"x19aimcq\",\n    $$css: true\n  }\n};\nexport { pinnedScheme };"],"mappings":";AAoBA,MAAME,eAAe;CACnBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,OAAO;EACLJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;AACF"}

package/dist/styles.css

@@ -55,6 +55,10 @@
     background-position: 0 0, 0 8px, 8px -8px, -8px 0;
   }
 
+  .x1y3ic1l {
+    border-color: color-mix(in srgb,var(--x1ridy1o) calc(var(--x1cq03z9) * 100%),transparent);
+  }
+
   .xrh88j3 {
     border-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x1cq03z9) * 100%),transparent);
   }
@@ -633,6 +637,10 @@
     animation-name: x17cjob-B;
   }
 
+  .xz09zy6 {
+    animation-name: x17j028-B, x26nhu8-B;
+  }
+
   .x1sz9pa8 {
     animation-name: x18qdip-B, x1b9nlqo-B;
   }
@@ -661,10 +669,6 @@
     animation-name: x1pch1fy-B;
   }
 
-  .x14p4i3i {
-    animation-name: x1t81ys1-B, x26nhu8-B;
-  }
-
   .xhpbw76 {
     animation-name: x1uknk9t-B;
   }
@@ -753,6 +757,10 @@
     background-color: color-mix(in srgb,var(--x13o0mym) calc(var(--x1cq03z9) * 100%),transparent);
   }
 
+  .x6mg230 {
+    background-color: color-mix(in srgb,var(--x13o0mym) calc(var(--xu361ij) * 100%),transparent);
+  }
+
   .xn4e5mw {
     background-color: color-mix(in srgb,var(--x1balm44) calc(var(--x124j18r) * 100%),var(--x1614qkl));
   }
@@ -869,6 +877,10 @@
     background-color: color-mix(in srgb,var(--x28n2pw) calc(var(--xhaltwz) * 100%),var(--x3cqee7));
   }
 
+  .x1jfv5e4 {
+    background-color: color-mix(in srgb,var(--xi1exwt) calc(var(--xu361ij) * 100%),transparent);
+  }
+
   .x16tkg7c {
     background-color: color-mix(in srgb,var(--xkltk4j) calc(var(--x124j18r) * 100%),var(--x189y34t));
   }
@@ -1265,6 +1277,10 @@
     box-shadow: inset 0 -2px 0 0 var(--x1cjupv7);
   }
 
+  .x19irva8 {
+    box-shadow: inset 0 0 0 1px var(--x12p1wyw);
+  }
+
   .xbd69nm {
     box-shadow: inset 0 0 0 1px var(--x7dbk6n);
   }
@@ -1417,6 +1433,18 @@
     color: var(--xwloagh);
   }
 
+  .xntwwlm {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+    color-scheme: dark;
+  }
+
+  .x19aimcq {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+  }
+
   .xpamuu5 {
     column-gap: var(--x3km7fe);
   }
@@ -1521,6 +1549,10 @@
     flex-basis: 0;
   }
 
+  .x4pfjvb {
+    flex-basis: 50%;
+  }
+
   .xdl72j9 {
     flex-basis: auto;
   }
@@ -1937,10 +1969,6 @@
     inset-inline-start: var(--x-insetInlineStart);
   }
 
-  .x2xyl1b {
-    inset-inline-start: var(--x6borv4);
-  }
-
   .xc8icb0 {
     isolation: isolate;
   }
@@ -2113,10 +2141,6 @@
     list-style-type: none;
   }
 
-  .x14z9mp {
-    margin-inline-end: 0;
-  }
-
   .xk4mfur {
     margin-inline-end: calc(-1 * var(--x3km7fe));
   }
@@ -2125,10 +2149,6 @@
     margin-inline-end: calc(-1 * var(--xod9tvo));
   }
 
-  .x184gv5z {
-    margin-inline-end: calc((18px + var(--xod9tvo)) / 2);
-  }
-
   .x1tn5xpv {
     margin-inline-end: calc(var(--x6borv4) - var(--x3km7fe));
   }
@@ -2141,6 +2161,10 @@
     margin-inline-end: var(--xbmbo34);
   }
 
+  .x1nsf9p3 {
+    margin-inline-end: var(--xod9tvo);
+  }
+
   .x18xomjl {
     margin-inline-start: -12px;
   }
@@ -2153,14 +2177,6 @@
     margin-inline-start: calc(-1 * var(--xod9tvo));
   }
 
-  .x1mjqfaz {
-    margin-inline-start: calc((18px + var(--xod9tvo)) / 2);
-  }
-
-  .x1c5lys2 {
-    margin-inline-start: calc(18px + var(--xod9tvo));
-  }
-
   .x1m7rnnc {
     margin-inline-start: var(--x3km7fe);
   }
@@ -2218,6 +2234,10 @@
     outline-offset: -2px;
   }
 
+  .xr2mjdv {
+    outline-offset: -4px;
+  }
+
   .x1y3gkto {
     outline-offset: 1px;
   }
@@ -2494,10 +2514,6 @@
     transform: scaleX(-1);
   }
 
-  .xmzmy3r {
-    transform: translate3d(0, -50%, 0);
-  }
-
   .xuuh30 {
     transform: translateX(-50%);
   }
@@ -2646,6 +2662,14 @@
     transition-property: inline-size, block-size;
   }
 
+  .x1gcwfje {
+    transition-property: inline-size, margin-inline-end;
+  }
+
+  .x1pha8k4 {
+    transition-property: inline-size, min-inline-size;
+  }
+
   .x7x1mir {
     transition-property: inline-size, opacity;
   }
@@ -2658,8 +2682,8 @@
     transition-property: inset-inline-start;
   }
 
-  .x1ve1rmq {
-    transition-property: margin-inline-start, margin-inline-end;
+  .xrtqwew {
+    transition-property: max-inline-size;
   }
 
   .x13b0p5u {
@@ -2760,6 +2784,10 @@
     z-index: 1;
   }
 
+  .xfj7q76 {
+    z-index: 10;
+  }
+
   .x1bk8fjm {
     z-index: 1000;
   }
@@ -2776,6 +2804,10 @@
     box-shadow: inset 0 -2px 0 0 var(--x1cjupv7);
   }
 
+  .x1bll8u6:focus-within {
+    box-shadow: inset 0 0 0 2px var(--x12p1wyw);
+  }
+
   .x19i8hm1:focus-within {
     box-shadow: inset 0 0 0 2px var(--x1cjupv7);
   }
@@ -3616,6 +3648,10 @@
     max-width: 720px;
   }
 
+  .x1tpxo8 {
+    max-width: calc(100% - calc(18px + var(--xod9tvo)));
+  }
+
   .x35j8wb {
     max-width: calc(100% + 2 * var(--xbmbo34));
   }
@@ -3748,6 +3784,10 @@
     min-width: 16px;
   }
 
+  .x16xo4sp {
+    min-width: 18px;
+  }
+
   .x12rczxh {
     min-width: 220px;
   }
@@ -3772,6 +3812,10 @@
     min-width: 72px;
   }
 
+  .x36sgg7 {
+    min-width: calc(18px + var(--xod9tvo));
+  }
+
   .xjrddbv {
     min-width: min(360px, 100%);
   }
@@ -4034,10 +4078,34 @@
     width: calc(100% - 2 * var(--x1ug6acx));
   }
 
+  .x1n0idw {
+    width: calc(100% - var(--x3km7fe) - var(--x3km7fe));
+  }
+
+  .x1u7osep {
+    width: calc(100% - var(--x3km7fe));
+  }
+
   .x1url4ad {
     width: 336px;
   }
 
+  .x1iuy3mw {
+    width: calc(calc(var(--x6borv4) - var(--xod9tvo)) + 18px);
+  }
+
+  .x154zo0h {
+    width: calc(calc(var(--x6borv4) - var(--xod9tvo)) + calc((18px + var(--xod9tvo)) / 2));
+  }
+
+  .x1n85vuq {
+    width: calc(calc(var(--x6borv4) - var(--xod9tvo)) + calc(18px + var(--xod9tvo)));
+  }
+
+  .xbraz1g {
+    width: calc(var(--x6borv4) - var(--xod9tvo));
+  }
+
   .xd4ksm1 {
     width: clamp(360px,var(--trigger-width),720px);
   }
@@ -4718,6 +4786,10 @@
     content: "";
   }
 
+  .xvss7es:before {
+    content: attr(data-count);
+  }
+
   .x1hcrkkg::-webkit-search-cancel-button {
     display: none;
   }
@@ -4991,17 +5063,17 @@
   }
 }
 
-@keyframes x1t81ys1-B {
+@keyframes x17j028-B {
   0% {
-    stroke-dasharray: 8 100;
+    stroke-dasharray: 8 92;
   }
 
   50% {
-    stroke-dasharray: 75 100;
+    stroke-dasharray: 75 25;
   }
 
   100% {
-    stroke-dasharray: 8 100;
+    stroke-dasharray: 8 92;
   }
 }
 

package/dist/theme-scope.d.ts

@@ -3,8 +3,11 @@ import { RenderComponentProps } from "./render/useRender.js";
 type ThemeScopeProps = RenderComponentProps<'div'> & {
   /**
    * Pins the scope to the library's light or dark scheme, whatever the
-   * reader's OS asks for. Left unset, the scope keeps the scheme around it:
-   * the one an enclosing scope or the `<html>` element pins, or the OS's.
+   * reader's OS asks for. A pinned scope paints its own surface and text in
+   * that scheme and sets `color-scheme` for the native controls inside, so
+   * it reads on any page. Left unset, the scope paints nothing and keeps the
+   * scheme around it: the one an enclosing scope or the `<html>` element
+   * pins, or the OS's.
    */
   scheme?: 'dark' | 'light' | undefined;
 };

package/dist/theme-scope.js

@@ -1,6 +1,7 @@
 "use client";
 import { props } from "./node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from "./tokens/design.tokens.stylex.js";
+import { pinnedScheme } from "./styles/scheme.js";
 import { useRender } from "./render/useRender.js";
 import { mergeStyles } from "./styles/merge.js";
 import { c } from "react/compiler-runtime";
@@ -54,7 +55,7 @@ function ThemeScope(t0) {
 	} else t1 = $[1];
 	const getContainer = t1;
 	const t2 = "div";
-	const t3 = mergeStyles(props(styles.root, tokenScope, scheme !== void 0 && schemes[scheme]), props$1);
+	const t3 = mergeStyles(props(styles.root, tokenScope, scheme !== void 0 && schemes[scheme], scheme !== void 0 && pinnedScheme[scheme]), props$1);
 	let t4;
 	if ($[2] !== children || $[3] !== getContainer) {
 		t4 = /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {

package/dist/theme-scope.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-scope.js","names":["c","_c","stylex","useCallback","useState","UNSAFE_PortalProvider","PortalProvider","RenderComponentProps","useRender","mergeStyles","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","styles","root","kB7OPa","$$css","schemes","dark","light","ThemeScopeProps","scheme","ThemeScope","t0","$","children","render","props","container","setContainer","t1","getContainer","t2","t3","undefined","t4","t5","t6","t7","t8","defaultTagName","_c","props","stylex.props","PortalProvider"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useState } from 'react';\nimport { UNSAFE_PortalProvider as PortalProvider } from 'react-aria/PortalProvider';\nimport type { RenderComponentProps } from './render/useRender';\nimport { useRender } from './render/useRender';\nimport { mergeStyles } from './styles/merge';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The component form of `themeScope` and `colorScheme` in ./color-scheme.ts:\n// the same classes, on an element of its own, plus the one thing a class\n// cannot do — take the overlays along.\n//\n// React Aria portals every overlay to the end of `<body>` unless a portal\n// provider names another container, so a popover, a sheet, a tooltip or a\n// toast opened inside a themed element renders outside it, and keeps the\n// tokens of the page. The container here is the scope's own last child,\n// which is what makes the overlays inherit whatever the scope inherits: its\n// scheme, and the `--kui-*` overrides declared on it or on any element around\n// it. A container appended to the body and given the scope's classes would\n// carry the classes alone, losing every override declared above the scope.\n//\n// `display: contents` keeps that container out of the layout, so a scope\n// that is a grid or a flex container gains no item and no gap from it. React\n// Aria positions an overlay against the overlay's own containing block rather\n// than the container's box, so a container with no box of its own changes\n// nothing about where a popover lands.\nconst styles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst schemes = {\n  dark: colorDefaultsDarkTheme,\n  light: colorDefaultsLightTheme\n};\ntype ThemeScopeProps = RenderComponentProps<'div'> & {\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * reader's OS asks for. Left unset, the scope keeps the scheme around it:\n   * the one an enclosing scope or the `<html>` element pins, or the OS's.\n   */\n  scheme?: 'dark' | 'light' | undefined;\n};\n\n/**\n * Themes what is inside it, overlays included.\n *\n * A `--kui-*` override declared on the scope — through `className` or\n * `style` — or on any element around it reaches every component inside,\n * where on any element but `<html>` it would otherwise reach none, since the\n * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts\n * opened inside portal into the scope rather than into the body, so they\n * follow it too. The rest of the page keeps its own tokens.\n *\n * ```tsx\n * // .accent { --kui-color-primary: #7d5260; }\n * <ThemeScope className=\"accent\" scheme=\"dark\">\n *   <Select label=\"Label\">…</Select>\n * </ThemeScope>\n * ```\n *\n * Because the overlays render inside the scope, an ancestor that confines\n * its descendants confines them too: a `transform` or a `filter` makes a\n * sheet's fixed scrim cover that ancestor rather than the viewport, and\n * `overflow: hidden` with a position clips a popover. Put the scope around\n * such an element rather than inside it.\n *\n * `render` swaps the element, for a scope that should be a `<main>`, a\n * `<section>`, or the `<body>` itself.\n */\nfunction ThemeScope({\n  children,\n  render,\n  scheme,\n  ...props\n}: ThemeScopeProps) {\n  // State rather than a ref, so the overlays render again once the container\n  // exists. React Aria renders an overlay nowhere while `getContainer` hands\n  // back nothing, and one open on the scope's first render would otherwise\n  // stay that way.\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const getContainer = useCallback(() => container, [container]);\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root, tokenScope, scheme !== undefined && schemes[scheme]), props),\n      children: <>\n          <PortalProvider getContainer={getContainer}>\n            {children}\n          </PortalProvider>\n          <div className=\"x9f619 xjp7ctv\" ref={setContainer} />\n        </>\n    },\n    render\n  });\n}\nexport type { ThemeScopeProps };\nexport { ThemeScope };"],"mappings":";;;;;;;;;;AA4BA,MAAMa,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,OAAO;AACT,EACF;AACA,MAAMC,UAAU;CACdC,MAAMR;CACNS,OAAOR;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAAW,WAAAC,IAAA;CAAA,MAAAC,IAAAvB,EAAA,EAAA;CAAoB,MAAA,EAAAwB,UAAAC,QAAAL,QAAA,GAAAM,YAAAJ;CAUlB,MAAA,CAAAK,WAAAC,gBAAkCzB,SAAgC,IAAI;CAAE,IAAA0B;CAAA,IAAAN,EAAA,OAAAI,WAAA;EACvCE,WAAMF;EAASJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhD,MAAAO,eAAqBD;CAEH,MAAAE,KAAA;CAGX,MAAAC,KAAAxB,YAAYP,MAAaW,OAAMC,MAAOF,YAAYS,WAAWa,KAAAA,KAAajB,QAAQI,OAAO,GAAGM,OAAK;CAAC,IAAAQ;CAAA,IAAAX,EAAA,OAAAC,YAAAD,EAAA,OAAAO,cAAA;EAEjGI,KAAA,oBAACS,uBAAD;GAA8Bb;GAC3BN;EADY,CAAA;EAEED,EAAA,KAAAC;EAAAD,EAAA,KAAAO;EAAAP,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAK,cAAA;EACjBO,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAsBP,KAAAA;EAAY,CAAA;EAAIL,EAAA,KAAAK;EAAAL,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAW,MAAAX,EAAA,OAAAY,IAAA;EAJ/CC,KAAA,qBAAA,YAAA,EAAA,UAAA,CACNF,IAGAC,EAAqD,EAAA,CAAA;EACpDZ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAG,WAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAa,IAAA;EARAC,KAAA;GAAA,GACFX;GAAK,GACLM;GAAkGR,UAC3FY;EAMZ;EAACb,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAE,UAAAF,EAAA,QAAAc,IAAA;EAXcC,KAAA;GAAAC,gBACCR;GAAKL,OACdW;GASNZ;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAbMhB,UAAU+B,EAahB;AAAC"}
+{"version":3,"file":"theme-scope.js","names":["c","_c","stylex","useCallback","useState","UNSAFE_PortalProvider","PortalProvider","RenderComponentProps","useRender","mergeStyles","pinnedScheme","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","styles","root","kB7OPa","$$css","schemes","dark","light","ThemeScopeProps","scheme","ThemeScope","t0","$","children","render","props","container","setContainer","t1","getContainer","t2","t3","undefined","t4","t5","t6","t7","t8","defaultTagName","_c","props","stylex.props","PortalProvider"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useState } from 'react';\nimport { UNSAFE_PortalProvider as PortalProvider } from 'react-aria/PortalProvider';\nimport type { RenderComponentProps } from './render/useRender';\nimport { useRender } from './render/useRender';\nimport { mergeStyles } from './styles/merge';\nimport { pinnedScheme } from './styles/scheme';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The component form of `themeScope` and `colorScheme` in ./color-scheme.ts:\n// the same classes, on an element of its own, plus the one thing a class\n// cannot do — take the overlays along. A pinned scheme paints the scope's\n// surface and sets its `color-scheme` too; see src/styles/scheme.ts.\n//\n// React Aria portals every overlay to the end of `<body>` unless a portal\n// provider names another container, so a popover, a sheet, a tooltip or a\n// toast opened inside a themed element renders outside it, and keeps the\n// tokens of the page. The container here is the scope's own last child,\n// which is what makes the overlays inherit whatever the scope inherits: its\n// scheme, and the `--kui-*` overrides declared on it or on any element around\n// it. A container appended to the body and given the scope's classes would\n// carry the classes alone, losing every override declared above the scope.\n//\n// `display: contents` keeps that container out of the layout, so a scope\n// that is a grid or a flex container gains no item and no gap from it. React\n// Aria positions an overlay against the overlay's own containing block rather\n// than the container's box, so a container with no box of its own changes\n// nothing about where a popover lands.\nconst styles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst schemes = {\n  dark: colorDefaultsDarkTheme,\n  light: colorDefaultsLightTheme\n};\ntype ThemeScopeProps = RenderComponentProps<'div'> & {\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * reader's OS asks for. A pinned scope paints its own surface and text in\n   * that scheme and sets `color-scheme` for the native controls inside, so\n   * it reads on any page. Left unset, the scope paints nothing and keeps the\n   * scheme around it: the one an enclosing scope or the `<html>` element\n   * pins, or the OS's.\n   */\n  scheme?: 'dark' | 'light' | undefined;\n};\n\n/**\n * Themes what is inside it, overlays included.\n *\n * A `--kui-*` override declared on the scope — through `className` or\n * `style` — or on any element around it reaches every component inside,\n * where on any element but `<html>` it would otherwise reach none, since the\n * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts\n * opened inside portal into the scope rather than into the body, so they\n * follow it too. The rest of the page keeps its own tokens.\n *\n * ```tsx\n * // .accent { --kui-color-primary: #7d5260; }\n * <ThemeScope className=\"accent\" scheme=\"dark\">\n *   <Select label=\"Label\">…</Select>\n * </ThemeScope>\n * ```\n *\n * Because the overlays render inside the scope, an ancestor that confines\n * its descendants confines them too: a `transform` or a `filter` makes a\n * sheet's fixed scrim cover that ancestor rather than the viewport, and\n * `overflow: hidden` with a position clips a popover. Put the scope around\n * such an element rather than inside it.\n *\n * `render` swaps the element, for a scope that should be a `<main>`, a\n * `<section>`, or the `<body>` itself.\n */\nfunction ThemeScope({\n  children,\n  render,\n  scheme,\n  ...props\n}: ThemeScopeProps) {\n  // State rather than a ref, so the overlays render again once the container\n  // exists. React Aria renders an overlay nowhere while `getContainer` hands\n  // back nothing, and one open on the scope's first render would otherwise\n  // stay that way.\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const getContainer = useCallback(() => container, [container]);\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root, tokenScope, scheme !== undefined && schemes[scheme], scheme !== undefined && pinnedScheme[scheme]), props),\n      children: <>\n          <PortalProvider getContainer={getContainer}>\n            {children}\n          </PortalProvider>\n          <div className=\"x9f619 xjp7ctv\" ref={setContainer} />\n        </>\n    },\n    render\n  });\n}\nexport type { ThemeScopeProps };\nexport { ThemeScope };"],"mappings":";;;;;;;;;;;AA8BA,MAAMc,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,OAAO;AACT,EACF;AACA,MAAMC,UAAU;CACdC,MAAMR;CACNS,OAAOR;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAAW,WAAAC,IAAA;CAAA,MAAAC,IAAAxB,EAAA,EAAA;CAAoB,MAAA,EAAAyB,UAAAC,QAAAL,QAAA,GAAAM,YAAAJ;CAUlB,MAAA,CAAAK,WAAAC,gBAAkC1B,SAAgC,IAAI;CAAE,IAAA2B;CAAA,IAAAN,EAAA,OAAAI,WAAA;EACvCE,WAAMF;EAASJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhD,MAAAO,eAAqBD;CAEH,MAAAE,KAAA;CAGX,MAAAC,KAAAzB,YAAYP,MAAaY,OAAMC,MAAOF,YAAYS,WAAWa,KAAAA,KAAajB,QAAQI,SAASA,WAAWa,KAAAA,KAAazB,aAAaY,OAAO,GAAGM,OAAK;CAAC,IAAAQ;CAAA,IAAAX,EAAA,OAAAC,YAAAD,EAAA,OAAAO,cAAA;EAE/II,KAAA,oBAACS,uBAAD;GAA8Bb;GAC3BN;EADY,CAAA;EAEED,EAAA,KAAAC;EAAAD,EAAA,KAAAO;EAAAP,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAK,cAAA;EACjBO,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAsBP,KAAAA;EAAY,CAAA;EAAIL,EAAA,KAAAK;EAAAL,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAW,MAAAX,EAAA,OAAAY,IAAA;EAJ/CC,KAAA,qBAAA,YAAA,EAAA,UAAA,CACNF,IAGAC,EAAqD,EAAA,CAAA;EACpDZ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAG,WAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAa,IAAA;EARAC,KAAA;GAAA,GACFX;GAAK,GACLM;GAAgJR,UACzIY;EAMZ;EAACb,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAE,UAAAF,EAAA,QAAAc,IAAA;EAXcC,KAAA;GAAAC,gBACCR;GAAKL,OACdW;GASNZ;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAbMjB,UAAUgC,EAahB;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.40.8",
+  "version": "0.41.0",
   "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",