@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.6

package/ui/components/organisms/vc-table/vc-data-table.stories.ts

@@ -495,6 +495,38 @@ export const SingleSelection: StoryFn = () => ({
   `,
 });
 
+export const ActiveItemHighlight: StoryFn = () => ({
+  components: { VcDataTable, VcColumn },
+  setup() {
+    const activeId = ref<string | undefined>(undefined);
+
+    return { products: mockProducts, activeId };
+  },
+  template: `
+    <div style="height: 400px">
+      <p class="tw-mb-2">Active row ID: {{ activeId ?? 'None' }}
+        <button class="tw-ml-2 tw-text-sm tw-underline" @click="activeId = undefined">Clear</button>
+      </p>
+      <VcDataTable
+        :items="products"
+        v-model:active-item-id="activeId"
+      >
+        <VcColumn id="name" field="name" title="Name" />
+        <VcColumn id="price" field="price" title="Price" type="money" />
+        <VcColumn id="stock" field="stock" title="Stock" type="number" />
+        <VcColumn id="status" field="status" title="Status" />
+      </VcDataTable>
+    </div>
+  `,
+});
+ActiveItemHighlight.parameters = {
+  docs: {
+    description: {
+      story: "Click a row to highlight it as active. Click again to deselect. Use `v-model:active-item-id` for two-way binding — the table automatically highlights the row matching the given ID and updates the value on row click.",
+    },
+  },
+};
+
 /**
  * VcDataTable with single selection via VcColumn (radio button style)
  */
@@ -4971,3 +5003,176 @@ SearchWithGlobalFilters.parameters = {
     },
   },
 };
+
+/**
+ * Empty state using the declarative `emptyState` prop (TableStateConfig).
+ * Shown when `items` is empty and there is no active search or filters.
+ */
+export const EmptyStateConfig: StoryFn = () => ({
+  components: { VcDataTable, VcColumn },
+  setup() {
+    const actionClicked = ref(false);
+    const emptyState = {
+      icon: "fas fa-box-open",
+      title: "No products yet",
+      description: "Your product catalog is empty. Add your first product to get started.",
+      actionLabel: "Add Product",
+      actionHandler: () => {
+        actionClicked.value = true;
+      },
+    };
+    return { products: [] as Product[], emptyState, actionClicked };
+  },
+  template: `
+    <div style="height: 400px">
+      <div v-if="actionClicked" class="tw-mb-2 tw-p-2 tw-bg-success-50 tw-rounded tw-text-sm tw-text-success-700">
+        Action button clicked!
+      </div>
+      <VcDataTable :items="products" :empty-state="emptyState">
+        <VcColumn id="name" field="name" title="Name" />
+        <VcColumn id="price" field="price" title="Price" type="money" />
+        <VcColumn id="stock" field="stock" title="Stock" type="number" />
+        <VcColumn id="status" field="status" title="Status" />
+      </VcDataTable>
+    </div>
+  `,
+});
+EmptyStateConfig.parameters = {
+  docs: {
+    description: {
+      story:
+        "Demonstrates the declarative `emptyState` prop (`TableStateConfig`) — " +
+        "icon, title, description, and an optional action button. " +
+        "Shown when `items` is an empty array and no search/filter is active.",
+    },
+  },
+};
+
+/**
+ * Not Found state using the declarative `notFoundState` prop (TableStateConfig).
+ * Shown when `items` is empty AND there is an active search or filter.
+ * The table uses `searchable` with a pre-filled search value to trigger the not-found state.
+ */
+export const NotFoundStateConfig: StoryFn = () => ({
+  components: { VcDataTable, VcColumn },
+  setup() {
+    const searchValue = ref("nonexistent product xyz");
+    const actionClicked = ref(false);
+
+    const notFoundState = {
+      icon: "fas fa-search",
+      title: "No results found",
+      description: "We couldn't find any products matching your search. Try adjusting your query.",
+      actionLabel: "Clear Search",
+      actionHandler: () => {
+        searchValue.value = "";
+        actionClicked.value = true;
+      },
+    };
+
+    const emptyState = {
+      icon: "fas fa-box-open",
+      title: "No products yet",
+      description: "Your product catalog is empty.",
+    };
+
+    return { products: [] as Product[], searchValue, notFoundState, emptyState, actionClicked };
+  },
+  template: `
+    <div style="height: 400px">
+      <div v-if="actionClicked" class="tw-mb-2 tw-p-2 tw-bg-success-50 tw-rounded tw-text-sm tw-text-success-700">
+        Search cleared! (In a real app, items would reload and show the empty state instead.)
+      </div>
+      <VcDataTable
+        :items="products"
+        searchable
+        v-model:search-value="searchValue"
+        search-placeholder="Search products..."
+        :not-found-state="notFoundState"
+        :empty-state="emptyState"
+      >
+        <VcColumn id="name" field="name" title="Name" />
+        <VcColumn id="price" field="price" title="Price" type="money" />
+        <VcColumn id="stock" field="stock" title="Stock" type="number" />
+        <VcColumn id="status" field="status" title="Status" />
+      </VcDataTable>
+    </div>
+  `,
+});
+NotFoundStateConfig.parameters = {
+  docs: {
+    description: {
+      story:
+        "Demonstrates the `notFoundState` prop — shown instead of `emptyState` when items " +
+        "is empty AND there is an active search query or filters. " +
+        "The action button clears the search. Both `emptyState` and `notFoundState` " +
+        "can be provided simultaneously — the table picks the right one based on context.",
+    },
+  },
+};
+
+/**
+ * Both empty and not-found states — interactive demo.
+ * Search to switch between the two states.
+ */
+export const EmptyVsNotFound: StoryFn = () => ({
+  components: { VcDataTable, VcColumn },
+  setup() {
+    const searchValue = ref("");
+
+    const emptyState = {
+      icon: "fas fa-box-open",
+      title: "No products yet",
+      description: "Your catalog is empty. Add your first product to get started.",
+      actionLabel: "Add Product",
+      actionHandler: () => alert("Add product clicked!"),
+    };
+
+    const notFoundState = {
+      icon: "fas fa-search",
+      title: "Nothing matches your search",
+      description: "Try a different search term or clear the search field.",
+      actionLabel: "Clear Search",
+      actionHandler: () => {
+        searchValue.value = "";
+      },
+    };
+
+    return { products: [] as Product[], searchValue, emptyState, notFoundState };
+  },
+  template: `
+    <div style="height: 450px">
+      <div class="tw-mb-4 tw-p-3 tw-bg-gradient-to-r tw-from-accent-50 tw-to-primary-50 tw-rounded-lg tw-text-sm">
+        <p class="tw-font-semibold tw-mb-1">Empty vs Not Found</p>
+        <p class="tw-text-neutrals-600">
+          Type anything in the search bar to switch from <strong>empty state</strong> to <strong>not found state</strong>.
+          Clear the search to go back to empty state.
+        </p>
+      </div>
+      <VcDataTable
+        :items="products"
+        searchable
+        v-model:search-value="searchValue"
+        search-placeholder="Type to trigger not-found state..."
+        :empty-state="emptyState"
+        :not-found-state="notFoundState"
+      >
+        <VcColumn id="name" field="name" title="Name" />
+        <VcColumn id="price" field="price" title="Price" type="money" />
+        <VcColumn id="stock" field="stock" title="Stock" type="number" />
+        <VcColumn id="status" field="status" title="Status" />
+      </VcDataTable>
+    </div>
+  `,
+});
+EmptyVsNotFound.parameters = {
+  docs: {
+    description: {
+      story:
+        "Interactive demo showing the difference between empty and not-found states. " +
+        "With an empty search field the table shows the `emptyState` config. " +
+        "Type anything in the search bar to see the `notFoundState` config instead. " +
+        "The table automatically switches between the two based on whether a search/filter is active.",
+    },
+  },
+};

package/ui/composables/index.ts

@@ -1,4 +1,5 @@
 export * from "@ui/composables/useAdaptiveItems";
+export * from "@ui/composables/useCollapsible";
 export * from "@ui/composables/useFloatingPosition";
 export { useFormField } from "@ui/composables/useFormField";
 export * from "@ui/composables/useScrollArrows";

package/ui/composables/useCollapsible.ts

@@ -0,0 +1,73 @@
+import { ref, computed, watch, type Ref, type CSSProperties } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+
+export interface UseCollapsibleOptions {
+  /** Height in px when collapsed. Default: 0 (fully hidden) */
+  collapsedHeight?: number;
+  /** Max height in px when expanded. Undefined = no limit */
+  maxExpandedHeight?: number;
+  /** Initial expanded state. Default: false */
+  expanded?: boolean;
+}
+
+export interface UseCollapsibleReturn {
+  /** Template ref — attach to the inner content element */
+  contentRef: Ref<HTMLElement | undefined>;
+  /** Whether the panel is currently expanded */
+  isExpanded: Ref<boolean>;
+  /** True when content overflows the collapsed height (i.e. expand is meaningful) */
+  hasOverflow: Readonly<Ref<boolean>>;
+  /** True when expanded content exceeds maxExpandedHeight (needs scroll) */
+  hasScroll: Readonly<Ref<boolean>>;
+  /** Bind to the wrapper element's :style */
+  wrapperStyle: Readonly<Ref<CSSProperties>>;
+  /** Measured content height in px */
+  contentHeight: Readonly<Ref<number>>;
+  /** Toggle expanded state */
+  toggle: () => void;
+}
+
+export function useCollapsible(options: UseCollapsibleOptions = {}): UseCollapsibleReturn {
+  const collapsedHeight = options.collapsedHeight ?? 0;
+  const maxExpandedHeight = options.maxExpandedHeight;
+
+  const contentRef = ref<HTMLElement>();
+  const contentHeight = ref(0);
+  const isExpanded = ref(options.expanded ?? false);
+
+  const hasOverflow = computed(() => contentHeight.value > collapsedHeight);
+
+  const hasScroll = computed(
+    () => maxExpandedHeight !== undefined && contentHeight.value > maxExpandedHeight,
+  );
+
+  const wrapperStyle = computed<CSSProperties>(() => {
+    if (isExpanded.value) {
+      if (maxExpandedHeight !== undefined && contentHeight.value > maxExpandedHeight) {
+        return { maxHeight: `${maxExpandedHeight}px` };
+      }
+      return { maxHeight: `${contentHeight.value}px` };
+    }
+    return { maxHeight: collapsedHeight > 0 ? `${collapsedHeight}px` : "0px" };
+  });
+
+  function toggle() {
+    isExpanded.value = !isExpanded.value;
+  }
+
+  useResizeObserver(contentRef, () => {
+    if (contentRef.value) {
+      contentHeight.value = contentRef.value.scrollHeight;
+    }
+  });
+
+  return {
+    contentRef,
+    isExpanded,
+    hasOverflow,
+    hasScroll,
+    wrapperStyle,
+    contentHeight,
+    toggle,
+  };
+}

package/ui/composables/useFormField.ts

@@ -22,6 +22,8 @@ export function useFormField(props: IFormFieldProps & { hint?: string }) {
 
   const resolvedName = computed(() => groupContext?.name.value || props.name);
 
+  const ariaRequired = computed(() => (props.required ? true : undefined));
+
   const ariaDescribedBy = computed(() => {
     const ids = new Set<string>();
 
@@ -48,6 +50,7 @@ export function useFormField(props: IFormFieldProps & { hint?: string }) {
     invalid,
     resolvedDisabled,
     resolvedName,
+    ariaRequired,
     ariaDescribedBy,
     groupContext,
   };

package/ui/types/index.ts

@@ -1,5 +1,5 @@
 import { MaybeRef } from "vue";
-import * as components from "@ui/components";
+import type * as components from "@ui/components";
 
 export type { IFormFieldProps, ITextFieldProps } from "./form-field";
 

package/core/plugins/moment/humanize.ts

@@ -1,74 +0,0 @@
-import * as _ from "lodash-es";
-import { default as moment, Duration, RelativeTimeKey } from "moment";
-
-type momentUnit = Extract<moment.RelativeTimeKey, "s" | "m" | "h" | "d" | "w" | "M" | "y">;
-
-const momentUnits: momentUnit[] = ["s", "m", "h", "d", "w", "M", "y"];
-
-const intlUnits = ["second", "minute", "hour", "day", "week", "month", "year"];
-
-const intlNumberFormats = intlUnits.map((intlUnit) =>
-  Intl?.NumberFormat(moment.locale(), {
-    style: "unit",
-    unit: intlUnit,
-    unitDisplay: "long",
-  }),
-);
-
-const getIntlNumberFormat = (unit: momentUnit) => {
-  return intlNumberFormats[momentUnits.indexOf(unit)];
-};
-
-// Workaround because of lacking precise (1 hour 42 minutes 35 seconds)
-// duration formatting in moment and Intl
-export function humanize(this: Duration & number, withSuffix?: boolean): string {
-  const localeData = moment.localeData();
-
-  const units = _.clone(momentUnits);
-  const lastUnit = units.pop();
-
-  // format string as "value unit" (e.g. "35", "ss" => "35 seconds", "1", "dd" => "1 day")
-  const humanize = (unit: momentUnit, value: number) => {
-    // Use Intl if available to get proper formatting and pluralization:
-    // Intl:   1 day, 2 days
-    // moment: a day, 2 days
-    return Intl
-      ? getIntlNumberFormat(unit).format(value)
-      : localeData.relativeTime(
-          value,
-          true,
-          value === 1 ? unit : ((unit + unit) as RelativeTimeKey), // pluralize
-          this > 0,
-        );
-  };
-
-  // convert duration to the map
-  // "1:42:35" => [{ key: "ss", value: 35 }, { key: "mm", value: 42 }, { key: "hh", value: 1 }]
-  let map = units.map((unit) => ({
-    unit,
-    value: this.get(unit),
-  }));
-  // add value of last unit as double-precision float, if it's greater than 0
-  map.push({
-    unit: lastUnit as momentUnit,
-    value: this.get(lastUnit as momentUnit) > 0 ? this.as(lastUnit as momentUnit) : 0,
-  });
-
-  // drop zero values from the beginning and the end of the array
-  // [{ y: 0 }, { m: 0 }, { d: 0 }, { h: 1 }, { m: 42 }, { s: 0 }] => [{ h: 1 }, { m: 42 }]
-  const isZeroValue = (item: { value: number }) => item.value === 0;
-  map = _.chain(map).dropWhile(isZeroValue).dropRightWhile(isZeroValue).value();
-
-  // convert map to array of formatted strings
-  // [{ key: "mm", value: 42 }, { key: "hh", value: 1 }] => ["42 minutes", "1 hour"]
-  const values = map.map((entry) => humanize(entry.unit, entry.value));
-
-  // ["42 minutes", "1 hour"] => "1 hour 42 minutes"
-  let result = values.reverse().join(" ");
-
-  if (withSuffix) {
-    result = localeData.pastFuture(this, result);
-  }
-
-  return result;
-}

package/core/plugins/moment/index.ts

@@ -1 +0,0 @@
-export { default as moment } from "@core/plugins/moment/moment";

package/core/plugins/moment/moment.ts

@@ -1,29 +0,0 @@
-import { Duration, default as moment, argAccuracy as argAcc } from "moment";
-import { humanize } from "@core/plugins/moment/humanize";
-
-declare module "moment" {
-  export type argAccuracy = "auto" | "precise";
-
-  interface Duration {
-    humanize(argWithSuffix?: boolean, argAccuracy?: argAccuracy): string;
-
-    humanize(argAccuracy?: argAccuracy): string;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace duration {
-    // eslint-disable-next-line no-var
-    export var fn: moment.Duration;
-  }
-}
-
-const humanizeOriginal = moment.duration.fn.humanize;
-moment.duration.fn.humanize = function (...args: unknown[]): string {
-  if (args.includes("precise")) {
-    return humanize.apply(this as Duration & number, args as [withSuffix?: boolean | undefined]);
-  }
-
-  return humanizeOriginal.apply(this, args as [argAccuracy?: argAcc | undefined]);
-};
-
-export default moment;

package/dist/core/plugins/moment/humanize.d.ts

@@ -1,3 +0,0 @@
-import { Duration } from "moment";
-export declare function humanize(this: Duration & number, withSuffix?: boolean): string;
-//# sourceMappingURL=humanize.d.ts.map

package/dist/core/plugins/moment/humanize.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"humanize.d.ts","sourceRoot":"","sources":["../../../../core/plugins/moment/humanize.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,QAAQ,EAAmB,MAAM,QAAQ,CAAC;AAsBtE,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAkD9E"}

package/dist/core/plugins/moment/index.d.ts

@@ -1,2 +0,0 @@
-export { default as moment } from "../../plugins/moment/moment";
-//# sourceMappingURL=index.d.ts.map

package/dist/core/plugins/moment/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/plugins/moment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/core/plugins/moment/moment.d.ts

@@ -1,13 +0,0 @@
-import { default as moment } from "moment";
-declare module "moment" {
-    type argAccuracy = "auto" | "precise";
-    interface Duration {
-        humanize(argWithSuffix?: boolean, argAccuracy?: argAccuracy): string;
-        humanize(argAccuracy?: argAccuracy): string;
-    }
-    namespace duration {
-        var fn: moment.Duration;
-    }
-}
-export default moment;
-//# sourceMappingURL=moment.d.ts.map

package/dist/core/plugins/moment/moment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"moment.d.ts","sourceRoot":"","sources":["../../../../core/plugins/moment/moment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,OAAO,IAAI,MAAM,EAAyB,MAAM,QAAQ,CAAC;AAG5E,OAAO,QAAQ,QAAQ,CAAC;IACtB,KAAY,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;IAE7C,UAAU,QAAQ;QAChB,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;QAErE,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;KAC7C;IAGD,UAAU,QAAQ,CAAC;QAEV,IAAI,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC;KAChC;CACF;AAWD,eAAe,MAAM,CAAC"}

package/dist/ui/components/atoms/vc-icon/vc-icon-examples.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vc-icon-examples.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/atoms/vc-icon/vc-icon-examples.vue"],"names":[],"mappings":";AA0pEA,wBAKG"}

package/dist/ui/components/atoms/vc-icon/vc-icon-test.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vc-icon-test.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/atoms/vc-icon/vc-icon-test.vue"],"names":[],"mappings":";AAwrDA,wBAKG"}

package/dist/ui/components/molecules/vc-paginator/index.d.ts

@@ -1,4 +0,0 @@
-import VcPaginator from "../../../components/molecules/vc-paginator/vc-paginator.vue";
-export { VcPaginator };
-export default VcPaginator;
-//# sourceMappingURL=index.d.ts.map

package/dist/ui/components/molecules/vc-paginator/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-paginator/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,wDAAwD,CAAC;AAEjF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,WAAW,CAAC"}

package/dist/ui/components/molecules/vc-paginator/vc-paginator.vue.d.ts

@@ -1,73 +0,0 @@
-export interface Props {
-    /**
-     * Total number of records
-     */
-    totalRecords: number;
-    /**
-     * Number of rows to display per page (v-model:rows)
-     */
-    rows?: number;
-    /**
-     * Index of the first record to display (v-model:first)
-     */
-    first?: number;
-    /**
-     * Options for rows per page dropdown
-     */
-    rowsPerPageOptions?: number[];
-    /**
-     * Whether to show current page report
-     */
-    showCurrentPageReport?: boolean;
-    /**
-     * Template for current page report
-     * Available placeholders: {first}, {last}, {totalRecords}, {currentPage}, {totalPages}
-     */
-    currentPageReportTemplate?: string;
-    /**
-     * Number of page links to display
-     */
-    pageLinkSize?: number;
-    /**
-     * Whether to always show the paginator
-     */
-    alwaysShow?: boolean;
-}
-export interface Emits {
-    (e: "update:first", value: number): void;
-    (e: "update:rows", value: number): void;
-    (e: "page", event: {
-        page: number;
-        first: number;
-        rows: number;
-        pageCount: number;
-    }): void;
-}
-declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    page: (event: {
-        page: number;
-        first: number;
-        rows: number;
-        pageCount: number;
-    }) => any;
-    "update:first": (value: number) => any;
-    "update:rows": (value: number) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onPage?: ((event: {
-        page: number;
-        first: number;
-        rows: number;
-        pageCount: number;
-    }) => any) | undefined;
-    "onUpdate:first"?: ((value: number) => any) | undefined;
-    "onUpdate:rows"?: ((value: number) => any) | undefined;
-}>, {
-    first: number;
-    rows: number;
-    showCurrentPageReport: boolean;
-    currentPageReportTemplate: string;
-    pageLinkSize: number;
-    alwaysShow: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=vc-paginator.vue.d.ts.map

package/dist/ui/components/molecules/vc-paginator/vc-paginator.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vc-paginator.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-paginator/vc-paginator.vue"],"names":[],"mappings":"AAgYA,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC5F;;;cAD4B,MAAM;eAAS,MAAM;cAAQ,MAAM;mBAAa,MAAM;;;;;;cAAtD,MAAM;eAAS,MAAM;cAAQ,MAAM;mBAAa,MAAM;;;;;WA3BzE,MAAM;UAJP,MAAM;2BAYW,OAAO;+BAKH,MAAM;kBAInB,MAAM;gBAIR,OAAO;;AA2UtB,wBAQG"}