@carbon/web-components 2.60.0 → 2.61.0

package/es/components/date-picker/date-picker.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.scss.js","names":[],"sources":["../../../src/components/date-picker/date-picker.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2025\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/colors' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/date-picker/date-picker' as *;\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n\n// https://github.com/carbon-design-system/carbon/issues/11408\n@include date-picker;\n\n:host(#{$prefix}-date-picker) {\n  @extend .#{$prefix}--date-picker;\n\n  #floating-menu-container {\n    position: fixed;\n    z-index: z('dropdown');\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--date-picker__calendar.open {\n    margin-block-start: 0;\n  }\n\n  .flatpickr-next-month,\n  .flatpickr-prev-month {\n    svg {\n      transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};\n    }\n  }\n\n  // _date-picker.scss#L351-L360 in `v10.6.0` tree, coping with the CSS class that latest Flatpickr has\n  .#{$prefix}--date-picker__day.flatpickr-disabled,\n  .flatpickr-day.flatpickr-disabled {\n    color: $layer-selected-inverse;\n    cursor: not-allowed;\n    opacity: 0.5;\n\n    &:hover {\n      background: transparent;\n    }\n  }\n\n  // _date-picker.scss#L455-L468 in `v10.6.0` tree, coping with the CSS class that latest Flatpickr has\n  .flatpickr-next-month.flatpickr-disabled,\n  .flatpickr-prev-month.flatpickr-disabled {\n    svg {\n      cursor: not-allowed;\n      fill: $layer-selected-inverse;\n      opacity: 0.5;\n    }\n\n    &:hover {\n      svg {\n        fill: $layer-selected-inverse;\n      }\n    }\n  }\n}\n\n:host(#{$prefix}-date-picker-input),\n:host(#{$prefix}-date-picker-input-skeleton) {\n  @extend .#{$prefix}--date-picker-container;\n\n  outline: none;\n\n  .#{$prefix}--form-requirement[hidden] {\n    display: none;\n  }\n}\n:host(#{$prefix}-date-picker-input[warn]:not([invalid])) {\n  .#{$prefix}--form-requirement {\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-date-picker-input[kind='simple']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='simple']) {\n  .#{$prefix}--date-picker__input {\n    inline-size: rem(120px);\n  }\n\n  .#{$prefix}--date-picker__input--invalid,\n  .#{$prefix}--date-picker__input--warn {\n    inline-size: rem(152px);\n  }\n}\n\n:host(#{$prefix}-date-picker-input[kind='simple'][short]),\n:host(#{$prefix}-date-picker-input-skeleton[kind='simple'][short]) {\n  .#{$prefix}--date-picker__input {\n    inline-size: rem(90px);\n  }\n}\n\n:host(#{$prefix}-date-picker-input[kind='single']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='single']) {\n  max-inline-size: rem(288px);\n\n  .#{$prefix}--date-picker__input {\n    inline-size: rem(288px);\n  }\n}\n\n:host(#{$prefix}-date-picker-input[kind='from']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='from']) {\n  margin-inline-end: rem(1px);\n}\n\n:host(#{$prefix}-date-picker-input[kind='from']),\n:host(#{$prefix}-date-picker-input[kind='to']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='from']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='to']) {\n  inline-size: rem(143.5px);\n\n  .#{$prefix}--date-picker__input {\n    inline-size: rem(143.5px);\n  }\n}\n\n:host(#{$prefix}-date-picker-input) {\n  .#{$prefix}--date-picker__icon {\n    @extend .#{$prefix}--date-picker__icon;\n  }\n\n  .#{$prefix}--date-picker__icon--warn {\n    @extend .#{$prefix}--date-picker__icon--warn;\n  }\n\n  .#{$prefix}--date-picker__icon--invalid {\n    @extend .#{$prefix}--date-picker__icon--invalid;\n  }\n\n  ::slotted(#{$prefix}-ai-label),\n  ::slotted(#{$prefix}-slug) {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: $spacing-08;\n  }\n\n  ::slotted(#{$prefix}-ai-label:not([revert-active])),\n  ::slotted(#{$prefix}-slug:not([revert-active])) {\n    transform: translateY(-50%);\n  }\n}\n\n:host(#{$prefix}-date-picker-input-skeleton) {\n  display: inline-block;\n\n  .#{$prefix}--label {\n    @include skeleton;\n\n    block-size: rem(14px);\n\n    inline-size: rem(75px);\n  }\n\n  .#{$prefix}--date-picker-input-skeleton-container {\n    display: inline-block;\n  }\n}\n\n:host(#{$prefix}-date-picker-input-skeleton[range]) {\n  .#{$prefix}--date-picker-input-skeleton-container {\n    inline-size: rem(143.5px);\n\n    .#{$prefix}--date-picker__input {\n      inline-size: rem(143.5px);\n    }\n  }\n}\n\n:host(#{$prefix}-date-picker-input[ai-label])\n  .#{$prefix}--date-picker__input--decorator {\n  @include ai-gradient;\n}\n"],"mappings":""}
+{"version":3,"file":"date-picker.scss.js","names":[],"sources":["../../../src/components/date-picker/date-picker.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2025\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/colors' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/date-picker/date-picker' as *;\n@use '@carbon/styles/scss/utilities/ai-gradient' as *;\n\n// https://github.com/carbon-design-system/carbon/issues/11408\n@include date-picker;\n\n:host(#{$prefix}-date-picker) {\n  @extend .#{$prefix}--date-picker;\n\n  #floating-menu-container {\n    position: fixed;\n    z-index: z('dropdown');\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--date-picker__calendar.open {\n    margin-block-start: 0;\n  }\n\n  .flatpickr-next-month,\n  .flatpickr-prev-month {\n    svg {\n      transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};\n    }\n  }\n\n  // _date-picker.scss#L351-L360 in `v10.6.0` tree, coping with the CSS class that latest Flatpickr has\n  .#{$prefix}--date-picker__day.flatpickr-disabled,\n  .flatpickr-day.flatpickr-disabled {\n    color: $layer-selected-inverse;\n    cursor: not-allowed;\n    opacity: 0.5;\n\n    &:hover {\n      background: transparent;\n    }\n  }\n\n  // _date-picker.scss#L455-L468 in `v10.6.0` tree, coping with the CSS class that latest Flatpickr has\n  .flatpickr-next-month.flatpickr-disabled,\n  .flatpickr-prev-month.flatpickr-disabled {\n    svg {\n      cursor: not-allowed;\n      fill: $layer-selected-inverse;\n      opacity: 0.5;\n    }\n\n    &:hover {\n      svg {\n        fill: $layer-selected-inverse;\n      }\n    }\n  }\n}\n\n:host(#{$prefix}-date-picker-input),\n:host(#{$prefix}-date-picker-input-skeleton) {\n  @extend .#{$prefix}--date-picker-container;\n\n  outline: none;\n\n  .#{$prefix}--form-requirement[hidden] {\n    display: none;\n  }\n}\n:host(#{$prefix}-date-picker-input[warn]:not([invalid])) {\n  .#{$prefix}--form-requirement {\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-date-picker-input[kind='simple']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='simple']) {\n  .#{$prefix}--date-picker__input {\n    inline-size: rem(120px);\n  }\n\n  .#{$prefix}--date-picker__input--invalid,\n  .#{$prefix}--date-picker__input--warn {\n    inline-size: rem(152px);\n  }\n}\n\n:host(#{$prefix}-date-picker-input[kind='simple'][short]),\n:host(#{$prefix}-date-picker-input-skeleton[kind='simple'][short]) {\n  .#{$prefix}--date-picker__input {\n    inline-size: rem(90px);\n  }\n}\n\n:host(#{$prefix}-date-picker-input[kind='single']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='single']) {\n  max-inline-size: rem(288px);\n\n  .#{$prefix}--date-picker__input {\n    inline-size: rem(288px);\n  }\n}\n\n:host(#{$prefix}-date-picker-input[kind='from']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='from']) {\n  margin-inline-end: rem(1px);\n}\n\n:host(#{$prefix}-date-picker-input[kind='from']),\n:host(#{$prefix}-date-picker-input[kind='to']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='from']),\n:host(#{$prefix}-date-picker-input-skeleton[kind='to']) {\n  inline-size: rem(143.5px);\n\n  .#{$prefix}--date-picker__input {\n    inline-size: rem(143.5px);\n  }\n}\n\n:host(#{$prefix}-date-picker-input) {\n  .#{$prefix}--date-picker__icon {\n    @extend .#{$prefix}--date-picker__icon;\n  }\n\n  .#{$prefix}--date-picker__icon--warn {\n    @extend .#{$prefix}--date-picker__icon--warn;\n  }\n\n  .#{$prefix}--date-picker__icon--invalid {\n    @extend .#{$prefix}--date-picker__icon--invalid;\n  }\n\n  ::slotted(#{$prefix}-ai-label),\n  ::slotted(#{$prefix}-slug) {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: $spacing-08;\n  }\n\n  ::slotted(#{$prefix}-ai-label:not([revert-active])),\n  ::slotted(#{$prefix}-slug:not([revert-active])) {\n    transform: translateY(-50%);\n  }\n}\n\n:host(#{$prefix}-date-picker-input-skeleton) {\n  display: inline-block;\n\n  .#{$prefix}--label {\n    @include skeleton;\n\n    block-size: rem(14px);\n\n    inline-size: rem(75px);\n  }\n\n  .#{$prefix}--date-picker-input-skeleton-container {\n    display: inline-block;\n  }\n}\n\n:host(#{$prefix}-date-picker-input-skeleton[range]) {\n  .#{$prefix}--date-picker-input-skeleton-container {\n    inline-size: rem(143.5px);\n\n    .#{$prefix}--date-picker__input {\n      inline-size: rem(143.5px);\n    }\n  }\n}\n\n:host(#{$prefix}-date-picker-input[ai-label])\n  .#{$prefix}--date-picker__input--decorator {\n  @include ai-gradient;\n}\n\n.#{$prefix}--form-requirement {\n  box-sizing: border-box;\n  inline-size: 0;\n  min-inline-size: 100%;\n}\n"],"mappings":""}

package/es/components/date-picker/defs.d.ts

@@ -1,10 +1,27 @@
 /**
- * Copyright IBM Corp. 2020, 2022, 2023
+ * Copyright IBM Corp. 2020, 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.
  */
 export { FORM_ELEMENT_COLOR_SCHEME as DATE_PICKER_INPUT_COLOR_SCHEME } from '../../globals/shared-enums';
+/**
+ * Input sizes.
+ */
+export declare enum INPUT_SIZE {
+    /**
+     * Small size.
+     */
+    SMALL = "sm",
+    /**
+     * Medium size (default).
+     */
+    MEDIUM = "md",
+    /**
+     * Large size.
+     */
+    LARGE = "lg"
+}
 /**
  * Date picker input kinds.
  */

package/es/components/date-picker/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,yBAAyB,IAAI,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AAEzG;;GAEG;AACH,oBAAY,sBAAsB;IAChC;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,EAAE,OAAO;CACV"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,yBAAyB,IAAI,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AAEzG;;GAEG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,sBAAsB;IAChC;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,EAAE,OAAO;CACV"}

package/es/components/date-picker/defs.js

@@ -8,6 +8,24 @@
 import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
 //#region src/components/date-picker/defs.ts
 /**
+* Input sizes.
+*/
+let INPUT_SIZE = /* @__PURE__ */ function(INPUT_SIZE) {
+	/**
+	* Small size.
+	*/
+	INPUT_SIZE["SMALL"] = "sm";
+	/**
+	* Medium size (default).
+	*/
+	INPUT_SIZE["MEDIUM"] = "md";
+	/**
+	* Large size.
+	*/
+	INPUT_SIZE["LARGE"] = "lg";
+	return INPUT_SIZE;
+}({});
+/**
 * Date picker input kinds.
 */
 let DATE_PICKER_INPUT_KIND = /* @__PURE__ */ function(DATE_PICKER_INPUT_KIND) {
@@ -30,6 +48,6 @@ let DATE_PICKER_INPUT_KIND = /* @__PURE__ */ function(DATE_PICKER_INPUT_KIND) {
 	return DATE_PICKER_INPUT_KIND;
 }({});
 //#endregion
-export { FORM_ELEMENT_COLOR_SCHEME as DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND };
+export { FORM_ELEMENT_COLOR_SCHEME as DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND, INPUT_SIZE };
 
 //# sourceMappingURL=defs.js.map

package/es/components/date-picker/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/date-picker/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2022, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport { FORM_ELEMENT_COLOR_SCHEME as DATE_PICKER_INPUT_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/**\n * Date picker input kinds.\n */\nexport enum DATE_PICKER_INPUT_KIND {\n  /**\n   * One for simple variant of date picker, comes without the calendar dropdown.\n   */\n  SIMPLE = 'simple',\n\n  /**\n   * One for single variant of date picker.\n   */\n  SINGLE = 'single',\n\n  /**\n   * One for the start date for the range variant.\n   */\n  FROM = 'from',\n\n  /**\n   * One for the end date for the range variant.\n   */\n  TO = 'to',\n}\n"],"mappings":";;;;;;;;;;;;AAYA,IAAY,yBAAL,yBAAA,wBAAA;;;;CAIL,uBAAA,YAAA;;;;CAKA,uBAAA,YAAA;;;;CAKA,uBAAA,UAAA;;;;CAKA,uBAAA,QAAA;;AACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/date-picker/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport { FORM_ELEMENT_COLOR_SCHEME as DATE_PICKER_INPUT_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/**\n * Input sizes.\n */\nexport enum INPUT_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size (default).\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n}\n\n/**\n * Date picker input kinds.\n */\nexport enum DATE_PICKER_INPUT_KIND {\n  /**\n   * One for simple variant of date picker, comes without the calendar dropdown.\n   */\n  SIMPLE = 'simple',\n\n  /**\n   * One for single variant of date picker.\n   */\n  SINGLE = 'single',\n\n  /**\n   * One for the start date for the range variant.\n   */\n  FROM = 'from',\n\n  /**\n   * One for the end date for the range variant.\n   */\n  TO = 'to',\n}\n"],"mappings":";;;;;;;;;;;;AAYA,IAAY,aAAL,yBAAA,YAAA;;;;CAIL,WAAA,WAAA;;;;CAKA,WAAA,YAAA;;;;CAKA,WAAA,WAAA;;AACF,EAAA,CAAA,CAAA;;;;AAKA,IAAY,yBAAL,yBAAA,wBAAA;;;;CAIL,uBAAA,YAAA;;;;CAKA,uBAAA,YAAA;;;;CAKA,uBAAA,UAAA;;;;CAKA,uBAAA,QAAA;;AACF,EAAA,CAAA,CAAA"}

package/es/components/date-picker/next/adapters/web-component-adapter.d.ts

@@ -0,0 +1,143 @@
+/**
+ * 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 { DatePickerState } from '@carbon/utilities/date-picker';
+import type { DatePickerContext, StateTransition } from '@carbon/utilities/date-picker';
+import type CDSDatePicker from '../components/date-picker';
+/**
+ * Adapter configuration
+ */
+export interface AdapterConfig {
+    /** The date picker component instance */
+    component: CDSDatePicker;
+    /** Initial context values */
+    initialContext?: Partial<DatePickerContext>;
+    /** Callback when state changes */
+    onStateChange?: (transition: StateTransition) => void;
+    /** Callback when the calendar should open */
+    onCalendarOpen?: () => void;
+    /** Callback when the calendar should close */
+    onCalendarClose?: () => void;
+    /** Callback when the date is selected */
+    onDateSelect?: (context: DatePickerContext) => void;
+}
+/**
+ * Web Component Adapter
+ * Bridges the state machine with the Web Component implementation
+ */
+export declare class WebComponentAdapter {
+    private machine;
+    private component;
+    private config;
+    private unsubscribe?;
+    /**
+     * Create a new adapter
+     *
+     * @param {AdapterConfig} config - Adapter configuration
+     */
+    constructor(config: AdapterConfig);
+    /**
+     * Send an event to the state machine
+     *
+     * @param {string} event - Event type
+     * @param {unknown} payload - Event payload
+     * @returns Updated context
+     */
+    send(event: string, payload?: unknown): DatePickerContext;
+    /**
+     * Get the current state
+     *
+     * @returns Current state
+     */
+    getState(): DatePickerState;
+    /**
+     * Get the current context
+     *
+     * @returns Current context
+     */
+    getContext(): DatePickerContext;
+    /**
+     * Update context directly
+     *
+     * @param {Partial<DatePickerContext>} updates - Context updates
+     * @returns Updated context
+     */
+    updateContext(updates: Partial<DatePickerContext>): DatePickerContext;
+    /**
+     * Check if a transition is valid
+     *
+     * @param {string} event - Event type
+     * @returns True if transition is valid
+     */
+    canTransition(event: string): boolean;
+    /**
+     * Handle state changes
+     *
+     * @param {StateTransition} transition - State transition
+     */
+    private handleStateChange;
+    /**
+     * Sync component properties with context
+     *
+     * @param {DatePickerContext} context - Current context
+     */
+    private syncComponentProperties;
+    /**
+     * Handle transition-specific effects
+     *
+     * @param {string} from - Previous state
+     * @param {string} to - New state
+     * @param {DatePickerContext} context - Current context
+     */
+    private handleTransitionEffects;
+    /**
+     * Handle calendar date selection
+     * Call this from the calendar's onChange callback
+     *
+     * @param {Date[]} selectedDates - Selected dates from calendar
+     */
+    handleCalendarChange(selectedDates: Date[]): void;
+    /**
+     * Handle calendar open event
+     */
+    handleCalendarOpen(): void;
+    /**
+     * Handle calendar close event
+     */
+    handleCalendarClose(): void;
+    /**
+     * Handle input focus
+     *
+     * @param {('from' | 'to')} inputType - Type of input ('from' or 'to')
+     */
+    handleInputFocus(inputType: 'from' | 'to'): void;
+    /**
+     * Handle input blur
+     */
+    handleInputBlur(): void;
+    /**
+     * Handle outside click
+     */
+    handleOutsideClick(): void;
+    /**
+     * Handle keyboard events
+     *
+     * @param {string} key - Key pressed
+     * @param {boolean} shiftKey - Whether shift key was pressed
+     */
+    handleKeyboard(key: string, shiftKey?: boolean): void;
+    /**
+     * Reset the state machine
+     *
+     * @param {Partial<DatePickerContext>} initialContext - Optional new initial context
+     */
+    reset(initialContext?: Partial<DatePickerContext>): void;
+    /**
+     * Cleanup and unsubscribe
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=web-component-adapter.d.ts.map

package/es/components/date-picker/next/adapters/web-component-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-component-adapter.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/next/adapters/web-component-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,eAAe,EAEhB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EAEhB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,aAAa,MAAM,2BAA2B,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,SAAS,EAAE,aAAa,CAAC;IACzB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC5C,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IACtD,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED;;;GAGG;AACH,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,WAAW,CAAC,CAAa;IAEjC;;;;OAIG;gBACS,MAAM,EAAE,aAAa;IAWjC;;;;;;OAMG;IACI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,GAAG,iBAAiB;IAIhE;;;;OAIG;IACI,QAAQ,IAAI,eAAe;IAIlC;;;;OAIG;IACI,UAAU,IAAI,iBAAiB;IAItC;;;;;OAKG;IACI,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,iBAAiB;IAI5E;;;;;OAKG;IACI,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAI5C;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAwBzB;;;;OAIG;IACH,OAAO,CAAC,uBAAuB;IAsB/B;;;;;;OAMG;IACH,OAAO,CAAC,uBAAuB;IAiC/B;;;;;OAKG;IACI,oBAAoB,CAAC,aAAa,EAAE,IAAI,EAAE,GAAG,IAAI;IAuBxD;;OAEG;IACI,kBAAkB,IAAI,IAAI;IAOjC;;OAEG;IACI,mBAAmB,IAAI,IAAI;IAOlC;;;;OAIG;IACI,gBAAgB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIvD;;OAEG;IACI,eAAe,IAAI,IAAI;IAI9B;;OAEG;IACI,kBAAkB,IAAI,IAAI;IAIjC;;;;;OAKG;IACI,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,IAAI;IAoB1D;;;;OAIG;IACI,KAAK,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAI/D;;OAEG;IACI,OAAO,IAAI,IAAI;CAKvB"}

package/es/components/date-picker/next/adapters/web-component-adapter.js

@@ -0,0 +1,215 @@
+/**
+ * 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 { DatePickerEvent, DatePickerState, DatePickerStateMachine, dateToPlainDate } from "@carbon/utilities/date-picker";
+//#region src/components/date-picker/next/adapters/web-component-adapter.ts
+/**
+* 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.
+*/
+/**
+* Web Component Adapter
+* Bridges the state machine with the Web Component implementation
+*/
+var WebComponentAdapter = class {
+	/**
+	* Create a new adapter
+	*
+	* @param {AdapterConfig} config - Adapter configuration
+	*/
+	constructor(config) {
+		this.config = config;
+		this.component = config.component;
+		this.machine = new DatePickerStateMachine(config.initialContext);
+		this.unsubscribe = this.machine.subscribe((transition) => {
+			this.handleStateChange(transition);
+		});
+	}
+	/**
+	* Send an event to the state machine
+	*
+	* @param {string} event - Event type
+	* @param {unknown} payload - Event payload
+	* @returns Updated context
+	*/
+	send(event, payload) {
+		return this.machine.send(event, payload);
+	}
+	/**
+	* Get the current state
+	*
+	* @returns Current state
+	*/
+	getState() {
+		return this.machine.getState();
+	}
+	/**
+	* Get the current context
+	*
+	* @returns Current context
+	*/
+	getContext() {
+		return this.machine.getContext();
+	}
+	/**
+	* Update context directly
+	*
+	* @param {Partial<DatePickerContext>} updates - Context updates
+	* @returns Updated context
+	*/
+	updateContext(updates) {
+		return this.machine.updateContext(updates);
+	}
+	/**
+	* Check if a transition is valid
+	*
+	* @param {string} event - Event type
+	* @returns True if transition is valid
+	*/
+	canTransition(event) {
+		return this.machine.canTransition(event);
+	}
+	/**
+	* Handle state changes
+	*
+	* @param {StateTransition} transition - State transition
+	*/
+	handleStateChange(transition) {
+		const { from, to, context } = transition;
+		this.syncComponentProperties(context);
+		this.handleTransitionEffects(from, to, context);
+		if (this.config.onStateChange) this.config.onStateChange(transition);
+		this.component.dispatchEvent(new CustomEvent("cds-preview-date-picker-state-change", {
+			detail: { transition },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Sync component properties with context
+	*
+	* @param {DatePickerContext} context - Current context
+	*/
+	syncComponentProperties(context) {
+		if (this.component.open !== context.isOpen) this.component.open = context.isOpen;
+		if (this.component.value !== context.value) this.component.value = context.value;
+		if (this.component.disabled !== context.isDisabled) this.component.disabled = context.isDisabled;
+		if (this.component.readonly !== context.isReadonly) this.component.readonly = context.isReadonly;
+	}
+	/**
+	* Handle transition-specific effects
+	*
+	* @param {string} from - Previous state
+	* @param {string} to - New state
+	* @param {DatePickerContext} context - Current context
+	*/
+	handleTransitionEffects(from, to, context) {
+		if (to === DatePickerState.CALENDAR_OPEN && from !== DatePickerState.CALENDAR_OPEN) {
+			if (this.config.onCalendarOpen) this.config.onCalendarOpen();
+		}
+		if (from === DatePickerState.CALENDAR_OPEN && to !== DatePickerState.CALENDAR_OPEN) {
+			if (this.config.onCalendarClose) this.config.onCalendarClose();
+		}
+		if (to === DatePickerState.DATE_SELECTED) {
+			if (this.config.onDateSelect) this.config.onDateSelect(context);
+		}
+	}
+	/**
+	* Handle calendar date selection
+	* Call this from the calendar's onChange callback
+	*
+	* @param {Date[]} selectedDates - Selected dates from calendar
+	*/
+	handleCalendarChange(selectedDates) {
+		const context = this.getContext();
+		if (context.mode === "single" && selectedDates.length > 0) {
+			const date = dateToPlainDate(selectedDates[0]);
+			this.send(DatePickerEvent.DATE_SELECT, { date });
+		} else if (context.mode === "range") {
+			if (selectedDates.length === 1) {
+				const date = dateToPlainDate(selectedDates[0]);
+				this.send(DatePickerEvent.RANGE_START_SELECT, { date });
+			} else if (selectedDates.length === 2) {
+				const date = dateToPlainDate(selectedDates[1]);
+				this.send(DatePickerEvent.RANGE_END_SELECT, { date });
+			}
+		}
+	}
+	/**
+	* Handle calendar open event
+	*/
+	handleCalendarOpen() {
+		if (this.getState() !== DatePickerState.CALENDAR_OPEN) this.send(DatePickerEvent.CALENDAR_OPEN);
+	}
+	/**
+	* Handle calendar close event
+	*/
+	handleCalendarClose() {
+		if (this.getState() === DatePickerState.CALENDAR_OPEN) this.send(DatePickerEvent.CALENDAR_CLOSE);
+	}
+	/**
+	* Handle input focus
+	*
+	* @param {('from' | 'to')} inputType - Type of input ('from' or 'to')
+	*/
+	handleInputFocus(inputType) {
+		this.send(DatePickerEvent.INPUT_FOCUS, { inputType });
+	}
+	/**
+	* Handle input blur
+	*/
+	handleInputBlur() {
+		this.send(DatePickerEvent.INPUT_BLUR);
+	}
+	/**
+	* Handle outside click
+	*/
+	handleOutsideClick() {
+		this.send(DatePickerEvent.OUTSIDE_CLICK);
+	}
+	/**
+	* Handle keyboard events
+	*
+	* @param {string} key - Key pressed
+	* @param {boolean} shiftKey - Whether shift key was pressed
+	*/
+	handleKeyboard(key, shiftKey = false) {
+		switch (key) {
+			case "Escape":
+				this.send(DatePickerEvent.ESCAPE_KEY);
+				break;
+			case "Tab":
+				if (shiftKey) this.send(DatePickerEvent.SHIFT_TAB_KEY);
+				else this.send(DatePickerEvent.TAB_KEY);
+				break;
+			case "Enter":
+				this.send(DatePickerEvent.ENTER_KEY);
+				break;
+			default: break;
+		}
+	}
+	/**
+	* Reset the state machine
+	*
+	* @param {Partial<DatePickerContext>} initialContext - Optional new initial context
+	*/
+	reset(initialContext) {
+		this.machine.reset(initialContext);
+	}
+	/**
+	* Cleanup and unsubscribe
+	*/
+	destroy() {
+		if (this.unsubscribe) this.unsubscribe();
+	}
+};
+//#endregion
+export { WebComponentAdapter };
+
+//# sourceMappingURL=web-component-adapter.js.map

package/es/components/date-picker/next/adapters/web-component-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-component-adapter.js","names":[],"sources":["../../../../../src/components/date-picker/next/adapters/web-component-adapter.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { DatePickerStateMachine } from '@carbon/utilities/date-picker';\nimport {\n  DatePickerState,\n  DatePickerEvent,\n} from '@carbon/utilities/date-picker';\nimport { dateToPlainDate } from '@carbon/utilities/date-picker';\nimport type {\n  DatePickerContext,\n  StateTransition,\n  DateSelectPayload,\n} from '@carbon/utilities/date-picker';\nimport type CDSDatePicker from '../components/date-picker';\n\n/**\n * Adapter configuration\n */\nexport interface AdapterConfig {\n  /** The date picker component instance */\n  component: CDSDatePicker;\n  /** Initial context values */\n  initialContext?: Partial<DatePickerContext>;\n  /** Callback when state changes */\n  onStateChange?: (transition: StateTransition) => void;\n  /** Callback when the calendar should open */\n  onCalendarOpen?: () => void;\n  /** Callback when the calendar should close */\n  onCalendarClose?: () => void;\n  /** Callback when the date is selected */\n  onDateSelect?: (context: DatePickerContext) => void;\n}\n\n/**\n * Web Component Adapter\n * Bridges the state machine with the Web Component implementation\n */\nexport class WebComponentAdapter {\n  private machine: DatePickerStateMachine;\n  private component: CDSDatePicker;\n  private config: AdapterConfig;\n  private unsubscribe?: () => void;\n\n  /**\n   * Create a new adapter\n   *\n   * @param {AdapterConfig} config - Adapter configuration\n   */\n  constructor(config: AdapterConfig) {\n    this.config = config;\n    this.component = config.component;\n    this.machine = new DatePickerStateMachine(config.initialContext);\n\n    // Subscribe to state changes\n    this.unsubscribe = this.machine.subscribe((transition) => {\n      this.handleStateChange(transition);\n    });\n  }\n\n  /**\n   * Send an event to the state machine\n   *\n   * @param {string} event - Event type\n   * @param {unknown} payload - Event payload\n   * @returns Updated context\n   */\n  public send(event: string, payload?: unknown): DatePickerContext {\n    return this.machine.send(event, payload);\n  }\n\n  /**\n   * Get the current state\n   *\n   * @returns Current state\n   */\n  public getState(): DatePickerState {\n    return this.machine.getState();\n  }\n\n  /**\n   * Get the current context\n   *\n   * @returns Current context\n   */\n  public getContext(): DatePickerContext {\n    return this.machine.getContext();\n  }\n\n  /**\n   * Update context directly\n   *\n   * @param {Partial<DatePickerContext>} updates - Context updates\n   * @returns Updated context\n   */\n  public updateContext(updates: Partial<DatePickerContext>): DatePickerContext {\n    return this.machine.updateContext(updates);\n  }\n\n  /**\n   * Check if a transition is valid\n   *\n   * @param {string} event - Event type\n   * @returns True if transition is valid\n   */\n  public canTransition(event: string): boolean {\n    return this.machine.canTransition(event);\n  }\n\n  /**\n   * Handle state changes\n   *\n   * @param {StateTransition} transition - State transition\n   */\n  private handleStateChange(transition: StateTransition): void {\n    const { from, to, context } = transition;\n\n    // Sync component properties with state machine context\n    this.syncComponentProperties(context);\n\n    // Handle specific state transitions\n    this.handleTransitionEffects(from, to, context);\n\n    // Call user callback\n    if (this.config.onStateChange) {\n      this.config.onStateChange(transition);\n    }\n\n    // Dispatch custom event\n    (this.component as unknown as HTMLElement).dispatchEvent(\n      new CustomEvent('cds-preview-date-picker-state-change', {\n        detail: { transition },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Sync component properties with context\n   *\n   * @param {DatePickerContext} context - Current context\n   */\n  private syncComponentProperties(context: DatePickerContext): void {\n    // Sync open state\n    if (this.component.open !== context.isOpen) {\n      this.component.open = context.isOpen;\n    }\n\n    // Sync value\n    if (this.component.value !== context.value) {\n      this.component.value = context.value;\n    }\n\n    // Sync disabled state\n    if (this.component.disabled !== context.isDisabled) {\n      this.component.disabled = context.isDisabled;\n    }\n\n    // Sync readonly state\n    if (this.component.readonly !== context.isReadonly) {\n      this.component.readonly = context.isReadonly;\n    }\n  }\n\n  /**\n   * Handle transition-specific effects\n   *\n   * @param {string} from - Previous state\n   * @param {string} to - New state\n   * @param {DatePickerContext} context - Current context\n   */\n  private handleTransitionEffects(\n    from: string,\n    to: string,\n    context: DatePickerContext\n  ): void {\n    // Handle calendar opening\n    if (\n      to === DatePickerState.CALENDAR_OPEN &&\n      from !== DatePickerState.CALENDAR_OPEN\n    ) {\n      if (this.config.onCalendarOpen) {\n        this.config.onCalendarOpen();\n      }\n    }\n\n    // Handle calendar closing\n    if (\n      from === DatePickerState.CALENDAR_OPEN &&\n      to !== DatePickerState.CALENDAR_OPEN\n    ) {\n      if (this.config.onCalendarClose) {\n        this.config.onCalendarClose();\n      }\n    }\n\n    // Handle date selection\n    if (to === DatePickerState.DATE_SELECTED) {\n      if (this.config.onDateSelect) {\n        this.config.onDateSelect(context);\n      }\n    }\n  }\n\n  /**\n   * Handle calendar date selection\n   * Call this from the calendar's onChange callback\n   *\n   * @param {Date[]} selectedDates - Selected dates from calendar\n   */\n  public handleCalendarChange(selectedDates: Date[]): void {\n    const context = this.getContext();\n\n    if (context.mode === 'single' && selectedDates.length > 0) {\n      const date = dateToPlainDate(selectedDates[0]);\n      this.send(DatePickerEvent.DATE_SELECT, {\n        date,\n      } as DateSelectPayload);\n    } else if (context.mode === 'range') {\n      if (selectedDates.length === 1) {\n        const date = dateToPlainDate(selectedDates[0]);\n        this.send(DatePickerEvent.RANGE_START_SELECT, {\n          date,\n        } as DateSelectPayload);\n      } else if (selectedDates.length === 2) {\n        const date = dateToPlainDate(selectedDates[1]);\n        this.send(DatePickerEvent.RANGE_END_SELECT, {\n          date,\n        } as DateSelectPayload);\n      }\n    }\n  }\n\n  /**\n   * Handle calendar open event\n   */\n  public handleCalendarOpen(): void {\n    const currentState = this.getState();\n    if (currentState !== DatePickerState.CALENDAR_OPEN) {\n      this.send(DatePickerEvent.CALENDAR_OPEN);\n    }\n  }\n\n  /**\n   * Handle calendar close event\n   */\n  public handleCalendarClose(): void {\n    const currentState = this.getState();\n    if (currentState === DatePickerState.CALENDAR_OPEN) {\n      this.send(DatePickerEvent.CALENDAR_CLOSE);\n    }\n  }\n\n  /**\n   * Handle input focus\n   *\n   * @param {('from' | 'to')} inputType - Type of input ('from' or 'to')\n   */\n  public handleInputFocus(inputType: 'from' | 'to'): void {\n    this.send(DatePickerEvent.INPUT_FOCUS, { inputType });\n  }\n\n  /**\n   * Handle input blur\n   */\n  public handleInputBlur(): void {\n    this.send(DatePickerEvent.INPUT_BLUR);\n  }\n\n  /**\n   * Handle outside click\n   */\n  public handleOutsideClick(): void {\n    this.send(DatePickerEvent.OUTSIDE_CLICK);\n  }\n\n  /**\n   * Handle keyboard events\n   *\n   * @param {string} key - Key pressed\n   * @param {boolean} shiftKey - Whether shift key was pressed\n   */\n  public handleKeyboard(key: string, shiftKey = false): void {\n    switch (key) {\n      case 'Escape':\n        this.send(DatePickerEvent.ESCAPE_KEY);\n        break;\n      case 'Tab':\n        if (shiftKey) {\n          this.send(DatePickerEvent.SHIFT_TAB_KEY);\n        } else {\n          this.send(DatePickerEvent.TAB_KEY);\n        }\n        break;\n      case 'Enter':\n        this.send(DatePickerEvent.ENTER_KEY);\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Reset the state machine\n   *\n   * @param {Partial<DatePickerContext>} initialContext - Optional new initial context\n   */\n  public reset(initialContext?: Partial<DatePickerContext>): void {\n    this.machine.reset(initialContext);\n  }\n\n  /**\n   * Cleanup and unsubscribe\n   */\n  public destroy(): void {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,136 @@
+/**
+ * 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';
+import type { PropertyValues } from 'lit';
+/**
+ * Calendar renderer for date picker.
+ * Replaces Flatpickr's calendar UI with a lightweight, framework-agnostic implementation.
+ *
+ * @element cds-preview-date-picker-calendar
+ * @fires cds-preview-date-picker-calendar-date-select - Fired when a date is selected
+ * @fires cds-preview-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 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;
+    /**
+     * 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 {PropertyValues} changedProperties - Changed properties
+     */
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Renders the calendar component
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSDatePickerCalendar;
+//# sourceMappingURL=calendar-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-renderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/next/components/calendar-renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAiB1C;;;;;;;GAOG;AACH,cACM,qBAAsB,SAAQ,UAAU;IAC5C;;OAEG;IAEH,OAAO,CAAC,aAAa,CAC4B;IAEjD;;OAEG;IAEH,aAAa,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAM;IAEzC;;OAEG;IAEH,QAAQ,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAE9B;;OAEG;IAEH,WAAW,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC;IAExC;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAC,CAAqB;IAE1C;;OAEG;IAEH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAE7B;;OAEG;IAEH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAE7B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,UAAU,SAAW;IAErB;;OAEG;IAEH,MAAM,SAAW;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAczB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAY5B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;;OAGG;IACH,OAAO,CAAC,eAAe;IASvB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAgDtB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAOtB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAO7B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAK7B;;OAEG;IACH,OAAO,CAAC,aAAa;IAoCrB;;OAEG;IACH,OAAO,CAAC,eAAe;IAcvB;;OAEG;IACH,OAAO,CAAC,WAAW;IA+CnB;;;OAGG;IACH,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAWzC;;OAEG;IACH,MAAM;IAQN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC"}