@hintoric/email 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,54 @@
-# Temporary Holding Version
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://cdn.hintoric.com/assets/logo/white.svg" />
+    <source media="(prefers-color-scheme: light)" srcset="https://cdn.hintoric.com/assets/logo/black.svg" />
+    <img src="https://cdn.hintoric.com/assets/logo/black.svg" alt="hintoric" width="240" />
+  </picture>
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<p align="center">
+  Transactional email components in <a href="https://www.npmjs.com/package/@hintoric/ui">@hintoric/ui</a>'s look, built on <a href="https://react.email">react-email</a>.
+</p>
+
+## What this is
+
+Mail clients understand neither Tailwind classes nor CSS variables, and run no JavaScript, so
+`@hintoric/ui`'s components can't be sent as they are. `@hintoric/email` has email counterparts of
+the most important ones — `Typography`, `Button`, `Link`, `Divider`,
+`Card`, `Avatar` and `Chip` — with the same `variant`, `color` and `size` props,
+rendered as tables and inline styles. A visual test suite compares every variant × colour of each
+against its web component in light and dark.
+
+It also ships `Layout` (a message framed like hintoric's auth screens), `renderEmail` and
+ready-made templates such as `SecurityActivityAlertEmail`.
+
+## Install
+
+```bash
+npm install @hintoric/email
+```
+
+## Usage
+
+```tsx
+import { Layout, Typography, Button, renderEmail } from '@hintoric/email';
+
+const { html, text } = await renderEmail(
+  <Layout lang="de" preview="Neue Anmeldung" footer="Muster GmbH · Musterstraße 1">
+    <Typography level="h3" component="h1" textAlign="center">
+      Neue Anmeldung
+    </Typography>
+    <Button href="https://app.example.com/security" size="lg" fullWidth>
+      Aktivität prüfen
+    </Button>
+  </Layout>,
+);
+```
+
+## Docs
+
+Components, templates and live previews: [ui.hintoric.dev/email](https://ui.hintoric.dev/email)
+
+## License
+
+MIT

package/dist/components/Avatar.d.ts

@@ -0,0 +1,37 @@
+import { EmailColor, EmailVariant } from '../tokens';
+import * as React from 'react';
+/** avatarVariants.ts: 32/40/48px boxes, text-sm/base/lg, medium/medium/semibold. */
+declare const SIZES: {
+    readonly sm: {
+        readonly box: 32;
+        readonly fontSize: "14px";
+        readonly fontWeight: 500;
+    };
+    readonly md: {
+        readonly box: 40;
+        readonly fontSize: "16px";
+        readonly fontWeight: 500;
+    };
+    readonly lg: {
+        readonly box: 48;
+        readonly fontSize: "18px";
+        readonly fontWeight: 600;
+    };
+};
+export interface AvatarProps {
+    variant?: EmailVariant;
+    color?: EmailColor;
+    size?: keyof typeof SIZES;
+    /** An https image. Without one, `children` (usually initials) is shown. */
+    src?: string;
+    alt?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Avatar for email, defaulting to soft / neutral like the web Avatar. Unlike
+ * Card, outlined and plain stay transparent — Joy's Avatar has no surface
+ * fallback. The initials are centred by a table cell, since email has no flexbox.
+ */
+export declare function Avatar({ variant, color, size, src, alt, children }: AvatarProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA6B,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAG1F,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;CAID,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,OAAgB,EAAE,KAAiB,EAAE,IAAW,EAAE,GAAG,EAAE,GAAQ,EAAE,QAAQ,EAAE,EAAE,WAAW,qBAwChH"}

package/dist/components/Button.d.ts

@@ -0,0 +1,39 @@
+import { EmailColor, EmailVariant } from '../tokens';
+import * as React from 'react';
+declare const SIZES: {
+    readonly sm: {
+        readonly minHeight: 32;
+        readonly paddingInline: 12;
+        readonly fontSize: 14;
+        readonly lineHeight: 21;
+    };
+    readonly md: {
+        readonly minHeight: 36;
+        readonly paddingInline: 16;
+        readonly fontSize: 14;
+        readonly lineHeight: 21;
+    };
+    readonly lg: {
+        readonly minHeight: 44;
+        readonly paddingInline: 24;
+        readonly fontSize: 16;
+        readonly lineHeight: 24;
+    };
+};
+export interface ButtonProps {
+    /** Rendered only for http(s) URLs; anything else renders nothing — a button nobody can follow is worse than none. */
+    href: string;
+    variant?: EmailVariant;
+    color?: EmailColor;
+    size?: keyof typeof SIZES;
+    /** `rounded-full`, as on the web Button. */
+    pill?: boolean;
+    /** Stretches to the container — the usual call-to-action layout in a narrow email. */
+    fullWidth?: boolean;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+/** Button for email: a link styled as the web Button, built on react-email's Outlook-safe Button. */
+export declare function Button({ href, variant, color, size, pill, fullWidth, style, children }: ButtonProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA0C,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AASvG,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;CAID,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,qHAAqH;IACrH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,qGAAqG;AACrG,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,OAAiB,EAAE,KAAiB,EAAE,IAAW,EAAE,IAAY,EAAE,SAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,WAAW,4BA0ChJ"}

package/dist/components/Card.d.ts

@@ -0,0 +1,17 @@
+import { EmailColor, EmailVariant } from '../tokens';
+import * as React from 'react';
+export interface CardProps {
+    variant?: EmailVariant;
+    color?: EmailColor;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * Card for email: Sheet's variant colours plus Card's own `rounded-md p-4`,
+ * defaulting to outlined / neutral like the web Card. Outlined and plain fill
+ * with `surface`, as Joy's Sheet does. A one-cell table, because that is the
+ * only box Outlook pads reliably; Card's `gap-2` has no email equivalent, so
+ * spacing between children is theirs to set.
+ */
+export declare function Card({ variant, color, style, children }: CardProps): React.JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAwD,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAErH,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EAAE,OAAoB,EAAE,KAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,SAAS,qBA4B3F"}

package/dist/components/Chip.d.ts

@@ -0,0 +1,34 @@
+import { EmailColor, EmailVariant } from '../tokens';
+import * as React from 'react';
+/**
+ * chipVariants.ts: `min-h-5/6/7`, `px-1.5/2/3`, `text-xs/sm/base` at a 1.5
+ * line-height. As with Button, the min-height becomes vertical padding.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly minHeight: 20;
+        readonly paddingInline: 6;
+        readonly fontSize: 12;
+    };
+    readonly md: {
+        readonly minHeight: 24;
+        readonly paddingInline: 8;
+        readonly fontSize: 14;
+    };
+    readonly lg: {
+        readonly minHeight: 28;
+        readonly paddingInline: 12;
+        readonly fontSize: 16;
+    };
+};
+export interface ChipProps {
+    variant?: EmailVariant;
+    color?: EmailColor;
+    size?: keyof typeof SIZES;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+/** Chip for email, defaulting to soft / neutral like the web Chip; outlined and plain fill with `surface`. */
+export declare function Chip({ variant, color, size, style, children }: ChipProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA2C,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAExG;;;GAGG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;CAID,CAAC;AAEX,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,8GAA8G;AAC9G,wBAAgB,IAAI,CAAC,EAAE,OAAgB,EAAE,KAAiB,EAAE,IAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,SAAS,qBA8BpG"}

package/dist/components/Divider.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface DividerProps {
+    /** Spacing around the line — the web Divider has none of its own either. */
+    style?: React.CSSProperties;
+}
+/**
+ * Divider for email: a 1px line in `--color-divider`. A div rather than an
+ * <hr>, whose borders Outlook and Gmail each draw differently. `background`
+ * carries a solid fallback that Outlook's Word engine — which drops rgba() —
+ * keeps; every other client takes the rgba `background-color` after it.
+ */
+export declare function Divider({ style }: DividerProps): React.JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,YAAY;IAC3B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,qBAW9C"}

package/dist/components/HintoricLogo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The email counterpart of the web HintoricLogo: the black wordmark, swapped
+ * for the white one where the client applies the dark stylesheet.
+ */
+export declare function HintoricLogo(): import("react").JSX.Element;
+//# sourceMappingURL=HintoricLogo.d.ts.map

package/dist/components/HintoricLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintoricLogo.d.ts","sourceRoot":"","sources":["../../src/components/HintoricLogo.tsx"],"names":[],"mappings":"AAgBA;;;GAGG;AACH,wBAAgB,YAAY,gCAqB3B"}

package/dist/components/Layout.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface LayoutProps {
+    /** The `lang` of the message — screen readers pick their voice from it. */
+    lang: string;
+    /**
+     * The line inbox lists show after the subject. Without one, clients take the
+     * first text they find, which is usually the brand name.
+     */
+    preview: string;
+    /** Rendered under the card: why the reader got this, the sender's legal line. */
+    footer?: React.ReactNode;
+    /** Forces a scheme for previews. Left out, the email follows the reader's OS where the client supports that. */
+    colorScheme?: 'light' | 'dark';
+    children: React.ReactNode;
+}
+/**
+ * The whole document, laid out like core's AuthScreen: a 440px outlined card
+ * with a 20px radius and 48px padding on a `surface-1` page, the fine print
+ * centred under it. In dark the page and card swap surfaces, as AuthScreen's do.
+ */
+export declare function Layout({ lang, preview, footer, colorScheme, children }: LayoutProps): React.JSX.Element;
+/**
+ * The dark-mode stylesheet on its own. Layout includes it; render it
+ * once yourself when email components are shown inside a normal page — a
+ * preview, the docs — so they follow that page's `data-color-scheme`.
+ */
+export declare function ColorSchemeStyles(): React.JSX.Element;
+//# sourceMappingURL=Layout.d.ts.map

package/dist/components/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/components/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gHAAgH;IAChH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,WAAW,qBA8BnF;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,sBAEhC"}

package/dist/components/Link.d.ts

@@ -0,0 +1,18 @@
+import { EmailColor } from '../tokens';
+import * as React from 'react';
+export interface LinkProps {
+    /** Rendered only for http(s) and mailto URLs; anything else becomes plain text. */
+    href: string;
+    color?: EmailColor;
+    /**
+     * The web Link defaults to `hover`, but there is no reliable hover in email,
+     * so the default here is `always`: an inbox reader needs to see a link is
+     * one without touching it.
+     */
+    underline?: 'none' | 'always';
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+/** Link for email: the web Link's `--color-*-main` colour, which steps from 500 to 400 in dark. */
+export declare function Link({ href, color, underline, style, children }: LinkProps): React.JSX.Element;
+//# sourceMappingURL=Link.d.ts.map

package/dist/components/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAGnE,MAAM,WAAW,SAAS;IACxB,mFAAmF;IACnF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,mGAAmG;AACnG,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAiB,EAAE,SAAoB,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,SAAS,qBAYjG"}

package/dist/components/Typography.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export type TypographyLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'title-lg' | 'title-md' | 'title-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs';
+export interface TypographyProps {
+    level?: TypographyLevel;
+    /** The element to render. Defaults to the same tag the web Typography picks for the level. */
+    component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * Overrides the level's ink, like Joy's `textColor="text.tertiary"`.
+     * `icon` is the theme's faintest ink — for fine print that should recede.
+     */
+    textColor?: 'primary' | 'secondary' | 'tertiary' | 'icon';
+    /** Margin, spacing and the like — there is no Stack in email, so spacing lives on the text. */
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/** Typography for email: the same levels, sizes and ink colours, as inline styles. */
+export declare function Typography({ level, component, textAlign, textColor, style, children }: TypographyProps): React.JSX.Element;
+//# sourceMappingURL=Typography.d.ts.map

package/dist/components/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/components/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,eAAe,GACvB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,UAAU,GACV,UAAU,GACV,UAAU,GACV,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAsCd,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1D,+FAA+F;IAC/F,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,sFAAsF;AACtF,wBAAgB,UAAU,CAAC,EAAE,KAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,qBAsBlH"}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { renderEmail } from './render';
+export type { RenderedEmailBody } from './render';
+export { EMAIL_COLORS, EMAIL_VARIANTS, emailFonts, emailPalette, emailRadius, emailSchemes, mainColor, variantTokens, } from './tokens';
+export type { EmailColor, EmailScheme, EmailSchemeTokens, EmailVariant, EmailVariantTokens } from './tokens';
+export { safeHref, safeImageSrc } from './safeUrl';
+export { Layout, ColorSchemeStyles } from './components/Layout';
+export type { LayoutProps } from './components/Layout';
+export { Typography } from './components/Typography';
+export type { TypographyLevel, TypographyProps } from './components/Typography';
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { Link } from './components/Link';
+export type { LinkProps } from './components/Link';
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { Chip } from './components/Chip';
+export type { ChipProps } from './components/Chip';
+export { HintoricLogo } from './components/HintoricLogo';
+export * from './templates/SecurityActivityAlert';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC7G,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,cAAc,mCAAmC,CAAC"}