@ostack.tech/ui 0.6.0 → 0.6.2

package/dist/types/components/Field/FieldContext.d.ts

@@ -51,6 +51,8 @@ export declare function useFieldControlTagName(): string | undefined;
 export declare function useFieldControlFocused(): boolean | undefined;
 /** Hook exposing whether the field's control is required. */
 export declare function useFieldControlRequired(): boolean | undefined;
+/** Hook exposing the `children` of the field's label. */
+export declare function useFieldLabel(): ReactNode;
 /** Hook exposing the field label's id. */
 export declare function useFieldLabelId(): string | undefined;
 /** Hook exposing the field's description ids. */

package/dist/types/components/Field/index.d.ts

@@ -1,2 +1,2 @@
 export * from './Field.tsx';
-export { type FieldActions, useFieldControlFocused, useFieldControlId, useFieldControlRequired, useFieldControlTagName, useFieldDescriptionIds, useFieldErrorMessageIds, useFieldLabelId, useOnFieldLabelChange, useSetFieldControl, useSetFieldControlFocused, useSetFieldFeedback, useSetFieldHelperText, useSetFieldLabel, } from './FieldContext.ts';
+export { type FieldActions, useFieldControlFocused, useFieldControlId, useFieldControlRequired, useFieldControlTagName, useFieldDescriptionIds, useFieldErrorMessageIds, useFieldLabel, useFieldLabelId, useOnFieldLabelChange, useSetFieldControl, useSetFieldControlFocused, useSetFieldFeedback, useSetFieldHelperText, useSetFieldLabel, } from './FieldContext.ts';

package/dist/types/components/Table/Table.d.ts

@@ -1,13 +1,53 @@
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
 import { ControlStatus } from '../../utils/control.ts';
 /** Default column width in `"fixed"` mode. */
 export declare const DEFAULT_TABLE_COLUMN_WIDTH = 150;
+/** Possible table caption sides. */
+export type TableCaptionSide = "top" | "bottom";
 /** Table variant. */
 export type TableVariant = "default" | "control";
 /** Possible table layouts. */
 export type TableLayout = "auto" | "fixed";
 /** Properties of the table component. */
 export interface TableProps extends ComponentPropsWithoutRef<"table"> {
+    /**
+     * Caption of the table. This caption is displayed outside the table, above or
+     * below it (depending on the value of `captionSide`), in a `<div>` element.
+     *
+     * This value is also used as the default value of the `visuallyHiddenCaption`
+     * property, which renders a visually hidden `<caption>` element within the
+     * table for accessibility purposes.
+     *
+     * It is not necessary to specify this property (or `visuallyHiddenCaption`)
+     * when rendering the `Table` within a `Field` component containing a `Label`,
+     * as the `visuallyHiddenCaption` property is automatically set with the value
+     * of the `Label`'s `children`.
+     *
+     * **NOTE**: The visible caption is rendered as a `<div>` because of the
+     * difficulty in styling a `<caption>` element.
+     */
+    caption?: ReactNode;
+    /**
+     * Side in which to place the caption, when the `caption` property is
+     * provided.
+     *
+     * @default "bottom"
+     */
+    captionSide?: TableCaptionSide;
+    /**
+     * Content of the visually hidden `<caption>` element.
+     *
+     * By default, this is set to the value of the `caption` property when
+     * provided. If a `caption` is not provided and the `Table` is rendered within
+     * a `Field` component containing a `Label`, the value of the `Label`'s
+     * `children` is used instead.
+     *
+     * Prefer using either the `caption` property or wrapping the table in a
+     * labelled field. Manually set this property either to specify an accessible
+     * caption that differs from the visible one, or when wanting to provide an
+     * accessible caption without displaying the default caption or a `Label`.
+     */
+    visuallyHiddenCaption?: ReactNode;
     /**
      * Marks the table as being meant for editable content (cells containing form
      * controls).
@@ -52,6 +92,12 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
     maxHeight?: CSSProperties["maxHeight"];
     /** Properties to pass to the container element. */
     containerProps?: ComponentPropsWithRef<"div">;
+    /** Properties to pass to the scrollable element. */
+    scrollableProps?: ComponentPropsWithRef<"div">;
+    /** Properties to pass to the visual `<div>` caption element. */
+    captionProps?: ComponentPropsWithRef<"div">;
+    /** Properties to pass to the visually hidden `<caption>` element. */
+    visuallyHiddenCaptionProps?: ComponentPropsWithRef<"caption">;
 }
 /**
  * Use the table component to display structured data in a tabular format.
@@ -91,9 +137,9 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
  *   TableRow,
  * } from "@ostack.tech/ui";
  *
- * function PriceTable() {
+ * function PriceList() {
  *   return (
- *     <Table>
+ *     <Table caption="Price list">
  *       <TableHead>
  *         <TableColumn label="Item" />
  *         <TableColumn label="Price" />

package/dist/types/components/Table/TableContext.d.ts

@@ -7,6 +7,8 @@ export interface TableContextValue {
     status?: ControlStatus;
     layout: TableLayout;
     defaultColumnWidth: number;
+    onTableMinWidthChange: (minWidth: string | undefined) => void;
+    onTableMaxWidthChange: (maxWidth: string | undefined) => void;
     store: TableStore;
 }
 /** State of the table. */
@@ -14,12 +16,6 @@ export interface TableState {
     scrollPosition?: ScrollPosition;
     numberOfColumns?: number;
     columnWidths?: (string | undefined)[];
-    actions: TableActions;
-}
-/** Actions of the table. */
-export interface TableActions {
-    setTableMinWidth: (minWidth: string | undefined) => void;
-    setTableMaxWidth: (maxWidth: string | undefined) => void;
 }
 /** Table store. */
 export type TableStore = ReturnType<typeof useCreateTableContext>["store"];
@@ -31,6 +27,8 @@ export declare function useCreateTableContext(editable: boolean, status: Control
     status: ControlStatus | undefined;
     layout: TableLayout;
     defaultColumnWidth: number;
+    onTableMinWidthChange: (minWidth: string | undefined) => void;
+    onTableMaxWidthChange: (maxWidth: string | undefined) => void;
     store: Omit<import('zustand').StoreApi<TableState>, "subscribe"> & {
         subscribe: {
             (listener: (selectedState: TableState, previousSelectedState: TableState) => void): () => void;

package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts

@@ -23,7 +23,7 @@ export interface LocalizationObject {
     dateFnsLocale: DateFnsLocale;
     AlertDialog: Pick<ConfirmDialogOptions, "okText">;
     Calendar: Pick<CalendarProps, "previousMonthLabel" | "nextMonthLabel">;
-    CloseButton: Pick<CloseButtonProps, "aria-label">;
+    CloseButton: Pick<CloseButtonProps, "label">;
     CommandMenu: Pick<CommandMenuProps, "label" | "searchPlaceholder" | "listLabel" | "loadingLabel" | "emptyMessage">;
     CommandMenuDialog: Pick<CommandMenuDialogProps, "title" | "description">;
     ConfirmDialog: Pick<ConfirmDialogOptions, "okText" | "cancelText">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -44,12 +44,12 @@
     "copy:scss": "cpy 'src/**/*.scss' '!src/**/*.stories.scss' scss/"
   },
   "dependencies": {
-    "@fortawesome/react-fontawesome": "^3.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "@tanstack/react-virtual": "^3.13.12",
     "cmdk": "^1.1.1",
     "from-exponential": "^1.1.1",
     "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.11.2",
+    "react-day-picker": "^9.11.3",
     "react-error-boundary": "^6.0.0",
     "react-number-format": "^5.4.4",
     "react-to-print": "^3.2.0",

package/scss/components/CloseButton/_CloseButton-variables.scss

@@ -1,2 +1,36 @@
-$close-button-size: 1.75em !default;
+@use "../IconButton/IconButton-variables" as *;
+@use "../../scss/base-variables" as *;
+
 $close-button-opacity: 0.8 !default;
+
+// Small size
+$close-button-sm-min-size: 18px !default;
+$close-button-sm-font-size: var(--#{$prefix}font-size-2xs) !default;
+
+// Medium size
+$close-button-md-min-size: 24px !default;
+$close-button-md-font-size: var(--#{$prefix}font-size-sm) !default;
+
+// Large size
+$close-button-lg-min-size: 32px !default;
+$close-button-lg-font-size: var(--#{$prefix}font-size-lg) !default;
+
+// Extra large size
+$close-button-xl-min-size: 40px !default;
+$close-button-xl-font-size: var(--#{$prefix}font-size-2xl) !default;
+
+// Sizes
+$close-button-sizes: $icon-button-sizes !default;
+
+$close-button-min-size-by-size: (
+  sm: $close-button-sm-min-size,
+  md: $close-button-md-min-size,
+  lg: $close-button-lg-min-size,
+  xl: $close-button-xl-min-size,
+) !default;
+$close-button-font-size-by-size: (
+  sm: $close-button-sm-font-size,
+  md: $close-button-md-font-size,
+  lg: $close-button-lg-font-size,
+  xl: $close-button-xl-font-size,
+) !default;

package/scss/components/CloseButton/_CloseButton.scss

@@ -1,9 +1,12 @@
+@use "sass:map";
 @use "CloseButton-variables" as *;
 @use "../../scss/base-variables" as *;
+@use "../../scss/utils/declare-var" as *;
 
 .#{$prefix}close-button {
-  min-height: $close-button-size !important;
-  min-width: $close-button-size !important;
+  min-height: var(--#{$prefix}close-button-min-size) !important;
+  min-width: var(--#{$prefix}close-button-min-size) !important;
+  font-size: var(--#{$prefix}close-button-font-size) !important;
 
   color: inherit !important;
   opacity: $close-button-opacity;
@@ -11,4 +14,18 @@
   &:hover:not(:disabled, [data-disabled]) {
     opacity: 1;
   }
+
+  // Sizes
+  @each $size in $close-button-sizes {
+    &.#{$prefix}icon-button--#{$size} {
+      @include declare-var(
+        --#{$prefix}close-button-min-size,
+        map.get($close-button-min-size-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}close-button-font-size,
+        map.get($close-button-font-size-by-size, $size)
+      );
+    }
+  }
 }

package/scss/components/DataTable/_DataTable.scss

@@ -1,3 +1,4 @@
+@use "../ControlCode/ControlCode-variables" as *;
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/breakpoints" as *;
 @use "../../scss/utils/spacing" as *;
@@ -5,6 +6,10 @@
 
 .#{$prefix}data-table {
   $data-table: &;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
 
   // Clearfix due to usage of floats for the default positioning
   &::after {
@@ -70,37 +75,43 @@
     }
   }
 
-  // Default positioning (when the components aren't wrapped within other
-  // elements)
-  & > &__content-container:not(:first-child) {
-    margin-top: spacing(2);
-  }
+  // Auto-layout of data table components (when they're direct children of the
+  // data table):
 
-  & > &__content-container:not(:last-child) {
-    margin-bottom: spacing(2);
+  // Add margins to elements
+  & > *:not(:last-child) {
+    margin-bottom: spacing(1);
   }
 
-  // The filter and the pagination float to the right by default
-  & > &__filter-root,
-  & > &__pagination,
-  & > &__selection-trigger {
-    float: right;
-    margin-bottom: spacing(2);
+  // Separate elements
+  & > *:not(&__content-container):not(:first-child) {
     margin-left: spacing(2);
   }
+  & > &__content-container + * {
+    margin-left: 0 !important;
+  }
 
-  & > &__filter-root + &__content-container,
-  & > &__pagination + &__content-container {
-    // Top table content margin unneeded when the filter/pagination are placed
-    // before it
-    margin-top: 0;
+  // The filter, pagination, and selection default to being on the right
+  & > :is(&__filter-root, &__pagination, &__selection-trigger):first-child,
+  &
+    > &__content-container
+    + :is(&__filter-root, &__pagination, &__selection-trigger) {
+    margin-left: auto;
   }
 
-  & > &__content-container ~ &__filter-root,
-  & > &__content-container ~ &__pagination {
-    // Bottom margin underneath the table content should be removed due to the
-    // clearfix
-    margin-bottom: 0;
+  & > :is(.#{$prefix}label__container, &__rows-per-page) {
+    flex: 1;
+  }
+
+  // Label styles
+  & > .#{$prefix}label__container:first-child {
+    align-self: flex-end;
+  }
+  & > &__content-container + .#{$prefix}label__container {
+    align-self: flex-start;
+  }
+  & > .#{$prefix}control-code + .#{$prefix}label__container {
+    margin-left: $control-code-label-margin-x;
   }
 
   // Selection column
@@ -120,20 +131,5 @@
     &__pagination-select-root {
       width: auto !important;
     }
-
-    & > &__content-container:not(:first-child),
-    & > &__content-container:not(:last-child) {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    & > &__filter-root,
-    & > &__content-container,
-    & > &__rows-per-page,
-    & > &__pagination {
-      &:not(:last-child) {
-        margin-bottom: spacing(2);
-      }
-    }
   }
 }

package/scss/components/Field/_Field.scss

@@ -7,19 +7,22 @@
   width: 100%;
   break-inside: avoid;
 
-  & > .#{$prefix}control-code,
-  & > .#{$prefix}label__container {
+  & > :is(.#{$prefix}control-code, .#{$prefix}label__container) {
     margin-bottom: spacing(1);
   }
 
-  .#{$prefix}helper-text,
-  .#{$prefix}feedback-list:not(:empty),
-  .#{$prefix}feedback {
+  :is(
+    .#{$prefix}helper-text,
+    .#{$prefix}feedback-list:not(:empty),
+    .#{$prefix}feedback
+  ) {
     margin-top: spacing(1);
 
-    ~ .#{$prefix}helper-text,
-    ~ .#{$prefix}feedback-list:not(:empty),
-    ~ .#{$prefix}feedback {
+    ~ :is(
+      .#{$prefix}helper-text,
+      .#{$prefix}feedback-list:not(:empty),
+      .#{$prefix}feedback
+    ) {
       margin-top: spacing(0.5);
     }
   }

package/scss/components/Table/_Table-variables.scss

@@ -6,6 +6,16 @@
 $table-font-size: var(--#{$prefix}font-size-sm) !default;
 $table-line-height: var(--#{$prefix}line-height-sm) !default;
 
+// Container
+$table-container-align-items: center !default;
+
+// Caption
+$table-caption-margin-y: spacing(1) !default;
+$table-caption-font-size: $label-font-size !default;
+$table-caption-line-height: $label-line-height !default;
+$table-caption-font-weight: $label-font-weight !default;
+$table-caption-color: $label-color !default;
+
 // Default variant
 $table-default-border-radius: null !default;
 $table-default-border-width: 0 0 1px !default;

package/scss/components/Table/_Table.scss

@@ -18,8 +18,28 @@
     table-layout: fixed;
   }
 
-  // Scrollable container
   &__container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: $table-container-align-items;
+  }
+
+  &__caption {
+    font-size: $table-caption-font-size;
+    line-height: $table-caption-line-height;
+    font-weight: $table-caption-font-weight;
+    color: $table-caption-color;
+
+    &--top {
+      margin-bottom: $table-caption-margin-y;
+    }
+    &--bottom {
+      margin-top: $table-caption-margin-y;
+    }
+  }
+
+  &__scrollable {
     display: flex;
     position: relative;
     width: 100%;

package/scss/components/Tag/_Tag-variables.scss

@@ -34,4 +34,7 @@ $tag-close-button-size: 1.5em !default;
 $tag-close-button-margin-y: calc($tag-padding-y * -2) !default;
 $tag-close-button-margin-left: calc($tag-padding-x * 0.5) !default;
 $tag-close-button-margin-right: calc($tag-padding-x * -0.5) !default;
-$tag-close-button-font-size: min(1em, var(--#{$prefix}font-size-md)) !default;
+$tag-close-button-font-size: min(
+  0.85em,
+  var(--#{$prefix}font-size-md)
+) !default;

package/scss/components/Tag/_Tag.scss

@@ -4,6 +4,7 @@
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/animation" as *;
 @use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/maybe-important" as *;
 @use "../../scss/utils/spacing" as *;
 @use "../../scss/utils/transition" as *;
 
@@ -77,10 +78,10 @@
 
   // Close button
   &__close-button {
-    min-width: $tag-close-button-size !important;
-    min-height: $tag-close-button-size !important;
+    min-width: maybe-important($tag-close-button-size);
+    min-height: maybe-important($tag-close-button-size);
     margin: $tag-close-button-margin-y $tag-close-button-margin-right
       $tag-close-button-margin-y $tag-close-button-margin-left;
-    font-size: $tag-close-button-font-size;
+    font-size: maybe-important($tag-close-button-font-size);
   }
 }

package/dist/chunks/en-lyNzumTm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"en-lyNzumTm.js","sources":["../../src/locales/en.tsx"],"sourcesContent":["import type { LocalizationObject } from \"../providers/LocalizationProvider\";\n\n/** `en` locale (partial). */\nexport const en: Omit<LocalizationObject, \"languageTag\" | \"dateFnsLocale\"> = {\n  AlertDialog: {\n    okText: \"OK\",\n  },\n  Calendar: {\n    previousMonthLabel: \"Previous month\",\n    nextMonthLabel: \"Next month\",\n  },\n  CloseButton: {\n    \"aria-label\": \"Close\",\n  },\n  CommandMenu: {\n    searchPlaceholder: \"Search…\",\n    listLabel: \"Suggestions\",\n    loadingLabel: \"Loading…\",\n    emptyMessage: \"No results found.\",\n  },\n  CommandMenuDialog: {\n    title: \"Command palette\",\n    description: \"Search for a command…\",\n  },\n  ConfirmDialog: {\n    cancelText: \"Cancel\",\n  },\n  ControlCode: {\n    visuallyHiddenPrefix: \"Field\",\n  },\n  DataTable: {\n    emptyMessage: \"Nothing to show.\",\n  },\n  DataTableFilter: {\n    \"aria-label\": \"Table filter\",\n    placeholder: \"Filter\",\n  },\n  DataTablePagination: {\n    rowsRange: (range, total) => (\n      <>\n        Rows&nbsp;{range}&nbsp;of {total}\n      </>\n    ),\n    previousPageButtonLabel: \"Previous page\",\n    nextPageButtonLabel: \"Next page\",\n  },\n  DataTableRowsPerPage: {\n    label: \"Rows per page\",\n  },\n  DateInput: {\n    calendarButtonLabel: (selectedDate, editable) =>\n      editable\n        ? selectedDate\n          ? `Open calendar to change selected date: ${selectedDate}`\n          : \"Open calendar to select date\"\n        : selectedDate\n          ? `Open calendar with selected date: ${selectedDate}`\n          : \"Open calendar with no selected date\",\n  },\n  DateRangeInput: {\n    startInputLabel: \"Start date\",\n    endInputLabel: \"End date\",\n    calendarButtonLabel: (selectedDateRange, editable) =>\n      editable\n        ? selectedDateRange\n          ? `Open calendar to change selected date-range: ${selectedDateRange}`\n          : \"Open calendar to select date-range\"\n        : selectedDateRange\n          ? `Open calendar with selected date-range: ${selectedDateRange}`\n          : \"Open calendar with no selected date-range\",\n  },\n  ErrorBoundary: {\n    fallbackMessage: (\n      <>\n        Something went wrong.\n        <br />\n        Press the button on the right to try again. If the problem persists,\n        please try again later.\n      </>\n    ),\n    resetButtonLabel: \"Retry\",\n  },\n  Feedback: {\n    visuallyHiddenPrefix: (type) =>\n      type === \"error\" ? \"Error:\" : type === \"warning\" ? \"Warning:\" : null,\n  },\n  FeedbackPopover: {\n    label: \"Show feedback\",\n  },\n  FieldGroupHeader: {\n    visuallyHiddenCodePrefix: \"Group\",\n  },\n  Input: {\n    clearButtonLabel: \"Clear\",\n  },\n  Label: {\n    requiredIconLabel: \"Required\",\n    helperButtonLabel: \"Show help\",\n  },\n  NumericInput: {\n    decimalSeparator: \".\",\n    groupingStyle: \"thousand\",\n    groupSeparator: \",\",\n  },\n  Select: {\n    optionsLabel: \"Options\",\n  },\n  TableColumn: {\n    helperButtonLabel: \"Show help\",\n  },\n  TableHead: {\n    sortByColumnDescription: (columnName, sortDirection) =>\n      sortDirection === null\n        ? `Stop sorting table by column “${columnName}”`\n        : `Sort table by column “${columnName}” in ${\n            sortDirection === \"asc\" ? \"ascending\" : \"descending\"\n          } order`,\n  },\n  ToastProvider: {\n    label: \"Notification\",\n  },\n  ToastViewport: {\n    label: \"Notifications ({hotkey})\",\n  },\n};\n"],"names":[],"mappings":";AAGO,MAAM,KAAgE;AAAA,EAC3E,aAAa;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAAA;AAAA,EAElB,aAAa;AAAA,IACX,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,cAAc;AAAA,EAAA;AAAA,EAEhB,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf,eAAe;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,aAAa;AAAA,IACX,sBAAsB;AAAA,EAAA;AAAA,EAExB,WAAW;AAAA,IACT,cAAc;AAAA,EAAA;AAAA,EAEhB,iBAAiB;AAAA,IACf,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAAA,EAEf,qBAAqB;AAAA,IACnB,WAAW,CAAC,OAAO,UACjB,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACW;AAAA,MAAM;AAAA,MAAU;AAAA,IAAA,GAC7B;AAAA,IAEF,yBAAyB;AAAA,IACzB,qBAAqB;AAAA,EAAA;AAAA,EAEvB,sBAAsB;AAAA,IACpB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB,CAAC,cAAc,aAClC,WACI,eACE,0CAA0C,YAAY,KACtD,iCACF,eACE,qCAAqC,YAAY,KACjD;AAAA,EAAA;AAAA,EAEV,gBAAgB;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,qBAAqB,CAAC,mBAAmB,aACvC,WACI,oBACE,gDAAgD,iBAAiB,KACjE,uCACF,oBACE,2CAA2C,iBAAiB,KAC5D;AAAA,EAAA;AAAA,EAEV,eAAe;AAAA,IACb,iBACE,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,MAAE;AAAA,IAAA,GAGR;AAAA,IAEF,kBAAkB;AAAA,EAAA;AAAA,EAEpB,UAAU;AAAA,IACR,sBAAsB,CAAC,SACrB,SAAS,UAAU,WAAW,SAAS,YAAY,aAAa;AAAA,EAAA;AAAA,EAEpE,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAAA,EAET,kBAAkB;AAAA,IAChB,0BAA0B;AAAA,EAAA;AAAA,EAE5B,OAAO;AAAA,IACL,kBAAkB;AAAA,EAAA;AAAA,EAEpB,OAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,EAAA;AAAA,EAErB,cAAc;AAAA,IACZ,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAAA,EAElB,QAAQ;AAAA,IACN,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,EAAA;AAAA,EAErB,WAAW;AAAA,IACT,yBAAyB,CAAC,YAAY,kBACpC,kBAAkB,OACd,iCAAiC,UAAU,MAC3C,yBAAyB,UAAU,QACjC,kBAAkB,QAAQ,cAAc,YAC1C;AAAA,EAAA;AAAA,EAER,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAET,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAEX;"}