@universal-material/web 3.0.140 → 3.0.141

package/theme/css-var-builder.js

@@ -0,0 +1,27 @@
+import { hexFromArgb } from '@material/material-color-utilities';
+export class CssVarBuilder {
+    constructor() {
+        this.content = '';
+    }
+    static create() {
+        return new CssVarBuilder();
+    }
+    add(name, value) {
+        const cssVar = `  ${name}: ${value};
+`;
+        this.content += cssVar;
+        return this;
+    }
+    addFromArgb(name, argb) {
+        this.add(`--u-color-${name}`, hexFromArgb(argb));
+        return this;
+    }
+    addLightAndDarkFromArgb(name, lightArgb, darkArgb) {
+        this.add(`--u-color-${name}`, `light-dark(${hexFromArgb(lightArgb)}, ${hexFromArgb(darkArgb)})`);
+        return this;
+    }
+    build() {
+        return this.content;
+    }
+}
+//# sourceMappingURL=css-var-builder.js.map

package/theme/css-var-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-var-builder.js","sourceRoot":"","sources":["../../src/theme/css-var-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,MAAM,OAAO,aAAa;IAIxB;QAFQ,YAAO,GAAG,EAAE,CAAC;IAGrB,CAAC;IAED,MAAM,CAAC,MAAM;QACX,OAAO,IAAI,aAAa,EAAE,CAAC;IAC7B,CAAC;IAED,GAAG,CAAC,IAAY,EAAE,KAAa;QAE7B,MAAM,MAAM,GAAG,KAAK,IAAI,KAAK,KAAK;CACrC,CAAC;QAEE,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC;QAEvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,WAAW,CAAC,IAAY,EAAE,IAAY;QACpC,IAAI,CAAC,GAAG,CAAC,aAAa,IAAI,EAAE,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;QAEjD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,uBAAuB,CAAC,IAAY,EAAE,SAAiB,EAAE,QAAgB;QACvE,IAAI,CAAC,GAAG,CAAC,aAAa,IAAI,EAAE,EAAE,cAAc,WAAW,CAAC,SAAS,CAAC,KAAK,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAEjG,OAAO,IAAI,CAAC;IACd,CAAC;IAED,KAAK;QACH,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;CACF","sourcesContent":["import { hexFromArgb } from '@material/material-color-utilities';\n\nexport class CssVarBuilder {\n\n  private content = '';\n\n  private constructor() {\n  }\n\n  static create(): CssVarBuilder {\n    return new CssVarBuilder();\n  }\n\n  add(name: string, value: string): CssVarBuilder {\n\n    const cssVar = `  ${name}: ${value};\n`;\n\n    this.content += cssVar;\n\n    return this;\n  }\n\n  addFromArgb(name: string, argb: number): CssVarBuilder {\n    this.add(`--u-color-${name}`, hexFromArgb(argb));\n\n    return this;\n  }\n\n  addLightAndDarkFromArgb(name: string, lightArgb: number, darkArgb: number): CssVarBuilder {\n    this.add(`--u-color-${name}`, `light-dark(${hexFromArgb(lightArgb)}, ${hexFromArgb(darkArgb)})`);\n\n    return this;\n  }\n\n  build(): string {\n    return this.content;\n  }\n}\n"]}

package/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './theme-builder.js';
+//# sourceMappingURL=index.d.ts.map

package/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/theme/index.js

@@ -0,0 +1,2 @@
+export * from './theme-builder.js';
+//# sourceMappingURL=index.js.map

package/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './theme-builder.js';\n"]}

package/theme/neutral-colors.d.ts

@@ -0,0 +1,4 @@
+import { Color } from './color.js';
+export declare const neutralColors: Color[];
+export declare const neutralVariantColors: Color[];
+//# sourceMappingURL=neutral-colors.d.ts.map

package/theme/neutral-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"neutral-colors.d.ts","sourceRoot":"","sources":["../../src/theme/neutral-colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,KAAK,EAgBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,EAKvC,CAAC"}

package/theme/neutral-colors.js

@@ -0,0 +1,24 @@
+export const neutralColors = [
+    { name: 'surface', lightTone: 98, darkTone: 6 },
+    { name: 'surface-bright', lightTone: 98, darkTone: 24 },
+    { name: 'surface-dim', lightTone: 87, darkTone: 6 },
+    { name: 'surface-container-lowest', lightTone: 100, darkTone: 4 },
+    { name: 'surface-container-low', lightTone: 96, darkTone: 10 },
+    { name: 'surface-container', lightTone: 94, darkTone: 12 },
+    { name: 'surface-container-high', lightTone: 92, darkTone: 17 },
+    { name: 'surface-container-highest', lightTone: 90, darkTone: 22 },
+    { name: 'on-surface', lightTone: 10, darkTone: 90 },
+    { name: 'light', fixedTone: 98 },
+    { name: 'on-light', fixedTone: 10 },
+    { name: 'dark', fixedTone: 6 },
+    { name: 'on-dark', fixedTone: 90 },
+    { name: 'scrim', fixedTone: 0 },
+    { name: 'shadow', fixedTone: 0 },
+];
+export const neutralVariantColors = [
+    { name: 'surface-variant', lightTone: 90, darkTone: 30 },
+    { name: 'on-surface-variant', lightTone: 30, darkTone: 80 },
+    { name: 'outline', lightTone: 50, darkTone: 60 },
+    { name: 'outline-variant', lightTone: 80, darkTone: 30 },
+];
+//# sourceMappingURL=neutral-colors.js.map

package/theme/neutral-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"neutral-colors.js","sourceRoot":"","sources":["../../src/theme/neutral-colors.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAY;IACpC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;IAC/C,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvD,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;IACnD,EAAE,IAAI,EAAE,0BAA0B,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE;IACjE,EAAE,IAAI,EAAE,uBAAuB,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9D,EAAE,IAAI,EAAE,mBAAmB,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1D,EAAE,IAAI,EAAE,wBAAwB,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/D,EAAE,IAAI,EAAE,2BAA2B,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClE,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnD,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IAChC,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;IACnC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE;IAC9B,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;IAClC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE;IAC/B,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAY;IAC3C,EAAE,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxD,EAAE,IAAI,EAAE,oBAAoB,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3D,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChD,EAAE,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;CACzD,CAAC","sourcesContent":["import { Color } from './color.js';\n\nexport const neutralColors: Color[] = [\n  { name: 'surface', lightTone: 98, darkTone: 6 },\n  { name: 'surface-bright', lightTone: 98, darkTone: 24 },\n  { name: 'surface-dim', lightTone: 87, darkTone: 6 },\n  { name: 'surface-container-lowest', lightTone: 100, darkTone: 4 },\n  { name: 'surface-container-low', lightTone: 96, darkTone: 10 },\n  { name: 'surface-container', lightTone: 94, darkTone: 12 },\n  { name: 'surface-container-high', lightTone: 92, darkTone: 17 },\n  { name: 'surface-container-highest', lightTone: 90, darkTone: 22 },\n  { name: 'on-surface', lightTone: 10, darkTone: 90 },\n  { name: 'light', fixedTone: 98 },\n  { name: 'on-light', fixedTone: 10 },\n  { name: 'dark', fixedTone: 6 },\n  { name: 'on-dark', fixedTone: 90 },\n  { name: 'scrim', fixedTone: 0 },\n  { name: 'shadow', fixedTone: 0 },\n];\n\nexport const neutralVariantColors: Color[] = [\n  { name: 'surface-variant', lightTone: 90, darkTone: 30 },\n  { name: 'on-surface-variant', lightTone: 30, darkTone: 80 },\n  { name: 'outline', lightTone: 50, darkTone: 60 },\n  { name: 'outline-variant', lightTone: 80, darkTone: 30 },\n];\n"]}

package/theme/theme-builder.d.ts

@@ -0,0 +1,26 @@
+import { TonalPalette } from '@material/material-color-utilities';
+import { ThemeColor } from './theme-color.js';
+export declare class ThemeBuilder {
+    #private;
+    cssClass: string | null;
+    colors: ThemeColor[];
+    private partial;
+    private constructor();
+    static create(primaryColorHex: string): ThemeBuilder;
+    static createPartial(primaryColorHex: string): ThemeBuilder;
+    addColorFromHex(name: string, hex: string): ThemeBuilder;
+    addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder;
+    addStaticColor(name: string, hex: string, tone?: number): ThemeBuilder;
+    setCssClass(cssClass: string): ThemeBuilder;
+    private ensureCssClassStartsWithDot;
+    private ensureThemeColors;
+    private ensureStatusColors;
+    private getNeutralVariables;
+    private getNeutralVariantVariables;
+    getColorVariables(color: ThemeColor): string;
+    private getColorsVariables;
+    private addColors;
+    private addToneColor;
+    build(): string;
+}
+//# sourceMappingURL=theme-builder.d.ts.map

package/theme/theme-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-builder.d.ts","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAK5F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,qBAAa,YAAY;;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,UAAU,EAAE,CAAM;IAE1B,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO;IAOP,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY;IAIpD,MAAM,CAAC,aAAa,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY;IAO3D,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,YAAY;IAOxD,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;IAatE,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,GAAG,YAAY;IAS1E,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY;IAK3C,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,0BAA0B;IAQlC,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAQ5C,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;IAoBpB,KAAK,IAAI,MAAM;CAehB"}

package/theme/theme-builder.js

@@ -0,0 +1,146 @@
+import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';
+import { CssVarBuilder } from './css-var-builder.js';
+import { neutralColors, neutralVariantColors } from './neutral-colors.js';
+const getCss = (selector, content) => `${selector} {
+${content}}`;
+export class ThemeBuilder {
+    #corePalette;
+    constructor(primaryColorHex) {
+        this.colors = [];
+        this.partial = false;
+        this.cssClass = null;
+        this.#corePalette = CorePalette.of(argbFromHex(primaryColorHex));
+        this.addColorFromPalette('primary', this.#corePalette.a1);
+    }
+    static create(primaryColorHex) {
+        return new ThemeBuilder(primaryColorHex);
+    }
+    static createPartial(primaryColorHex) {
+        const themeBuilder = new ThemeBuilder(primaryColorHex);
+        themeBuilder.partial = true;
+        return themeBuilder;
+    }
+    addColorFromHex(name, hex) {
+        const palette = TonalPalette.fromInt(argbFromHex(hex));
+        this.addColorFromPalette(name, palette);
+        return this;
+    }
+    addColorFromPalette(name, palette) {
+        this.colors.push({ name, lightTone: 40, darkTone: 80, tonalPalette: palette });
+        this.colors.push({ name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette });
+        this.colors.push({ name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette });
+        this.colors.push({ name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette });
+        this.colors.push({ name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette });
+        this.colors.push({ name: `${name}-fixed-dim`, fixedTone: 80, tonalPalette: palette });
+        this.colors.push({ name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette });
+        this.colors.push({ name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette });
+        return this;
+    }
+    addStaticColor(name, hex, tone = 80) {
+        const palette = TonalPalette.fromInt(argbFromHex(hex));
+        this.colors.push({ name, fixedTone: tone, tonalPalette: palette });
+        this.colors.push({ name: `on-${name}`, fixedTone: 15, tonalPalette: palette });
+        this.colors.push({ name: `${name}-container`, fixedTone: 90, tonalPalette: palette });
+        this.colors.push({ name: `on-${name}-container`, fixedTone: 15, tonalPalette: palette });
+        return this;
+    }
+    setCssClass(cssClass) {
+        this.cssClass = cssClass;
+        return this;
+    }
+    ensureCssClassStartsWithDot() {
+        if (!this.cssClass || this.cssClass.startsWith('.')) {
+            return;
+        }
+        this.cssClass = `.${this.cssClass}`;
+    }
+    ensureThemeColors() {
+        if (!this.colors.find(c => c.name === 'secondary')) {
+            this.addColorFromPalette('secondary', this.#corePalette.a2);
+        }
+        if (!this.colors.find(c => c.name === 'tertiary')) {
+            this.addColorFromPalette('tertiary', this.#corePalette.a3);
+        }
+    }
+    ensureStatusColors() {
+        if (!this.colors.find(c => c.name === 'success')) {
+            this.addStaticColor('success', '#198754', 60);
+        }
+        if (!this.colors.find(c => c.name === 'info')) {
+            this.addStaticColor('info', '#0dcaf0');
+        }
+        if (!this.colors.find(c => c.name === 'warning')) {
+            this.addStaticColor('warning', '#ffc107');
+        }
+        if (!this.colors.find(c => c.name === 'error')) {
+            this.addColorFromHex('error', '#b3261e');
+        }
+    }
+    getNeutralVariables() {
+        const builder = CssVarBuilder.create();
+        this.addColors(builder, neutralColors, this.#corePalette.n1);
+        builder
+            .add('--u-color-body', 'var(--u-color-surface)')
+            .add('--u-color-body-rgb', 'var(--u-color-surface-rgb)')
+            .add('--u-color-inverse-body', 'var(--u-color-inverse-surface)')
+            .add('--u-color-inverse-body-rgb', 'var(--u-color-inverse-surface-rgb)')
+            .add('--u-color-on-body', 'var(--u-color-on-surface)')
+            .add('--u-color-on-body-rgb', 'var(--u-color-on-surface-rgb)')
+            .add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)')
+            .add('--u-color-on-inverse-body-rgb', 'var(--u-color-on-inverse-surface-rgb)')
+            .add('--u-current-text-color', 'var(--u-color-on-body)')
+            .add('--u-current-text-color-rgb', 'var(--u-color-on-body-rgb)');
+        return builder.build();
+    }
+    getNeutralVariantVariables() {
+        const builder = CssVarBuilder.create();
+        this.addColors(builder, neutralVariantColors, this.#corePalette.n2);
+        return builder.build();
+    }
+    getColorVariables(color) {
+        const builder = CssVarBuilder.create();
+        this.addToneColor(builder, color, color.tonalPalette);
+        return builder.build();
+    }
+    getColorsVariables() {
+        let variables = '';
+        for (const color of this.colors) {
+            variables += this.getColorVariables(color);
+        }
+        variables += this.getNeutralVariables();
+        variables += this.getNeutralVariantVariables();
+        return variables;
+    }
+    addColors(builder, colors, palette) {
+        for (const color of colors) {
+            this.addToneColor(builder, color, palette);
+        }
+    }
+    addToneColor(builder, color, palette) {
+        if (color.fixedTone !== undefined) {
+            builder.addFromArgb(color.name, palette.tone(color.fixedTone));
+            return;
+        }
+        const inverseName = `inverse-${color.name}`.replace('inverse-on', 'on-inverse');
+        builder
+            .addLightAndDarkFromArgb(color.name, palette.tone(color.lightTone), palette.tone(color.darkTone))
+            .addLightAndDarkFromArgb(inverseName, palette.tone(color.darkTone), palette.tone(color.lightTone));
+        if (color.name === 'surface' || color.name === 'on-surface') {
+            const prefix = color.name.startsWith('on-') ? 'on-' : '';
+            builder.addFromArgb(`${prefix}light-surface`, palette.tone(color.lightTone));
+            builder.addFromArgb(`${prefix}dark-surface`, palette.tone(color.darkTone));
+        }
+    }
+    build() {
+        this.ensureCssClassStartsWithDot();
+        const selector = this.cssClass ?? ':root';
+        this.ensureThemeColors();
+        if (!this.partial) {
+            this.ensureStatusColors();
+        }
+        const variables = `${getCss(selector, this.getColorsVariables())}
+`;
+        return variables;
+    }
+}
+//# sourceMappingURL=theme-builder.js.map

package/theme/theme-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-builder.js","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';\n\nimport { Color } from './color.js';\nimport { CssVarBuilder } from './css-var-builder.js';\nimport { neutralColors, neutralVariantColors } from './neutral-colors.js';\nimport { ThemeColor } from './theme-color.js';\n\nconst getCss = (selector: string, content: string): string =>\n  `${selector} {\n${content}}`;\n\nexport class ThemeBuilder {\n  cssClass: string | null;\n  colors: ThemeColor[] = [];\n\n  private partial = false;\n  readonly #corePalette: CorePalette;\n\n  private constructor(primaryColorHex: string) {\n    this.cssClass = null;\n\n    this.#corePalette = CorePalette.of(argbFromHex(primaryColorHex));\n    this.addColorFromPalette('primary', this.#corePalette.a1);\n  }\n\n  static create(primaryColorHex: string): ThemeBuilder {\n    return new ThemeBuilder(primaryColorHex);\n  }\n\n  static createPartial(primaryColorHex: string): ThemeBuilder {\n    const themeBuilder = new ThemeBuilder(primaryColorHex);\n    themeBuilder.partial = true;\n\n    return themeBuilder;\n  }\n\n  addColorFromHex(name: string, hex: string): ThemeBuilder {\n    const palette = TonalPalette.fromInt(argbFromHex(hex));\n\n    this.addColorFromPalette(name, palette);\n    return this;\n  }\n\n  addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder {\n    this.colors.push({ name, lightTone: 40, darkTone: 80, tonalPalette: palette });\n    this.colors.push({ name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette });\n    this.colors.push({ name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette });\n    this.colors.push({ name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette });\n\n    this.colors.push({ name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette });\n    this.colors.push({ name: `${name}-fixed-dim`, fixedTone: 80, tonalPalette: palette });\n    this.colors.push({ name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette });\n    this.colors.push({ name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette });\n    return this;\n  }\n\n  addStaticColor(name: string, hex: string, tone: number = 80): ThemeBuilder {\n    const palette = TonalPalette.fromInt(argbFromHex(hex));\n    this.colors.push({ name, fixedTone: tone, tonalPalette: palette });\n    this.colors.push({ name: `on-${name}`, fixedTone: 15, tonalPalette: palette });\n    this.colors.push({ name: `${name}-container`, fixedTone: 90, tonalPalette: palette });\n    this.colors.push({ name: `on-${name}-container`, fixedTone: 15, tonalPalette: palette });\n    return this;\n  }\n\n  setCssClass(cssClass: string): ThemeBuilder {\n    this.cssClass = cssClass;\n    return this;\n  }\n\n  private ensureCssClassStartsWithDot(): void {\n    if (!this.cssClass || this.cssClass.startsWith('.')) {\n      return;\n    }\n\n    this.cssClass = `.${this.cssClass}`;\n  }\n\n  private ensureThemeColors(): void {\n    if (!this.colors.find(c => c.name === 'secondary')) {\n      this.addColorFromPalette('secondary', this.#corePalette.a2);\n    }\n\n    if (!this.colors.find(c => c.name === 'tertiary')) {\n      this.addColorFromPalette('tertiary', this.#corePalette.a3);\n    }\n  }\n\n  private ensureStatusColors(): void {\n    if (!this.colors.find(c => c.name === 'success')) {\n      this.addStaticColor('success', '#198754', 60);\n    }\n\n    if (!this.colors.find(c => c.name === 'info')) {\n      this.addStaticColor('info', '#0dcaf0');\n    }\n\n    if (!this.colors.find(c => c.name === 'warning')) {\n      this.addStaticColor('warning', '#ffc107');\n    }\n\n    if (!this.colors.find(c => c.name === 'error')) {\n      this.addColorFromHex('error', '#b3261e');\n    }\n  }\n\n  private getNeutralVariables(): string {\n    const builder = CssVarBuilder.create();\n\n    this.addColors(builder, neutralColors, this.#corePalette.n1);\n\n    builder\n      .add('--u-color-body', 'var(--u-color-surface)')\n      .add('--u-color-body-rgb', 'var(--u-color-surface-rgb)')\n      .add('--u-color-inverse-body', 'var(--u-color-inverse-surface)')\n      .add('--u-color-inverse-body-rgb', 'var(--u-color-inverse-surface-rgb)')\n      .add('--u-color-on-body', 'var(--u-color-on-surface)')\n      .add('--u-color-on-body-rgb', 'var(--u-color-on-surface-rgb)')\n      .add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)')\n      .add('--u-color-on-inverse-body-rgb', 'var(--u-color-on-inverse-surface-rgb)')\n      .add('--u-current-text-color', 'var(--u-color-on-body)')\n      .add('--u-current-text-color-rgb', 'var(--u-color-on-body-rgb)');\n\n    return builder.build();\n  }\n\n  private getNeutralVariantVariables(): string {\n    const builder = CssVarBuilder.create();\n\n    this.addColors(builder, neutralVariantColors, this.#corePalette.n2);\n\n    return builder.build();\n  }\n\n  getColorVariables(color: ThemeColor): string {\n    const builder = CssVarBuilder.create();\n\n    this.addToneColor(builder, color, color.tonalPalette);\n\n    return builder.build();\n  }\n\n  private getColorsVariables(): string {\n    let variables = '';\n\n    for (const color of this.colors) {\n      variables += this.getColorVariables(color);\n    }\n\n    variables += this.getNeutralVariables();\n    variables += this.getNeutralVariantVariables();\n\n    return variables;\n  }\n\n  private addColors(builder: CssVarBuilder, colors: Color[], palette: TonalPalette): void {\n    for (const color of colors) {\n      this.addToneColor(builder, color, palette);\n    }\n  }\n\n  private addToneColor(builder: CssVarBuilder, color: Color, palette: TonalPalette): void {\n    if (color.fixedTone !== undefined) {\n      builder.addFromArgb(color.name, palette.tone(color.fixedTone));\n      return;\n    }\n\n    const inverseName = `inverse-${color.name}`.replace('inverse-on', 'on-inverse');\n\n    builder\n      .addLightAndDarkFromArgb(color.name, palette.tone(color.lightTone!), palette.tone(color.darkTone!))\n      .addLightAndDarkFromArgb(inverseName, palette.tone(color.darkTone!), palette.tone(color.lightTone!));\n\n    if (color.name === 'surface' || color.name === 'on-surface') {\n      const prefix = color.name.startsWith('on-') ? 'on-' : '';\n\n      builder.addFromArgb(`${prefix}light-surface`, palette.tone(color.lightTone!));\n      builder.addFromArgb(`${prefix}dark-surface`, palette.tone(color.darkTone!));\n    }\n  }\n\n  build(): string {\n    this.ensureCssClassStartsWithDot();\n\n    const selector = this.cssClass ?? ':root';\n\n    this.ensureThemeColors();\n\n    if (!this.partial) {\n      this.ensureStatusColors();\n    }\n\n    const variables = `${getCss(selector, this.getColorsVariables())}\n`;\n    return variables;\n  }\n}\n"]}

package/theme/theme-color.d.ts

@@ -0,0 +1,6 @@
+import { TonalPalette } from '@material/material-color-utilities';
+import { Color } from './color.js';
+export interface ThemeColor extends Color {
+    tonalPalette: TonalPalette;
+}
+//# sourceMappingURL=theme-color.d.ts.map

package/theme/theme-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-color.d.ts","sourceRoot":"","sources":["../../src/theme/theme-color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,UAAW,SAAQ,KAAK;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B"}

package/theme/theme-color.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme-color.js.map

package/theme/theme-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-color.js","sourceRoot":"","sources":["../../src/theme/theme-color.ts"],"names":[],"mappings":"","sourcesContent":["import { TonalPalette } from '@material/material-color-utilities';\n\nimport { Color } from './color.js';\n\nexport interface ThemeColor extends Color {\n  tonalPalette: TonalPalette;\n}\n"]}

package/typeahead/highlight.d.ts

@@ -0,0 +1,24 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+export declare class UmHighlight extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    private parts;
+    /**
+     * The result text to display. If the term is found inside this text, it's highlighted
+     */
+    get result(): string | undefined;
+    set result(value: string | undefined);
+    /**
+     * The searched term
+     */
+    get term(): string | undefined;
+    set term(value: string | undefined);
+    protected render(): HTMLTemplateResult | HTMLTemplateResult[];
+    private setParts;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-highlight': UmHighlight;
+    }
+}
+//# sourceMappingURL=highlight.d.ts.map

package/typeahead/highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../src/typeahead/highlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAS3D,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,0BAAU;IAIvB,OAAO,CAAC,KAAK,CAAuB;IAE7C;;OAEG;IACH,IACI,MAAM,IAAI,MAAM,GAAG,SAAS,CAE/B;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAInC;IAED;;OAEG;IACH,IACI,IAAI,IAAI,MAAM,GAAG,SAAS,CAE7B;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAIjC;cAEkB,MAAM,IAAI,kBAAkB,GAAG,kBAAkB,EAAE;IAQtE,OAAO,CAAC,QAAQ;CAmBjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}

package/typeahead/highlight.js

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { normalizeText } from '../shared/normalize-text.js';
+import { styles } from './highlight.styles.js';
+const regExpEscape = (text) => text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+let UmHighlight = class UmHighlight extends LitElement {
+    static { this.styles = styles; }
+    #result;
+    #term;
+    /**
+     * The result text to display. If the term is found inside this text, it's highlighted
+     */
+    get result() {
+        return this.#result;
+    }
+    set result(value) {
+        this.#result = value;
+        this.setParts();
+    }
+    /**
+     * The searched term
+     */
+    get term() {
+        return this.#term;
+    }
+    set term(value) {
+        this.#term = value;
+        this.setParts();
+    }
+    render() {
+        return this.parts
+            ? this.parts.map((part, index) => index % 2
+                ? html `<strong>${part}</strong>`
+                : html `<span>${part}</span>`)
+            : html `<span></span>`;
+    }
+    setParts() {
+        const resultStr = this.result || '';
+        const resultNormalized = normalizeText(resultStr).toLowerCase();
+        const termLC = normalizeText(this.term || '').toLowerCase();
+        let currentIdx = 0;
+        if (termLC.length <= 0) {
+            this.parts = [resultStr];
+            return;
+        }
+        this.parts = resultNormalized
+            .split(new RegExp(`(${regExpEscape(termLC)})`))
+            .map(part => {
+            const originalPart = resultStr.substring(currentIdx, currentIdx + part.length);
+            currentIdx += part.length;
+            return originalPart;
+        });
+    }
+};
+__decorate([
+    state()
+], UmHighlight.prototype, "parts", void 0);
+__decorate([
+    property()
+], UmHighlight.prototype, "result", null);
+__decorate([
+    property()
+], UmHighlight.prototype, "term", null);
+UmHighlight = __decorate([
+    customElement('u-highlight')
+], UmHighlight);
+export { UmHighlight };
+//# sourceMappingURL=highlight.js.map

package/typeahead/highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.js","sourceRoot":"","sources":["../../src/typeahead/highlight.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAAE,CACpC,IAAI,CAAC,OAAO,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;AAG5C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;aACzB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,OAAO,CAAqB;IAC5B,KAAK,CAAqB;IAG1B;;OAEG;IAEH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,IAAI,MAAM,CAAC,KAAyB;QAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QAErB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED;;OAEG;IAEH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED,IAAI,IAAI,CAAC,KAAyB;QAChC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK;YACf,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC;gBACzC,CAAC,CAAC,IAAI,CAAA,WAAW,IAAI,WAAW;gBAChC,CAAC,CAAC,IAAI,CAAA,SAAS,IAAI,SAAS,CAAC;YAC/B,CAAC,CAAC,IAAI,CAAA,eAAe,CAAC;IAC1B,CAAC;IAEO,QAAQ;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;QACpC,MAAM,gBAAgB,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,WAAW,EAAE,CAAC;QAChE,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;QAC5D,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,CAAC,SAAS,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,gBAAgB;aAC1B,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;aAC9C,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;YAC/E,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC;YAC1B,OAAO,YAAY,CAAC;QACtB,CAAC,CAAC,CAAC;IACP,CAAC;;AAxDgB;IAAhB,KAAK,EAAE;0CAAqC;AAM7C;IADC,QAAQ,EAAE;yCAGV;AAYD;IADC,QAAQ,EAAE;uCAGV;AA3BU,WAAW;IADvB,aAAa,CAAC,aAAa,CAAC;GAChB,WAAW,CA8DvB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { normalizeText } from '../shared/normalize-text.js';\nimport { styles } from './highlight.styles.js';\n\nconst regExpEscape = (text: string) =>\n  text.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '\\\\$&');\n\n@customElement('u-highlight')\nexport class UmHighlight extends LitElement {\n  static override styles = styles;\n\n  #result: string | undefined;\n  #term: string | undefined;\n  @state() private parts: string[] | undefined;\n\n  /**\n   * The result text to display. If the term is found inside this text, it's highlighted\n   */\n  @property()\n  get result(): string | undefined {\n    return this.#result;\n  }\n\n  set result(value: string | undefined) {\n    this.#result = value;\n\n    this.setParts();\n  }\n\n  /**\n   * The searched term\n   */\n  @property()\n  get term(): string | undefined {\n    return this.#term;\n  }\n\n  set term(value: string | undefined) {\n    this.#term = value;\n\n    this.setParts();\n  }\n\n  protected override render(): HTMLTemplateResult | HTMLTemplateResult[] {\n    return this.parts\n      ? this.parts.map((part, index) => index % 2\n        ? html`<strong>${part}</strong>`\n        : html`<span>${part}</span>`)\n      : html`<span></span>`;\n  }\n\n  private setParts() {\n    const resultStr = this.result || '';\n    const resultNormalized = normalizeText(resultStr).toLowerCase();\n    const termLC = normalizeText(this.term || '').toLowerCase();\n    let currentIdx = 0;\n\n    if (termLC.length <= 0) {\n      this.parts = [resultStr];\n      return;\n    }\n\n    this.parts = resultNormalized\n      .split(new RegExp(`(${regExpEscape(termLC)})`))\n      .map(part => {\n        const originalPart = resultStr.substring(currentIdx, currentIdx + part.length);\n        currentIdx += part.length;\n        return originalPart;\n      });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-highlight': UmHighlight;\n  }\n}\n"]}

package/typeahead/highlight.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=highlight.styles.d.ts.map

package/typeahead/highlight.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.styles.d.ts","sourceRoot":"","sources":["../../src/typeahead/highlight.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAIlB,CAAC"}

package/typeahead/highlight.styles.js

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+  }
+`;
+//# sourceMappingURL=highlight.styles.js.map

package/typeahead/highlight.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.styles.js","sourceRoot":"","sources":["../../src/typeahead/highlight.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;CAIzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: inline-block;\n  }\n`;\n"]}

package/typeahead/typeahead.d.ts

@@ -0,0 +1,94 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+import { UmMenuItem } from '../menu/menu-item.js';
+import { UmMenu } from '../menu/menu.js';
+import '../menu/menu.js';
+import '../menu/menu-item.js';
+import './highlight.js';
+export interface Data {
+    label: string;
+    value: any;
+}
+export declare class UmTypeahead extends LitElement {
+    #private;
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResult;
+    private target;
+    private results;
+    /**
+     * The datasource of the typeahead. Accepts an `Array` or a `Promise<[]>`.
+     */
+    source: (any[] | ((term: string) => Promise<any[]>)) | undefined;
+    /**
+     * A function return a string based on a result from the `source`. Useful when the source results are objects.
+     */
+    formatter: ((value: any) => string) | undefined;
+    /**
+     * A string representing an HTML to be rendered inside the menu item. If set, it will replace the `u-highlight`.
+     *
+     * _Note:_ Subject to signature change
+     */
+    template: ((term: string, value: any) => string) | undefined;
+    /**
+     * The time in milliseconds before triggering an update in the results.
+     */
+    debounce: number;
+    /**
+     * The number of suggestions to show
+     */
+    limit: number;
+    /**
+     * How many characters must be typed before show suggestions
+     *
+     * _Note:_ Not used when the source is a `Promise`
+     */
+    minLength: number;
+    /**
+     * Whether the menu will be show when the target get focus.
+     *
+     * _Note:_ The `minLength` will still be applied
+     */
+    openOnFocus: boolean;
+    /**
+     * If `true`, model values will not be restricted only to items selected from the menu.
+     */
+    editable: boolean;
+    /**
+     * The value for the `autocomplete` attribute for the target element.
+     */
+    autocomplete: 'on' | 'off' | string;
+    /**
+     * The value for the `spellcheck` attribute for the target element.
+     */
+    spellcheck: boolean;
+    get form(): HTMLFormElement | null;
+    /**
+     * Gets or sets the current value of the typeahead.
+     */
+    get value(): any;
+    set value(value: any);
+    focus(): void;
+    clear(): void;
+    /**
+     * The id of the target element to attach the typeahead.
+     */
+    get targetId(): string | undefined;
+    set targetId(value: string | undefined);
+    _menu: UmMenu;
+    menuItems: NodeListOf<UmMenuItem>;
+    get _menuItems(): UmMenuItem[];
+    constructor();
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): HTMLTemplateResult;
+    private getTargetValue;
+    private setTargetValue;
+    private getMenuAnchor;
+    private getTextValue;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-typeahead': UmTypeahead;
+    }
+}
+//# sourceMappingURL=typeahead.d.ts.map

package/typeahead/typeahead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/typeahead.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI3D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAKzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,qBACa,WAAY,SAAQ,UAAU;;IACzC,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,0BAAU;IAKhC,OAAO,CAAC,MAAM,CAOE;IASP,OAAO,CAAC,OAAO,CAAS;IAEjC;;OAEG;IACM,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAE1E;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAEhD;;;;OAIG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAE7D;;OAEG;IACwC,QAAQ,SAAO;IAE1D;;OAEG;IACwC,KAAK,SAAM;IAEtD;;;;OAIG;IACwC,SAAS,SAAK;IAEzD;;;;OAIG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;OAEG;IAC0B,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAS;IAEzE;;OAEG;IACmC,UAAU,UAAS;IAEzD,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,GAAG,CAEf;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,EAOnB;IAEQ,KAAK;IAId,KAAK;IASL;;OAEG;IACH,IACI,QAAQ,IAAI,MAAM,GAAG,SAAS,CAEjC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAMrC;IAEgB,KAAK,EAAG,MAAM,CAAC;IACP,SAAS,EAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAE5D,IAAI,UAAU,IAAI,UAAU,EAAE,CAE7B;;IAOQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAgBhF,iBAAiB;IAWjB,oBAAoB;cAuGV,MAAM,IAAI,kBAAkB;IAwG/C,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,YAAY;CAOrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}