@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/date-picker-CBtZk2uN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-CBtZk2uN.js","names":["_decorate","__decorate","renderFieldMessage","fieldMessageStyles","fieldMessageState","datePickerStyles","BpDatePicker","FormControlMixin","LitElement","previousValue","date","event","currentFocus","result","days","months","value","match","year","month","day","today","date1","date2","minDate","maxDate","firstDay","lastDay","startDayOfWeek","dayOfWeek","i","remainingDays","weekdays","selectedDate","message","calendarDays","hasValue","datePickerClasses","invalid","classMap","nothing","describedBy","isCurrentMonth","isSelected","isToday","isFocused","isDisabled","property","state","customElement"],"sources":["../../source/components/date-picker/date-picker.style.ts","../../source/components/date-picker/date-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const datePickerStyles = css`\n  /* Base */\n  .date-picker {\n    position: relative;\n    width: 100%;\n  }\n\n  .date-picker__label {\n    display: block;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .date-picker__required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .date-picker__input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  .date-picker__input {\n    flex: 1;\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    padding-right: var(--bp-spacing-2xl);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-input-border);\n    border-radius: var(--bp-border-radius-md);\n    cursor: pointer;\n    transition:\n      border-color var(--bp-transition-fast),\n      box-shadow var(--bp-transition-fast);\n    outline: none;\n  }\n\n  .date-picker__input:hover:not(:disabled) {\n    border-color: var(--bp-color-primary);\n  }\n\n  .date-picker__input:focus {\n    border-color: var(--bp-color-focus);\n    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);\n  }\n\n  /* Invalid: error border, also while hovered or focused */\n  .date-picker--invalid .date-picker__input,\n  .date-picker--invalid .date-picker__input:hover:not(:disabled),\n  .date-picker--invalid .date-picker__input:focus {\n    border-color: var(--bp-color-error);\n  }\n\n  .date-picker__input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .date-picker__input::placeholder {\n    color: var(--bp-color-text-muted);\n  }\n\n  .date-picker__clear {\n    position: absolute;\n    right: var(--bp-spacing-2xl);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n    padding: 0;\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text-muted);\n    background: none;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    cursor: pointer;\n    transition:\n      color var(--bp-transition-fast),\n      background-color var(--bp-transition-fast);\n  }\n\n  .date-picker__clear:hover {\n    color: var(--bp-color-primary);\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .date-picker__indicator {\n    position: absolute;\n    right: var(--bp-spacing-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n    color: var(--bp-color-text-muted);\n    pointer-events: none;\n  }\n\n  /* Calendar */\n  .date-picker__calendar {\n    position: absolute;\n    top: calc(100% + var(--bp-spacing-xs));\n    left: 0;\n    z-index: var(--bp-z-dropdown);\n    min-width: var(--bp-spacing-2xl);\n    padding: var(--bp-spacing-md);\n    background-color: var(--bp-color-surface);\n    border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);\n    border-right: var(--bp-border-width) solid var(--bp-color-border);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    border-left: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n    box-shadow: var(--bp-shadow-md);\n  }\n\n  /* Header */\n  .date-picker__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--bp-spacing-sm);\n  }\n\n  .date-picker__nav-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-xl);\n    height: var(--bp-spacing-xl);\n    padding: 0;\n    font-size: var(--bp-font-size-xl);\n    color: var(--bp-color-text);\n    background: none;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    cursor: pointer;\n    transition: background-color var(--bp-transition-fast);\n  }\n\n  .date-picker__nav-button:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .date-picker__month-year {\n    flex: 1;\n    font-size: var(--bp-font-size-base);\n    font-weight: var(--bp-font-weight-semibold);\n    color: var(--bp-color-text);\n    text-align: center;\n  }\n\n  /* Weekdays */\n  .date-picker__weekdays {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--bp-spacing-xs);\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .date-picker__weekday {\n    padding: var(--bp-spacing-xs);\n    font-size: var(--bp-font-size-xs);\n    font-weight: var(--bp-font-weight-semibold);\n    color: var(--bp-color-text-muted);\n    text-align: center;\n    text-transform: uppercase;\n  }\n\n  /* Days */\n  .date-picker__days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: var(--bp-spacing-xs);\n  }\n\n  .date-picker__day {\n    aspect-ratio: 1;\n    padding: var(--bp-spacing-xs);\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text);\n    background: none;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast);\n  }\n\n  .date-picker__day:hover:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .date-picker__day--other-month {\n    color: var(--bp-color-text-muted);\n    opacity: 0.5;\n  }\n\n  .date-picker__day--today {\n    font-weight: var(--bp-font-weight-bold);\n    color: var(--bp-color-primary);\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 4%,\n      transparent\n    );\n  }\n\n  .date-picker__day--selected {\n    color: var(--bp-color-text-inverse);\n    background-color: var(--bp-color-primary);\n  }\n\n  .date-picker__day--selected:hover:not(:disabled) {\n    background-color: var(--bp-color-primary-hover);\n  }\n\n  .date-picker__day--focused {\n    outline: var(--bp-focus-width) solid var(--bp-color-primary);\n    outline-offset: calc(-1 * var(--bp-focus-width));\n  }\n\n  .date-picker__day--disabled {\n    color: var(--bp-color-text-muted);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* Sizes */\n  .date-picker--sm .date-picker__input {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    padding-right: var(--bp-spacing-xl);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .date-picker--sm .date-picker__indicator {\n    right: var(--bp-spacing-xs);\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n  }\n\n  .date-picker--sm .date-picker__clear {\n    right: var(--bp-spacing-xl);\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n  }\n\n  .date-picker--sm .date-picker__calendar {\n    padding: var(--bp-spacing-sm);\n  }\n\n  .date-picker--sm .date-picker__nav-button {\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .date-picker--sm .date-picker__month-year {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .date-picker--sm .date-picker__header {\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .date-picker--sm .date-picker__weekdays {\n    gap: var(--bp-spacing-2xs);\n    margin-bottom: var(--bp-spacing-2xs);\n  }\n\n  .date-picker--sm .date-picker__weekday {\n    padding: var(--bp-spacing-2xs);\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .date-picker--sm .date-picker__days {\n    gap: var(--bp-spacing-2xs);\n  }\n\n  .date-picker--sm .date-picker__day {\n    padding: var(--bp-spacing-2xs);\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .date-picker--lg .date-picker__input {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    padding-right: var(--bp-spacing-24);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .date-picker--lg .date-picker__indicator {\n    right: var(--bp-spacing-md);\n    width: var(--bp-spacing-xl);\n    height: var(--bp-spacing-xl);\n  }\n\n  .date-picker--lg .date-picker__clear {\n    right: var(--bp-spacing-24);\n    width: var(--bp-spacing-xl);\n    height: var(--bp-spacing-xl);\n  }\n\n  .date-picker--lg .date-picker__calendar {\n    padding: var(--bp-spacing-lg);\n  }\n\n  .date-picker--lg .date-picker__nav-button {\n    width: var(--bp-spacing-2xl);\n    height: var(--bp-spacing-2xl);\n    font-size: var(--bp-font-size-2xl);\n  }\n\n  .date-picker--lg .date-picker__month-year {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .date-picker--lg .date-picker__header {\n    margin-bottom: var(--bp-spacing-md);\n  }\n\n  .date-picker--lg .date-picker__weekdays {\n    gap: var(--bp-spacing-sm);\n    margin-bottom: var(--bp-spacing-sm);\n  }\n\n  .date-picker--lg .date-picker__weekday {\n    padding: var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .date-picker--lg .date-picker__days {\n    gap: var(--bp-spacing-sm);\n  }\n\n  .date-picker--lg .date-picker__day {\n    padding: var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-base);\n  }\n\n  /* States */\n  .date-picker--disabled {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { datePickerStyles } from './date-picker.style.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\nimport {\n  FormControlMixin,\n  type FormValidity,\n} from '../../utilities/form-control.js';\n\nexport type DatePickerSize = 'sm' | 'md' | 'lg';\n\n/**\n * A calendar-based date picker component.\n *\n * @element bp-date-picker\n *\n * @fires bp-change - Fired when the selected date changes\n *\n * @csspart control - The outer container\n * @csspart input - The text input field\n * @csspart indicator - The calendar icon\n * @csspart clear-button - The clear button\n * @csspart calendar - The calendar dropdown\n * @csspart header - The calendar header with navigation\n * @csspart nav-button - Month/year navigation buttons\n * @csspart month-year - Month and year display\n * @csspart weekday - Day of week header cell\n * @csspart day - Individual day cell\n */\n@customElement('bp-date-picker')\nexport class BpDatePicker extends FormControlMixin(LitElement) {\n  @property({ type: String, reflect: true }) declare value: string;\n  @property({ type: String }) declare name: string;\n  @property({ type: String }) declare label: string;\n\n  /** Helper text displayed below the date picker */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the date picker is invalid: the message replaces the\n   * helper text, is announced, and the border turns to the error color.\n   */\n  @property({ type: String }) declare errorMessage: string;\n  @property({ type: String }) declare placeholder: string;\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n  @property({ type: String, reflect: true }) declare size: DatePickerSize;\n  @property({ type: String }) declare min: string;\n  @property({ type: String }) declare max: string;\n  @property({ type: String, attribute: 'first-day-of-week' })\n  declare firstDayOfWeek: '0' | '1';\n\n  @state() private isOpen = false;\n  @state() private displayMonth = new Date().getMonth();\n  @state() private displayYear = new Date().getFullYear();\n  @state() private focusedDate: Date | null = null;\n\n  static styles = [fieldMessageStyles, datePickerStyles];\n\n  constructor() {\n    super();\n    this.value = '';\n    this.name = '';\n    this.label = '';\n    this.helperText = '';\n    this.errorMessage = '';\n    this.placeholder = 'Select date...';\n    this.disabled = false;\n    this.required = false;\n    this.size = 'md';\n    this.min = '';\n    this.max = '';\n    this.firstDayOfWeek = '0';\n  }\n\n  private handleInputClick() {\n    if (!this.disabled) {\n      this.isOpen = !this.isOpen;\n    }\n  }\n\n  private handlePreviousMonth() {\n    if (this.displayMonth === 0) {\n      this.displayMonth = 11;\n      this.displayYear--;\n    } else {\n      this.displayMonth--;\n    }\n  }\n\n  private handleNextMonth() {\n    if (this.displayMonth === 11) {\n      this.displayMonth = 0;\n      this.displayYear++;\n    } else {\n      this.displayMonth++;\n    }\n  }\n\n  private handleDateSelect(date: Date) {\n    const previousValue = this.value;\n    this.value = this.formatDate(date);\n    this.isOpen = false;\n    this.focusedDate = null;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: {\n          value: this.value,\n          previousValue,\n          date,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleClear(e: Event) {\n    e.stopPropagation();\n    const previousValue = this.value;\n    this.value = '';\n    this.focusedDate = null;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: {\n          value: '',\n          previousValue,\n          date: null,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleKeyDown(e: Event) {\n    const event = e as globalThis.KeyboardEvent;\n    if (!this.isOpen) {\n      if (\n        event.key === 'ArrowDown' ||\n        event.key === 'Enter' ||\n        event.key === ' '\n      ) {\n        event.preventDefault();\n        this.isOpen = true;\n        this.focusedDate = this.getSelectedDate() || this.getTodayDate();\n      }\n      return;\n    }\n\n    const currentFocus =\n      this.focusedDate || this.getSelectedDate() || this.getTodayDate();\n\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        this.isOpen = false;\n        this.focusedDate = null;\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        this.focusedDate = this.addDays(currentFocus, -1);\n        this.updateDisplayMonth(this.focusedDate);\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        this.focusedDate = this.addDays(currentFocus, 1);\n        this.updateDisplayMonth(this.focusedDate);\n        break;\n\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusedDate = this.addDays(currentFocus, -7);\n        this.updateDisplayMonth(this.focusedDate);\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusedDate = this.addDays(currentFocus, 7);\n        this.updateDisplayMonth(this.focusedDate);\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this.focusedDate = new Date(\n          currentFocus.getFullYear(),\n          currentFocus.getMonth(),\n          1\n        );\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this.focusedDate = new Date(\n          currentFocus.getFullYear(),\n          currentFocus.getMonth() + 1,\n          0\n        );\n        break;\n\n      case 'PageUp':\n        event.preventDefault();\n        this.focusedDate = this.addMonths(\n          currentFocus,\n          event.shiftKey ? -12 : -1\n        );\n        this.updateDisplayMonth(this.focusedDate);\n        break;\n\n      case 'PageDown':\n        event.preventDefault();\n        this.focusedDate = this.addMonths(\n          currentFocus,\n          event.shiftKey ? 12 : 1\n        );\n        this.updateDisplayMonth(this.focusedDate);\n        break;\n\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.focusedDate && !this.isDateDisabled(this.focusedDate)) {\n          this.handleDateSelect(this.focusedDate);\n        }\n        break;\n    }\n  }\n\n  private updateDisplayMonth(date: Date) {\n    this.displayMonth = date.getMonth();\n    this.displayYear = date.getFullYear();\n  }\n\n  private addDays(date: Date, days: number): Date {\n    const result = new Date(date);\n    result.setDate(result.getDate() + days);\n    return result;\n  }\n\n  private addMonths(date: Date, months: number): Date {\n    const result = new Date(date);\n    result.setMonth(result.getMonth() + months);\n    return result;\n  }\n\n  private formatDate(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${day}`;\n  }\n\n  private parseDate(value: string): Date | null {\n    if (!value) return null;\n    // Parse YYYY-MM-DD format in local timezone to avoid UTC offset issues\n    const match = value.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/);\n    if (match) {\n      const [, year, month, day] = match;\n      const date = new Date(\n        parseInt(year, 10),\n        parseInt(month, 10) - 1,\n        parseInt(day, 10)\n      );\n      date.setHours(0, 0, 0, 0);\n      return date;\n    }\n    // Fallback for other formats\n    const date = new Date(value);\n    if (isNaN(date.getTime())) {\n      console.warn(\n        `bp-date-picker: Invalid date format \"${value}\". Expected YYYY-MM-DD.`\n      );\n      return null;\n    }\n    return date;\n  }\n\n  private getSelectedDate(): Date | null {\n    return this.parseDate(this.value);\n  }\n\n  private getTodayDate(): Date {\n    const today = new Date();\n    today.setHours(0, 0, 0, 0);\n    return today;\n  }\n\n  private isSameDay(date1: Date, date2: Date): boolean {\n    return (\n      date1.getFullYear() === date2.getFullYear() &&\n      date1.getMonth() === date2.getMonth() &&\n      date1.getDate() === date2.getDate()\n    );\n  }\n\n  private isDateDisabled(date: Date): boolean {\n    if (this.min) {\n      const minDate = this.parseDate(this.min);\n      if (minDate && date < minDate) return true;\n    }\n    if (this.max) {\n      const maxDate = this.parseDate(this.max);\n      if (maxDate && date > maxDate) return true;\n    }\n    return false;\n  }\n\n  private getCalendarDays(): Date[] {\n    const CALENDAR_GRID_SIZE = 42; // 6 weeks × 7 days for consistent grid\n    const firstDay = new Date(this.displayYear, this.displayMonth, 1);\n    const lastDay = new Date(this.displayYear, this.displayMonth + 1, 0);\n\n    const startDayOfWeek = this.firstDayOfWeek === '1' ? 1 : 0;\n    let dayOfWeek = firstDay.getDay() - startDayOfWeek;\n    if (dayOfWeek < 0) dayOfWeek += 7;\n\n    const days: Date[] = [];\n\n    // Add previous month's days\n    for (let i = dayOfWeek - 1; i >= 0; i--) {\n      const date = new Date(this.displayYear, this.displayMonth, -i);\n      days.push(date);\n    }\n\n    // Add current month's days\n    for (let i = 1; i <= lastDay.getDate(); i++) {\n      days.push(new Date(this.displayYear, this.displayMonth, i));\n    }\n\n    // Add next month's days to complete the grid\n    const remainingDays = CALENDAR_GRID_SIZE - days.length;\n    for (let i = 1; i <= remainingDays; i++) {\n      days.push(new Date(this.displayYear, this.displayMonth + 1, i));\n    }\n\n    return days;\n  }\n\n  /** Report required and out-of-range dates to the enclosing form. */\n  getFormValidity(): FormValidity {\n    if (this.required && !this.value) {\n      return {\n        flags: { valueMissing: true },\n        message: 'Please choose a date.',\n      };\n    }\n    if (!this.checkValidity()) {\n      return {\n        flags: { customError: true },\n        message: 'Please choose a date within the allowed range.',\n      };\n    }\n    return { flags: {}, message: '' };\n  }\n\n  public checkValidity(): boolean {\n    // Check required validation\n    if (this.required && !this.value) {\n      return false;\n    }\n    // Check min/max validation\n    if (this.value) {\n      const date = this.parseDate(this.value);\n      if (date && this.isDateDisabled(date)) {\n        return false;\n      }\n    }\n    return true;\n  }\n\n  private getWeekdayNames(): string[] {\n    const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n    if (this.firstDayOfWeek === '1') {\n      return [...weekdays.slice(1), weekdays[0]];\n    }\n    return weekdays;\n  }\n\n  private getMonthName(month: number): string {\n    return new Date(2000, month, 1).toLocaleString('default', {\n      month: 'long',\n    });\n  }\n\n  private getFormattedValue(): string {\n    const selectedDate = this.getSelectedDate();\n    if (!selectedDate) return '';\n    return selectedDate.toLocaleDateString();\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: false,\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    const selectedDate = this.getSelectedDate();\n    const today = this.getTodayDate();\n    const calendarDays = this.getCalendarDays();\n    const weekdays = this.getWeekdayNames();\n    const hasValue = !!this.value;\n\n    const datePickerClasses = {\n      'date-picker': true,\n      'date-picker--open': this.isOpen,\n      'date-picker--disabled': this.disabled,\n      [`date-picker--${this.size}`]: true,\n      'date-picker--invalid': invalid,\n    };\n\n    return html`\n      <div class=${classMap(datePickerClasses)} part=\"control\">\n        ${\n          this.label\n            ? html`\n                <label class=\"date-picker__label\" part=\"label\" for=\"input\">\n                  ${this.label}\n                  ${\n                    this.required\n                      ? html`<span class=\"date-picker__required\">*</span>`\n                      : ''\n                  }\n                </label>\n              `\n            : ''\n        }\n        <div class=\"date-picker__input-wrapper\">\n          <input\n            id=\"input\"\n            type=\"text\"\n            class=\"date-picker__input\"\n            part=\"input\"\n            .value=${this.getFormattedValue()}\n            placeholder=${this.placeholder}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            readonly\n            @click=${this.handleInputClick}\n            @keydown=${this.handleKeyDown}\n            role=\"combobox\"\n            aria-haspopup=\"grid\"\n            aria-expanded=${this.isOpen}\n            aria-disabled=${this.disabled}\n            aria-label=${\n              this.label ? nothing : this.placeholder || 'Date picker'\n            }\n            aria-invalid=${invalid ? 'true' : nothing}\n            aria-describedby=${describedBy ?? nothing}\n          />\n          ${\n            hasValue && !this.disabled\n              ? html`\n                  <button\n                    type=\"button\"\n                    class=\"date-picker__clear\"\n                    part=\"clear-button\"\n                    @click=${this.handleClear}\n                    aria-label=\"Clear date\"\n                    tabindex=\"-1\"\n                  >\n                    ✕\n                  </button>\n                `\n              : ''\n          }\n          <div class=\"date-picker__indicator\" part=\"indicator\">\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M5 2V4M11 2V4M3 6H13M4 4H12C12.5523 4 13 4.44772 13 5V13C13 13.5523 12.5523 14 12 14H4C3.44772 14 3 13.5523 3 13V5C3 4.44772 3.44772 4 4 4Z\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        ${\n          this.isOpen\n            ? html`\n                <div class=\"date-picker__calendar\" part=\"calendar\" role=\"grid\">\n                  <div class=\"date-picker__header\" part=\"header\">\n                    <button\n                      type=\"button\"\n                      class=\"date-picker__nav-button\"\n                      part=\"nav-button\"\n                      @click=${this.handlePreviousMonth}\n                      aria-label=\"Previous month\"\n                      tabindex=\"-1\"\n                    >\n                      ‹\n                    </button>\n                    <div class=\"date-picker__month-year\" part=\"month-year\">\n                      ${this.getMonthName(this.displayMonth)}\n                      ${this.displayYear}\n                    </div>\n                    <button\n                      type=\"button\"\n                      class=\"date-picker__nav-button\"\n                      part=\"nav-button\"\n                      @click=${this.handleNextMonth}\n                      aria-label=\"Next month\"\n                      tabindex=\"-1\"\n                    >\n                      ›\n                    </button>\n                  </div>\n\n                  <div class=\"date-picker__weekdays\">\n                    ${weekdays.map(\n                      (day) => html`\n                        <div\n                          class=\"date-picker__weekday\"\n                          part=\"weekday\"\n                          role=\"columnheader\"\n                        >\n                          ${day}\n                        </div>\n                      `\n                    )}\n                  </div>\n\n                  <div class=\"date-picker__days\">\n                    ${calendarDays.map((date) => {\n                      const isCurrentMonth =\n                        date.getMonth() === this.displayMonth;\n                      const isSelected =\n                        selectedDate && this.isSameDay(date, selectedDate);\n                      const isToday = this.isSameDay(date, today);\n                      const isFocused =\n                        this.focusedDate &&\n                        this.isSameDay(date, this.focusedDate);\n                      const isDisabled = this.isDateDisabled(date);\n\n                      const dayClasses = {\n                        'date-picker__day': true,\n                        'date-picker__day--other-month': !isCurrentMonth,\n                        'date-picker__day--selected': !!isSelected,\n                        'date-picker__day--today': isToday,\n                        'date-picker__day--focused': !!isFocused,\n                        'date-picker__day--disabled': isDisabled,\n                      };\n\n                      return html`\n                        <button\n                          type=\"button\"\n                          class=${classMap(dayClasses)}\n                          part=\"day\"\n                          @click=${() =>\n                            !isDisabled && this.handleDateSelect(date)}\n                          ?disabled=${isDisabled}\n                          tabindex=\"-1\"\n                          role=\"gridcell\"\n                          aria-selected=${!!isSelected}\n                          aria-label=${date.toLocaleDateString()}\n                        >\n                          ${date.getDate()}\n                        </button>\n                      `;\n                    })}\n                  </div>\n                </div>\n              `\n            : ''\n        }\n        ${\n          this.name\n            ? html`\n                <input type=\"hidden\" name=${this.name} .value=${this.value} />\n              `\n            : ''\n        }\n      </div>\n      ${renderFieldMessage(message)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-date-picker': BpDatePicker;\n  }\n}\n"],"mappings":"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"}

package/dist/shared/debounce-BOon6N4f.js

@@ -0,0 +1,23 @@
+//#region source/utilities/debounce.ts
+function e(e, t) {
+	let n = null, r = null, i = (...i) => {
+		r = i, n !== null && clearTimeout(n), n = setTimeout(() => {
+			if (n = null, r !== null) {
+				let t = r;
+				r = null, e(...t);
+			}
+		}, t);
+	};
+	return i.cancel = () => {
+		n !== null && (clearTimeout(n), n = null), r = null;
+	}, i.flush = () => {
+		if (n !== null && (clearTimeout(n), n = null), r !== null) {
+			let t = r;
+			r = null, e(...t);
+		}
+	}, i;
+}
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=debounce-BOon6N4f.js.map

package/dist/shared/debounce-BOon6N4f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce-BOon6N4f.js","names":["debounce","timeoutId","pendingArgs","debounced","args","fn","delay"],"sources":["../../source/utilities/debounce.ts"],"sourcesContent":["/**\n * Debounce utility for delaying function execution until after a period of inactivity.\n * Trailing-edge by default: fires after the delay has elapsed since the last call.\n */\n\ntype DebouncedFunction<T extends (...args: never[]) => unknown> = {\n  (...args: Parameters<T>): void;\n  cancel: () => void;\n  flush: () => void;\n};\n\nexport function debounce<T extends (...args: never[]) => unknown>(\n  fn: T,\n  delay: number\n): DebouncedFunction<T> {\n  let timeoutId: ReturnType<typeof setTimeout> | null = null;\n  let pendingArgs: Parameters<T> | null = null;\n\n  const debounced = (...args: Parameters<T>): void => {\n    pendingArgs = args;\n\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n    }\n\n    timeoutId = setTimeout(() => {\n      timeoutId = null;\n      if (pendingArgs !== null) {\n        const args = pendingArgs;\n        pendingArgs = null;\n        fn(...args);\n      }\n    }, delay);\n  };\n\n  debounced.cancel = () => {\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n      timeoutId = null;\n    }\n    pendingArgs = null;\n  };\n\n  debounced.flush = () => {\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n      timeoutId = null;\n    }\n    if (pendingArgs !== null) {\n      const args = pendingArgs;\n      pendingArgs = null;\n      fn(...args);\n    }\n  };\n\n  return debounced;\n}\n"],"mappings":";AAWA,SAAgBA,EACd,GACA,GACsB;CACtB,IAAIC,IAAkD,MAClDC,IAAoC,MAElCC,KAAa,GAAGC,MAA8B;EAOlD,AANA,IAAcA,GAEVH,MAAc,QAChB,aAAaA,CAAS,GAGxB,IAAY,iBAAiB;GAE3B,IADA,IAAY,MACRC,MAAgB,MAAM;IACxB,IAAME,IAAOF;IAEb,AADA,IAAc,MACdG,EAAG,GAAGD,CAAI;GACZ;EACF,GAAGE,CAAK;CACV;CAsBA,OApBA,EAAU,eAAe;EAKvB,AAJIL,MAAc,SAChB,aAAaA,CAAS,GACtB,IAAY,OAEd,IAAc;CAChB,GAEA,EAAU,cAAc;EAKtB,IAJIA,MAAc,SAChB,aAAaA,CAAS,GACtB,IAAY,OAEVC,MAAgB,MAAM;GACxB,IAAME,IAAOF;GAEb,AADA,IAAc,MACdG,EAAG,GAAGD,CAAI;EACZ;CACF,GAEOD;AACT"}

package/dist/shared/decorate-BJVyhdRd.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorate.js
+function e(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+export { e as t };

package/dist/shared/divider-Cs0fV9wg.js

@@ -0,0 +1,205 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region source/components/divider/divider.style.ts
+var s = n`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  :host([orientation='vertical']) {
+    display: inline-flex;
+    height: 100%;
+  }
+
+  .divider {
+    display: flex;
+    align-items: center;
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-xs);
+    color: var(--bp-color-text-muted);
+  }
+
+  .divider__line {
+    flex: 1;
+    border: none;
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+    transition:
+      border-color 150ms ease,
+      border-width 150ms ease;
+  }
+
+  .divider__content {
+    display: inline-flex;
+    padding: 0 var(--bp-spacing-md);
+    white-space: nowrap;
+    min-width: fit-content;
+  }
+
+  .divider__content {
+    font-weight: var(--bp-font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--bp-color-text-muted);
+  }
+
+  /* Orientations */
+  .divider--horizontal {
+    width: 100%;
+    flex-direction: row;
+  }
+
+  .divider--vertical {
+    height: 100%;
+    flex-direction: column;
+    align-self: stretch;
+  }
+
+  .divider--vertical .divider__line {
+    width: var(--bp-border-width);
+    height: auto;
+    border-top: none;
+    border-left: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  /* Spacing */
+  .divider--spacing-sm {
+    margin: var(--bp-spacing-sm) 0;
+  }
+
+  .divider--spacing-sm.divider--vertical {
+    margin: 0 var(--bp-spacing-sm);
+  }
+
+  .divider--spacing-md {
+    margin: var(--bp-spacing-md) 0;
+  }
+
+  .divider--spacing-md.divider--vertical {
+    margin: 0 var(--bp-spacing-md);
+  }
+
+  .divider--spacing-lg {
+    margin: var(--bp-spacing-lg) 0;
+  }
+
+  .divider--spacing-lg.divider--vertical {
+    margin: 0 var(--bp-spacing-lg);
+  }
+
+  /* Variants */
+  .divider__line--dashed {
+    border-top-style: dashed;
+  }
+
+  .divider__line--dotted {
+    border-top-style: dotted;
+  }
+
+  .divider--vertical .divider__line--dashed {
+    border-top-style: none;
+    border-left-style: dashed;
+  }
+
+  .divider--vertical .divider__line--dotted {
+    border-top-style: none;
+    border-left-style: dotted;
+  }
+
+  /* Color variants */
+  :host([color='default']) .divider__line {
+    border-color: var(--bp-color-border);
+  }
+
+  :host([color='subtle']) .divider__line {
+    border-color: var(--bp-color-border);
+    opacity: 0.5;
+  }
+
+  :host([color='accent']) .divider__line {
+    border-color: var(--bp-color-primary);
+  }
+
+  /* Weight variants */
+  :host([weight='thin']) .divider__line {
+    border-top-width: var(--bp-border-width);
+  }
+
+  :host([weight='medium']) .divider__line {
+    border-top-width: calc(var(--bp-border-width) * 2);
+  }
+
+  :host([weight='thick']) .divider__line {
+    border-top-width: calc(var(--bp-border-width) * 3);
+  }
+
+  :host([weight='thin'][orientation='vertical']) .divider__line {
+    border-left-width: var(--bp-border-width);
+    border-top-width: 0;
+  }
+
+  :host([weight='medium'][orientation='vertical']) .divider__line {
+    border-left-width: calc(var(--bp-border-width) * 2);
+    border-top-width: 0;
+  }
+
+  :host([weight='thick'][orientation='vertical']) .divider__line {
+    border-left-width: calc(var(--bp-border-width) * 3);
+    border-top-width: 0;
+  }
+`, c = class extends t {
+	static {
+		this.styles = [s];
+	}
+	constructor() {
+		super(), this.handleSlotChange = (e) => {
+			let t = e.target.assignedNodes({ flatten: !0 });
+			this.hasContent = t.some((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent?.trim() !== "");
+		}, this.orientation = "horizontal", this.spacing = "md", this.variant = "solid", this.color = "default", this.weight = "thin", this.hasContent = !1;
+	}
+	render() {
+		return r`
+      <div
+        class="divider divider--${this.orientation} divider--spacing-${this.spacing}"
+        role="separator"
+        aria-orientation="${this.orientation}"
+        part="divider"
+      >
+        <span
+          class="divider__line divider__line--${this.variant}"
+          part="line"
+        ></span>
+        ${this.orientation === "horizontal" ? r`
+                ${this.hasContent ? r`<span class="divider__content" part="content">
+                          <slot @slotchange=${this.handleSlotChange}></slot>
+                        </span>
+                        <span
+                          class="divider__line divider__line--${this.variant}"
+                          part="line"
+                        ></span>` : r`<slot @slotchange=${this.handleSlotChange}></slot>`}
+              ` : i}
+      </div>
+    `;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "orientation", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "spacing", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "color", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "weight", void 0), e([o({ attribute: !1 })], c.prototype, "hasContent", void 0), c = e([a("bp-divider")], c);
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=divider-Cs0fV9wg.js.map

package/dist/shared/divider-Cs0fV9wg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-Cs0fV9wg.js","names":["_decorate","__decorate","dividerStyles","BpDivider","LitElement","nodes","event","node","nothing","property","customElement"],"sources":["../../source/components/divider/divider.style.ts","../../source/components/divider/divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const dividerStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  :host([orientation='vertical']) {\n    display: inline-flex;\n    height: 100%;\n  }\n\n  .divider {\n    display: flex;\n    align-items: center;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-xs);\n    color: var(--bp-color-text-muted);\n  }\n\n  .divider__line {\n    flex: 1;\n    border: none;\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n    transition:\n      border-color 150ms ease,\n      border-width 150ms ease;\n  }\n\n  .divider__content {\n    display: inline-flex;\n    padding: 0 var(--bp-spacing-md);\n    white-space: nowrap;\n    min-width: fit-content;\n  }\n\n  .divider__content {\n    font-weight: var(--bp-font-weight-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--bp-color-text-muted);\n  }\n\n  /* Orientations */\n  .divider--horizontal {\n    width: 100%;\n    flex-direction: row;\n  }\n\n  .divider--vertical {\n    height: 100%;\n    flex-direction: column;\n    align-self: stretch;\n  }\n\n  .divider--vertical .divider__line {\n    width: var(--bp-border-width);\n    height: auto;\n    border-top: none;\n    border-left: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  /* Spacing */\n  .divider--spacing-sm {\n    margin: var(--bp-spacing-sm) 0;\n  }\n\n  .divider--spacing-sm.divider--vertical {\n    margin: 0 var(--bp-spacing-sm);\n  }\n\n  .divider--spacing-md {\n    margin: var(--bp-spacing-md) 0;\n  }\n\n  .divider--spacing-md.divider--vertical {\n    margin: 0 var(--bp-spacing-md);\n  }\n\n  .divider--spacing-lg {\n    margin: var(--bp-spacing-lg) 0;\n  }\n\n  .divider--spacing-lg.divider--vertical {\n    margin: 0 var(--bp-spacing-lg);\n  }\n\n  /* Variants */\n  .divider__line--dashed {\n    border-top-style: dashed;\n  }\n\n  .divider__line--dotted {\n    border-top-style: dotted;\n  }\n\n  .divider--vertical .divider__line--dashed {\n    border-top-style: none;\n    border-left-style: dashed;\n  }\n\n  .divider--vertical .divider__line--dotted {\n    border-top-style: none;\n    border-left-style: dotted;\n  }\n\n  /* Color variants */\n  :host([color='default']) .divider__line {\n    border-color: var(--bp-color-border);\n  }\n\n  :host([color='subtle']) .divider__line {\n    border-color: var(--bp-color-border);\n    opacity: 0.5;\n  }\n\n  :host([color='accent']) .divider__line {\n    border-color: var(--bp-color-primary);\n  }\n\n  /* Weight variants */\n  :host([weight='thin']) .divider__line {\n    border-top-width: var(--bp-border-width);\n  }\n\n  :host([weight='medium']) .divider__line {\n    border-top-width: calc(var(--bp-border-width) * 2);\n  }\n\n  :host([weight='thick']) .divider__line {\n    border-top-width: calc(var(--bp-border-width) * 3);\n  }\n\n  :host([weight='thin'][orientation='vertical']) .divider__line {\n    border-left-width: var(--bp-border-width);\n    border-top-width: 0;\n  }\n\n  :host([weight='medium'][orientation='vertical']) .divider__line {\n    border-left-width: calc(var(--bp-border-width) * 2);\n    border-top-width: 0;\n  }\n\n  :host([weight='thick'][orientation='vertical']) .divider__line {\n    border-left-width: calc(var(--bp-border-width) * 3);\n    border-top-width: 0;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { dividerStyles } from './divider.style.js';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerSpacing = 'sm' | 'md' | 'lg';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\nexport type DividerColor = 'default' | 'subtle' | 'accent';\nexport type DividerWeight = 'thin' | 'medium' | 'thick';\n\n/**\n * A divider component that provides visual separation between content sections.\n * Supports both horizontal and vertical orientations with optional text labels.\n */\n@customElement('bp-divider')\nexport class BpDivider extends LitElement {\n  /**\n   * Orientation of the divider.\n   * @type {'horizontal' | 'vertical'}\n   * @default 'horizontal'\n   */\n  @property({ type: String, reflect: true })\n  declare orientation: DividerOrientation;\n\n  /**\n   * Spacing variant for the divider.\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare spacing: DividerSpacing;\n\n  /**\n   * Visual variant of the divider line.\n   * @type {'solid' | 'dashed' | 'dotted'}\n   * @default 'solid'\n   */\n  @property({ type: String, reflect: true }) declare variant: DividerVariant;\n\n  /**\n   * Color variant for the divider line.\n   * @type {'default' | 'subtle' | 'accent'}\n   * @default 'default'\n   */\n  @property({ type: String, reflect: true }) declare color: DividerColor;\n\n  /**\n   * Border weight for the divider line.\n   * @type {'thin' | 'medium' | 'thick'}\n   * @default 'thin'\n   */\n  @property({ type: String, reflect: true }) declare weight: DividerWeight;\n\n  /** Whether the default slot has content. */\n  @property({ attribute: false }) declare hasContent: boolean;\n\n  static styles = [dividerStyles];\n\n  constructor() {\n    super();\n    this.orientation = 'horizontal';\n    this.spacing = 'md';\n    this.variant = 'solid';\n    this.color = 'default';\n    this.weight = 'thin';\n    this.hasContent = false;\n  }\n\n  private handleSlotChange = (event: Event) => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    const nodes = slot.assignedNodes({ flatten: true });\n    this.hasContent = nodes.some(\n      (node) =>\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n    );\n  };\n\n  render() {\n    return html`\n      <div\n        class=\"divider divider--${this.orientation} divider--spacing-${\n          this.spacing\n        }\"\n        role=\"separator\"\n        aria-orientation=\"${this.orientation}\"\n        part=\"divider\"\n      >\n        <span\n          class=\"divider__line divider__line--${this.variant}\"\n          part=\"line\"\n        ></span>\n        ${\n          this.orientation === 'horizontal'\n            ? html`\n                ${\n                  this.hasContent\n                    ? html`<span class=\"divider__content\" part=\"content\">\n                          <slot @slotchange=${this.handleSlotChange}></slot>\n                        </span>\n                        <span\n                          class=\"divider__line divider__line--${this.variant}\"\n                          part=\"line\"\n                        ></span>`\n                    : html`<slot @slotchange=${this.handleSlotChange}></slot>`\n                }\n              `\n            : nothing\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-divider': BpDivider;\n  }\n}\n"],"mappings":";;;;AAEA,IAAaE,IAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCanBC,IAAN,cAAwBC,EAAW;;EAwCxB,KAAA,SAAA,CAACF,CAAa;;CAE9B,cAAc;EAOZ,AANA,MAAM,GASoB,KAAA,oBAAA,MAAiB;GAI3C,IAAMG,IAHOC,EAAM,OAGA,cAAc,EAAE,SAAS,GAAK,CAAC;GAClD,KAAK,aAAaD,EAAM,MACrB,MACCE,EAAK,aAAa,KAAK,gBACtBA,EAAK,aAAa,KAAK,aAAaA,EAAK,aAAa,KAAK,MAAM,EACtE;EACF,GAlBE,KAAK,cAAc,cACnB,KAAK,UAAU,MACf,KAAK,UAAU,SACf,KAAK,QAAQ,WACb,KAAK,SAAS,QACd,KAAK,aAAa;CACpB;CAcA,SAAS;EACP,OAAO,CAAI;;kCAEmB,KAAK,YAAY,oBACzC,KAAK,QACN;;4BAEmB,KAAK,YAAY;;;;gDAIG,KAAK,QAAQ;;;UAInD,KAAK,gBAAgB,eACjB,CAAI;kBAEA,KAAK,aACD,CAAI;8CACoB,KAAK,iBAAiB;;;gEAGJ,KAAK,QAAQ;;oCAGvD,CAAI,qBAAqB,KAAK,iBAAiB,UACpD;kBAEHC,EACL;;;CAGP;AACF;AA5FGR,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,eAAA,KAAA,CAAA,GAQxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,WAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,WAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,SAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAS,EAAS,EAAE,WAAW,GAAM,CAAC,CAAA,GAAAN,EAAA,WAAA,cAAA,KAAA,CAAA,GAvC/B,IAAAH,EAAA,CAAAU,EAAc,YAAY,CAAA,GAAAP,CAAA"}