@kya-os/consent 0.1.0 → 0.1.1

package/dist/components/consent-oauth-button.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Consent OAuth Button Web Component
+ *
+ * A styled button for OAuth provider authentication with provider branding.
+ * Supports common OAuth providers with built-in icons.
+ *
+ * @module components/consent-oauth-button
+ */
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * Supported OAuth providers with built-in styling
+ */
+export type OAuthProvider = 'google' | 'microsoft' | 'apple' | 'github' | 'twitter' | 'facebook' | 'custom';
+/**
+ * ConsentOAuthButton - OAuth provider sign-in button
+ *
+ * @example
+ * ```html
+ * <consent-oauth-button
+ *   provider="google"
+ *   url="/auth/google"
+ * ></consent-oauth-button>
+ *
+ * <consent-oauth-button
+ *   provider="custom"
+ *   provider-name="Acme Corp"
+ *   url="/auth/acme"
+ * ></consent-oauth-button>
+ * ```
+ *
+ * @fires oauth-click - When button is clicked (includes provider and url in detail)
+ * @csspart button - The button element
+ * @csspart icon - The provider icon
+ * @csspart text - The button text
+ */
+export declare class ConsentOAuthButton extends LitElement {
+    /**
+     * OAuth provider type
+     */
+    provider: OAuthProvider;
+    /**
+     * Custom provider name (used when provider='custom')
+     */
+    providerName?: string;
+    /**
+     * OAuth authorization URL
+     */
+    url: string;
+    /**
+     * Custom button text (overrides default)
+     */
+    buttonText?: string;
+    /**
+     * Loading state
+     */
+    loading: boolean;
+    /**
+     * Disabled state
+     */
+    disabled: boolean;
+    /**
+     * Full width mode
+     */
+    fullWidth: boolean;
+    /**
+     * Custom icon SVG string (for custom providers)
+     */
+    customIcon?: string;
+    /**
+     * Internal state for tracking redirect
+     */
+    private redirecting;
+    static styles: import("lit").CSSResult;
+    private get config();
+    private get displayName();
+    private get displayText();
+    private handleClick;
+    private renderProviderIcon;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'consent-oauth-button': ConsentOAuthButton;
+    }
+}
+//# sourceMappingURL=consent-oauth-button.d.ts.map

package/dist/components/consent-oauth-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-oauth-button.d.ts","sourceRoot":"","sources":["../../src/components/consent-oauth-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAIrE;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,UAAU,GACV,QAAQ,CAAC;AA4Fb;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD;;OAEG;IAEH,QAAQ,EAAE,aAAa,CAAY;IAEnC;;OAEG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IAEH,GAAG,SAAM;IAET;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAgB,MAAM,0BAmEpB;IAEF,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,WAAW,GAGtB;IAED,OAAO,KAAK,WAAW,GAGtB;IAED,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,kBAAkB;cAiGP,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAUzD,MAAM;CAuBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/components/consent-oauth-button.js

@@ -0,0 +1,389 @@
+/**
+ * Consent OAuth Button Web Component
+ *
+ * A styled button for OAuth provider authentication with provider branding.
+ * Supports common OAuth providers with built-in icons.
+ *
+ * @module components/consent-oauth-button
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+/**
+ * Sanitize SVG content to prevent XSS attacks.
+ * Removes script tags, event handlers, and dangerous attributes.
+ *
+ * @param svg - Raw SVG string
+ * @returns Sanitized SVG safe for rendering
+ */
+function sanitizeSvg(svg) {
+    if (!svg || typeof svg !== 'string')
+        return '';
+    // Remove script tags and their content
+    let sanitized = svg.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+    // Remove event handlers (onclick, onerror, onload, etc.)
+    sanitized = sanitized.replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '');
+    sanitized = sanitized.replace(/\s*on\w+\s*=\s*[^\s>]*/gi, '');
+    // Remove javascript: and data: URLs from href, src, xlink:href
+    sanitized = sanitized.replace(/(href|src|xlink:href)\s*=\s*["']?\s*javascript:[^"'>\s]*/gi, '$1=""');
+    sanitized = sanitized.replace(/(href|src|xlink:href)\s*=\s*["']?\s*data:[^"'>\s]*/gi, '$1=""');
+    // Remove base64 embedded content that might be executable
+    sanitized = sanitized.replace(/data:text\/html[^"'>\s]*/gi, '');
+    return sanitized;
+}
+const PROVIDER_CONFIGS = {
+    google: {
+        name: 'Google',
+        bgColor: '#ffffff',
+        textColor: '#374151',
+        borderColor: '#d1d5db',
+        hoverBgColor: '#f9fafb',
+    },
+    microsoft: {
+        name: 'Microsoft',
+        bgColor: '#2f2f2f',
+        textColor: '#ffffff',
+        borderColor: '#2f2f2f',
+        hoverBgColor: '#1f1f1f',
+    },
+    apple: {
+        name: 'Apple',
+        bgColor: '#000000',
+        textColor: '#ffffff',
+        borderColor: '#000000',
+        hoverBgColor: '#1a1a1a',
+    },
+    github: {
+        name: 'GitHub',
+        bgColor: '#24292f',
+        textColor: '#ffffff',
+        borderColor: '#24292f',
+        hoverBgColor: '#1b1f23',
+    },
+    twitter: {
+        name: 'Twitter',
+        bgColor: '#1da1f2',
+        textColor: '#ffffff',
+        borderColor: '#1da1f2',
+        hoverBgColor: '#0c8de4',
+    },
+    facebook: {
+        name: 'Facebook',
+        bgColor: '#1877f2',
+        textColor: '#ffffff',
+        borderColor: '#1877f2',
+        hoverBgColor: '#0b5ed7',
+    },
+    custom: {
+        name: 'Sign in',
+        bgColor: '#ffffff',
+        textColor: '#374151',
+        borderColor: '#d1d5db',
+        hoverBgColor: '#f9fafb',
+    },
+};
+/**
+ * ConsentOAuthButton - OAuth provider sign-in button
+ *
+ * @example
+ * ```html
+ * <consent-oauth-button
+ *   provider="google"
+ *   url="/auth/google"
+ * ></consent-oauth-button>
+ *
+ * <consent-oauth-button
+ *   provider="custom"
+ *   provider-name="Acme Corp"
+ *   url="/auth/acme"
+ * ></consent-oauth-button>
+ * ```
+ *
+ * @fires oauth-click - When button is clicked (includes provider and url in detail)
+ * @csspart button - The button element
+ * @csspart icon - The provider icon
+ * @csspart text - The button text
+ */
+let ConsentOAuthButton = class ConsentOAuthButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * OAuth provider type
+         */
+        this.provider = 'custom';
+        /**
+         * OAuth authorization URL
+         */
+        this.url = '';
+        /**
+         * Loading state
+         */
+        this.loading = false;
+        /**
+         * Disabled state
+         */
+        this.disabled = false;
+        /**
+         * Full width mode
+         */
+        this.fullWidth = false;
+        /**
+         * Internal state for tracking redirect
+         */
+        this.redirecting = false;
+    }
+    get config() {
+        return PROVIDER_CONFIGS[this.provider] || PROVIDER_CONFIGS.custom;
+    }
+    get displayName() {
+        if (this.providerName)
+            return this.providerName;
+        return this.config.name;
+    }
+    get displayText() {
+        if (this.buttonText)
+            return this.buttonText;
+        return `Continue with ${this.displayName}`;
+    }
+    handleClick() {
+        if (this.disabled || this.loading || this.redirecting)
+            return;
+        if (this.url) {
+            this.redirecting = true;
+            window.location.href = this.url;
+        }
+        // Dispatch custom event with provider details (named 'oauth-click' to avoid
+        // collision with native 'click' event which already bubbles through shadow DOM)
+        this.dispatchEvent(new CustomEvent('oauth-click', {
+            detail: { provider: this.provider, url: this.url },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    renderProviderIcon() {
+        if (this.customIcon) {
+            // Sanitize custom SVG to prevent XSS attacks
+            const sanitized = sanitizeSvg(this.customIcon);
+            return html `<div class="icon">${unsafeSVG(sanitized)}</div>`;
+        }
+        switch (this.provider) {
+            case 'google':
+                return html `
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="#4285F4"
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              />
+              <path
+                fill="#34A853"
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              />
+              <path
+                fill="#FBBC05"
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              />
+              <path
+                fill="#EA4335"
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              />
+            </svg>
+          </div>
+        `;
+            case 'microsoft':
+                return html `
+          <div class="icon">
+            <svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
+              <rect x="1" y="1" width="9" height="9" fill="#f25022" />
+              <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
+              <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
+              <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
+            </svg>
+          </div>
+        `;
+            case 'apple':
+                return html `
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="currentColor"
+                d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
+              />
+            </svg>
+          </div>
+        `;
+            case 'github':
+                return html `
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="currentColor"
+                d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"
+              />
+            </svg>
+          </div>
+        `;
+            case 'twitter':
+                return html `
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="currentColor"
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              />
+            </svg>
+          </div>
+        `;
+            case 'facebook':
+                return html `
+          <div class="icon">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill="currentColor"
+                d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+              />
+            </svg>
+          </div>
+        `;
+            default:
+                return nothing;
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('provider')) {
+            const config = this.config;
+            this.style.setProperty('--button-bg', config.bgColor);
+            this.style.setProperty('--button-text', config.textColor);
+            this.style.setProperty('--button-border', config.borderColor);
+            this.style.setProperty('--button-hover-bg', config.hoverBgColor);
+        }
+    }
+    render() {
+        const isLoading = this.loading || this.redirecting;
+        return html `
+      <button
+        part="button"
+        type="button"
+        ?disabled=${this.disabled || isLoading}
+        @click=${this.handleClick}
+        style="
+          background-color: var(--button-bg, ${this.config.bgColor});
+          color: var(--button-text, ${this.config.textColor});
+          border: 1px solid var(--button-border, ${this.config.borderColor});
+        "
+        aria-busy=${isLoading}
+      >
+        ${isLoading
+            ? html `<span class="spinner"></span>`
+            : this.renderProviderIcon()}
+        <span class="text" part="text">${this.displayText}</span>
+      </button>
+    `;
+    }
+};
+ConsentOAuthButton.styles = css `
+    :host {
+      display: inline-block;
+    }
+
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+
+    button {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      height: 2.75rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: background-color 0.15s ease, opacity 0.15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    button:focus-visible {
+      outline: 2px solid #2563eb;
+      outline-offset: 2px;
+    }
+
+    .icon {
+      width: 1.125rem;
+      height: 1.125rem;
+      flex-shrink: 0;
+    }
+
+    .icon svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    /* Loading spinner */
+    .spinner {
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .text {
+      flex: 1;
+      text-align: center;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], ConsentOAuthButton.prototype, "provider", void 0);
+__decorate([
+    property({ type: String, attribute: 'provider-name' })
+], ConsentOAuthButton.prototype, "providerName", void 0);
+__decorate([
+    property({ type: String })
+], ConsentOAuthButton.prototype, "url", void 0);
+__decorate([
+    property({ type: String, attribute: 'button-text' })
+], ConsentOAuthButton.prototype, "buttonText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ConsentOAuthButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ConsentOAuthButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'full-width' })
+], ConsentOAuthButton.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'custom-icon' })
+], ConsentOAuthButton.prototype, "customIcon", void 0);
+__decorate([
+    state()
+], ConsentOAuthButton.prototype, "redirecting", void 0);
+ConsentOAuthButton = __decorate([
+    customElement('consent-oauth-button')
+], ConsentOAuthButton);
+export { ConsentOAuthButton };
+//# sourceMappingURL=consent-oauth-button.js.map

package/dist/components/consent-oauth-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-oauth-button.js","sourceRoot":"","sources":["../../src/components/consent-oauth-button.ts"],"names":[],"mappings":"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"}

package/dist/components/consent-otp-input.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Consent OTP Input Web Component
+ *
+ * Individual digit input boxes for one-time password entry.
+ * Supports auto-focus, paste handling, and keyboard navigation.
+ * Implements Form Associated Custom Elements for proper form participation.
+ *
+ * @module components/consent-otp-input
+ */
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * ConsentOTPInput - OTP digit input boxes
+ *
+ * @example
+ * ```html
+ * <consent-otp-input
+ *   length="6"
+ *   name="otp"
+ * ></consent-otp-input>
+ * ```
+ *
+ * @fires input - Fired on each digit entry
+ * @fires complete - Fired when all digits are entered
+ * @fires change - Fired when value changes
+ * @csspart container - The container for all digit boxes
+ * @csspart input - Individual digit input
+ * @cssprop --consent-primary - Primary brand color for focus state
+ */
+export declare class ConsentOTPInput extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    constructor();
+    /**
+     * Number of OTP digits
+     */
+    length: number;
+    /**
+     * Form field name
+     */
+    name: string;
+    /**
+     * Current OTP value
+     */
+    value: string;
+    /**
+     * Disabled state
+     */
+    disabled: boolean;
+    /**
+     * Error state
+     */
+    error: boolean;
+    /**
+     * Auto-focus first input on mount
+     */
+    autoFocus: boolean;
+    /**
+     * Input type (text or number)
+     */
+    inputType: 'text' | 'number';
+    /**
+     * Internal digit values
+     */
+    private digits;
+    private inputs;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    private initializeDigits;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    private getFullValue;
+    private handleInput;
+    private handleKeyDown;
+    private handlePaste;
+    private handleFocus;
+    /**
+     * Focus the first empty input or the last input
+     */
+    focus(): void;
+    /**
+     * Clear all digits
+     */
+    clear(): void;
+    private renderDigitInput;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'consent-otp-input': ConsentOTPInput;
+    }
+}
+//# sourceMappingURL=consent-otp-input.d.ts.map

package/dist/components/consent-otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-otp-input.d.ts","sourceRoot":"","sources":["../../src/components/consent-otp-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAE7C,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAAmB;;IAOpC;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,IAAI,SAAS;IAEb;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,EAAE,MAAM,GAAG,QAAQ,CAAU;IAEtC;;OAEG;IAEH,OAAO,CAAC,MAAM,CAAgB;IAG9B,OAAO,CAAC,MAAM,CAAgC;IAE9C,OAAgB,MAAM,0BA+EpB;IAEO,iBAAiB;IAK1B,OAAO,CAAC,gBAAgB;cAYL,YAAY;cAMZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAclE,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAyDnB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,WAAW;IAwCnB,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACa,KAAK;IAMrB;;OAEG;IACI,KAAK;IAMZ,OAAO,CAAC,gBAAgB;IAwBf,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}