@nanisoft/prism-ui 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/blocks/cta-01/cta.d.ts +66 -6
  3. package/dist/blocks/cta-01/cta.d.ts.map +1 -1
  4. package/dist/blocks/cta-01/cta.js +8 -3
  5. package/dist/blocks/cta-01/index.d.ts +1 -0
  6. package/dist/blocks/cta-01/index.d.ts.map +1 -1
  7. package/dist/blocks/feature-grid-01/feature-grid.d.ts +57 -6
  8. package/dist/blocks/feature-grid-01/feature-grid.d.ts.map +1 -1
  9. package/dist/blocks/feature-grid-01/feature-grid.js +12 -2
  10. package/dist/blocks/feature-grid-01/index.d.ts +1 -0
  11. package/dist/blocks/feature-grid-01/index.d.ts.map +1 -1
  12. package/dist/blocks/hero-01/hero.d.ts +30 -1
  13. package/dist/blocks/hero-01/hero.d.ts.map +1 -1
  14. package/dist/blocks/hero-01/hero.js +14 -2
  15. package/dist/blocks/index.d.ts +10 -0
  16. package/dist/blocks/index.d.ts.map +1 -1
  17. package/dist/blocks/index.js +9 -0
  18. package/dist/blocks/instrument-panel-01/index.d.ts +3 -0
  19. package/dist/blocks/instrument-panel-01/index.d.ts.map +1 -0
  20. package/dist/blocks/instrument-panel-01/index.js +1 -0
  21. package/dist/blocks/instrument-panel-01/instrument-panel.d.ts +114 -0
  22. package/dist/blocks/instrument-panel-01/instrument-panel.d.ts.map +1 -0
  23. package/dist/blocks/instrument-panel-01/instrument-panel.js +64 -0
  24. package/dist/blocks/logo-strip-01/index.d.ts +3 -0
  25. package/dist/blocks/logo-strip-01/index.d.ts.map +1 -0
  26. package/dist/blocks/logo-strip-01/index.js +1 -0
  27. package/dist/blocks/logo-strip-01/logo-strip.d.ts +84 -0
  28. package/dist/blocks/logo-strip-01/logo-strip.d.ts.map +1 -0
  29. package/dist/blocks/logo-strip-01/logo-strip.js +40 -0
  30. package/dist/blocks/note-grid-01/index.d.ts +3 -0
  31. package/dist/blocks/note-grid-01/index.d.ts.map +1 -0
  32. package/dist/blocks/note-grid-01/index.js +1 -0
  33. package/dist/blocks/note-grid-01/note-grid.d.ts +79 -0
  34. package/dist/blocks/note-grid-01/note-grid.d.ts.map +1 -0
  35. package/dist/blocks/note-grid-01/note-grid.js +37 -0
  36. package/dist/blocks/pricing-01/pricing.js +1 -1
  37. package/dist/blocks/process-rail-01/index.d.ts +3 -0
  38. package/dist/blocks/process-rail-01/index.d.ts.map +1 -0
  39. package/dist/blocks/process-rail-01/index.js +1 -0
  40. package/dist/blocks/process-rail-01/process-rail.d.ts +99 -0
  41. package/dist/blocks/process-rail-01/process-rail.d.ts.map +1 -0
  42. package/dist/blocks/process-rail-01/process-rail.js +58 -0
  43. package/dist/blocks/product-grid-01/index.d.ts +3 -0
  44. package/dist/blocks/product-grid-01/index.d.ts.map +1 -0
  45. package/dist/blocks/product-grid-01/index.js +1 -0
  46. package/dist/blocks/product-grid-01/product-grid.d.ts +114 -0
  47. package/dist/blocks/product-grid-01/product-grid.d.ts.map +1 -0
  48. package/dist/blocks/product-grid-01/product-grid.js +51 -0
  49. package/dist/blocks/site-footer/index.d.ts +3 -0
  50. package/dist/blocks/site-footer/index.d.ts.map +1 -0
  51. package/dist/blocks/site-footer/index.js +1 -0
  52. package/dist/blocks/site-footer/site-footer.d.ts +135 -0
  53. package/dist/blocks/site-footer/site-footer.d.ts.map +1 -0
  54. package/dist/blocks/site-footer/site-footer.js +41 -0
  55. package/dist/blocks/site-header/index.d.ts +3 -0
  56. package/dist/blocks/site-header/index.d.ts.map +1 -0
  57. package/dist/blocks/site-header/index.js +1 -0
  58. package/dist/blocks/site-header/site-header.d.ts +142 -0
  59. package/dist/blocks/site-header/site-header.d.ts.map +1 -0
  60. package/dist/blocks/site-header/site-header.js +46 -0
  61. package/dist/blocks/stack-grid-01/index.d.ts +3 -0
  62. package/dist/blocks/stack-grid-01/index.d.ts.map +1 -0
  63. package/dist/blocks/stack-grid-01/index.js +1 -0
  64. package/dist/blocks/stack-grid-01/stack-grid.d.ts +118 -0
  65. package/dist/blocks/stack-grid-01/stack-grid.d.ts.map +1 -0
  66. package/dist/blocks/stack-grid-01/stack-grid.js +49 -0
  67. package/dist/blocks/status-ledger-01/index.d.ts +3 -0
  68. package/dist/blocks/status-ledger-01/index.d.ts.map +1 -0
  69. package/dist/blocks/status-ledger-01/index.js +1 -0
  70. package/dist/blocks/status-ledger-01/status-ledger.d.ts +131 -0
  71. package/dist/blocks/status-ledger-01/status-ledger.d.ts.map +1 -0
  72. package/dist/blocks/status-ledger-01/status-ledger.js +80 -0
  73. package/dist/catalog.d.ts.map +1 -1
  74. package/dist/catalog.js +170 -0
  75. package/dist/components/index.d.ts +11 -0
  76. package/dist/components/index.d.ts.map +1 -1
  77. package/dist/components/index.js +6 -0
  78. package/dist/components/ui/card.d.ts +25 -0
  79. package/dist/components/ui/card.d.ts.map +1 -1
  80. package/dist/components/ui/card.js +25 -0
  81. package/dist/components/ui/cta-link.d.ts +45 -0
  82. package/dist/components/ui/cta-link.d.ts.map +1 -0
  83. package/dist/components/ui/cta-link.js +81 -0
  84. package/dist/components/ui/diagram.d.ts +154 -0
  85. package/dist/components/ui/diagram.d.ts.map +1 -0
  86. package/dist/components/ui/diagram.js +150 -0
  87. package/dist/components/ui/fact-list.d.ts +90 -0
  88. package/dist/components/ui/fact-list.d.ts.map +1 -0
  89. package/dist/components/ui/fact-list.js +38 -0
  90. package/dist/components/ui/product-mark.d.ts +115 -0
  91. package/dist/components/ui/product-mark.d.ts.map +1 -0
  92. package/dist/components/ui/product-mark.js +82 -0
  93. package/dist/components/ui/product-switcher.d.ts +108 -0
  94. package/dist/components/ui/product-switcher.d.ts.map +1 -0
  95. package/dist/components/ui/product-switcher.js +47 -0
  96. package/dist/components/ui/prose.d.ts +88 -0
  97. package/dist/components/ui/prose.d.ts.map +1 -0
  98. package/dist/components/ui/prose.js +53 -0
  99. package/dist/components/ui/section.d.ts +24 -1
  100. package/dist/components/ui/section.d.ts.map +1 -1
  101. package/dist/components/ui/section.js +11 -2
  102. package/dist/components/ui/slider.d.ts.map +1 -1
  103. package/dist/components/ui/slider.js +7 -1
  104. package/dist/index.d.ts +24 -0
  105. package/dist/index.d.ts.map +1 -1
  106. package/dist/index.js +17 -0
  107. package/dist/pages/blog-post-page/index.d.ts +174 -0
  108. package/dist/pages/blog-post-page/index.d.ts.map +1 -0
  109. package/dist/pages/blog-post-page/index.js +49 -0
  110. package/dist/pages/index.d.ts +4 -0
  111. package/dist/pages/index.d.ts.map +1 -1
  112. package/dist/pages/index.js +2 -0
  113. package/dist/pages/not-found-page/index.d.ts +112 -0
  114. package/dist/pages/not-found-page/index.d.ts.map +1 -0
  115. package/dist/pages/not-found-page/index.js +46 -0
  116. package/dist/provider/provider.d.ts +5 -0
  117. package/dist/provider/provider.d.ts.map +1 -1
  118. package/dist/provider/provider.js +129 -38
  119. package/dist/provider/theme-script.d.ts +41 -3
  120. package/dist/provider/theme-script.d.ts.map +1 -1
  121. package/dist/provider/theme-script.js +68 -17
  122. package/dist/styles.css +493 -12
  123. package/dist/theming/index.d.ts +132 -2
  124. package/dist/theming/index.d.ts.map +1 -1
  125. package/dist/theming/index.js +127 -1
  126. package/package.json +14 -4
@@ -0,0 +1,131 @@
1
+ import { type HeadingLevel } from '../../components/ui/section';
2
+ /**
3
+ * The four tiers a StatusLedger01 row can be in.
4
+ *
5
+ * Four, and the fifth is refused deliberately. All four NaniSoft sites publish a
6
+ * ledger of the same kind - what a product can do today, what is designed, what
7
+ * is planned, and what is only a direction - and between them they use eight
8
+ * different words for those four states: `live`, `available` and `complete` all
9
+ * mean the same thing; `approved`, `specified` and `designed` all mean the next
10
+ * one; `planned` means the one after; and `direction` means a research direction
11
+ * that is explicitly not a capability. Eight words for four states is four tiers
12
+ * with a per-product vocabulary, and the vocabulary belongs in the row's
13
+ * `statusLabel`, not in the type.
14
+ *
15
+ * A fifth tier would be the one that splits a state that does not need splitting -
16
+ * `deprecated` over `retired`, or a `live` that is not `complete`. Each such tier
17
+ * is a colour a reader must learn and a word a maintainer must keep true, and a
18
+ * ladder with more rungs than states is how a status column stops being readable.
19
+ * The four below are the states; the words are the caller's.
20
+ */
21
+ export declare const STATUS_TIERS: readonly ["live", "designed", "planned", "direction"];
22
+ /**
23
+ * One of the four tiers a StatusLedger01 row is in.
24
+ */
25
+ export type StatusTier = (typeof STATUS_TIERS)[number];
26
+ /**
27
+ * One row of the ledger: a thing, the state it is in, the words for that state,
28
+ * and an optional list of what it does.
29
+ *
30
+ * `statusLabel` is required and separate from `status` because the tier is a
31
+ * colour and the words are a claim. A consumer that passed the tier alone would
32
+ * ship four identical-looking rows to a reader who cannot see colour at all, and
33
+ * a consumer that passed only the words would have no tier to draw.
34
+ */
35
+ export type StatusRow = {
36
+ /**
37
+ * The name of the thing: a use case, a capability, a stage, a direction. It is
38
+ * the anchor of the row, so it is the first thing a reader reads.
39
+ */
40
+ name: string;
41
+ /**
42
+ * Which of the four tiers the thing is in. This is what the dot is drawn from;
43
+ * it is not the text a reader sees. See `STATUS_TIERS`.
44
+ */
45
+ status: StatusTier;
46
+ /**
47
+ * The words for the tier, in the product's own vocabulary. Required, and
48
+ * deliberately not derived from `status`: a site that says "Flagship -
49
+ * available today" and a site that says "Live" are both describing the same
50
+ * tier, and neither word is Prism's to choose.
51
+ */
52
+ statusLabel: string;
53
+ /**
54
+ * The detail line under the name, when the row needs one sentence about what
55
+ * the thing does.
56
+ */
57
+ detail?: string;
58
+ /**
59
+ * The bullets the row lists, when the row needs more than one line. A list
60
+ * rather than a paragraph, because a row that lists four things and describes
61
+ * them in prose is a paragraph with a bullet glyph.
62
+ */
63
+ bullets?: readonly string[];
64
+ };
65
+ /**
66
+ * The props a StatusLedger01 takes.
67
+ *
68
+ * Every string is a prop and the Block ships none: no status word, no tier, no
69
+ * row and no bullet. A ledger that hardcoded "available" would make every
70
+ * consumer publish a claim about their own roadmap that they may not be able to
71
+ * keep.
72
+ */
73
+ export type StatusLedger01Props = {
74
+ /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
75
+ eyebrow?: string;
76
+ /** The section title. Omit it for a ledger composed under its own heading. */
77
+ title?: string;
78
+ /** One or two sentences under the title. */
79
+ description?: string;
80
+ /**
81
+ * The rows, in the order a reader should meet them. Order is the caller's
82
+ * because it is a claim about what matters first, and a ledger that sorted
83
+ * itself would be making that claim on the caller's behalf.
84
+ */
85
+ rows: readonly StatusRow[];
86
+ /**
87
+ * The line under the ledger, for the sentence that qualifies it: what is not
88
+ * here, or where to read more.
89
+ */
90
+ caption?: string;
91
+ /** Heading level for the section title. See `HeadingLevel`. */
92
+ headingLevel?: HeadingLevel;
93
+ };
94
+ /**
95
+ * A ledger of things and the state each is in: a hairline row per entry, a mark
96
+ * for the tier, and the words for the state beside the name.
97
+ *
98
+ * All four NaniSoft sites publish this section, and three of them publish it as a
99
+ * ledger of rows while the fourth publishes the same shape as a list of products;
100
+ * the ledger appears twice in the fourth site as well, once for use cases and
101
+ * once for research directions. Five ledgers across four sites, each one written
102
+ * by hand, each one re-deciding the same four things: which tier words to use,
103
+ * how the tier is drawn, whether the tier is announced, and whether the row
104
+ * carries a detail line or a bullet list.
105
+ *
106
+ * **The tier is four and the words are the caller's.** The `status` prop takes
107
+ * one of four tiers and the `statusLabel` prop takes the words. That split is the
108
+ * whole design: the tier is a colour, and colour is not information a reader can
109
+ * act on; the words are the information, and the words belong to the product. A
110
+ * Block that rendered the tier's own name would force one vocabulary on five
111
+ * products that between them already use eight, and a Block that took only the
112
+ * words would have nothing to draw.
113
+ *
114
+ * The mark is a ring around a fill rather than a filled dot, which is the
115
+ * contested shape this Block ships and the reason is a measurement: a filled
116
+ * pastel dot fails contrast against a light card, and a dot that fails contrast
117
+ * is a dot that does not exist for the reader it was meant to reassure. The ring
118
+ * is in the brand ink, the fill is the tier's own semantic token, and the whole
119
+ * mark is `aria-hidden`, so the row's `statusLabel` is the state a screen reader
120
+ * hears and a reader who cannot see the dot at all still gets the same fact.
121
+ *
122
+ * A row is a `li` inside an `ol`, so the ledger is a list in the document's
123
+ * outline rather than a grid of divs, and the detail line and the bullet list are
124
+ * the two shapes a row takes. A row with neither is a name and a state and is a
125
+ * valid row: most ledgers are mostly those.
126
+ *
127
+ * It is a server Component: no hook, no state, no client code and no router.
128
+ */
129
+ export declare function StatusLedger01({ eyebrow, title, description, rows, caption, headingLevel, }: StatusLedger01Props): import("react").JSX.Element;
130
+ export default StatusLedger01;
131
+ //# sourceMappingURL=status-ledger.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"status-ledger.d.ts","sourceRoot":"","sources":["../../../src/blocks/status-ledger-01/status-ledger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,uDAAwD,CAAA;AAEjF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAqBtD;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,MAAM,EAAE,UAAU,CAAA;IAClB;;;;;OAKG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC5B,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,IAAI,EAAE,SAAS,SAAS,EAAE,CAAA;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAmB,GACpB,EAAE,mBAAmB,+BAsDrB;AAED,eAAe,cAAc,CAAA"}
@@ -0,0 +1,80 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Section, SectionHeading } from '../../components/ui/section';
3
+ import { cn } from '../../lib/utils';
4
+ /**
5
+ * The four tiers a StatusLedger01 row can be in.
6
+ *
7
+ * Four, and the fifth is refused deliberately. All four NaniSoft sites publish a
8
+ * ledger of the same kind - what a product can do today, what is designed, what
9
+ * is planned, and what is only a direction - and between them they use eight
10
+ * different words for those four states: `live`, `available` and `complete` all
11
+ * mean the same thing; `approved`, `specified` and `designed` all mean the next
12
+ * one; `planned` means the one after; and `direction` means a research direction
13
+ * that is explicitly not a capability. Eight words for four states is four tiers
14
+ * with a per-product vocabulary, and the vocabulary belongs in the row's
15
+ * `statusLabel`, not in the type.
16
+ *
17
+ * A fifth tier would be the one that splits a state that does not need splitting -
18
+ * `deprecated` over `retired`, or a `live` that is not `complete`. Each such tier
19
+ * is a colour a reader must learn and a word a maintainer must keep true, and a
20
+ * ladder with more rungs than states is how a status column stops being readable.
21
+ * The four below are the states; the words are the caller's.
22
+ */
23
+ export const STATUS_TIERS = ['live', 'designed', 'planned', 'direction'];
24
+ /**
25
+ * The dot each tier draws, and the ring around it.
26
+ *
27
+ * The dot is `aria-hidden` and the row's words carry the state, so a tier is
28
+ * never colour alone: a reader who cannot separate success from warning still
29
+ * reads the label. The ring is `border-brand-ink` rather than `border-border`
30
+ * because the mark is a signal, and a signal that reads as a hairline on a card
31
+ * is not a signal. This is the mark the four sites draw by hand, and the reason
32
+ * it is a ring around a fill rather than a filled dot is a measurement: a filled
33
+ * pastel dot fails contrast against a light card, while a hairline ring in the
34
+ * brand ink does not.
35
+ */
36
+ const TIER_DOT = {
37
+ live: 'bg-success border-success',
38
+ designed: 'bg-warning border-warning',
39
+ planned: 'border-muted-foreground',
40
+ direction: 'border-border',
41
+ };
42
+ /**
43
+ * A ledger of things and the state each is in: a hairline row per entry, a mark
44
+ * for the tier, and the words for the state beside the name.
45
+ *
46
+ * All four NaniSoft sites publish this section, and three of them publish it as a
47
+ * ledger of rows while the fourth publishes the same shape as a list of products;
48
+ * the ledger appears twice in the fourth site as well, once for use cases and
49
+ * once for research directions. Five ledgers across four sites, each one written
50
+ * by hand, each one re-deciding the same four things: which tier words to use,
51
+ * how the tier is drawn, whether the tier is announced, and whether the row
52
+ * carries a detail line or a bullet list.
53
+ *
54
+ * **The tier is four and the words are the caller's.** The `status` prop takes
55
+ * one of four tiers and the `statusLabel` prop takes the words. That split is the
56
+ * whole design: the tier is a colour, and colour is not information a reader can
57
+ * act on; the words are the information, and the words belong to the product. A
58
+ * Block that rendered the tier's own name would force one vocabulary on five
59
+ * products that between them already use eight, and a Block that took only the
60
+ * words would have nothing to draw.
61
+ *
62
+ * The mark is a ring around a fill rather than a filled dot, which is the
63
+ * contested shape this Block ships and the reason is a measurement: a filled
64
+ * pastel dot fails contrast against a light card, and a dot that fails contrast
65
+ * is a dot that does not exist for the reader it was meant to reassure. The ring
66
+ * is in the brand ink, the fill is the tier's own semantic token, and the whole
67
+ * mark is `aria-hidden`, so the row's `statusLabel` is the state a screen reader
68
+ * hears and a reader who cannot see the dot at all still gets the same fact.
69
+ *
70
+ * A row is a `li` inside an `ol`, so the ledger is a list in the document's
71
+ * outline rather than a grid of divs, and the detail line and the bullet list are
72
+ * the two shapes a row takes. A row with neither is a name and a state and is a
73
+ * valid row: most ledgers are mostly those.
74
+ *
75
+ * It is a server Component: no hook, no state, no client code and no router.
76
+ */
77
+ export function StatusLedger01({ eyebrow, title, description, rows, caption, headingLevel = 'h2', }) {
78
+ return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("ol", { "data-slot": "status-ledger", className: "flex flex-col", children: rows.map((row) => (_jsxs("li", { "data-slot": "status-ledger-row", "data-status": row.status, className: "border-border flex flex-col gap-2 border-b py-5 first:border-t sm:flex-row sm:items-baseline sm:gap-6", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-3 sm:w-64", children: [_jsx("span", { "aria-hidden": true, "data-tier": row.status, className: cn('border-brand-ink inline-block size-3 shrink-0 rounded-full border', TIER_DOT[row.status]) }), _jsx("span", { className: "text-sm font-semibold", children: row.name })] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: row.statusLabel }), row.detail ? (_jsx("span", { className: "text-muted-foreground text-pretty text-sm", children: row.detail })) : null, row.bullets && row.bullets.length > 0 ? (_jsx("ul", { className: "text-muted-foreground mt-1 flex list-disc flex-col gap-1 pl-5 text-sm", children: row.bullets.map((bullet) => (_jsx("li", { children: bullet }, bullet))) })) : null] })] }, row.name))) }), caption ? _jsx("p", { className: "text-muted-foreground mt-6 text-pretty text-sm", children: caption }) : null] }));
79
+ }
80
+ export default StatusLedger01;
@@ -1 +1 @@
1
- {"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../src/catalog.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,aAAa,yCAA0C,CAAA;AACpE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAExD,eAAO,MAAM,oBAAoB,sHAQvB,CAAA;AACV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAErE,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,MAAM,EAAE,QAAQ,GAAG,YAAY,CAAA;CAChC;AAED,eAAO,MAAM,OAAO,EAAE,SAAS,WAAW,EAiezC,CAAA;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,KAAK,GAAE,SAAS,WAAW,EAAY,GAAG,WAAW,EAAE,CAEnF;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,MAAM,EAAE,WAAW,CAE1D,CAAA"}
1
+ {"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../src/catalog.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,aAAa,yCAA0C,CAAA;AACpE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAExD,eAAO,MAAM,oBAAoB,sHAQvB,CAAA;AACV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAErE,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,MAAM,EAAE,QAAQ,GAAG,YAAY,CAAA;CAChC;AAED,eAAO,MAAM,OAAO,EAAE,SAAS,WAAW,EA0pBzC,CAAA;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,KAAK,GAAE,SAAS,WAAW,EAAY,GAAG,WAAW,EAAE,CAEnF;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,MAAM,EAAE,WAAW,CAE1D,CAAA"}
package/dist/catalog.js CHANGED
@@ -28,6 +28,16 @@ export const catalog = [
28
28
  exports: ['Button'],
29
29
  status: 'stable',
30
30
  },
31
+ {
32
+ name: 'CtaLink',
33
+ slug: 'cta-link',
34
+ kind: 'component',
35
+ category: 'Call to action',
36
+ description: 'The call to action that goes somewhere: a native link carrying the weight of a button.',
37
+ source: 'src/components/ui/cta-link.tsx',
38
+ exports: ['CtaLink'],
39
+ status: 'stable',
40
+ },
31
41
  {
32
42
  name: 'Badge',
33
43
  slug: 'badge',
@@ -192,6 +202,56 @@ export const catalog = [
192
202
  exports: ['Kbd'],
193
203
  status: 'stable',
194
204
  },
205
+ {
206
+ name: 'Diagram',
207
+ slug: 'diagram',
208
+ kind: 'component',
209
+ category: 'Data display',
210
+ description: 'Named things and the labelled relations between them, drawn as inline vector markup whose every stroke and fill is a token.',
211
+ source: 'src/components/ui/diagram.tsx',
212
+ exports: ['Diagram'],
213
+ status: 'stable',
214
+ },
215
+ {
216
+ name: 'ProductMark',
217
+ slug: 'product-mark',
218
+ kind: 'component',
219
+ category: 'Data display',
220
+ description: "A product's two-part colour mark: a brand-ink ring around the pack's own fill, beside the product's name in the brand ink.",
221
+ source: 'src/components/ui/product-mark.tsx',
222
+ exports: ['ProductMark'],
223
+ status: 'stable',
224
+ },
225
+ {
226
+ name: 'Prose',
227
+ slug: 'prose',
228
+ kind: 'component',
229
+ category: 'Typography',
230
+ description: 'Consumer-authored body copy held to the reading measure and to the block rhythm, so a document does not restate either.',
231
+ source: 'src/components/ui/prose.tsx',
232
+ exports: ['Prose'],
233
+ status: 'stable',
234
+ },
235
+ {
236
+ name: 'FactList',
237
+ slug: 'fact-list',
238
+ kind: 'component',
239
+ category: 'Data display',
240
+ description: 'A short list of named facts as a definition list, where a value may be a link and the term column stays aligned down its length.',
241
+ source: 'src/components/ui/fact-list.tsx',
242
+ exports: ['FactList'],
243
+ status: 'stable',
244
+ },
245
+ {
246
+ name: 'ProductSwitcher',
247
+ slug: 'product-switcher',
248
+ kind: 'component',
249
+ category: 'Layout',
250
+ description: 'A switch between the members of a set of products, each drawn with its own ProductMark and the current one marked aria-current.',
251
+ source: 'src/components/ui/product-switcher.tsx',
252
+ exports: ['ProductSwitcher'],
253
+ status: 'stable',
254
+ },
195
255
  {
196
256
  name: 'Select',
197
257
  slug: 'select',
@@ -454,6 +514,96 @@ export const catalog = [
454
514
  exports: ['AppShell01'],
455
515
  status: 'stable',
456
516
  },
517
+ {
518
+ name: 'ProcessRail01',
519
+ slug: 'process-rail-01',
520
+ kind: 'block',
521
+ category: null,
522
+ description: 'A process drawn as a rail: two, three or four steps on one line, each with an ordinal, a name and one caption.',
523
+ source: 'src/blocks/process-rail-01/index.tsx',
524
+ exports: ['ProcessRail01'],
525
+ status: 'stable',
526
+ },
527
+ {
528
+ name: 'StatusLedger01',
529
+ slug: 'status-ledger-01',
530
+ kind: 'block',
531
+ category: null,
532
+ description: 'A ledger of things and the state each is in: a name, one of four status tiers and the words for that tier.',
533
+ source: 'src/blocks/status-ledger-01/index.tsx',
534
+ exports: ['StatusLedger01'],
535
+ status: 'stable',
536
+ },
537
+ {
538
+ name: 'ProductGrid01',
539
+ slug: 'product-grid-01',
540
+ kind: 'block',
541
+ category: null,
542
+ description: 'A set of products as hairline rows: a two-part ProductMark, a name, one tagline and a destination per row.',
543
+ source: 'src/blocks/product-grid-01/index.tsx',
544
+ exports: ['ProductGrid01'],
545
+ status: 'stable',
546
+ },
547
+ {
548
+ name: 'StackGrid01',
549
+ slug: 'stack-grid-01',
550
+ kind: 'block',
551
+ category: null,
552
+ description: 'A survey of what a product is assembled from, and a second grid of what it built itself.',
553
+ source: 'src/blocks/stack-grid-01/index.tsx',
554
+ exports: ['StackGrid01'],
555
+ status: 'stable',
556
+ },
557
+ {
558
+ name: 'LogoStrip01',
559
+ slug: 'logo-strip-01',
560
+ kind: 'block',
561
+ category: null,
562
+ description: 'A single line of short phrases: the transition band between a hero and the section that follows it.',
563
+ source: 'src/blocks/logo-strip-01/index.tsx',
564
+ exports: ['LogoStrip01'],
565
+ status: 'stable',
566
+ },
567
+ {
568
+ name: 'NoteGrid01',
569
+ slug: 'note-grid-01',
570
+ kind: 'block',
571
+ category: null,
572
+ description: 'A grid of short points: a title and a sentence or two, with no tile and no icon.',
573
+ source: 'src/blocks/note-grid-01/index.tsx',
574
+ exports: ['NoteGrid01'],
575
+ status: 'stable',
576
+ },
577
+ {
578
+ name: 'InstrumentPanel01',
579
+ slug: 'instrument-panel-01',
580
+ kind: 'block',
581
+ category: null,
582
+ description: 'A bordered panel with a titled bar, a state dot with the words beside it, and a slot for the instrument.',
583
+ source: 'src/blocks/instrument-panel-01/index.tsx',
584
+ exports: ['InstrumentPanel01'],
585
+ status: 'stable',
586
+ },
587
+ {
588
+ name: 'SiteHeader',
589
+ slug: 'site-header',
590
+ kind: 'block',
591
+ category: null,
592
+ description: 'The bar at the top of a product site: a brand lockup, an optional product switcher, the site navigation and a slot for application controls.',
593
+ source: 'src/blocks/site-header/index.tsx',
594
+ exports: ['SiteHeader'],
595
+ status: 'stable',
596
+ },
597
+ {
598
+ name: 'SiteFooter',
599
+ slug: 'site-footer',
600
+ kind: 'block',
601
+ category: null,
602
+ description: 'The block at the foot of a product site: a brand lockup, grouped destinations, the links that leave the site and a slot for the legal line.',
603
+ source: 'src/blocks/site-footer/index.tsx',
604
+ exports: ['SiteFooter'],
605
+ status: 'stable',
606
+ },
457
607
  {
458
608
  name: 'MarketingPage',
459
609
  slug: 'marketing-page',
@@ -494,6 +644,26 @@ export const catalog = [
494
644
  exports: ['AuthPage'],
495
645
  status: 'stable',
496
646
  },
647
+ {
648
+ name: 'NotFoundPage',
649
+ slug: 'not-found-page',
650
+ kind: 'page',
651
+ category: null,
652
+ description: 'A complete not-found screen: the status code as the heading of the page, one sentence about what happened, and the ways out.',
653
+ source: 'src/pages/not-found-page/index.tsx',
654
+ exports: ['NotFoundPage'],
655
+ status: 'stable',
656
+ },
657
+ {
658
+ name: 'BlogPostPage',
659
+ slug: 'blog-post-page',
660
+ kind: 'page',
661
+ category: null,
662
+ description: 'A complete blog post screen: title, standfirst, byline with both the display and the machine date, the body at the measure and the trail to the neighbouring posts.',
663
+ source: 'src/pages/blog-post-page/index.tsx',
664
+ exports: ['BlogPostPage'],
665
+ status: 'stable',
666
+ },
497
667
  ];
498
668
  /** Returns the catalogue ordered for display and keyed for lookup. */
499
669
  export function buildCatalog(items = catalog) {
@@ -8,6 +8,7 @@
8
8
  * `components/card-header` subpath.
9
9
  */
10
10
  export { Button } from './ui/button';
11
+ export { CtaLink } from './ui/cta-link';
11
12
  export { Badge } from './ui/badge';
12
13
  export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, } from './ui/card';
13
14
  export { Section, SectionHeading } from './ui/section';
@@ -24,6 +25,16 @@ export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableC
24
25
  export { Heading, Text } from './ui/typography';
25
26
  export type { HeadingElement } from './ui/typography';
26
27
  export { Kbd } from './ui/kbd';
28
+ export { Diagram } from './ui/diagram';
29
+ export type { DiagramProps, DiagramNode, DiagramRelation } from './ui/diagram';
30
+ export { ProductMark } from './ui/product-mark';
31
+ export type { ProductMarkProps, ProductMarkSize } from './ui/product-mark';
32
+ export { Prose } from './ui/prose';
33
+ export type { ProseProps, ProseSize } from './ui/prose';
34
+ export { FactList } from './ui/fact-list';
35
+ export type { FactListProps, Fact } from './ui/fact-list';
36
+ export { ProductSwitcher } from './ui/product-switcher';
37
+ export type { ProductSwitcherProps, SwitcherProduct } from './ui/product-switcher';
27
38
  export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, } from './ui/select';
28
39
  export type { SelectProps, SelectTriggerProps, SelectValueProps } from './ui/select';
29
40
  export { Checkbox } from './ui/checkbox';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
@@ -8,6 +8,7 @@
8
8
  * `components/card-header` subpath.
9
9
  */
10
10
  export { Button } from './ui/button';
11
+ export { CtaLink } from './ui/cta-link';
11
12
  export { Badge } from './ui/badge';
12
13
  export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, } from './ui/card';
13
14
  export { Section, SectionHeading } from './ui/section';
@@ -22,6 +23,11 @@ export { Separator } from './ui/separator';
22
23
  export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from './ui/table';
23
24
  export { Heading, Text } from './ui/typography';
24
25
  export { Kbd } from './ui/kbd';
26
+ export { Diagram } from './ui/diagram';
27
+ export { ProductMark } from './ui/product-mark';
28
+ export { Prose } from './ui/prose';
29
+ export { FactList } from './ui/fact-list';
30
+ export { ProductSwitcher } from './ui/product-switcher';
25
31
  export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, } from './ui/select';
26
32
  export { Checkbox } from './ui/checkbox';
27
33
  export { RadioGroup, RadioGroupItem } from './ui/radio-group';
@@ -7,10 +7,35 @@ import type { ComponentProps } from 'react';
7
7
  * subpaths.
8
8
  */
9
9
  declare function Card({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
10
+ /**
11
+ * The head of a card: the row above the card's content.
12
+ *
13
+ * A part rather than an Item, and it stays inside this module: `CardHeader` is not
14
+ * a second catalogue entry, and DESIGN.md's authoring contract says compound parts
15
+ * ship from their parent module and do not form a second vocabulary.
16
+ */
10
17
  declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
18
+ /**
19
+ * The card's title: the one line that names the group of related content.
20
+ *
21
+ * Renders a `div` rather than a heading, because a card's title is not always the
22
+ * heading of the region it sits in: four cards in a grid are four titles under one
23
+ * section heading, and four `h3`s under one `h2` is right while four `h2`s is
24
+ * four sections. Pass Prism's `Heading` inside it when the card is the only thing
25
+ * in its region and the outline should say so.
26
+ */
11
27
  declare function CardTitle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
28
+ /**
29
+ * The supporting line under a card's title: one sentence about what the card
30
+ * holds.
31
+ */
12
32
  declare function CardDescription({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
33
+ /** The card's body: the content the title and description introduce. */
13
34
  declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
35
+ /**
36
+ * The foot of a card: the actions that belong to the card rather than to the
37
+ * page.
38
+ */
14
39
  declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
15
40
  export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
16
41
  //# sourceMappingURL=card.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;;GAMG;AACH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAW3D;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAWjE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQhE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQtE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAElE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQjE;AAED,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,CAAA"}
1
+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;;GAMG;AACH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAW3D;AAED;;;;;;GAMG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAWjE;AAED;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQhE;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQtE;AAED,wEAAwE;AACxE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAElE;AAED;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQjE;AAED,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,CAAA"}
@@ -10,18 +10,43 @@ import { cn } from '../../lib/utils';
10
10
  function Card({ className, ...props }) {
11
11
  return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), ...props }));
12
12
  }
13
+ /**
14
+ * The head of a card: the row above the card's content.
15
+ *
16
+ * A part rather than an Item, and it stays inside this module: `CardHeader` is not
17
+ * a second catalogue entry, and DESIGN.md's authoring contract says compound parts
18
+ * ship from their parent module and do not form a second vocabulary.
19
+ */
13
20
  function CardHeader({ className, ...props }) {
14
21
  return (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header grid auto-rows-min items-start gap-1.5 px-6', className), ...props }));
15
22
  }
23
+ /**
24
+ * The card's title: the one line that names the group of related content.
25
+ *
26
+ * Renders a `div` rather than a heading, because a card's title is not always the
27
+ * heading of the region it sits in: four cards in a grid are four titles under one
28
+ * section heading, and four `h3`s under one `h2` is right while four `h2`s is
29
+ * four sections. Pass Prism's `Heading` inside it when the card is the only thing
30
+ * in its region and the outline should say so.
31
+ */
16
32
  function CardTitle({ className, ...props }) {
17
33
  return (_jsx("div", { "data-slot": "card-title", className: cn('font-semibold leading-none', className), ...props }));
18
34
  }
35
+ /**
36
+ * The supporting line under a card's title: one sentence about what the card
37
+ * holds.
38
+ */
19
39
  function CardDescription({ className, ...props }) {
20
40
  return (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
21
41
  }
42
+ /** The card's body: the content the title and description introduce. */
22
43
  function CardContent({ className, ...props }) {
23
44
  return _jsx("div", { "data-slot": "card-content", className: cn('px-6', className), ...props });
24
45
  }
46
+ /**
47
+ * The foot of a card: the actions that belong to the card rather than to the
48
+ * page.
49
+ */
25
50
  function CardFooter({ className, ...props }) {
26
51
  return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center px-6', className), ...props }));
27
52
  }
@@ -0,0 +1,45 @@
1
+ import { type VariantProps } from 'class-variance-authority';
2
+ import type { ComponentProps } from 'react';
3
+ declare const ctaLinkVariants: (props?: ({
4
+ variant?: "default" | "outline" | "secondary" | "ghost" | null | undefined;
5
+ size?: "default" | "sm" | "lg" | null | undefined;
6
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
+ export type CtaLinkProps = Omit<ComponentProps<'a'>, 'href' | 'target'> & VariantProps<typeof ctaLinkVariants> & {
8
+ /**
9
+ * The destination. Required, because an anchor without one is not a link: a
10
+ * screen reader announces no destination, the middle-click and open-in-new-tab
11
+ * affordances go quiet, and the control is a button that cannot act.
12
+ */
13
+ href: string;
14
+ /**
15
+ * Opens the destination in a new browsing context. This is the only way to
16
+ * ask for one: `target` is not accepted, so the safe relationship below
17
+ * cannot be opted out of by accident.
18
+ *
19
+ * Prism does not decide what counts as external. A destination on another
20
+ * origin is not automatically a new tab, and a destination on this origin is
21
+ * not automatically the same tab, so the caller declares it.
22
+ */
23
+ newTab?: boolean;
24
+ };
25
+ /**
26
+ * The call to action that goes somewhere.
27
+ *
28
+ * Renders a native `<a>`, so assistive technology announces a link and the
29
+ * browser's own link affordances all work: a status bar showing the destination,
30
+ * a context menu to copy it, middle-click to open a new tab. `Button` cannot
31
+ * offer any of that, and a call to action that is a button is announced as a
32
+ * command that does nothing.
33
+ *
34
+ * It is a Component in its own right rather than a mode of `Button`, which is the
35
+ * answer `BreadcrumbLink` and `PaginationLink` already give twice in this
36
+ * package. The two carry the same visual weight as the button they replace, so
37
+ * the only difference on screen is that this one has a destination.
38
+ *
39
+ * When `newTab` is set, `rel` defaults to `noopener noreferrer`, so the opened
40
+ * document cannot reach back through `window.opener` or read the referrer. A
41
+ * consumer that needs a different relationship passes `rel` and it wins.
42
+ */
43
+ declare function CtaLink({ className, variant, size, href, newTab, rel, ...props }: CtaLinkProps): import("react").JSX.Element;
44
+ export { CtaLink };
45
+ //# sourceMappingURL=cta-link.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cta-link.d.ts","sourceRoot":"","sources":["../../../src/components/ui/cta-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AA0B3C,QAAA,MAAM,eAAe;;;8EAsCpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,GACrE,YAAY,CAAC,OAAO,eAAe,CAAC,GAAG;IACrC;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAc,EACd,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAWd;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}