@carbon-labs/wc-date-picker 0.2.0

package/es/components/date-picker/calendar-renderer.d.ts

@@ -0,0 +1,147 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+/**
+ * Calendar renderer for date picker.
+ * Replaces Flatpickr's calendar UI with a lightweight, framework-agnostic implementation.
+ *
+ * @element cds-date-picker-calendar
+ * @fires cds-date-picker-calendar-date-select - Fired when a date is selected
+ * @fires cds-date-picker-calendar-month-change - Fired when the month changes
+ */
+declare class CDSDatePickerCalendar extends LitElement {
+    /**
+     * The currently displayed month (Temporal.PlainYearMonth)
+     */
+    private _currentMonth;
+    /**
+     * The selected date(s)
+     */
+    selectedDates: Temporal.PlainDate[];
+    /**
+     * The view date from the state machine (used to sync calendar month)
+     */
+    viewDate?: Temporal.PlainDate;
+    /**
+     * The focused date for keyboard navigation
+     */
+    focusedDate?: Temporal.PlainDate | null;
+    /**
+     * The currently hovered date (for range preview)
+     */
+    private _hoveredDate?;
+    /**
+     * The minimum selectable date
+     */
+    minDate?: Temporal.PlainDate;
+    /**
+     * The maximum selectable date
+     */
+    maxDate?: Temporal.PlainDate;
+    /**
+     * Whether range selection is enabled
+     */
+    rangeMode: boolean;
+    /**
+     * The date format for display
+     */
+    dateFormat: string;
+    /**
+     * Locale for date formatting
+     */
+    locale: string;
+    /**
+     * Navigate to previous month
+     */
+    private _handlePrevMonth;
+    /**
+     * Navigate to next month
+     */
+    private _handleNextMonth;
+    /**
+     * Handle date selection
+     * @param {Temporal.PlainDate} date - The date to select
+     */
+    private _handleDateSelect;
+    /**
+     * Dispatch month change event
+     */
+    private _dispatchMonthChange;
+    /**
+     * Check if a date is disabled
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isDateDisabled;
+    /**
+     * Check if previous month navigation should be disabled
+     */
+    private _isPrevMonthDisabled;
+    /**
+     * Check if next month navigation should be disabled
+     */
+    private _isNextMonthDisabled;
+    /**
+     * Check if a date is selected
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isDateSelected;
+    /**
+     * Check if a date is in range (for range mode)
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isDateInRange;
+    /**
+     * Check if a date is today
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isToday;
+    /**
+     * Check if a date is focused (for keyboard navigation)
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    private _isDateFocused;
+    /**
+     * Handle mouse enter on a date
+     * @param {Temporal.PlainDate} date - The date being hovered
+     */
+    private _handleDateMouseEnter;
+    /**
+     * Handle mouse leave on a date
+     */
+    private _handleDateMouseLeave;
+    /**
+     * Get the days to display in the calendar grid
+     */
+    private _getCalendarDays;
+    /**
+     * Get weekday names
+     */
+    private _getWeekdayNames;
+    /**
+     * Render the calendar header with month/year and navigation
+     */
+    private _renderHeader;
+    /**
+     * Render the weekday headers
+     */
+    private _renderWeekdays;
+    /**
+     * Render the calendar days grid
+     */
+    private _renderDays;
+    /**
+     * Lifecycle method called when properties change
+     * @param {Map<string, any>} changedProperties - Changed properties
+     */
+    updated(changedProperties: Map<string, any>): void;
+    /**
+     * Renders the calendar component
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSDatePickerCalendar;

package/es/components/date-picker/calendar-renderer.js

@@ -0,0 +1,406 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix } from '../../temp-imports/globals/settings.js';
+import { carbonElement } from '../../temp-imports/globals/decorators/carbon-element.js';
+import ChevronLeft16 from '@carbon/icons/es/chevron--left/16.js';
+import ChevronRight16 from '@carbon/icons/es/chevron--right/16.js';
+import { iconLoader } from '../../temp-imports/globals/internal/icon-loader.js';
+import { plainDateToDate } from '../../state-machine/temporal-utils.js';
+import styles from './date-picker.scss.js';
+
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Calendar renderer for date picker.
+ * Replaces Flatpickr's calendar UI with a lightweight, framework-agnostic implementation.
+ *
+ * @element cds-date-picker-calendar
+ * @fires cds-date-picker-calendar-date-select - Fired when a date is selected
+ * @fires cds-date-picker-calendar-month-change - Fired when the month changes
+ */
+let CDSDatePickerCalendar = class CDSDatePickerCalendar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The currently displayed month (Temporal.PlainYearMonth)
+         */
+        this._currentMonth = Temporal.Now.plainDateISO().toPlainYearMonth();
+        /**
+         * The selected date(s)
+         */
+        this.selectedDates = [];
+        /**
+         * Whether range selection is enabled
+         */
+        this.rangeMode = false;
+        /**
+         * The date format for display
+         */
+        this.dateFormat = 'm/d/Y';
+        /**
+         * Locale for date formatting
+         */
+        this.locale = 'en-US';
+    }
+    /**
+     * Navigate to previous month
+     */
+    _handlePrevMonth() {
+        this._currentMonth = this._currentMonth.subtract({ months: 1 });
+        this._dispatchMonthChange();
+    }
+    /**
+     * Navigate to next month
+     */
+    _handleNextMonth() {
+        this._currentMonth = this._currentMonth.add({ months: 1 });
+        this._dispatchMonthChange();
+    }
+    /**
+     * Handle date selection
+     * @param {Temporal.PlainDate} date - The date to select
+     */
+    _handleDateSelect(date) {
+        if (this._isDateDisabled(date)) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent(`${prefix}-date-picker-calendar-date-select`, {
+            bubbles: true,
+            composed: true,
+            detail: { date },
+        }));
+    }
+    /**
+     * Dispatch month change event
+     */
+    _dispatchMonthChange() {
+        this.dispatchEvent(new CustomEvent(`${prefix}-date-picker-calendar-month-change`, {
+            bubbles: true,
+            composed: true,
+            detail: { month: this._currentMonth },
+        }));
+    }
+    /**
+     * Check if a date is disabled
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    _isDateDisabled(date) {
+        if (this.minDate && Temporal.PlainDate.compare(date, this.minDate) < 0) {
+            return true;
+        }
+        if (this.maxDate && Temporal.PlainDate.compare(date, this.maxDate) > 0) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Check if previous month navigation should be disabled
+     */
+    _isPrevMonthDisabled() {
+        if (!this.minDate) {
+            return false;
+        }
+        // Disable if going to previous month would be before minDate's month
+        const prevMonth = this._currentMonth.subtract({ months: 1 });
+        const prevMonthLastDay = prevMonth.toPlainDate({
+            day: prevMonth.daysInMonth,
+        });
+        return Temporal.PlainDate.compare(prevMonthLastDay, this.minDate) < 0;
+    }
+    /**
+     * Check if next month navigation should be disabled
+     */
+    _isNextMonthDisabled() {
+        if (!this.maxDate) {
+            return false;
+        }
+        // Disable if going to next month would be after maxDate's month
+        const nextMonth = this._currentMonth.add({ months: 1 });
+        const nextMonthFirstDay = nextMonth.toPlainDate({ day: 1 });
+        return Temporal.PlainDate.compare(nextMonthFirstDay, this.maxDate) > 0;
+    }
+    /**
+     * Check if a date is selected
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    _isDateSelected(date) {
+        return this.selectedDates.some((selected) => {
+            if (!selected || typeof selected !== 'object' || !('year' in selected)) {
+                return false;
+            }
+            return Temporal.PlainDate.compare(selected, date) === 0;
+        });
+    }
+    /**
+     * Check if a date is in range (for range mode)
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    _isDateInRange(date) {
+        if (!this.rangeMode) {
+            return false;
+        }
+        // Case 1: Both dates are selected (final range)
+        if (this.selectedDates.length === 2) {
+            const [start, end] = this.selectedDates.sort((a, b) => Temporal.PlainDate.compare(a, b));
+            return (Temporal.PlainDate.compare(date, start) >= 0 &&
+                Temporal.PlainDate.compare(date, end) <= 0);
+        }
+        // Case 2: One date selected, show preview range with hovered or focused date
+        const previewDate = this._hoveredDate || this.focusedDate;
+        if (this.selectedDates.length === 1 && previewDate) {
+            const start = this.selectedDates[0];
+            const end = previewDate;
+            // Sort to handle both forward and backward selection
+            const [rangeStart, rangeEnd] = [start, end].sort((a, b) => Temporal.PlainDate.compare(a, b));
+            return (Temporal.PlainDate.compare(date, rangeStart) >= 0 &&
+                Temporal.PlainDate.compare(date, rangeEnd) <= 0);
+        }
+        return false;
+    }
+    /**
+     * Check if a date is today
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    _isToday(date) {
+        const today = Temporal.Now.plainDateISO();
+        return Temporal.PlainDate.compare(date, today) === 0;
+    }
+    /**
+     * Check if a date is focused (for keyboard navigation)
+     * @param {Temporal.PlainDate} date - The date to check
+     */
+    _isDateFocused(date) {
+        if (!this.focusedDate) {
+            return false;
+        }
+        return Temporal.PlainDate.compare(date, this.focusedDate) === 0;
+    }
+    /**
+     * Handle mouse enter on a date
+     * @param {Temporal.PlainDate} date - The date being hovered
+     */
+    _handleDateMouseEnter(date) {
+        // Only track hover in range mode when selecting end date
+        if (this.rangeMode && this.selectedDates.length === 1) {
+            this._hoveredDate = date;
+        }
+    }
+    /**
+     * Handle mouse leave on a date
+     */
+    _handleDateMouseLeave() {
+        // Clear hovered date
+        this._hoveredDate = undefined;
+    }
+    /**
+     * Get the days to display in the calendar grid
+     */
+    _getCalendarDays() {
+        const firstDayOfMonth = this._currentMonth.toPlainDate({ day: 1 });
+        // Get the day of week for the first day (0 = Sunday, 6 = Saturday)
+        const firstDayOfWeek = firstDayOfMonth.dayOfWeek % 7;
+        // Calculate the start date (may be in previous month)
+        const startDate = firstDayOfMonth.subtract({ days: firstDayOfWeek });
+        // Generate 42 days (6 weeks) for consistent grid
+        const days = [];
+        for (let i = 0; i < 42; i++) {
+            days.push(startDate.add({ days: i }));
+        }
+        return days;
+    }
+    /**
+     * Get weekday names
+     */
+    _getWeekdayNames() {
+        // Start from Sunday
+        const baseDate = Temporal.PlainDate.from('2024-01-07'); // A Sunday
+        const weekdays = [];
+        for (let i = 0; i < 7; i++) {
+            const date = baseDate.add({ days: i });
+            const formatter = new Intl.DateTimeFormat(this.locale, {
+                weekday: 'short',
+            });
+            // Use plainDateToDate to properly convert Temporal.PlainDate to Date
+            let name = formatter.format(plainDateToDate(date));
+            // Special handling for Thursday to match Carbon's "Th" format
+            if (name === 'Thu') {
+                name = 'Th';
+            }
+            else {
+                name = name.charAt(0);
+            }
+            weekdays.push(name);
+        }
+        return weekdays;
+    }
+    /**
+     * Render the calendar header with month/year and navigation
+     */
+    _renderHeader() {
+        // Convert Temporal.PlainYearMonth to Date properly to avoid month offset issues
+        const firstDayOfMonth = this._currentMonth.toPlainDate({ day: 1 });
+        const monthName = new Intl.DateTimeFormat(this.locale, {
+            month: 'long',
+            year: 'numeric',
+        }).format(plainDateToDate(firstDayOfMonth));
+        const isPrevDisabled = this._isPrevMonthDisabled();
+        const isNextDisabled = this._isNextMonthDisabled();
+        return html `
+      <div class="${prefix}--date-picker__month">
+        <button
+          type="button"
+          class="${prefix}--date-picker__month-nav ${prefix}--date-picker__month-nav--prev"
+          tabindex="-1"
+          ?disabled="${isPrevDisabled}"
+          @click="${this._handlePrevMonth}"
+          aria-label="Previous month">
+          ${iconLoader(ChevronLeft16)}
+        </button>
+        <div class="${prefix}--date-picker__current-month">
+          <span class="cur-month">${monthName}</span>
+        </div>
+        <button
+          type="button"
+          class="${prefix}--date-picker__month-nav ${prefix}--date-picker__month-nav--next"
+          tabindex="-1"
+          ?disabled="${isNextDisabled}"
+          @click="${this._handleNextMonth}"
+          aria-label="Next month">
+          ${iconLoader(ChevronRight16)}
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * Render the weekday headers
+     */
+    _renderWeekdays() {
+        const weekdays = this._getWeekdayNames();
+        return html `
+      <div class="${prefix}--date-picker__weekdays">
+        ${weekdays.map((day) => html `
+            <span class="${prefix}--date-picker__weekday">${day}</span>
+          `)}
+      </div>
+    `;
+    }
+    /**
+     * Render the calendar days grid
+     */
+    _renderDays() {
+        const days = this._getCalendarDays();
+        const currentMonthValue = this._currentMonth.month;
+        return html `
+      <div class="${prefix}--date-picker__days" role="grid">
+        ${days.map((date) => {
+            const isCurrentMonth = date.month === currentMonthValue;
+            const isDisabled = this._isDateDisabled(date);
+            const isSelected = this._isDateSelected(date);
+            const isInRange = this._isDateInRange(date);
+            const isToday = this._isToday(date);
+            const isFocused = this._isDateFocused(date);
+            const dayClasses = classMap({
+                [`${prefix}--date-picker__day`]: true,
+                prevMonthDay: !isCurrentMonth && date.month < currentMonthValue,
+                nextMonthDay: !isCurrentMonth && date.month > currentMonthValue,
+                disabled: isDisabled,
+                selected: isSelected,
+                inRange: isInRange,
+                today: isToday && !isSelected,
+                'no-border': isToday && isSelected,
+                focused: isFocused,
+            });
+            return html `
+            <button
+              type="button"
+              class="${dayClasses}"
+              tabindex="-1"
+              ?disabled="${isDisabled}"
+              @click="${() => this._handleDateSelect(date)}"
+              @mouseenter="${() => this._handleDateMouseEnter(date)}"
+              @mouseleave="${() => this._handleDateMouseLeave()}"
+              aria-label="${date.toString()}">
+              ${date.day}
+            </button>
+          `;
+        })}
+      </div>
+    `;
+    }
+    /**
+     * Lifecycle method called when properties change
+     * @param {Map<string, any>} changedProperties - Changed properties
+     */
+    updated(changedProperties) {
+        // Sync calendar month with viewDate from state machine
+        if (changedProperties.has('viewDate') && this.viewDate) {
+            // Create PlainYearMonth from PlainDate
+            this._currentMonth = Temporal.PlainYearMonth.from({
+                year: this.viewDate.year,
+                month: this.viewDate.month,
+            });
+        }
+    }
+    /**
+     * Renders the calendar component
+     */
+    render() {
+        return html `
+      <div class="${prefix}--date-picker__calendar" tabindex="0">
+        ${this._renderHeader()} ${this._renderWeekdays()} ${this._renderDays()}
+      </div>
+    `;
+    }
+};
+CDSDatePickerCalendar.styles = styles;
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "_currentMonth", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], CDSDatePickerCalendar.prototype, "selectedDates", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "viewDate", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "focusedDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "_hoveredDate", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "minDate", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "maxDate", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "rangeMode", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], CDSDatePickerCalendar.prototype, "locale", void 0);
+CDSDatePickerCalendar = __decorate([
+    carbonElement(`${prefix}-date-picker-calendar`)
+], CDSDatePickerCalendar);
+// Made with Bob
+//# sourceMappingURL=calendar-renderer.js.map

package/es/components/date-picker/calendar-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-renderer.js","sources":["../../../../components/date-picker/calendar-renderer.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}

package/es/components/date-picker/date-picker-input-skeleton.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2019, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import { DATE_PICKER_INPUT_KIND } from './defs';
+/**
+ * Skeleton version of the input box for date picker.
+ */
+declare class CDSDatePickerInputSkeleton extends LitElement {
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel: boolean;
+    /**
+     * * @deprecated use `range` instead
+     * Date picker input kind. Corresponds to the attribute with the same name.
+     */
+    kind: DATE_PICKER_INPUT_KIND;
+    /**
+     * Specify whether the skeleton should be of range date picker.
+     */
+    range: boolean;
+    /**
+     * Renders the component template.
+     *
+     * @returns {TemplateResult} The template result
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSDatePickerInputSkeleton;

package/es/components/date-picker/date-picker-input-skeleton.js

@@ -0,0 +1,77 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../temp-imports/globals/settings.js';
+import { DATE_PICKER_INPUT_KIND } from './defs.js';
+import styles from './date-picker.scss.js';
+import { carbonElement } from '../../temp-imports/globals/decorators/carbon-element.js';
+
+/**
+ * Copyright IBM Corp. 2019, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Skeleton version of the input box for date picker.
+ */
+let CDSDatePickerInputSkeleton = class CDSDatePickerInputSkeleton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        this.hideLabel = false;
+        /**
+         * * @deprecated use `range` instead
+         * Date picker input kind. Corresponds to the attribute with the same name.
+         */
+        this.kind = DATE_PICKER_INPUT_KIND.SIMPLE;
+        /**
+         * Specify whether the skeleton should be of range date picker.
+         */
+        this.range = false;
+    }
+    /**
+     * Renders the component template.
+     *
+     * @returns {TemplateResult} The template result
+     */
+    render() {
+        const { hideLabel, range } = this;
+        return html `
+      <div class="${prefix}--date-picker-input-skeleton-container">
+        ${!hideLabel ? html `<span class="${prefix}--label"></span>` : null}
+        <div class="${prefix}--date-picker__input ${prefix}--skeleton"></div>
+      </div>
+      ${range
+            ? html `
+            <div class="${prefix}--date-picker-input-skeleton-container">
+              ${!hideLabel
+                ? html `<span class="${prefix}--label"></span>`
+                : null}
+              <div
+                class="${prefix}--date-picker__input ${prefix}--skeleton"></div>
+            </div>
+          `
+            : null}
+    `;
+    }
+};
+CDSDatePickerInputSkeleton.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-label' }),
+    __metadata("design:type", Object)
+], CDSDatePickerInputSkeleton.prototype, "hideLabel", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], CDSDatePickerInputSkeleton.prototype, "kind", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'range' }),
+    __metadata("design:type", Object)
+], CDSDatePickerInputSkeleton.prototype, "range", void 0);
+CDSDatePickerInputSkeleton = __decorate([
+    carbonElement(`${prefix}-date-picker-input-skeleton`)
+], CDSDatePickerInputSkeleton);
+//# sourceMappingURL=date-picker-input-skeleton.js.map

package/es/components/date-picker/date-picker-input-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-input-skeleton.js","sources":["../../../../components/date-picker/date-picker-input-skeleton.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;AAAA;;;;;AAKG;AAUH;;AAEG;AAEH,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU,CAAA;AAAnD,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAA,CAAA,SAAS,GAAG,KAAK;AAEjB;;;AAGG;AAEH,QAAA,IAAA,CAAA,IAAI,GAAG,sBAAsB,CAAC,MAAM;AAEpC;;AAEG;QAEH,IAAA,CAAA,KAAK,GAAG,KAAK;IA6Bf;AA3BE;;;;AAIG;IACH,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI;AACjC,QAAA,OAAO,IAAI,CAAA;oBACK,MAAM,CAAA;AAChB,QAAA,EAAA,CAAC,SAAS,GAAG,IAAI,CAAA,CAAA,aAAA,EAAgB,MAAM,CAAA,gBAAA,CAAkB,GAAG,IAAI;AACpD,oBAAA,EAAA,MAAM,wBAAwB,MAAM,CAAA;;QAElD;cACE,IAAI,CAAA;0BACY,MAAM,CAAA;AAChB,cAAA,EAAA,CAAC;AACD,kBAAE,IAAI,CAAA,CAAA,aAAA,EAAgB,MAAM,CAAA,gBAAA;AAC5B,kBAAE,IAAI;;AAEG,uBAAA,EAAA,MAAM,wBAAwB,MAAM,CAAA;;AAElD,UAAA;AACH,cAAE,IAAI;KACT;IACH;;AAEO,0BAAA,CAAA,MAAM,GAAG,MAAH;AAzCb,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;;AAClD,CAAA,EAAA,0BAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAOlB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;AACS,CAAA,EAAA,0BAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAMrC,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;;AACjD,CAAA,EAAA,0BAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAlBV,0BAA0B,GAAA,UAAA,CAAA;AAD/B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,2BAAA,CAA6B;AAC/C,CAAA,EAAA,0BAA0B,CA+C/B"}