@kanso-labs/kanso-ui 0.26.2 → 0.26.3

package/dist/calendar/index.js

@@ -1,8 +1,8 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { ChevronEndGlyph } from "../glyphs/index.js";
 import { calendarStyles } from "./styles.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, CalendarGridHeader, CalendarHeaderCell, Heading } from "react-aria-components";
 //#region src/calendar/index.tsx
 function CalendarGridHeader$1() {

package/dist/calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["calendarHeaderCell","chevronClassName"],"sources":["../../src/calendar/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, CalendarGridHeader as RACCalendarGridHeader, CalendarHeaderCell as RACCalendarHeaderCell, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../glyphs';\nimport { calendarStyles } from './styles';\n\n// The parts Calendar and RangeCalendar both render: the row that moves the\n// month, the weekday header, and the offsets that put more than one month\n// side by side. Apart from either component so the two cannot drift, and\n// outside `src/components` for the reason ./styles.ts gives.\n\nfunction CalendarGridHeader(): ReactElement {\n  return <RACCalendarGridHeader>{calendarHeaderCell}</RACCalendarGridHeader>;\n}\n\n/**\n * The two chevrons with the month between them. React Aria wires\n * `slot=\"previous\"` and `slot=\"next\"` on its own `Button`, and `IconButton`\n * renders React Aria's `Button` too — so nesting one inside a slot would put\n * two buttons where the date pickers page draws one. The chevrons take the\n * icon buttons page's 40dp square and its state layer instead.\n *\n * A plain element rather than a `<header>`: a header is a banner landmark,\n * landmarks may not nest, and React Aria puts a calendar in\n * `role=\"application\"` — axe fails the page on it.\n */\nfunction CalendarHeader(): ReactElement {\n  return <div {...stylex.props(calendarStyles.header)}>\n      <RACButton className={chevronClassName} slot=\"previous\">\n        <ChevronEndGlyph {...stylex.props(calendarStyles.chevronGlyph, calendarStyles.chevronGlyphPrevious)} />\n      </RACButton>\n      <RACHeading {...stylex.props(calendarStyles.heading)} />\n      <RACButton className={chevronClassName} slot=\"next\">\n        <ChevronEndGlyph {...stylex.props(calendarStyles.chevronGlyph)} />\n      </RACButton>\n    </div>;\n}\n\n/** The weekday row, in the type the page gives both it and the dates. */\nfunction calendarHeaderCell(day: string): ReactElement {\n  return <RACCalendarHeaderCell {...stylex.props(calendarStyles.headerCell)}>\n      {day}\n    </RACCalendarHeaderCell>;\n}\nfunction chevronClassName() {\n  return stylex.props(calendarStyles.chevron).className ?? '';\n}\nexport { CalendarGridHeader, CalendarHeader };"],"mappings":";;;;;;;AAWA,SAAA,uBAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACS,KAAA,oBAAC,oBAAD,EAAA,UAAwB,mBAAF,CAAA;EAA6C,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAnE;AAAmE;;;;;;;;;;;;AAc5E,SAAA,iBAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACkB,KAAA,MAAa,eAAc,MAAO;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC/C,KAAA,oBAAC,QAAD;GAAsBC,WAAA;GAAuB,MAAA;GAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAK,MAAa,eAAc,cAAe,eAAc,oBAAqB,EAAC,CAAA;EAD3F,CAAA;EAEE,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACZ,KAAA,oBAAC,SAAD,EAAW,GAAK,MAAa,eAAc,OAAQ,EAAC,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAJrD,KAAA,qBAAA,OAAA;GAQC,GARQ;GAAT,UAAA;IACH;IAGA;IACA,oBAAC,QAAD;KAAsBA,WAAA;KAAuB,MAAA;KAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAK,MAAa,eAAc,YAAa,EAAC,CAAA;IADtD,CAAA;GAGN;;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OARD;AAQC;;AAIV,SAAS,mBAAmB,KAA2B;CACrD,OAAO,oBAAC,oBAAD;EAAuB,GAAI,MAAa,eAAe,UAAU;EACnE,UAAA;CACoB,CAAA;AAC3B;AACA,SAAS,mBAAmB;CAC1B,OAAO,MAAa,eAAe,OAAO,CAAC,CAAC,aAAa;AAC3D"}
+{"version":3,"file":"index.js","names":["ReactElement","stylex","Button","RACButton","CalendarGridHeader","RACCalendarGridHeader","CalendarHeaderCell","RACCalendarHeaderCell","Heading","RACHeading","ChevronEndGlyph","calendarStyles","$","_c","t0","Symbol","for","calendarHeaderCell","CalendarHeader","props","header","t1","chevronClassName","chevronGlyph","chevronGlyphPrevious","t2","heading","t3","day","headerCell","chevron","className"],"sources":["../../src/calendar/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, CalendarGridHeader as RACCalendarGridHeader, CalendarHeaderCell as RACCalendarHeaderCell, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../glyphs';\nimport { calendarStyles } from './styles';\n\n// The parts Calendar and RangeCalendar both render: the row that moves the\n// month, the weekday header, and the offsets that put more than one month\n// side by side. Apart from either component so the two cannot drift, and\n// outside `src/components` for the reason ./styles.ts gives.\n\nfunction CalendarGridHeader(): ReactElement {\n  return <RACCalendarGridHeader>{calendarHeaderCell}</RACCalendarGridHeader>;\n}\n\n/**\n * The two chevrons with the month between them. React Aria wires\n * `slot=\"previous\"` and `slot=\"next\"` on its own `Button`, and `IconButton`\n * renders React Aria's `Button` too — so nesting one inside a slot would put\n * two buttons where the date pickers page draws one. The chevrons take the\n * icon buttons page's 40dp square and its state layer instead.\n *\n * A plain element rather than a `<header>`: a header is a banner landmark,\n * landmarks may not nest, and React Aria puts a calendar in\n * `role=\"application\"` — axe fails the page on it.\n */\nfunction CalendarHeader(): ReactElement {\n  return <div {...stylex.props(calendarStyles.header)}>\n      <RACButton className={chevronClassName} slot=\"previous\">\n        <ChevronEndGlyph {...stylex.props(calendarStyles.chevronGlyph, calendarStyles.chevronGlyphPrevious)} />\n      </RACButton>\n      <RACHeading {...stylex.props(calendarStyles.heading)} />\n      <RACButton className={chevronClassName} slot=\"next\">\n        <ChevronEndGlyph {...stylex.props(calendarStyles.chevronGlyph)} />\n      </RACButton>\n    </div>;\n}\n\n/** The weekday row, in the type the page gives both it and the dates. */\nfunction calendarHeaderCell(day: string): ReactElement {\n  return <RACCalendarHeaderCell {...stylex.props(calendarStyles.headerCell)}>\n      {day}\n    </RACCalendarHeaderCell>;\n}\nfunction chevronClassName() {\n  return stylex.props(calendarStyles.chevron).className ?? '';\n}\nexport { CalendarGridHeader, CalendarHeader };"],"mappings":";;;;;;;AAWA,SAAAI,uBAAA;CAAA,MAAAQ,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACSF,KAAA,oBAAC,oBAAD,EAAA,UAAwBG,mBAAF,CAAA;EAA6CL,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAAnEE;AAAmE;;;;;;;;;;;;AAc5E,SAAAI,iBAAA;CAAA,MAAAN,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACkBF,KAAAb,MAAaU,eAAcS,MAAO;EAACR,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAC/CK,KAAA,oBAAC,QAAD;GAAsBC,WAAAA;GAAuB,MAAA;GAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAKrB,MAAaU,eAAcY,cAAeZ,eAAca,oBAAqB,EAAC,CAAA;EAD3F,CAAA;EAEEZ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACZS,KAAA,oBAAC,SAAD,EAAW,GAAKxB,MAAaU,eAAce,OAAQ,EAAC,CAAA;EAAId,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAJrDW,KAAA,qBAAA,OAAA;GAQC,GARQb;GAAT,UAAA;IACHO;IAGAI;IACA,oBAAC,QAAD;KAAsBH,WAAAA;KAAuB,MAAA;KAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAKrB,MAAaU,eAAcY,YAAa,EAAC,CAAA;IADtD,CAAA;GAGN;;EAAAX,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OARDe;AAQC;;AAIV,SAASV,mBAAmBW,KAA2B;CACrD,OAAO,oBAAC,oBAAD;EAAuB,GAAI3B,MAAaU,eAAekB,UAAU;EACnED,UAAAA;CACoB,CAAA;AAC3B;AACA,SAASN,mBAAmB;CAC1B,OAAOrB,MAAaU,eAAemB,OAAO,CAAC,CAACC,aAAa;AAC3D"}

package/dist/calendar/months.js.map

@@ -1 +1 @@
-{"version":3,"file":"months.js","names":[],"sources":["../../src/calendar/months.ts"],"sourcesContent":["// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n\n/**\n * One offset per visible month, so `visibleDuration` of more than one draws\n * the months side by side rather than one grid that scrolls between them.\n * React Aria positions each grid from its own offset; the heading names the\n * whole range, which is what its own `Heading` renders.\n */\nfunction monthOffsets(months: number) {\n  return Array.from({ length: Math.max(1, months) }, (_unused, index) => ({\n    months: index,\n  }))\n}\n\nexport { monthOffsets }\n"],"mappings":";;;;;;;AASA,SAAS,aAAa,QAAgB;CACpC,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EACtE,QAAQ,MACV,EAAE;AACJ"}
+{"version":3,"file":"months.js","names":["monthOffsets","months","Array","from","length","Math","max","_unused","index"],"sources":["../../src/calendar/months.ts"],"sourcesContent":["// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n\n/**\n * One offset per visible month, so `visibleDuration` of more than one draws\n * the months side by side rather than one grid that scrolls between them.\n * React Aria positions each grid from its own offset; the heading names the\n * whole range, which is what its own `Heading` renders.\n */\nfunction monthOffsets(months: number) {\n  return Array.from({ length: Math.max(1, months) }, (_unused, index) => ({\n    months: index,\n  }))\n}\n\nexport { monthOffsets }\n"],"mappings":";;;;;;;AASA,SAASA,aAAaC,QAAgB;CACpC,OAAOC,MAAMC,KAAK,EAAEC,QAAQC,KAAKC,IAAI,GAAGL,MAAM,EAAE,IAAIM,SAASC,WAAW,EACtEP,QAAQO,MACV,EAAE;AACJ"}

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — is marked as the\n// library's own where it is defined, since the page tokenises no such thing.\n\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x1mpme18 x1q7sp4o x15dekr4\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x1mh50ju\",\n    kfmiAY: \"x13dhofw\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"xqmr837\",\n    krdFHd: \"xz4iguh\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"x1nik15g x1q2w5h1 xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kUOVxO: \"x34s64n\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  months: {\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\nexport { calendarStyles };"],"mappings":";AAcA,MAAM,iBAAiB;CACrB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","cellDisabled","cellInRange","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","kVAM5u","ksu8eU","kMzoRj","chevron","kmuXW","kmVPX3","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — is marked as the\n// library's own where it is defined, since the page tokenises no such thing.\n\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x1mpme18 x1q7sp4o x15dekr4\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x1mh50ju\",\n    kfmiAY: \"x13dhofw\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"xqmr837\",\n    krdFHd: \"xz4iguh\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"x1nik15g x1q2w5h1 xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kUOVxO: \"x34s64n\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  months: {\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\nexport { calendarStyles };"],"mappings":";AAcA,MAAMM,iBAAiB;CACrBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZpB,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRc,OAAO;CACT;CACAE,aAAa;EACXrB,QAAQ;EACRE,QAAQ;EACRE,QAAQ;EACRM,QAAQ;EACRI,QAAQ;EACRK,OAAO;CACT;CACAG,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,cAAc;EACZ5B,QAAQ;EACRI,QAAQ;EACRe,OAAO;CACT;CACAU,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR5B,QAAQ;EACRe,OAAO;CACT;CACAc,SAAS;EACPlC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR8B,QAAQ;EACR7B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR4B,OAAO;EACPxB,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRhB,OAAO;CACT;CACAiB,cAAc;EACZnC,QAAQ;EACRS,QAAQ;EACR2B,QAAQ;EACRlB,OAAO;CACT;CACAmB,sBAAsB;EACpBD,QAAQ;EACRlB,OAAO;CACT;CACAoB,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACR/B,QAAQ;EACRS,OAAO;CACT;CACAuB,QAAQ;EACN3C,QAAQ;EACRO,QAAQ;EACRqC,QAAQ;EACRhC,QAAQ;EACRiC,QAAQ;EACRzB,OAAO;CACT;CACA0B,YAAY;EACV5C,QAAQ;EACRG,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRM,OAAO;CACT;CACA2B,SAAS;EACP1C,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRkC,QAAQ;EACRC,QAAQ;EACR7B,OAAO;CACT;CACA8B,QAAQ;EACN3C,QAAQ;EACRqC,QAAQ;EACRxB,OAAO;CACT;CACA+B,MAAM;EACJlD,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACR6C,QAAQ;EACRR,QAAQ;EACRjC,QAAQ;EACR0C,QAAQ;EACRjB,QAAQ;EACRhB,OAAO;CACT;AACF"}

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the two components that draw one:\n// Chip, which is a toggle on its own, and ChipGroup's chip, which is one of a\n// set that can also be removed. The measurements and roles are the page's\n// filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { chipStyles };"],"mappings":";AA+BA,MAAM,aAAa;CACjB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","chipStyles","base","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kjBf7l","kInvED","k3XXqK","kMeerF","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","remove","kzqmXN","kjj79g","k71WvV","kmVPX3","removeGlyph","selected","unselected"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the two components that draw one:\n// Chip, which is a toggle on its own, and ChipGroup's chip, which is one of a\n// set that can also be removed. The measurements and roles are the page's\n// filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { chipStyles };"],"mappings":";AA+BA,MAAMO,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRpB,QAAQ;EACRkB,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,QAAQ;EACN/B,QAAQ;EACR4B,QAAQ;EACR3B,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRqB,QAAQ;EACRpB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPwB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRX,OAAO;CACT;CACAY,aAAa;EACXnC,QAAQ;EACR+B,QAAQ;EACRR,OAAO;CACT;CACAa,UAAU;EACRT,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAc,YAAY;EACVV,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}

package/dist/components/app-bar/index.js

@@ -2,6 +2,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
 import Text from "../text/index.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/app-bar/index.tsx
 const HEADLINE_OFFSET = "12px";
@@ -81,48 +82,155 @@ const rowStyles = { root: (contentInset, maxInlineSize) => [_temp2, {
 * and `collapsed` exist. Neither watches the page: only the app knows which
 * element scrolls, so both are set from its own scroll handler.
 */
-function AppBar({ align = "start", collapsed = false, contentInset = DEFAULT_CONTENT_INSET, contentMaxInlineSize = "none", headline, leading, render, scrolled = false, size = "small", subtitle, trailing, ...props$1 }) {
-	const collapse = collapsed && size !== "small";
-	const expandedHeight = subtitle === void 0 || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;
-	const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;
-	return useRender({
-		defaultTagName: "header",
-		props: {
-			...props$1,
-			children: /* @__PURE__ */ jsxs("div", {
-				...props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize)),
+function AppBar(t0) {
+	const $ = c(39);
+	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		const { align: t6, collapsed: t7, contentInset: t8, contentMaxInlineSize: t9, headline, leading, render: t10, scrolled: t11, size: t12, subtitle, trailing, ...props$1 } = t0;
+		render = t10;
+		const align = t6 === void 0 ? "start" : t6;
+		const collapsed = t7 === void 0 ? false : t7;
+		const contentInset = t8 === void 0 ? DEFAULT_CONTENT_INSET : t8;
+		const contentMaxInlineSize = t9 === void 0 ? "none" : t9;
+		const scrolled = t11 === void 0 ? false : t11;
+		const size = t12 === void 0 ? "small" : t12;
+		const collapse = collapsed && size !== "small";
+		const expandedHeight = subtitle === void 0 || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;
+		const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;
+		t5 = useRender;
+		t4 = "header";
+		t1 = props$1;
+		let t13;
+		if ($[7] !== contentInset || $[8] !== contentMaxInlineSize) {
+			t13 = props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize));
+			$[7] = contentInset;
+			$[8] = contentMaxInlineSize;
+			$[9] = t13;
+		} else t13 = $[9];
+		let t14;
+		if ($[10] !== leading) {
+			t14 = leading === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				className: "x6s0dn4 x78zum5 x2lah0s xzoy561",
+				children: leading
+			});
+			$[10] = leading;
+			$[11] = t14;
+		} else t14 = $[11];
+		let t15;
+		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+			t15 = {
+				0: { className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02" },
+				1: { className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid" }
+			};
+			$[12] = t15;
+		} else t15 = $[12];
+		const t16 = t15[!!(align === "center") << 0];
+		let t17;
+		if ($[13] !== collapse || $[14] !== headline || $[15] !== size) {
+			t17 = headline === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+				className: "xioksi3 x1nxaspg x1seskgd",
+				render: HEADING_1,
+				variant: collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size],
+				children: headline
+			});
+			$[13] = collapse;
+			$[14] = headline;
+			$[15] = size;
+			$[16] = t17;
+		} else t17 = $[16];
+		let t18;
+		if ($[17] !== collapse || $[18] !== subtitle) {
+			t18 = subtitle === void 0 || collapse ? null : /* @__PURE__ */ jsx(Text, {
+				render: PARAGRAPH,
+				tone: "muted",
+				variant: "bodyMedium",
+				children: subtitle
+			});
+			$[17] = collapse;
+			$[18] = subtitle;
+			$[19] = t18;
+		} else t18 = $[19];
+		let t19;
+		if ($[20] !== t16 || $[21] !== t17 || $[22] !== t18) {
+			t19 = /* @__PURE__ */ jsxs("div", {
+				...t16,
+				children: [t17, t18]
+			});
+			$[20] = t16;
+			$[21] = t17;
+			$[22] = t18;
+			$[23] = t19;
+		} else t19 = $[23];
+		let t20;
+		if ($[24] !== trailing) {
+			t20 = trailing === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				className: "x6s0dn4 x78zum5 x2lah0s xzoy561",
+				children: trailing
+			});
+			$[24] = trailing;
+			$[25] = t20;
+		} else t20 = $[25];
+		if ($[26] !== t13 || $[27] !== t14 || $[28] !== t19 || $[29] !== t20) {
+			t2 = /* @__PURE__ */ jsxs("div", {
+				...t13,
 				children: [
-					leading === void 0 ? null : /* @__PURE__ */ jsx("div", {
-						className: "x6s0dn4 x78zum5 x2lah0s xzoy561",
-						children: leading
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						...{
-							0: { className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02" },
-							1: { className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid" }
-						}[!!(align === "center") << 0],
-						children: [headline === void 0 ? null : /* @__PURE__ */ jsx(Text, {
-							className: "xioksi3 x1nxaspg x1seskgd",
-							render: HEADING_1,
-							variant: collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size],
-							children: headline
-						}), subtitle === void 0 || collapse ? null : /* @__PURE__ */ jsx(Text, {
-							render: PARAGRAPH,
-							tone: "muted",
-							variant: "bodyMedium",
-							children: subtitle
-						})]
-					}),
-					trailing === void 0 ? null : /* @__PURE__ */ jsx("div", {
-						className: "x6s0dn4 x78zum5 x2lah0s xzoy561",
-						children: trailing
-					})
+					t14,
+					t19,
+					t20
 				]
-			}),
-			...mergeStyles(props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props$1)
-		},
-		render
-	});
+			});
+			$[26] = t13;
+			$[27] = t14;
+			$[28] = t19;
+			$[29] = t20;
+			$[30] = t2;
+		} else t2 = $[30];
+		t3 = mergeStyles(props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props$1);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+		t5 = $[6];
+	}
+	let t6;
+	if ($[31] !== t1 || $[32] !== t2 || $[33] !== t3) {
+		t6 = {
+			...t1,
+			children: t2,
+			...t3
+		};
+		$[31] = t1;
+		$[32] = t2;
+		$[33] = t3;
+		$[34] = t6;
+	} else t6 = $[34];
+	let t7;
+	if ($[35] !== render || $[36] !== t4 || $[37] !== t6) {
+		t7 = {
+			defaultTagName: t4,
+			props: t6,
+			render
+		};
+		$[35] = render;
+		$[36] = t4;
+		$[37] = t6;
+		$[38] = t7;
+	} else t7 = $[38];
+	return t5(t7);
 }
 //#endregion
 export { AppBar as default };

package/dist/components/app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1>. A bar nested somewhere that already has one can pass its own\n// heading as `headline` instead.\n// oxlint-disable-next-line jsx-a11y/heading-has-content -- filled by useRender\nconst HEADING_1 = <h1 />;\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"xioksi3 x1nxaspg x1seskgd\" render={HEADING_1} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","colors","motion","spacing","Text","HEADLINE_OFFSET","DEFAULT_CONTENT_INSET","HEIGHTS","large","plain","withSubtitle","medium","small","const","COLLAPSED_HEIGHT","styles","root","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","row","kOIVth","kzqmXN","kUOVxO","scrolled","HEADLINE_VARIANT","HEADING_1","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","kg3NbH","rowStyles","contentInset","maxInlineSize","AppBarProps","Omit","align","collapsed","contentMaxInlineSize","headline","leading","size","subtitle","trailing","AppBar","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","props","collapse","expandedHeight","height","t13","t14","t15","Symbol","for","0","className","1","t16","t17","t18","t19","t20","children","defaultTagName"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1>. A bar nested somewhere that already has one can pass its own\n// heading as `headline` instead.\n// oxlint-disable-next-line jsx-a11y/heading-has-content -- filled by useRender\nconst HEADING_1 = <h1 />;\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"xioksi3 x1nxaspg x1seskgd\" render={HEADING_1} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":";;;;;;;AA6BA,MAAMS,kBAAkB;AAKxB,MAAMC,wBAAwB;AAC9B,MAAMC,UAAU;CACdC,OAAO;EACLC,OAAO;EACPC,cAAc;CAChB;CACAC,QAAQ;EACNF,OAAO;EACPC,cAAc;CAChB;CACAE,OAAO;EACLH,OAAO;EACPC,cAAc;CAChB;AACF;AAMA,MAAMI,mBAAmBP,QAAQK,MAAMH;AACvC,MAAMM,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,KAAK;EACHT,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAK,UAAU;EACRZ,QAAQ;EACRO,OAAO;CACT;AACF;AAMA,MAAMM,mBAAmB;CACvBvB,OAAO;CACPG,QAAQ;CACRC,OAAO;AACT;AAMA,MAAMoB,YAAY,oBAAC,MAAD,CAAG,CAAA;AACrB,MAAMC,YAAY,oBAAC,KAAD,CAAE,CAAA;AAMpB,MAAMC,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,eAAe,EACnBpB,OAAOqB,iBAAyB,CAACH,OAAO,EACtC,sBAAqBI,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWF,YAAY,EAChH,CAAC,EACH;AAOA,MAAMG,SAAS;CACbC,QAAQ;CACRC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,YAAY,EAChB3B,OAAO4B,cAAsBC,kBAA0B,CAACL,QAAQ;CAC9D,uBAAsBF,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWM,aAAa;CAChH,uBAAsBP,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAW,QAAQK,aAAY,KAAMvC,gBAAe,EAAG;AACjJ,CAAC,EACH;;;;;;;;;;;;;;AAsGA,SAAAmD,OAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAgB,MAAA,EAAAT,OAAAkB,IAAAjB,WAAAkB,IAAAvB,cAAAwB,IAAAlB,sBAAAmB,IAAAlB,UAAAC,SAAAQ,QAAAU,KAAAxC,UAAAyC,KAAAlB,MAAAmB,KAAAlB,UAAAC,UAAA,GAAAkB,YAAAhB;EAAAG,SAAAU;EACd,MAAAtB,QAAAkB,OAAA3B,KAAAA,IAAA,UAAA2B;EACA,MAAAjB,YAAAkB,OAAA5B,KAAAA,IAAA,QAAA4B;EACA,MAAAvB,eAAAwB,OAAA7B,KAAAA,IAAAjC,wBAAA8D;EACA,MAAAlB,uBAAAmB,OAAA9B,KAAAA,IAAA,SAAA8B;EAIA,MAAAvC,WAAAyC,QAAAhC,KAAAA,IAAA,QAAAgC;EACA,MAAAlB,OAAAmB,QAAAjC,KAAAA,IAAA,UAAAiC;EAQA,MAAAE,WAAiBzB,aAAaI,SAAS;EACvC,MAAAsB,iBAAuBrB,aAAaf,KAAAA,KAAae,aAAa,OAAO/C,QAAQ8C,KAAK,CAAA5C,QAASF,QAAQ8C,KAAK,CAAA3C;EACxG,MAAAkE,SAAeF,WAAA5D,mBAAA6D;EACR5E,KAAAA;EACWiE,KAAA;EAEXS,KAAAA;EAAK,IAAAI;EAAA,IAAAnB,EAAA,OAAAd,gBAAAc,EAAA,OAAAR,sBAAA;GACW2B,MAAAhF,MAAakB,OAAMW,KAAMiB,UAAS3B,KAAM4B,cAAcM,oBAAoB,CAAC;GAACQ,EAAA,KAAAd;GAAAc,EAAA,KAAAR;GAAAQ,EAAA,KAAAmB;EAAA,OAAAA,MAAAnB,EAAA;EAAA,IAAAoB;EAAA,IAAApB,EAAA,QAAAN,SAAA;GAC1F0B,MAAA1B,YAAYb,KAAAA,IAAZ,OAA+B,oBAAA,OAAA;IAAe,WAAA;IAAmCa,UAAAA;GAAc,CAAA;GAAAM,EAAA,MAAAN;GAAAM,EAAA,MAAAoB;EAAA,OAAAA,MAAApB,EAAA;EAAA,IAAAqB;EAAA,IAAArB,EAAA,QAAAsB,OAAAC,IAAA,2BAAA,GAAA;GACvFF,MAAA;IAAAG,GACN,EAAAC,WACU,mEACb;IAACC,GACE,EAAAD,WACU,2EACb;GACF;GAACzB,EAAA,MAAAqB;EAAA,OAAAA,MAAArB,EAAA;EAPU,MAAA2B,MAAAN,IAOT,CAAC,EAAE/B,UAAU,aAAa;EAAE,IAAAsC;EAAA,IAAA5B,EAAA,QAAAgB,YAAAhB,EAAA,QAAAP,YAAAO,EAAA,QAAAL,MAAA;GACzBiC,MAAAnC,aAAaZ,KAAAA,IAAb,OAAgC,oBAAC,MAAD;IAAgB,WAAA;IAAoCP,QAAAA;IAAoB,SAAA0C,WAAW3C,iBAAgBnB,QAASmB,iBAAiBsB;IACzJF,UAAAA;GADiC,CAAA;GAE7BO,EAAA,MAAAgB;GAAAhB,EAAA,MAAAP;GAAAO,EAAA,MAAAL;GAAAK,EAAA,MAAA4B;EAAA,OAAAA,MAAA5B,EAAA;EAAA,IAAA6B;EAAA,IAAA7B,EAAA,QAAAgB,YAAAhB,EAAA,QAAAJ,UAAA;GACRiC,MAAAjC,aAAaf,KAAAA,KAAbmC,WAAA,OAA4C,oBAAC,MAAD;IAAczC,QAAAA;IAAgB,MAAA;IAAgB,SAAA;IACtFqB,UAAAA;GAD6C,CAAA;GAEzCI,EAAA,MAAAgB;GAAAhB,EAAA,MAAAJ;GAAAI,EAAA,MAAA6B;EAAA,OAAAA,MAAA7B,EAAA;EAAA,IAAA8B;EAAA,IAAA9B,EAAA,QAAA2B,OAAA3B,EAAA,QAAA4B,OAAA5B,EAAA,QAAA6B,KAAA;GAbXC,MAAA,qBAAA,OAAA;IAcM,GAdGH;IAAT,UAAA,CAQGC,KAGAC,GAGG;;GAAA7B,EAAA,MAAA2B;GAAA3B,EAAA,MAAA4B;GAAA5B,EAAA,MAAA6B;GAAA7B,EAAA,MAAA8B;EAAA,OAAAA,MAAA9B,EAAA;EAAA,IAAA+B;EAAA,IAAA/B,EAAA,QAAAH,UAAA;GACLkC,MAAAlC,aAAahB,KAAAA,IAAb,OAAgC,oBAAA,OAAA;IAAe,WAAA;IAAmCgB,UAAAA;GAAe,CAAA;GAAAG,EAAA,MAAAH;GAAAG,EAAA,MAAA+B;EAAA,OAAAA,MAAA/B,EAAA;EAAA,IAAAA,EAAA,QAAAmB,OAAAnB,EAAA,QAAAoB,OAAApB,EAAA,QAAA8B,OAAA9B,EAAA,QAAA+B,KAAA;GAjB5F3B,KAAA,qBAAA,OAAA;IAkBF,GAlBWe;IAAT,UAAA;KACLC;KACDU;KAeCC;IACG;;GAAA/B,EAAA,MAAAmB;GAAAnB,EAAA,MAAAoB;GAAApB,EAAA,MAAA8B;GAAA9B,EAAA,MAAA+B;GAAA/B,EAAA,MAAAI;EAAA,OAAAA,KAAAJ,EAAA;EACLK,KAAA/D,YAAYH,MAAakB,OAAMC,MAAOoB,aAAYpB,KAAM4D,MAAM,GAAG9C,YAAYf,OAAMe,QAAS,GAAG2C,OAAK;EAACf,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EArBnGG,KAAA;GAAA,GACFO;GAAKiB,UACE5B;GAkBF,GACLC;EACL;EAACL,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,UAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,IAAA;EAxBcC,KAAA;GAAAwB,gBACC3B;GAAQS,OACjBP;GAsBNN;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OA1BM3D,GAAUoE,EA0BhB;AAAC"}

package/dist/components/autocomplete/index.js

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Autocomplete, useFilter } from "react-aria-components";
 //#region src/components/autocomplete/index.tsx
 /**

package/dist/components/autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children"],"sources":["../../../src/components/autocomplete/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { AutocompleteProps as RACAutocompleteProps } from 'react-aria-components'\n\nimport {\n  Autocomplete as RACAutocomplete,\n  useFilter,\n} from 'react-aria-components'\n\n// The search page's search with suggestions, as the wrapper React Aria makes\n// it: a search input over a collection, where typing narrows what the\n// collection shows. It draws nothing of its own — the input is SearchField,\n// the collection is ListBox or Menu, and where the two sit is the page's\n// business, which is what lets the same wrapper be a searchable list, a\n// filtered menu and a command palette inside a Dialog.\n//\n// Every other component here is a shape; this one is a behaviour, so it\n// renders no element and takes no `className` or `style`. There is nothing\n// for them to land on, and a wrapper element added to give them somewhere\n// would be a layout decision this component has no business making — the\n// three shapes above want three different ones.\n//\n// One thing is added to React Aria's. **Filtering is on by default.** Their\n// wrapper filters nothing unless it is handed a predicate, on the grounds\n// that a collection fed from a server may already be filtered. A collection\n// written out in the page is the common case here, and a search box that\n// does not search is a puzzle rather than a default, so `filter` falls back\n// to the same locale-aware contains match ComboBox uses. A collection that\n// filters itself passes a predicate that always returns true.\n\n// React Aria's own filter signature. Taken from the prop rather than written\n// out, since its third parameter is a collection node whose type this package\n// does not depend on directly.\ntype AutocompleteFilter<T extends object = object> = NonNullable<\n  RACAutocompleteProps<T>['filter']\n>\n\ntype AutocompleteProps<T extends object = object> = {\n  /**\n   * The search input and the collection it filters, in whatever the page\n   * puts around them. React Aria needs both somewhere inside.\n   */\n  children?: ReactNode\n  /**\n   * Which options a search keeps. Defaults to a locale-aware contains match\n   * on each option's text — React Aria's own default is to filter nothing,\n   * which is right for a collection that arrives filtered and wrong for one\n   * written out in the page.\n   */\n  filter?: AutocompleteFilter<T>\n} & Omit<RACAutocompleteProps<T>, 'children' | 'filter'>\n\n/**\n * A search input that filters the collection under it. Its value is React\n * Aria's: pass `inputValue` with `onInputChange` to control what has been\n * typed, or `defaultInputValue` to let it keep its own.\n *\n * ```tsx\n * <Autocomplete>\n *   <SearchField label=\"Search\" placeholder=\"Search\" />\n *   <ListBox aria-label=\"Results\">\n *     <ListBox.Item id=\"first\">First item</ListBox.Item>\n *   </ListBox>\n * </Autocomplete>\n * ```\n *\n * It renders no element of its own, so the input and the collection sit\n * wherever the page puts them — side by side in a panel, in a `Menu.Content`,\n * or in a `Dialog` as a command palette. That is also why it takes no\n * `className` or `style`: there is nothing for them to land on.\n *\n * Keyboard focus stays in the input while the arrow keys move through the\n * collection, which is React Aria's virtual focus. `disableVirtualFocus`\n * turns that off and makes the collection tabbable instead.\n */\nfunction Autocomplete<T extends object = object>({\n  children,\n  filter,\n  ...props\n}: AutocompleteProps<T>) {\n  const { contains } = useFilter({ sensitivity: 'base' })\n\n  return (\n    <RACAutocomplete<T> filter={filter ?? containsFilter(contains)} {...props}>\n      {children}\n    </RACAutocomplete>\n  )\n}\n\n// React Aria's filter is handed the node as well as the two strings, which a\n// contains match has no use for. Built by a call rather than written inline\n// at the prop, which is what react-perf's no-new-function-as-prop is after;\n// the React Compiler memoises the result on its input.\nfunction containsFilter(\n  contains: (textValue: string, inputValue: string) => boolean,\n) {\n  return (textValue: string, inputValue: string) =>\n    contains(textValue, inputValue)\n}\n\nexport type { AutocompleteFilter, AutocompleteProps }\n\nexport default Autocomplete\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAA,eAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAiD,CAAA,CAAA,UAAA,QAAA,GAAA,SAAA;EAI1B,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,SAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACU,KAAA,EAAA,aAAe,OAAO;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAtD,MAAA,EAAA,aAAqB,UAAU,EAAuB;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,QAAA;EAGzB,KAAA,UAAU,eAAe,QAAQ;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,SAAA,EAAA,QAAA,IAAA;EAA9D,KAAA,oBAAC,cAAD;GAA4B,QAAA;GAAkC,GAAM;GACjE;EADa,CAAA;EAEE,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFlB;AAEkB;AAQtB,SAAS,eACP,UACA;CACA,QAAQ,WAAmB,eACzB,SAAS,WAAW,UAAU;AAClC"}
+{"version":3,"file":"index.js","names":["ReactNode","AutocompleteProps","RACAutocompleteProps","Autocomplete","RACAutocomplete","useFilter","AutocompleteFilter","NonNullable","T","children","filter","Omit","t0","$","_c","props","t1","Symbol","for","sensitivity","contains","t2","containsFilter","t3","textValue","inputValue"],"sources":["../../../src/components/autocomplete/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { AutocompleteProps as RACAutocompleteProps } from 'react-aria-components'\n\nimport {\n  Autocomplete as RACAutocomplete,\n  useFilter,\n} from 'react-aria-components'\n\n// The search page's search with suggestions, as the wrapper React Aria makes\n// it: a search input over a collection, where typing narrows what the\n// collection shows. It draws nothing of its own — the input is SearchField,\n// the collection is ListBox or Menu, and where the two sit is the page's\n// business, which is what lets the same wrapper be a searchable list, a\n// filtered menu and a command palette inside a Dialog.\n//\n// Every other component here is a shape; this one is a behaviour, so it\n// renders no element and takes no `className` or `style`. There is nothing\n// for them to land on, and a wrapper element added to give them somewhere\n// would be a layout decision this component has no business making — the\n// three shapes above want three different ones.\n//\n// One thing is added to React Aria's. **Filtering is on by default.** Their\n// wrapper filters nothing unless it is handed a predicate, on the grounds\n// that a collection fed from a server may already be filtered. A collection\n// written out in the page is the common case here, and a search box that\n// does not search is a puzzle rather than a default, so `filter` falls back\n// to the same locale-aware contains match ComboBox uses. A collection that\n// filters itself passes a predicate that always returns true.\n\n// React Aria's own filter signature. Taken from the prop rather than written\n// out, since its third parameter is a collection node whose type this package\n// does not depend on directly.\ntype AutocompleteFilter<T extends object = object> = NonNullable<\n  RACAutocompleteProps<T>['filter']\n>\n\ntype AutocompleteProps<T extends object = object> = {\n  /**\n   * The search input and the collection it filters, in whatever the page\n   * puts around them. React Aria needs both somewhere inside.\n   */\n  children?: ReactNode\n  /**\n   * Which options a search keeps. Defaults to a locale-aware contains match\n   * on each option's text — React Aria's own default is to filter nothing,\n   * which is right for a collection that arrives filtered and wrong for one\n   * written out in the page.\n   */\n  filter?: AutocompleteFilter<T>\n} & Omit<RACAutocompleteProps<T>, 'children' | 'filter'>\n\n/**\n * A search input that filters the collection under it. Its value is React\n * Aria's: pass `inputValue` with `onInputChange` to control what has been\n * typed, or `defaultInputValue` to let it keep its own.\n *\n * ```tsx\n * <Autocomplete>\n *   <SearchField label=\"Search\" placeholder=\"Search\" />\n *   <ListBox aria-label=\"Results\">\n *     <ListBox.Item id=\"first\">First item</ListBox.Item>\n *   </ListBox>\n * </Autocomplete>\n * ```\n *\n * It renders no element of its own, so the input and the collection sit\n * wherever the page puts them — side by side in a panel, in a `Menu.Content`,\n * or in a `Dialog` as a command palette. That is also why it takes no\n * `className` or `style`: there is nothing for them to land on.\n *\n * Keyboard focus stays in the input while the arrow keys move through the\n * collection, which is React Aria's virtual focus. `disableVirtualFocus`\n * turns that off and makes the collection tabbable instead.\n */\nfunction Autocomplete<T extends object = object>({\n  children,\n  filter,\n  ...props\n}: AutocompleteProps<T>) {\n  const { contains } = useFilter({ sensitivity: 'base' })\n\n  return (\n    <RACAutocomplete<T> filter={filter ?? containsFilter(contains)} {...props}>\n      {children}\n    </RACAutocomplete>\n  )\n}\n\n// React Aria's filter is handed the node as well as the two strings, which a\n// contains match has no use for. Built by a call rather than written inline\n// at the prop, which is what react-perf's no-new-function-as-prop is after;\n// the React Compiler memoises the result on its input.\nfunction containsFilter(\n  contains: (textValue: string, inputValue: string) => boolean,\n) {\n  return (textValue: string, inputValue: string) =>\n    contains(textValue, inputValue)\n}\n\nexport type { AutocompleteFilter, AutocompleteProps }\n\nexport default Autocomplete\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAAG,eAAAS,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAL;CAAA,IAAAC;CAAA,IAAAK;CAAA,IAAAF,EAAA,OAAAD,IAAA;EAAiD,CAAA,CAAAH,UAAAC,QAAA,GAAAK,SAAAH;EAI1BC,EAAA,KAAAD;EAAAC,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAE;CAAA,OAAA;EAAAN,WAAAI,EAAA;EAAAH,SAAAG,EAAA;EAAAE,QAAAF,EAAA;CAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAI,OAAAC,IAAA,2BAAA,GAAA;EACUF,KAAA,EAAAG,aAAe,OAAO;EAACN,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAtD,MAAA,EAAAO,aAAqBf,UAAUW,EAAuB;CAAC,IAAAK;CAAA,IAAAR,EAAA,OAAAO,YAAAP,EAAA,OAAAH,QAAA;EAGzBW,KAAAX,UAAUY,eAAeF,QAAQ;EAACP,EAAA,KAAAO;EAAAP,EAAA,KAAAH;EAAAG,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAJ,YAAAI,EAAA,OAAAE,SAAAF,EAAA,QAAAQ,IAAA;EAA9DE,KAAA,oBAAC,cAAD;GAA4B,QAAAF;GAAkC,GAAMN;GACjEN;EADa,CAAA;EAEEI,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;EAAAF,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFlBU;AAEkB;AAQtB,SAASD,eACPF,UACA;CACA,QAAQI,WAAmBC,eACzBL,SAASI,WAAWC,UAAU;AAClC"}

package/dist/components/avatar/index.js

@@ -2,6 +2,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
 import { useImageLoadingStatus } from "../../hooks/useImageLoadingStatus.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar/index.tsx
 const styles = {
@@ -68,23 +69,54 @@ const styles = {
 		$$css: true
 	}
 };
-function Avatar({ name, render, size = "md", src, tone = "primary", ...props$1 }) {
+function Avatar(t0) {
+	const $ = c(12);
+	const { name, render, size: t1, src, tone: t2, ...props$1 } = t0;
+	const size = t1 === void 0 ? "md" : t1;
+	const tone = t2 === void 0 ? "primary" : t2;
 	const status = useImageLoadingStatus(src);
-	return useRender({
-		defaultTagName: "span",
-		props: {
+	const t3 = "span";
+	const t4 = "img";
+	let t5;
+	if ($[0] !== name || $[1] !== src || $[2] !== status) {
+		t5 = status === "loaded" ? /* @__PURE__ */ jsx("img", {
+			alt: "",
+			src,
+			className: "x5yr21d xh8yej3 xl1xv1r"
+		}) : initialsFrom(name);
+		$[0] = name;
+		$[1] = src;
+		$[2] = status;
+		$[3] = t5;
+	} else t5 = $[3];
+	const t6 = mergeStyles(props(styles.base, styles[size], styles[tone]), props$1);
+	let t7;
+	if ($[4] !== name || $[5] !== props$1 || $[6] !== t5 || $[7] !== t6) {
+		t7 = {
 			"aria-label": name,
-			role: "img",
+			role: t4,
 			...props$1,
-			children: status === "loaded" ? /* @__PURE__ */ jsx("img", {
-				alt: "",
-				src,
-				className: "x5yr21d xh8yej3 xl1xv1r"
-			}) : initialsFrom(name),
-			...mergeStyles(props(styles.base, styles[size], styles[tone]), props$1)
-		},
-		render
-	});
+			children: t5,
+			...t6
+		};
+		$[4] = name;
+		$[5] = props$1;
+		$[6] = t5;
+		$[7] = t6;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== render || $[10] !== t7) {
+		t8 = {
+			defaultTagName: t3,
+			props: t7,
+			render
+		};
+		$[9] = render;
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	return useRender(t8);
 }
 function initialsFrom(name) {
 	const words = name.split(/\s+/u).filter(Boolean);

package/dist/components/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  // The photo is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the photo and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no photo, or none has loaded yet.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      'aria-label': name,\n      role: 'img',\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" /> : initialsFrom(name),\n      ...mergeStyles(stylex.props(styles.base, styles[size], styles[tone]), props)\n    },\n    render\n  });\n}\n\n// First letter of the first and last word, which handles both \"Ada\" and \"Ada\n// Lovelace\" without a separate prop for how many to take. Array.from rather\n// than indexing, so a name starting outside the Basic Multilingual Plane\n// yields its whole first character instead of half a surrogate pair.\nfunction initialsFrom(name: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = Array.from(words[0] ?? '')[0] ?? '';\n  const last = words.length > 1 ? Array.from(words.at(-1) ?? '')[0] ?? '' : '';\n  return `${first}${last}`.toLocaleUpperCase();\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":";;;;;;AAiBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAwBA,SAAS,OAAO,EACd,MACA,QACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACW;CAGd,MAAM,SAAS,sBAAsB,GAAG;CAQxC,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,cAAc;GACd,MAAM;GACN,GAAG;GACH,UAAU,WAAW,WAAW,oBAAC,OAAD;IAAK,KAAI;IAAQ;IAAK,WAAU;GAAyB,CAAA,IAAM,aAAa,IAAI;GAChH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,OAAO,OAAO,KAAK,GAAG,OAAK;EAC7E;EACA;CACF,CAAC;AACH;AAMA,SAAS,aAAa,MAAc;CAClC,MAAM,QAAQ,KAAK,MAAM,MAAM,CAAC,CAAC,OAAO,OAAO;CAC/C,IAAI,MAAM,WAAW,GACnB,OAAO;CAIT,OAAO,GAFO,MAAM,KAAK,MAAM,MAAM,EAAE,CAAC,CAAC,MAAM,KAClC,MAAM,SAAS,IAAI,MAAM,KAAK,MAAM,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,KAAK,KACjD,kBAAkB;AAC7C"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","image","kZKoxP","kzqmXN","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","AvatarProps","Omit","name","size","src","tone","Avatar","t0","$","_c","render","t1","t2","props","undefined","status","t3","t4","t5","initialsFrom","t6","t7","role","children","t8","defaultTagName","words","split","filter","Boolean","length","first","Array","from","last","at","toLocaleUpperCase"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  // The photo is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the photo and the initials can't be\n  // announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the initials\n  // shown when there is no photo, or none has loaded yet.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      'aria-label': name,\n      role: 'img',\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" /> : initialsFrom(name),\n      ...mergeStyles(stylex.props(styles.base, styles[size], styles[tone]), props)\n    },\n    render\n  });\n}\n\n// First letter of the first and last word, which handles both \"Ada\" and \"Ada\n// Lovelace\" without a separate prop for how many to take. Array.from rather\n// than indexing, so a name starting outside the Basic Multilingual Plane\n// yields its whole first character instead of half a surrogate pair.\nfunction initialsFrom(name: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = Array.from(words[0] ?? '')[0] ?? '';\n  const last = words.length > 1 ? Array.from(words.at(-1) ?? '')[0] ?? '' : '';\n  return `${first}${last}`.toLocaleUpperCase();\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":"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"}

package/dist/components/breadcrumbs/index.js

@@ -1,8 +1,8 @@
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import Link$1 from "../link/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Breadcrumb, Breadcrumbs } from "react-aria-components";
 //#region src/components/breadcrumbs/index.tsx
 /**