@jsekulowicz/ds-components 0.1.0

package/dist/molecules/color-picker/color-picker-swatch.styles.js

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+export const colorPickerSwatchStyles = css `
+  :host {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    width: var(--color-picker-swatch-size, 28px);
+    min-width: var(--color-picker-swatch-size, 28px);
+    border: 1px solid var(--ds-color-border-strong);
+    border-radius: var(--ds-radius-sm);
+    background: var(--color-picker-value, transparent);
+    cursor: pointer;
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+    box-shadow: var(--ds-shadow-focus);
+  }
+
+  :host([disabled]) {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  :host([selected]) {
+    border-color: transparent;
+  }
+
+  .check {
+    display: none;
+    width: 18px;
+    height: 18px;
+    color: var(--color-picker-check-color, var(--ds-color-bg));
+  }
+
+  :host([selected]) .check {
+    display: block;
+  }
+`;
+//# sourceMappingURL=color-picker-swatch.styles.js.map

package/dist/molecules/color-picker/color-picker-swatch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-swatch.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCzC,CAAC"}

package/dist/molecules/color-picker/color-picker.d.ts

@@ -0,0 +1,45 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import '../../atoms/button/define.js';
+import '../../atoms/icon/define.js';
+import '../../atoms/icon/icons/swatch.js';
+import '../../atoms/text-field/define.js';
+import '../card/define.js';
+import './color-picker-swatch-group.js';
+import './input-color.js';
+import type { ColorPickerOption } from './types.js';
+declare const DsColorPicker_base: typeof DsElement & (new (...args: any[]) => import("@jsekulowicz/ds-core").FormControlHost & DsElement);
+/**
+ * @tag ds-color-picker
+ * @summary Form-associated color picker with preset swatches and custom Hex RGB input.
+ * @event ds-input - Fires on live custom color edits. Detail: `{ value }`.
+ * @event ds-change - Fires when the committed color changes. Detail: `{ value }`.
+ * @csspart trigger - The field trigger button.
+ * @csspart preview - The selected color preview swatch.
+ * @csspart panel - The popover panel.
+ * @csspart swatch - Each preset color swatch.
+ */
+export declare class DsColorPicker extends DsColorPicker_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    colors: ColorPickerOption[];
+    label: string;
+    placeholder: string;
+    description: string;
+    error: string;
+    invalid: boolean;
+    optional: boolean;
+    clearable: boolean;
+    compact: boolean;
+    private triggerEl?;
+    get value(): FormDataEntryValue | null;
+    set value(next: FormDataEntryValue | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/molecules/color-picker/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1F,OAAO,EAAE,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AACnE,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mBAAmB,CAAC;AAK3B,OAAO,gCAAgC,CAAC;AACxC,OAAO,kBAAkB,CAAC;AAQ1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;;AAEpD;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,kBAA2B;;IAC5D,OAAgB,MAAM,4BAA6D;IACnF,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEyB,MAAM,EAAE,iBAAiB,EAAE,CAAM;IAChD,KAAK,SAAM;IACX,WAAW,SAAoB;IAC/B,WAAW,SAAM;IACjB,KAAK,SAAM;IACqB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,SAAS,UAAS;IAClB,OAAO,UAAS;IAEzC,OAAO,CAAC,SAAS,CAAC,CAAc;IAkBnD,IAAa,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE9C;IAED,IAAa,KAAK,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,EAiBjD;IAEQ,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMzC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAuEtC,MAAM,IAAI,cAAc;CAuIlC"}

package/dist/molecules/color-picker/color-picker.js

@@ -0,0 +1,322 @@
+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 { html, nothing, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { DsElement, FormControlMixin } from '@jsekulowicz/ds-core';
+import '../../atoms/button/define.js';
+import '../../atoms/icon/define.js';
+import '../../atoms/icon/icons/swatch.js';
+import '../../atoms/text-field/define.js';
+import '../card/define.js';
+import { formFieldStyles, renderFieldLabel, renderSubtext } from '../../shared/form-field.js';
+import { ColorPickerCustomInputs } from './color-picker-custom-inputs.js';
+import { ColorPickerPopover } from './color-picker-popover.js';
+import { colorPickerStyles } from './color-picker.styles.js';
+import './color-picker-swatch-group.js';
+import './input-color.js';
+import { COLOR_FORMAT_ERROR, getContrastingThemeColor, getColorLabel, normalizeColorOptions, normalizeHexColor, } from './color-utils.js';
+/**
+ * @tag ds-color-picker
+ * @summary Form-associated color picker with preset swatches and custom Hex RGB input.
+ * @event ds-input - Fires on live custom color edits. Detail: `{ value }`.
+ * @event ds-change - Fires when the committed color changes. Detail: `{ value }`.
+ * @csspart trigger - The field trigger button.
+ * @csspart preview - The selected color preview swatch.
+ * @csspart panel - The popover panel.
+ * @csspart swatch - Each preset color swatch.
+ */
+export class DsColorPicker extends FormControlMixin(DsElement) {
+    constructor() {
+        super(...arguments);
+        this.colors = [];
+        this.label = '';
+        this.placeholder = 'Select a color';
+        this.description = '';
+        this.error = '';
+        this.invalid = false;
+        this.optional = false;
+        this.clearable = false;
+        this.compact = false;
+        this.#popover = new ColorPickerPopover(this, {
+            focusTrigger: () => this.#focusTrigger(),
+            onOpen: () => { },
+        });
+        this.#customInputs = new ColorPickerCustomInputs(this, {
+            closePicker: () => this.#popover.close(true),
+            commitAndClose: () => this.#commitAndClose(),
+            emitChange: (value) => this.emit('ds-change', { detail: { value } }),
+            emitInput: (value) => this.emit('ds-input', { detail: { value } }),
+            setValidation: (message) => this.#syncValidity(message),
+            setValue: (value) => {
+                this.value = value;
+            },
+        });
+        this.#clear = () => {
+            this.value = '';
+            this.emit('ds-change', { detail: { value: '' } });
+            this.#popover.close(true);
+        };
+        this.#commitAndClose = () => {
+            if (!this.#customInputs.commit()) {
+                this.#customInputs.focusHexInput(this.shadowRoot);
+                return;
+            }
+            this.emit('ds-change', { detail: { value: this.#currentValue() } });
+            this.#popover.close(true);
+        };
+        this.#onSwatchGroupSelect = (event) => {
+            this.#selectColor(event.detail.value);
+        };
+    }
+    static { this.styles = [...DsElement.styles, formFieldStyles, colorPickerStyles]; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    #popover;
+    #customInputs;
+    get value() {
+        return super.value;
+    }
+    set value(next) {
+        if (next === null || next === '') {
+            super.value = '';
+            this.#customInputs.syncEmpty();
+            this.#syncValidity();
+            return;
+        }
+        const normalized = normalizeHexColor(next);
+        if (!normalized) {
+            super.value = '';
+            this.#customInputs.syncInvalid(String(next));
+            this.#syncValidity(COLOR_FORMAT_ERROR);
+            return;
+        }
+        super.value = normalized;
+        this.#customInputs.syncValue(normalized);
+        this.#syncValidity();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === null) {
+            this.value = '';
+        }
+        if (!this.label && !this.compact) {
+            console.warn('<ds-color-picker>: the `label` property is required for accessibility.');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#popover.disconnect();
+    }
+    willUpdate(changed) {
+        if (changed.has('required') || changed.has('value')) {
+            this.#syncValidity();
+        }
+    }
+    updated(changed) {
+        if (changed.has('label') || changed.has('compact') || changed.has('placeholder')) {
+            this.setAriaLabel(this.#fieldAccessibleName());
+        }
+        if (changed.has('description')) {
+            this.setAriaDescription(this.description || null);
+        }
+    }
+    #colorOptions() {
+        return normalizeColorOptions(this.colors);
+    }
+    #currentValue() {
+        return typeof this.value === 'string' ? this.value : '';
+    }
+    #selectedOption(options) {
+        const current = this.#currentValue();
+        return options.find((option) => option.value === current);
+    }
+    #syncValidity(message = this.#customInputs.validationError) {
+        const missing = this.required && !this.#currentValue();
+        const validationMessage = message || (missing ? 'Please select a color.' : '');
+        const flags = message ? { customError: true } : missing ? { valueMissing: true } : {};
+        if (this.triggerEl) {
+            this.setValidity(flags, validationMessage, this.triggerEl);
+        }
+        else {
+            this.setValidity(flags, validationMessage);
+        }
+        this.invalid = Boolean(validationMessage);
+    }
+    #fieldAccessibleName() {
+        return this.label || (this.compact ? this.placeholder || 'Select color' : null);
+    }
+    #focusTrigger() {
+        const button = this.triggerEl?.shadowRoot?.querySelector('button');
+        (button ?? this.triggerEl)?.focus();
+    }
+    #clear;
+    #commitAndClose;
+    #selectColor(value) {
+        if (this.disabled) {
+            return;
+        }
+        this.value = value;
+        this.emit('ds-change', { detail: { value } });
+        this.#popover.close(true);
+    }
+    #onSwatchGroupSelect;
+    render() {
+        const options = this.#colorOptions();
+        const current = this.#currentValue();
+        const selected = this.#selectedOption(options);
+        return html `
+      ${this.label && !this.compact
+            ? renderFieldLabel(this.label, this.required, 'trigger', this.optional)
+            : nothing}
+      <div class="control-wrap" @keydown=${this.#popover.onPanelKeydown}>
+        ${this.#renderTrigger(current, selected)}
+        ${this.#popover.open ? this.#renderPanel(options, current) : nothing}
+      </div>
+      ${this.compact ? nothing : renderSubtext(this.description, this.error, this.invalid)}
+    `;
+    }
+    #renderTrigger(current, selected) {
+        const label = selected ? getColorLabel(selected) : current || this.placeholder;
+        return html `<ds-button
+      id="trigger"
+      class="trigger"
+      part="trigger"
+      variant="secondary"
+      style=${this.compact ? this.#compactTriggerStyle(current) : nothing}
+      ?full-width=${!this.compact}
+      ?disabled=${this.disabled}
+      label=${this.#triggerAccessibleName(current, selected)}
+      aria-haspopup="dialog"
+      aria-expanded=${this.#popover.open ? 'true' : 'false'}
+      aria-controls=${this.#popover.open ? 'panel' : nothing}
+      aria-invalid=${this.invalid ? 'true' : 'false'}
+      @ds-click=${this.#popover.toggle}
+      @keydown=${this.#popover.onTriggerKeydown}
+    >
+      <span
+        class="preview"
+        part="preview"
+        style=${current ? `--color-picker-value:${current}` : ''}
+        aria-hidden="true"
+      ></span>
+      ${this.compact
+            ? html `<ds-icon class="compact-icon" name="swatch"></ds-icon>`
+            : html `<span class="trigger-text">
+            <span class=${current ? 'trigger-label' : 'trigger-label placeholder'}>${label}</span>
+            ${current ? html `<span class="trigger-value">${current}</span>` : nothing}
+          </span>`}
+    </ds-button>`;
+    }
+    #triggerAccessibleName(current, selected) {
+        const base = this.label || this.placeholder || 'Select color';
+        if (!current) {
+            return base;
+        }
+        return `${base}: ${selected ? getColorLabel(selected) : current} ${current}`;
+    }
+    #compactTriggerStyle(current) {
+        if (!this.compact || !current) {
+            return '';
+        }
+        const styles = getComputedStyle(this);
+        const color = getContrastingThemeColor(current, styles.getPropertyValue('--ds-color-bg'), styles.getPropertyValue('--ds-color-fg'));
+        return `--color-picker-compact-bg:${current};--color-picker-compact-fg:${color};`;
+    }
+    #renderPanel(options, current) {
+        return html `<div
+      id="panel"
+      class="panel"
+      part="panel"
+      role="dialog"
+      aria-label=${this.#fieldAccessibleName() || 'Color picker'}
+    >
+      <ds-card elevation="md">
+        <span slot="title" class="panel-title">
+          ${this.#fieldAccessibleName() || 'Color picker'}
+        </span>
+        ${options.length ? this.#renderSwatches(options, current) : nothing}
+        ${this.#renderCustomInputs()}
+        <div slot="footer" class="panel-actions">
+          ${this.clearable
+            ? html `<ds-button variant="ghost" size="sm" @ds-click=${this.#clear}>Clear</ds-button>`
+            : nothing}
+          <ds-button variant="primary" size="sm" @ds-click=${this.#commitAndClose}>Done</ds-button>
+        </div>
+      </ds-card>
+    </div>`;
+    }
+    #renderSwatches(options, current) {
+        return html `<ds-color-picker-swatch-group
+      .options=${options}
+      .value=${current}
+      ?compact=${this.compact}
+      ?disabled=${this.disabled}
+      @ds-color-picker-swatch-group-select=${this.#onSwatchGroupSelect}
+    ></ds-color-picker-swatch-group>`;
+    }
+    #renderCustomInputs() {
+        const validationError = this.#customInputs.validationError;
+        return html `<section class="section" aria-labelledby="custom-label">
+      <div id="custom-label" class="section-label">Custom color</div>
+      <div class="custom-row">
+        <ds-color-picker-input-color
+          class="native-color"
+          .value=${this.#customInputs.nativeValue}
+          ?disabled=${this.disabled}
+          @ds-input=${this.#customInputs.onNativeInput}
+          @ds-change=${this.#customInputs.onNativeChange}
+        ></ds-color-picker-input-color>
+        <ds-text-field
+          class="hex-input"
+          input-label="Hex code"
+          size="sm"
+          placeholder="Hex code (#RRGGBB)"
+          .value=${this.#customInputs.textValue}
+          .error=${validationError}
+          ?disabled=${this.disabled}
+          ?invalid=${Boolean(validationError)}
+          @ds-input=${this.#customInputs.onTextInput}
+          @ds-change=${this.#customInputs.onTextChange}
+          @keydown=${this.#customInputs.onTextKeydown}
+        ></ds-text-field>
+      </div>
+    </section>`;
+    }
+}
+__decorate([
+    property({ type: Array })
+], DsColorPicker.prototype, "colors", void 0);
+__decorate([
+    property()
+], DsColorPicker.prototype, "label", void 0);
+__decorate([
+    property()
+], DsColorPicker.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], DsColorPicker.prototype, "description", void 0);
+__decorate([
+    property()
+], DsColorPicker.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPicker.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPicker.prototype, "optional", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPicker.prototype, "clearable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsColorPicker.prototype, "compact", void 0);
+__decorate([
+    query('#trigger')
+], DsColorPicker.prototype, "triggerEl", void 0);
+//# sourceMappingURL=color-picker.js.map

package/dist/molecules/color-picker/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAA4C,MAAM,KAAK,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9F,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,gCAAgC,CAAC;AACxC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,aAAa,EACb,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAG1B;;;;;;;;;GASG;AACH,MAAM,OAAO,aAAc,SAAQ,gBAAgB,CAAC,SAAS,CAAC;IAA9D;;QAO6B,WAAM,GAAwB,EAAE,CAAC;QAChD,UAAK,GAAG,EAAE,CAAC;QACX,gBAAW,GAAG,gBAAgB,CAAC;QAC/B,gBAAW,GAAG,EAAE,CAAC;QACjB,UAAK,GAAG,EAAE,CAAC;QACqB,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QAClB,YAAO,GAAG,KAAK,CAAC;QAI5D,aAAQ,GAAG,IAAI,kBAAkB,CAAC,IAAI,EAAE;YACtC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;SACjB,CAAC,CAAC;QAEH,kBAAa,GAAG,IAAI,uBAAuB,CAAC,IAAI,EAAE;YAChD,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC;YAC5C,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;YAC5C,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC;YAC5E,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC;YAC1E,aAAa,EAAE,CAAC,OAAe,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;YAC/D,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE;gBAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACrB,CAAC;SACF,CAAC,CAAC;QAyFH,WAAM,GAAG,GAAS,EAAE;YAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAS,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC;gBACjC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAClD,OAAO;YACT,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC;YACpE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC,CAAC;QAWF,yBAAoB,GAAG,CAAC,KAAqC,EAAQ,EAAE;YACrE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC,CAAC;IAyIJ,CAAC;aA5RiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,eAAe,EAAE,iBAAiB,CAAC,AAA5D,CAA6D;aACnE,sBAAiB,GAAmB;QAClD,GAAG,UAAU,CAAC,iBAAiB;QAC/B,cAAc,EAAE,IAAI;KACrB,AAHgC,CAG/B;IAcF,QAAQ,CAGL;IAEH,aAAa,CASV;IAEH,IAAa,KAAK;QAChB,OAAO,KAAK,CAAC,KAAK,CAAC;IACrB,CAAC;IAED,IAAa,KAAK,CAAC,IAA+B;QAChD,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;YACjC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7C,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;YACvC,OAAO;QACT,CAAC;QACD,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,wEAAwE,CAAC,CAAC;QACzF,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAEQ,UAAU,CAAC,OAAuB;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACtC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YACjF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QACjD,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,aAAa;QACX,OAAO,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,aAAa;QACX,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1D,CAAC;IAED,eAAe,CAAC,OAA4B;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACrC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC;IAC5D,CAAC;IAED,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe;QACxD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvD,MAAM,iBAAiB,GAAG,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/E,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACtF,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7D,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;QAC7C,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC5C,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAClF,CAAC;IAED,aAAa;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,aAAa,CAAoB,QAAQ,CAAC,CAAC;QACtF,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC;IACtC,CAAC;IAED,MAAM,CAIJ;IAEF,eAAe,CAOb;IAEF,YAAY,CAAC,KAAa;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,oBAAoB,CAElB;IAEO,MAAM;QACb,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACrC,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QAE/C,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO;YAC3B,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC;YACvE,CAAC,CAAC,OAAO;2CAC0B,IAAI,CAAC,QAAQ,CAAC,cAAc;UAC7D,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC;UACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;;QAEpE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;KACrF,CAAC;IACJ,CAAC;IAED,cAAc,CAAC,OAAe,EAAE,QAA4B;QAC1D,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC;QAE/E,OAAO,IAAI,CAAA;;;;;cAKD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;oBACrD,CAAC,IAAI,CAAC,OAAO;kBACf,IAAI,CAAC,QAAQ;cACjB,IAAI,CAAC,sBAAsB,CAAC,OAAO,EAAE,QAAQ,CAAC;;sBAEtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBACrC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;qBACvC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBAClC,IAAI,CAAC,QAAQ,CAAC,MAAM;iBACrB,IAAI,CAAC,QAAQ,CAAC,gBAAgB;;;;;gBAK/B,OAAO,CAAC,CAAC,CAAC,wBAAwB,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;;;QAGxD,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,wDAAwD;YAC9D,CAAC,CAAC,IAAI,CAAA;0BACY,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,2BAA2B,IAAI,KAAK;cAC5E,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,OAAO,SAAS,CAAC,CAAC,CAAC,OAAO;kBACnE;iBACD,CAAC;IAChB,CAAC;IAED,sBAAsB,CAAC,OAAe,EAAE,QAA4B;QAClE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC;QAC9D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,OAAO,EAAE,CAAC;IAC/E,CAAC;IAED,oBAAoB,CAAC,OAAe;QAClC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,wBAAwB,CACpC,OAAO,EACP,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,EACxC,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CACzC,CAAC;QACF,OAAO,6BAA6B,OAAO,8BAA8B,KAAK,GAAG,CAAC;IACpF,CAAC;IAED,YAAY,CAAC,OAA4B,EAAE,OAAe;QACxD,OAAO,IAAI,CAAA;;;;;mBAKI,IAAI,CAAC,oBAAoB,EAAE,IAAI,cAAc;;;;YAIpD,IAAI,CAAC,oBAAoB,EAAE,IAAI,cAAc;;UAE/C,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;UACjE,IAAI,CAAC,mBAAmB,EAAE;;YAExB,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,kDAAkD,IAAI,CAAC,MAAM,oBAAoB;YACvF,CAAC,CAAC,OAAO;6DACwC,IAAI,CAAC,eAAe;;;WAGtE,CAAC;IACV,CAAC;IAED,eAAe,CAAC,OAA4B,EAAE,OAAe;QAC3D,OAAO,IAAI,CAAA;iBACE,OAAO;eACT,OAAO;iBACL,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;6CACc,IAAI,CAAC,oBAAoB;qCACjC,CAAC;IACpC,CAAC;IAED,mBAAmB;QACjB,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;QAE3D,OAAO,IAAI,CAAA;;;;;mBAKI,IAAI,CAAC,aAAa,CAAC,WAAW;sBAC3B,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,aAAa,CAAC,aAAa;uBAC/B,IAAI,CAAC,aAAa,CAAC,cAAc;;;;;;;mBAOrC,IAAI,CAAC,aAAa,CAAC,SAAS;mBAC5B,eAAe;sBACZ,IAAI,CAAC,QAAQ;qBACd,OAAO,CAAC,eAAe,CAAC;sBACvB,IAAI,CAAC,aAAa,CAAC,WAAW;uBAC7B,IAAI,CAAC,aAAa,CAAC,YAAY;qBACjC,IAAI,CAAC,aAAa,CAAC,aAAa;;;eAGtC,CAAC;IACd,CAAC;;AArR0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAkC;AAChD;IAAX,QAAQ,EAAE;4CAAY;AACX;IAAX,QAAQ,EAAE;kDAAgC;AAC/B;IAAX,QAAQ,EAAE;kDAAkB;AACjB;IAAX,QAAQ,EAAE;4CAAY;AACqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAChB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAmB;AAClB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAEjC;IAA1B,KAAK,CAAC,UAAU,CAAC;gDAAiC"}

package/dist/molecules/color-picker/color-picker.styles.d.ts

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

package/dist/molecules/color-picker/color-picker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA8K7B,CAAC"}

package/dist/molecules/color-picker/color-picker.styles.js

@@ -0,0 +1,177 @@
+import { css } from 'lit';
+export const colorPickerStyles = css `
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+    width: 100%;
+  }
+  :host([compact]) {
+    width: auto;
+  }
+  .control-wrap {
+    position: relative;
+    width: 100%;
+  }
+  :host([compact]) .control-wrap {
+    width: auto;
+  }
+  .trigger {
+    width: 100%;
+  }
+  :host([compact]) .trigger {
+    width: auto;
+  }
+  .trigger::part(button) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    min-height: var(--ds-size-md);
+    gap: var(--ds-space-3);
+    padding: var(--ds-space-1) var(--ds-space-3);
+    border: 1px solid var(--ds-color-border-strong);
+    border-radius: var(--ds-radius-sm);
+    background: var(--ds-color-bg);
+    color: var(--ds-color-fg);
+    height: auto;
+    text-align: left;
+    transition:
+      border-color var(--ds-duration-fast) var(--ds-easing-standard),
+      box-shadow var(--ds-duration-fast) var(--ds-easing-standard);
+  }
+  .trigger:hover::part(button) {
+    border-color: var(--ds-color-fg-subtle);
+  }
+  .trigger[aria-expanded='true']::part(button) {
+    border-color: var(--ds-color-accent);
+    box-shadow: var(--ds-shadow-focus);
+    outline: none;
+  }
+  :host([compact]) .trigger::part(button) {
+    --color-picker-compact-size: 24px;
+    width: var(--color-picker-compact-size);
+    min-width: var(--color-picker-compact-size);
+    height: var(--color-picker-compact-size);
+    min-height: var(--color-picker-compact-size);
+    padding: 0;
+    border-color: var(--color-picker-compact-bg, var(--ds-color-border-strong));
+    background: var(--color-picker-compact-bg, var(--ds-color-bg));
+    color: var(--color-picker-compact-fg, var(--ds-color-fg));
+    justify-content: center;
+  }
+  :host([compact]) .trigger:hover::part(button),
+  :host([compact]) .trigger[aria-expanded='true']::part(button) {
+    border-color: var(--color-picker-compact-fg, var(--ds-color-fg-subtle));
+  }
+  :host([invalid]) .trigger::part(button) {
+    border-color: var(--ds-color-danger);
+    background: var(--ds-color-danger-subtle);
+  }
+  :host([disabled]) .trigger::part(button) {
+    opacity: 0.5;
+    background: var(--ds-color-bg-subtle);
+    cursor: not-allowed;
+  }
+  .preview {
+    background: var(--color-picker-value, transparent);
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--ds-color-border-strong);
+    border-radius: var(--ds-radius-sm);
+    flex: 0 0 auto;
+  }
+  :host([compact]) .preview {
+    display: none;
+  }
+  .compact-icon {
+    display: none;
+  }
+  :host([compact]) .compact-icon {
+    display: inline-flex;
+    color: currentColor;
+    font-size: 1rem;
+  }
+  .trigger-text {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+  }
+  .trigger-label,
+  .trigger-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .trigger-value {
+    color: var(--ds-color-fg-muted);
+    font-size: var(--ds-font-size-xs);
+  }
+  .placeholder {
+    color: var(--ds-color-fg-muted);
+  }
+  .panel {
+    position: absolute;
+    inset-inline: 0;
+    top: calc(100% + var(--ds-space-1));
+    z-index: 100;
+    max-width: min(100%, calc(100vw - 2rem));
+  }
+  :host([compact]) .panel {
+    width: min(280px, calc(100vw - 2rem));
+    max-width: calc(100vw - 2rem);
+    inset-inline-end: auto;
+  }
+  ds-card::part(card) {
+    gap: var(--ds-space-3);
+    padding: var(--ds-space-4);
+    box-shadow: var(--ds-shadow-md);
+  }
+  ds-card::part(body) {
+    display: grid;
+    gap: var(--ds-space-3);
+  }
+  .panel-title {
+    font-size: var(--ds-font-size-sm);
+    font-weight: var(--ds-font-weight-semibold);
+  }
+  .section {
+    display: grid;
+    gap: var(--ds-space-2);
+  }
+  .section-label {
+    color: var(--ds-color-fg);
+    font-size: var(--ds-font-size-sm);
+    font-weight: var(--ds-font-weight-medium);
+  }
+  .custom-row {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--ds-space-2);
+    align-items: end;
+  }
+  .native-color {
+    align-self: end;
+    --color-picker-input-size: var(--ds-size-sm);
+  }
+  .hex-input {
+    min-width: 0;
+  }
+  .panel-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ds-space-2);
+  }
+  @media (max-width: 480px) {
+    .custom-row {
+      grid-template-columns: 1fr;
+      align-items: stretch;
+    }
+    .panel-actions ds-button {
+      flex: 1 1 120px;
+    }
+  }
+`;
+//# sourceMappingURL=color-picker.styles.js.map

package/dist/molecules/color-picker/color-picker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KnC,CAAC"}

package/dist/molecules/color-picker/color-utils.d.ts

@@ -0,0 +1,8 @@
+import type { ColorPickerOption } from './types.js';
+export declare const DEFAULT_COLOR = "#000000";
+export declare const COLOR_FORMAT_ERROR = "Use #RGB or #RRGGBB.";
+export declare function normalizeHexColor(value: unknown): string | null;
+export declare function normalizeColorOptions(colors: ColorPickerOption[]): ColorPickerOption[];
+export declare function getColorLabel(color: ColorPickerOption): string;
+export declare function getContrastingThemeColor(value: string, bg: string, fg: string): string;
+//# sourceMappingURL=color-utils.d.ts.map

package/dist/molecules/color-picker/color-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,kBAAkB,yBAAyB,CAAC;AAYzD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAiB/D;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAQtF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAE9D;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAUtF"}