@breadstone/mosaik-elements-foundation 0.0.264 → 0.0.266

package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeBoxElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,sBAAsB,CAAC;AAcjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI/D;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,kBAAkB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAiH7F"}
+{"version":3,"file":"DateTimeBoxElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,sBAAsB,CAAC;AAcjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI/D;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,kBAAkB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAsJ7F"}

package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.js

@@ -5,7 +5,6 @@ import { classMap, ifDefined, live, when } from '../../../Directives/Directives'
 import { ifNonEmpty } from '../../../Directives/IfNonEmpty';
 import { ifNonNull } from '../../../Directives/IfNonNull';
 import { Appearance } from '../../../Types/Appearance';
-import { HorizontalAlignment } from '../../../Types/HorizontalAlignment';
 import { Orientation } from '../../../Types/Orientation';
 import { Placement } from '../../../Types/Placement';
 import { RangeSelectionMode } from '../../../Types/RangeSelectionMode';
@@ -91,42 +90,78 @@ export function dateTimeBoxElementTemplate(e) {
                              ?flip="${true}"
                              ?shift="${true}"
                              ?active="${e.isDropDownOpen}">
-                <mosaik-calendar part="calendar"
-                                 .dir="${e.dir}"
-                                 .value="${ifNonNull(e.value)}"
-                                 .values="${e.values}"
-                                 .blackoutDates="${e.blackoutDates}"
-                                 .firstDayOfWeek="${e.firstDayOfWeek}"
-                                 .markerHandler="${e.markerHandler}"
-                                 .maxDate="${ifNonNull(e.maxDate)}"
-                                 .minDate="${ifNonNull(e.minDate)}"
-                                 .selectionMode="${RangeSelectionMode.Single}"
-                                 .showAdjacent="${e.showAdjacent}"
-                                 .showWeekNumbers="${e.showWeekNumbers}"
-                                 .specialDates="${e.specialDates}"
-                                 .orientation="${Orientation.Vertical}"
-                                 .view="${e.view}"
-                                 .appearance="${e.appearance}"
-                                 .variant="${e.variant}"
-                                 .displayDate="${e.displayDate}"
-                                 .displayDateStart="${e.displayDateStart}"
-                                 .displayDateEnd="${e.displayDateEnd}"
-                                 ?disabled="${e.disabled}"
-                                 ?is-today-highlighted="${e.isTodayHighlighted}"
-                                 ?is-weekend-highlighted="${e.isWeekendHighlighted}"
-                                 @dateChanged="${(x) => e.onDateChanged(x.detail)}">
-                    <mosaik-stack slot="footer">
-                        <mosaik-text .text="${'Time'}"></mosaik-text>
-                        <mosaik-stack .orientation="${Orientation.Horizontal}"
-                                      .horizontalAlignment="${HorizontalAlignment.Right}">
-                            <input type="time"/>
-                            <mosaik-button .label="${'AM'}"
-                                           .appearance="${Appearance.Plain}"></mosaik-button>
-                            <mosaik-button .label="${'PM'}"
-                                           .appearance="${Appearance.Plain}"></mosaik-button>
-                        </mosaik-stack>
-                    </mosaik-stack>
-                </mosaik-calendar>
+                <div part="datetime-content"
+                     style="display: flex; flex-direction: row; background: var(--mosaik-scheme-background); border: var(--mosaik-layout-thickness) solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--mosaik-layout-radius); overflow: hidden;">
+                    <mosaik-calendar part="calendar"
+                                     style="--calendar-border-width: 0; --calendar-border-radius: 0; --calendar-border-style: none; flex-shrink: 0;"
+                                     .dir="${e.dir}"
+                                     .value="${ifNonNull(e.value)}"
+                                     .values="${e.values}"
+                                     .blackoutDates="${e.blackoutDates}"
+                                     .firstDayOfWeek="${e.firstDayOfWeek}"
+                                     .markerHandler="${e.markerHandler}"
+                                     .maxDate="${ifNonNull(e.maxDate)}"
+                                     .minDate="${ifNonNull(e.minDate)}"
+                                     .selectionMode="${RangeSelectionMode.Single}"
+                                     .showAdjacent="${e.showAdjacent}"
+                                     .showWeekNumbers="${e.showWeekNumbers}"
+                                     .specialDates="${e.specialDates}"
+                                     .orientation="${Orientation.Vertical}"
+                                     .view="${e.view}"
+                                     .appearance="${e.appearance}"
+                                     .variant="${e.variant}"
+                                     .displayDate="${e.displayDate}"
+                                     .displayDateStart="${e.displayDateStart}"
+                                     .displayDateEnd="${e.displayDateEnd}"
+                                     ?disabled="${e.disabled}"
+                                     ?is-today-highlighted="${e.isTodayHighlighted}"
+                                     ?is-weekend-highlighted="${e.isWeekendHighlighted}"
+                                     @dateChanged="${(x) => e.onDateChanged(x.detail, x.currentTarget)}">
+                    </mosaik-calendar>
+                    <div part="time-divider"
+                         style="width: 1px; flex-shrink: 0; background: color-mix(in srgb, currentColor 15%, transparent);"></div>
+                    <div part="time-picker"
+                         style="display: flex; flex-direction: column; min-width: 120px; align-self: stretch;">
+                        ${when(e.is12Hour, () => html `
+                        <div part="ampm-toggle"
+                             style="display: flex; flex-direction: row; justify-content: center; gap: 4px; padding: 8px; flex-shrink: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);">
+                            <mosaik-button part="ampm-button"
+                                           .label="${'AM'}"
+                                           .appearance="${e.isAM ? Appearance.Soft : Appearance.Plain}"
+                                           .size="${Size.Small}"
+                                           .disabled="${e.disabled}"
+                                           @click="${() => e.onAmPmToggled(true)}"></mosaik-button>
+                            <mosaik-button part="ampm-button"
+                                           .label="${'PM'}"
+                                           .appearance="${!e.isAM ? Appearance.Soft : Appearance.Plain}"
+                                           .size="${Size.Small}"
+                                           .disabled="${e.disabled}"
+                                           @click="${() => e.onAmPmToggled(false)}"></mosaik-button>
+                        </div>
+                        `)}
+                        <div part="time-columns"
+                             style="position: relative; flex: 1; min-height: 0;">
+                            <div style="position: absolute; inset: 0; display: flex; flex-direction: row; overflow: hidden;">
+                                <mosaik-wheel-picker part="hour-column"
+                                                      style="--wheel-picker-column-max-height: none;"
+                                                      .items="${e.hourItems}"
+                                                      .value="${String(e.selectedDisplayHour)}"
+                                                      .variant="${e.variant}"
+                                                      .appearance="${e.appearance}"
+                                                      aria-label="Hour"
+                                                      @wheelPickerChange="${(x) => e.onHourChanged(x)}"></mosaik-wheel-picker>
+                                <mosaik-wheel-picker part="minute-column"
+                                                      style="--wheel-picker-column-max-height: none;"
+                                                      .items="${e.minuteItems}"
+                                                      .value="${String(e.selectedMinute)}"
+                                                      .variant="${e.variant}"
+                                                      .appearance="${e.appearance}"
+                                                      aria-label="Minute"
+                                                      @wheelPickerChange="${(x) => e.onMinuteChanged(x)}"></mosaik-wheel-picker>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </mosaik-floating>
         </mosaik-portal>
     `;

package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeBoxElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateTimeBoxElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAuB,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAKjD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAA+B,CAAI;IAEzE,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;uCAEC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;uCACtC,CAAC,CAAC,SAAS;0CACR,QAAQ;yCACT,CAAC,GAAU,EAAE,EAAE,CAAE,GAAG,CAAC,MAA2B,CAAC,MAAM,CAAC,CAAC,CAAC;SAC1F,CAAC;;wBAEc,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC;;;;sBAI7B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;cAC9D,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;4BAGV,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK;aAClF,CAAC;;;;2BAIa,UAAU,CAAC,CAAC,CAAC,IAAI,CAAW;kCACrB,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAW;+BACrE,CAAC,CAAC,QAAQ;mCACN,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;6BAC1B,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC;gCACjB,CAAC,CAAC,QAAQ;gCACV,CAAC,CAAC,QAAQ;gCACV,CAAC,CAAC,QAAQ;iCACT,CAAC,CAAC,SAAS;8BACd,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;6BAC5B,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;6BAC/B,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;4BAChC,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;UAEhD,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sCAE3C,UAAU,CAAC,KAAK;gCACtB,KAAK,CAAC,KAAK;gCACX,IAAI,CAAC,KAAK;oCACN,IAAI,CAAC,MAAM;oCACX,CAAC,CAAC,QAAQ;iCACb,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;SACvC,CAAC;;sCAE4B,UAAU,CAAC,KAAK;gCACtB,KAAK,CAAC,QAAQ;gCACd,IAAI,CAAC,KAAK;oCACN,IAAI,CAAC,MAAM;oCACX,CAAC,CAAC,QAAQ;iCACb,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;;wBAEzB,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC;;;;;wCAKX,CAAY;2CACT,CAAC,CAAC,iBAAiB;0CACpB,CAAC,CAAC,gBAAgB;0CAClB,CAAC,CAAC,gBAAgB;0CAClB,CAAC,CAAC,gBAAgB;sCACtB,MAAM;wDACY,CAAC,SAAS,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC;2CAC9C,CAAC,CAAC,iBAAiB;wCACtB,CAAC,CAAC,cAAc;0CACd,CAAC,CAAC,gBAAgB;uCACrB,CAAC,CAAC,aAAa;sCAChB,IAAI;uCACH,IAAI;wCACH,CAAC,CAAC,cAAc;;;;;6CAKX,CAAC,CAAC,GAAG;+CACH,SAAS,CAAC,CAAC,CAAC,KAAK,CAAS;gDACzB,CAAC,CAAC,MAAM;uDACD,CAAC,CAAC,aAAa;wDACd,CAAC,CAAC,cAAc;uDACjB,CAAC,CAAC,aAAa;iDACrB,SAAS,CAAC,CAAC,CAAC,OAAO,CAAS;iDAC5B,SAAS,CAAC,CAAC,CAAC,OAAO,CAAS;uDACtB,kBAAkB,CAAC,MAAM;sDAC1B,CAAC,CAAC,YAAY;yDACX,CAAC,CAAC,eAAe;sDACpB,CAAC,CAAC,YAAY;qDACf,WAAW,CAAC,QAAQ;8CAC3B,CAAC,CAAC,IAAI;oDACA,CAAC,CAAC,UAAU;iDACf,CAAC,CAAC,OAAO;qDACL,CAAC,CAAC,WAAW;0DACR,CAAC,CAAC,gBAAgB;wDACpB,CAAC,CAAC,cAAc;kDACtB,CAAC,CAAC,QAAQ;8DACE,CAAC,CAAC,kBAAkB;gEAClB,CAAC,CAAC,oBAAoB;qDACjC,CAAC,CAAmB,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,aAAgC,CAAC;;;;;;0BAMjH,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;qDAIA,IAAI;0DACC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK;oDACjD,IAAI,CAAC,KAAK;wDACN,CAAC,CAAC,QAAQ;qDACb,GAAG,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC;;qDAE3B,IAAI;0DACC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK;oDAClD,IAAI,CAAC,KAAK;wDACN,CAAC,CAAC,QAAQ;qDACb,GAAG,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;;yBAExD,CAAC;;;;;;gEAMsC,CAAC,CAAC,SAAS;gEACX,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC;kEAC3B,CAAC,CAAC,OAAO;qEACN,CAAC,CAAC,UAAU;;4EAEL,CAAC,CAAyB,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;;;gEAG7D,CAAC,CAAC,WAAW;gEACb,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC;kEACtB,CAAC,CAAC,OAAO;qEACN,CAAC,CAAC,UAAU;;4EAEL,CAAC,CAAyB,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;;;;;;;KAO1H,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeBoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,mCAAmC,IAAI,SAAS,CAwO/D"}
+{"version":3,"file":"DateTimeBoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,mCAAmC,IAAI,SAAS,CA2Q/D"}

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.js

@@ -212,6 +212,41 @@ export function dateTimeBoxElementCosmopolitanStyle() {
   z-index: 100;
 }
 
+:host [part="datetime-content"] {
+  flex-direction: row;
+  align-items: stretch;
+  display: flex;
+}
+
+:host [part="time-divider"] {
+  background-color: var(--datetimebox-border-color);
+  flex-shrink: 0;
+  width: 1px;
+}
+
+:host [part="time-picker"] {
+  flex-direction: column;
+  min-width: 120px;
+  padding: 8px 0;
+  display: flex;
+}
+
+:host [part="ampm-toggle"] {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 8px;
+  display: flex;
+}
+
+:host [part="time-columns"] {
+  flex-direction: row;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
 :host([has-label]) [part="inner"] [part="input"] {
   padding-top: 12px;
 }

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeBoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsOT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DateTimeBoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyQT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAoZtD"}
+{"version":3,"file":"DateTimeBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAubtD"}

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.js

@@ -209,6 +209,41 @@ export function dateTimeBoxElementJoyStyle() {
   z-index: 100;
 }
 
+:host [part="datetime-content"] {
+  flex-direction: row;
+  align-items: stretch;
+  display: flex;
+}
+
+:host [part="time-divider"] {
+  background-color: var(--datetimebox-border-color);
+  flex-shrink: 0;
+  width: 1px;
+}
+
+:host [part="time-picker"] {
+  flex-direction: column;
+  min-width: 120px;
+  padding: 8px 0;
+  display: flex;
+}
+
+:host [part="ampm-toggle"] {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 8px;
+  display: flex;
+}
+
+:host [part="time-columns"] {
+  flex-direction: row;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
 :host([has-label]) [part="inner"] [part="input"] {
   padding-top: 12px;
 }

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkZT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DateTimeBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqbT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeBoxElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,SAAS,CAwO1D"}
+{"version":3,"file":"DateTimeBoxElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,SAAS,CA2Q1D"}

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.js

@@ -212,6 +212,41 @@ export function dateTimeBoxElementMemphisStyle() {
   z-index: 100;
 }
 
+:host [part="datetime-content"] {
+  flex-direction: row;
+  align-items: stretch;
+  display: flex;
+}
+
+:host [part="time-divider"] {
+  background-color: var(--datetimebox-border-color);
+  flex-shrink: 0;
+  width: 1px;
+}
+
+:host [part="time-picker"] {
+  flex-direction: column;
+  min-width: 120px;
+  padding: 8px 0;
+  display: flex;
+}
+
+:host [part="ampm-toggle"] {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 8px;
+  display: flex;
+}
+
+:host [part="time-columns"] {
+  flex-direction: row;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
 :host([has-label]) [part="inner"] [part="input"] {
   padding-top: 12px;
 }

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeBoxElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsOT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DateTimeBoxElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyQT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitchElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAsIvD"}
+{"version":3,"file":"ToggleSwitchElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAuIvD"}

package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.js

@@ -17,13 +17,14 @@ export function toggleSwitchElementJoyStyle() {
   --toggle-switch-border-radius: var(--joy-layout-radius);
   --toggle-switch-border-style: solid;
   --toggle-switch-border-width: var(--joy-layout-thickness);
-  --toggle-switch-font-family: unset;
-  --toggle-switch-font-letter-spacing: unset;
-  --toggle-switch-font-line-height: unset;
-  --toggle-switch-font-size: unset;
-  --toggle-switch-font-text-decoration: unset;
-  --toggle-switch-font-text-transform: unset;
-  --toggle-switch-font-weight: unset;
+  --toggle-switch-font-family: var(--joy-font-family);
+  --toggle-switch-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
+  --toggle-switch-font-line-height: var(--joy-typography-body1-line-height);
+  --toggle-switch-font-size: var(--joy-typography-body1-font-size);
+  --toggle-switch-font-text-decoration: var(--joy-typography-body1-text-decoration);
+  --toggle-switch-font-text-transform: var(--joy-typography-body1-text-transform);
+  --toggle-switch-font-weight: var(--joy-typography-body1-font-weight);
+  --toggle-switch-foreground-color: var(--joy-scheme-foreground);
   --toggle-switch-gap: var(--joy-layout-space);
   --toggle-switch-padding-bottom: unset;
   --toggle-switch-padding-left: unset;

package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitchElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoIT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ToggleSwitchElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqIT,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts

@@ -1,5 +1,6 @@
 import { IAnimatable } from '../../../Behaviors/Animatable';
 import { ISlottable } from '../../../Behaviors/Slottable';
+import type { StyleInfo } from '../../../Directives/Directives';
 import { DrawerMode } from '../../../Types/DrawerMode';
 import { DrawerPosition } from '../../../Types/DrawerPosition';
 import { OverlayElement } from '../Abstracts/OverlayElement';
@@ -35,6 +36,7 @@ declare const DrawerElement_base: (abstract new (...args: Array<any>) => import(
  * @cssprop {String} --drawer-border-style - The border style CSS custom property.
  * @cssprop {String} --drawer-border-width - The border width CSS custom property.
  * @cssprop {String} --drawer-divider-height - The divider height CSS custom property.
+ * @cssprop {String} --drawer-viewport-inset - The inset between the drawer panel and the viewport edge.
  * @cssprop {String} --drawer-font-family - The font family CSS custom property.
  * @cssprop {String} --drawer-font-letter-spacing - The font letter spacing CSS custom property.
  * @cssprop {String} --drawer-font-line-height - The font line height CSS custom property.
@@ -93,6 +95,12 @@ declare const DrawerElement_base: (abstract new (...args: Array<any>) => import(
  * @public
  */
 export declare class DrawerElement extends DrawerElement_base implements IDrawerElementProps, ISlottable, IAnimatable {
+    private static readonly VIEWPORT_HEIGHT;
+    private static readonly VIEWPORT_WIDTH;
+    private static readonly FULL_SIZE;
+    private static readonly NO_VIEWPORT_INSET;
+    private static readonly VIEWPORT_INSET_PROPERTY;
+    private static readonly VIEWPORT_INSET;
     private readonly _provider;
     private _isComposed;
     private _header;
@@ -180,6 +188,30 @@ export declare class DrawerElement extends DrawerElement_base implements IDrawer
      * @readonly
      */
     get animationTarget(): HTMLElement;
+    /**
+     * Gets whether the drawer should render its default header content.
+     *
+     * @private
+     * @hidden
+     * @readonly
+     */
+    get hasDrawerHeaderContent(): boolean;
+    /**
+     * Gets whether the drawer currently has a viewport inset.
+     *
+     * @private
+     * @hidden
+     * @readonly
+     */
+    get hasInset(): boolean;
+    /**
+     * Gets the inline styles for the drawer root element.
+     *
+     * @private
+     * @hidden
+     * @readonly
+     */
+    get drawerRootStyles(): StyleInfo;
     /**
      * Opens the drawer.
      *
@@ -219,6 +251,54 @@ export declare class DrawerElement extends DrawerElement_base implements IDrawer
      * @override
      */
     protected onApplyTemplate(): void;
+    /**
+     * Creates the root styles for left and right drawers.
+     *
+     * @private
+     */
+    private createVerticalDrawerRootStyles;
+    /**
+     * Creates the root styles for top and bottom drawers.
+     *
+     * @private
+     */
+    private createHorizontalDrawerRootStyles;
+    /**
+     * Gets the active drawer viewport inset.
+     *
+     * @private
+     */
+    private getDrawerViewportInset;
+    /**
+     * Gets the computed drawer viewport inset custom property value.
+     *
+     * @private
+     */
+    private getComputedViewportInset;
+    /**
+     * Gets whether a viewport inset value represents an active inset.
+     *
+     * @private
+     */
+    private isActiveViewportInset;
+    /**
+     * Gets the drawer width style value.
+     *
+     * @private
+     */
+    private getDrawerWidth;
+    /**
+     * Gets the drawer height style value.
+     *
+     * @private
+     */
+    private getDrawerHeight;
+    /**
+     * Creates a size reduced by the drawer viewport inset on both sides.
+     *
+     * @private
+     */
+    private createInsetSize;
 }
 /**
 * @public

package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAc,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAGxE,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAOrE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAO/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAS7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAOjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,qBAoBa,aACT,SAAQ,kBACR,YAAW,mBAAmB,EAAE,UAAU,EAAE,WAAW;IAIvD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAOvB;IACH,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,aAAa,CAAU;IAM/B;;OAEG;;IA8BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAKjC;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,cAAc,CAEpC;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,cAAc,EAKxC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,UAAU,CAE5B;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,UAAU,EAKhC;IAED;;;;;;OAMG;IACH,IAIW,UAAU,IAAI,OAAO,CAE/B;IAED,OAAO,KAAK,UAAU,QAKrB;IAED;;;;;OAKG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAED;;;;;;;OAOG;IACH,IAAoB,eAAe,IAAI,WAAW,CAEjD;IAMD;;;;;OAKG;IACmB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAM3C;;;;;OAKG;IACmB,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC;IAI/C;;;;OAIG;IACU,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQpC;;;;OAIG;IACI,gBAAgB,IAAI,MAAM;IAIjC;;;;;;OAMG;IACI,UAAU,IAAI,IAAI;IAMzB;;;OAGG;cACgB,eAAe,IAAI,IAAI;CAU7C;AAED;;EAEE;AACF,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}
+{"version":3,"file":"DrawerElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerElement.ts"],"names":[],"mappings":"AAMA,OAAO,EAAc,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAGxE,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAOrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAO/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAS7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAOjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,qBAoBa,aACT,SAAQ,kBACR,YAAW,mBAAmB,EAAE,UAAU,EAAE,WAAW;IAIvD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAmB;IAC1D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAmB;IACzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAkB;IACnD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAiB;IAC1D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,uBAAuB,CAAqC;IACpF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAgE;IACtG,OAAO,CAAC,QAAQ,CAAC,SAAS,CAOvB;IACH,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,aAAa,CAAU;IAM/B;;OAEG;;IA8BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAKjC;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,cAAc,CAEpC;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,cAAc,EAKxC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,UAAU,CAE5B;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,UAAU,EAKhC;IAED;;;;;;OAMG;IACH,IAIW,UAAU,IAAI,OAAO,CAE/B;IAED,OAAO,KAAK,UAAU,QAKrB;IAED;;;;;OAKG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAED;;;;;;;OAOG;IACH,IAAoB,eAAe,IAAI,WAAW,CAEjD;IAED;;;;;;OAMG;IACH,IAAW,sBAAsB,IAAI,OAAO,CAE3C;IAED;;;;;;OAMG;IACH,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED;;;;;;OAMG;IACH,IAAW,gBAAgB,IAAI,SAAS,CAWvC;IAMD;;;;;OAKG;IACmB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAM3C;;;;;OAKG;IACmB,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC;IAI/C;;;;OAIG;IACU,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQpC;;;;OAIG;IACI,gBAAgB,IAAI,MAAM;IAIjC;;;;;;OAMG;IACI,UAAU,IAAI,IAAI;IAMzB;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAQ1C;;;;OAIG;IACH,OAAO,CAAC,8BAA8B;IAetC;;;;OAIG;IACH,OAAO,CAAC,gCAAgC;IAgBxC;;;;OAIG;IACH,OAAO,CAAC,sBAAsB;IAI9B;;;;OAIG;IACH,OAAO,CAAC,wBAAwB;IAIhC;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAsB7B;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAItB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAIvB;;;;OAIG;IACH,OAAO,CAAC,eAAe;CAM1B;AAED;;EAEE;AACF,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}