@arbor-education/design-system.components 0.21.1 → 0.22.0

package/src/components/tagList/useTagListCollapsedLayout.ts

@@ -0,0 +1,83 @@
+import { useMemo, useRef } from 'react';
+import { useMeasuredChildWidths } from 'Utils/hooks/useMeasuredChildWidths';
+import { useElementWidth } from 'Utils/hooks/useElementWidth';
+import type { TagListItem, TagListOverflowRenderArgs } from './TagList.js';
+import { useVisibleTags } from './useVisibleTags.js';
+
+type UseTagListCollapsedLayoutParams = {
+  items: TagListItem[];
+  wrap: boolean;
+  collapseOverflow: boolean;
+};
+
+type TagListCollapsedLayout = {
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  measureTrackRef: React.RefObject<HTMLUListElement | null>;
+  overflowProbeRef: React.RefObject<HTMLDivElement | null>;
+  shouldCollapse: boolean;
+  visibleItemIndices: number[];
+  visibleItems: TagListItem[];
+  hiddenItemCount: number;
+  overflowArgs: TagListOverflowRenderArgs;
+};
+
+export const useTagListCollapsedLayout = ({
+  items,
+  wrap,
+  collapseOverflow,
+}: UseTagListCollapsedLayoutParams): TagListCollapsedLayout => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const measureTrackRef = useRef<HTMLUListElement>(null);
+  const overflowProbeRef = useRef<HTMLDivElement>(null);
+
+  const shouldCollapse = collapseOverflow && !wrap && items.length > 0;
+  const itemWatchKey = useMemo(() => items.map(item => item.id).join('|'), [items]);
+
+  const contentWidth = useElementWidth(contentRef, itemWatchKey);
+  const overflowProbeWidth = useElementWidth(overflowProbeRef, `${itemWatchKey}-overflow`);
+  const { childGap: itemGap, childWidths: itemWidths } = useMeasuredChildWidths(measureTrackRef, itemWatchKey);
+
+  const layout = useVisibleTags({
+    containerWidth: contentWidth,
+    itemWidths,
+    itemGap,
+    overflowWidth: overflowProbeWidth,
+    allowOverflow: shouldCollapse,
+  });
+
+  const canMeasureCollapsedLayout = shouldCollapse
+    && contentWidth > 0
+    && itemWidths.length === items.length
+    && overflowProbeWidth > 0;
+
+  const visibleItemIndices = useMemo(
+    () =>
+      canMeasureCollapsedLayout
+        ? layout.visibleItemIndices
+        : items.map((_, index) => index),
+    [canMeasureCollapsedLayout, items, layout.visibleItemIndices],
+  );
+  const hiddenItemCount = canMeasureCollapsedLayout ? layout.hiddenItemCount : 0;
+  const visibleItems = visibleItemIndices
+    .map(index => items[index])
+    .filter((item): item is TagListItem => item != null);
+  const overflowArgs = useMemo(
+    (): TagListOverflowRenderArgs => ({
+      hiddenItemCount,
+      totalItemCount: items.length,
+      visibleItemCount: visibleItems.length,
+    }),
+    [hiddenItemCount, items.length, visibleItems.length],
+  );
+
+  return {
+    contentRef,
+    measureTrackRef,
+    overflowProbeRef,
+    shouldCollapse,
+    visibleItemIndices,
+    visibleItems,
+    hiddenItemCount,
+    overflowArgs,
+  };
+};

package/src/components/tagList/useVisibleTags.ts

@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import { sumSpacedWidths } from 'Utils/spacedWidths';
+
+type ComputeVisibleTagsLayoutParams = {
+  containerWidth: number;
+  itemWidths: number[];
+  itemGap: number;
+  overflowWidth: number;
+  allowOverflow: boolean;
+  safetyBuffer?: number;
+};
+
+export type VisibleTagsLayout = {
+  visibleItemIndices: number[];
+  hiddenItemCount: number;
+  hasOverflow: boolean;
+};
+
+export const computeVisibleTagsLayout = ({
+  containerWidth,
+  itemWidths,
+  itemGap,
+  overflowWidth,
+  allowOverflow,
+  safetyBuffer = 1,
+}: ComputeVisibleTagsLayoutParams): VisibleTagsLayout => {
+  const totalItemCount = itemWidths.length;
+
+  if (totalItemCount === 0 || containerWidth <= 0) {
+    return {
+      visibleItemIndices: [],
+      hiddenItemCount: 0,
+      hasOverflow: false,
+    };
+  }
+
+  for (let visibleItemCount = totalItemCount; visibleItemCount >= 0; visibleItemCount -= 1) {
+    const hiddenItemCount = totalItemCount - visibleItemCount;
+    const hasOverflow = hiddenItemCount > 0;
+    const overflowReserve = hasOverflow && allowOverflow
+      ? overflowWidth + (visibleItemCount > 0 ? itemGap : 0)
+      : 0;
+    const requiredWidth = sumSpacedWidths(itemWidths, itemGap, visibleItemCount) + overflowReserve;
+
+    if (requiredWidth <= Math.max(0, containerWidth - safetyBuffer)) {
+      return {
+        visibleItemIndices: Array.from({ length: visibleItemCount }, (_, index) => index),
+        hiddenItemCount,
+        hasOverflow,
+      };
+    }
+  }
+
+  return {
+    visibleItemIndices: [],
+    hiddenItemCount: totalItemCount,
+    hasOverflow: allowOverflow,
+  };
+};
+
+type UseVisibleTagsParams = ComputeVisibleTagsLayoutParams;
+
+export const useVisibleTags = (params: UseVisibleTagsParams): VisibleTagsLayout =>
+  useMemo(
+    () => computeVisibleTagsLayout(params),
+    [
+      params.allowOverflow,
+      params.containerWidth,
+      params.itemGap,
+      params.itemWidths,
+      params.overflowWidth,
+      params.safetyBuffer,
+    ],
+  );

package/src/index.scss

@@ -3,7 +3,7 @@
 @use "./global.scss";
 @use "components/button/button.scss";
 @use "components/icon/icon.scss";
-@use "components/icoText/icoText.scss";
+@use "components/iconText/iconText.scss";
 @use "components/heading/heading.scss";
 @use "components/card/card.scss";
 @use "components/articleCard/articleCard.scss";
@@ -19,6 +19,7 @@
 @use "components/formField/inputs/selectDropdown/selectDropdown";
 @use "components/formField/inputs/colourPickerDropdown/colourPickerDropdown.scss";
 @use "components/tag/tag.scss";
+@use "components/tagList/tagList.scss";
 @use "components/dot/dot.scss";
 @use "components/badge/badge.scss";
 @use "components/pill/pill.scss";

package/src/index.ts

@@ -25,7 +25,7 @@ export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
 export { TimeInput } from 'Components/formField/inputs/time/TimeInput';
 export { Heading } from 'Components/heading/Heading';
 export { Icon } from 'Components/icon/Icon';
-export { IcoText, type IcoTextHeadingProps, type IcoTextIconProps, type IcoTextParagraphProps, type IcoTextProps } from 'Components/icoText/IcoText';
+export { IconText, type IconTextHeadingProps, type IconTextIconProps, type IconTextParagraphProps, type IconTextProps } from 'Components/iconText/IconText';
 export { KPICard, type KPICardProps } from 'Components/kpiCard/KPICard';
 export { KVPList, type KVPListDefinitionProps, type KVPListProps, type KVPListRowProps, type KVPListTermProps } from 'Components/kvpList/KVPList';
 export { Modal } from 'Components/modal/Modal';
@@ -48,6 +48,8 @@ export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCel
 export { Table } from 'Components/table/Table';
 export { Tabs } from 'Components/tabs/Tabs';
 export { Tag } from 'Components/tag/Tag';
+export { TagList } from 'Components/tagList/TagList';
+export type { TagListItem, TagListOverflowRenderArgs, TagListOverflowTarget, TagListProps } from 'Components/tagList/TagList';
 export { Toast } from 'Components/toast/Toast';
 export { Toggle } from 'Components/toggle/Toggle';
 export { Tooltip } from 'Components/tooltip/Tooltip';

package/src/tokens.scss

@@ -20,6 +20,7 @@
   --font-weight-medium: 500;
   --font-weight-regular: 400;
   --font-weight-semi-bold: 600;
+  --size-control-2xs: 1.75rem;
   --size-control-xsmall: 2rem;
   --size-control-small: 2.25rem;
   --size-control-medium: 3rem;
@@ -239,7 +240,7 @@
   --tag-spacing-gap-horizontal: var(--spacing-small);
   --tag-selected-color-background: var(--color-grey-200);
   --tag-selected-color-border: var(--color-grey-200);
-  --tag-height: var(--size-control-xsmall);
+  --tag-height: var(--size-control-2xs);
   --card-focus-color-icon: var(--color-grey-900);
   --card-focus-color-text: var(--color-grey-900);
   --card-focus-color-border: var(--color-grey-100);

package/src/utils/hooks/useElementWidth.ts

@@ -0,0 +1,39 @@
+import { useCallback, useLayoutEffect, useState } from 'react';
+
+export const useElementWidth = (
+  ref: React.RefObject<HTMLElement | null>,
+  watchKey: string,
+): number => {
+  const [measurement, setMeasurement] = useState({ width: 0, hasMeasured: false });
+  const element = ref.current;
+
+  const update = useCallback(() => {
+    const currentElement = ref.current;
+    if (!currentElement) {
+      setMeasurement({ width: 0, hasMeasured: true });
+      return;
+    }
+
+    setMeasurement({
+      width: currentElement.getBoundingClientRect().width,
+      hasMeasured: true,
+    });
+  }, [ref]);
+
+  useLayoutEffect(() => {
+    update();
+  }, [update, watchKey]);
+
+  useLayoutEffect(() => {
+    if (!element) return;
+
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [element, update]);
+
+  return measurement.width;
+};

package/src/utils/hooks/useMeasuredChildWidths.ts

@@ -0,0 +1,39 @@
+import type { RefObject } from 'react';
+import { useElementWidth } from './useElementWidth.js';
+
+type MeasuredChildWidths = {
+  childGap: number;
+  childWidths: number[];
+};
+
+const getTrackGap = (trackElement: HTMLElement | null): number => {
+  if (!trackElement) return 0;
+
+  const styles = getComputedStyle(trackElement);
+  const parsedGap = Number.parseFloat(styles.columnGap || styles.gap || '0');
+  return Number.isFinite(parsedGap) ? parsedGap : 0;
+};
+
+const getChildWidths = (trackElement: HTMLElement | null): number[] => {
+  if (!trackElement) return [];
+
+  return Array.from(trackElement.children).map((child) => {
+    const width = (child as HTMLElement).getBoundingClientRect().width;
+    return Number.isFinite(width) ? width : 0;
+  });
+};
+
+export const useMeasuredChildWidths = <T extends HTMLElement>(
+  trackRef: RefObject<T | null>,
+  watchKey: string,
+): MeasuredChildWidths => {
+  useElementWidth(trackRef as RefObject<HTMLElement | null>, watchKey);
+
+  const childGap = getTrackGap(trackRef.current);
+  const childWidths = getChildWidths(trackRef.current);
+
+  return {
+    childGap,
+    childWidths,
+  };
+};

package/src/utils/hooks/useRovingFocus.test.tsx

@@ -0,0 +1,105 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useRef, useState } from 'react';
+import { describe, expect, test } from 'vitest';
+import { useRovingFocus } from './useRovingFocus.js';
+
+type TestTarget = 'one' | 'two' | 'three';
+
+const labels: Record<TestTarget, string> = {
+  one: 'One',
+  two: 'Two',
+  three: 'Three',
+};
+
+type RovingExampleProps = {
+  initialTargets?: TestTarget[];
+  returnFocusOnEmpty?: boolean;
+};
+
+const RovingExample = ({
+  initialTargets = ['one', 'two', 'three'],
+  returnFocusOnEmpty = false,
+}: RovingExampleProps) => {
+  const [targets, setTargets] = useState<TestTarget[]>(initialTargets);
+  const returnFocusRef = useRef<HTMLButtonElement>(null);
+  const {
+    getTargetTabIndex,
+    handleTargetKeyDown,
+    registerTarget,
+  } = useRovingFocus<TestTarget>({
+    targets,
+    returnFocusRef,
+    onDeleteKey: (target) => {
+      setTargets(currentTargets => currentTargets.filter(currentTarget => currentTarget !== target));
+      return true;
+    },
+  });
+
+  return (
+    <>
+      {targets.map(target => (
+        <button
+          key={target}
+          ref={node => registerTarget(target, node)}
+          tabIndex={getTargetTabIndex(target)}
+          type="button"
+          onKeyDown={event => handleTargetKeyDown(event, target)}
+        >
+          {labels[target]}
+        </button>
+      ))}
+      {returnFocusOnEmpty && (
+        <button ref={returnFocusRef} type="button">
+          Return target
+        </button>
+      )}
+    </>
+  );
+};
+
+describe('useRovingFocus', () => {
+  test('moves focus through targets with arrow keys and Home/End', async () => {
+    const user = userEvent.setup();
+    render(<RovingExample />);
+
+    expect(screen.getByRole('button', { name: 'One' })).toHaveAttribute('tabindex', '0');
+    expect(screen.getByRole('button', { name: 'Two' })).toHaveAttribute('tabindex', '-1');
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'One' })).toHaveFocus();
+
+    await user.keyboard('{ArrowRight}');
+    expect(screen.getByRole('button', { name: 'Two' })).toHaveFocus();
+    expect(screen.getByRole('button', { name: 'Two' })).toHaveAttribute('tabindex', '0');
+
+    await user.keyboard('{End}');
+    expect(screen.getByRole('button', { name: 'Three' })).toHaveFocus();
+
+    await user.keyboard('{Home}');
+    expect(screen.getByRole('button', { name: 'One' })).toHaveFocus();
+  });
+
+  test('recovers focus to the next target after deletion', async () => {
+    const user = userEvent.setup();
+    render(<RovingExample initialTargets={['one', 'two']} />);
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'One' })).toHaveFocus();
+
+    await user.keyboard('{Delete}');
+    expect(screen.getByRole('button', { name: 'Two' })).toHaveFocus();
+  });
+
+  test('returns focus to the fallback element when all targets are removed', async () => {
+    const user = userEvent.setup();
+    render(<RovingExample initialTargets={['one']} returnFocusOnEmpty />);
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'One' })).toHaveFocus();
+
+    await user.keyboard('{Delete}');
+    expect(screen.getByRole('button', { name: 'Return target' })).toHaveFocus();
+  });
+});

package/src/utils/hooks/useRovingFocus.ts

@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react';
+
+type PendingFocusRecovery = {
+  targetIndex: number;
+};
+
+type UseRovingFocusOptions<Target extends string> = {
+  targets: readonly Target[];
+  returnFocusRef?: RefObject<HTMLElement | null>;
+  onActiveTargetChange?: (target: Target | null) => void;
+  onDeleteKey?: (target: Target, event: React.KeyboardEvent<HTMLElement>) => boolean | void;
+};
+
+export const useRovingFocus = <Target extends string>({
+  targets,
+  returnFocusRef,
+  onActiveTargetChange,
+  onDeleteKey,
+}: UseRovingFocusOptions<Target>) => {
+  const [activeTarget, setActiveTargetState] = useState<Target | null>(null);
+  const targetRefs = useRef(new Map<Target, HTMLElement>());
+  const pendingFocusRecoveryRef = useRef<PendingFocusRecovery | null>(null);
+  const returnFocusRefRef = useRef(returnFocusRef);
+
+  returnFocusRefRef.current = returnFocusRef;
+
+  const setActiveTarget = useCallback((target: Target | null) => {
+    setActiveTargetState(target);
+    onActiveTargetChange?.(target);
+  }, [onActiveTargetChange]);
+
+  const focusTarget = useCallback((target: Target) => {
+    targetRefs.current.get(target)?.focus();
+  }, []);
+
+  const moveFocus = useCallback((target: Target) => {
+    focusTarget(target);
+    setActiveTarget(target);
+  }, [focusTarget, setActiveTarget]);
+
+  const registerTarget = useCallback((target: Target, node: HTMLElement | null) => {
+    if (node) {
+      targetRefs.current.set(target, node);
+    }
+    else {
+      targetRefs.current.delete(target);
+    }
+  }, []);
+
+  const queueFocusRecovery = useCallback((target: Target) => {
+    const targetIndex = targets.indexOf(target);
+    if (targetIndex < 0) return;
+
+    pendingFocusRecoveryRef.current = { targetIndex };
+  }, [targets]);
+
+  useEffect(() => {
+    if (targets.length === 0) {
+      if (activeTarget !== null) {
+        setActiveTarget(null);
+      }
+      return;
+    }
+
+    if (activeTarget === null || !targets.includes(activeTarget)) {
+      setActiveTarget(targets[0] ?? null);
+    }
+  }, [activeTarget, setActiveTarget, targets]);
+
+  useLayoutEffect(() => {
+    const pendingFocusRecovery = pendingFocusRecoveryRef.current;
+    if (!pendingFocusRecovery) return;
+
+    pendingFocusRecoveryRef.current = null;
+
+    if (targets.length > 0) {
+      const nextTarget = targets[Math.min(pendingFocusRecovery.targetIndex, targets.length - 1)];
+
+      if (nextTarget !== undefined) {
+        moveFocus(nextTarget);
+        return;
+      }
+    }
+
+    returnFocusRef?.current?.focus();
+    setActiveTarget(null);
+  }, [moveFocus, returnFocusRef, setActiveTarget, targets]);
+
+  useLayoutEffect(() => () => {
+    if (!pendingFocusRecoveryRef.current) return;
+
+    pendingFocusRecoveryRef.current = null;
+    returnFocusRefRef.current?.current?.focus();
+  }, []);
+
+  const handleTargetKeyDown = useCallback((event: React.KeyboardEvent<HTMLElement>, target: Target) => {
+    const targetIndex = targets.indexOf(target);
+    if (targetIndex < 0) return;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp': {
+        event.preventDefault();
+        const previousTarget = targets[Math.max(0, targetIndex - 1)];
+        if (previousTarget !== undefined) {
+          moveFocus(previousTarget);
+        }
+        break;
+      }
+      case 'ArrowRight':
+      case 'ArrowDown': {
+        event.preventDefault();
+        const nextTarget = targets[Math.min(targets.length - 1, targetIndex + 1)];
+        if (nextTarget !== undefined) {
+          moveFocus(nextTarget);
+        }
+        break;
+      }
+      case 'Home':
+        event.preventDefault();
+        if (targets[0] !== undefined) {
+          moveFocus(targets[0]);
+        }
+        break;
+      case 'End': {
+        event.preventDefault();
+        const lastTarget = targets[targets.length - 1];
+        if (lastTarget !== undefined) {
+          moveFocus(lastTarget);
+        }
+        break;
+      }
+      case 'Backspace':
+      case 'Delete': {
+        const shouldRecoverFocus = onDeleteKey?.(target, event);
+        if (shouldRecoverFocus) {
+          queueFocusRecovery(target);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }, [moveFocus, onDeleteKey, queueFocusRecovery, targets]);
+
+  const getTargetTabIndex = useCallback((target: Target): 0 | -1 => {
+    if (activeTarget === null) {
+      return targets[0] === target ? 0 : -1;
+    }
+
+    return activeTarget === target ? 0 : -1;
+  }, [activeTarget, targets]);
+
+  return {
+    activeTarget,
+    focusTarget,
+    getTargetTabIndex,
+    handleTargetKeyDown,
+    queueFocusRecovery,
+    registerTarget,
+    setActiveTarget,
+  };
+};

package/src/utils/spacedWidths.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, test } from 'vitest';
+import { fitSpacedWidths, sumSpacedWidths } from './spacedWidths.js';
+
+describe('spacedWidths', () => {
+  test('sums widths with gaps between visible items', () => {
+    expect(sumSpacedWidths([40, 50, 60], 8, 2)).toBe(98);
+  });
+
+  test('returns zero summed width when no items are visible', () => {
+    expect(sumSpacedWidths([40, 50, 60], 8, 0)).toBe(0);
+  });
+
+  test('fits the number of items that can be shown within the available width', () => {
+    expect(fitSpacedWidths(102, [40, 50, 60], 8)).toBe(2);
+  });
+
+  test('returns zero fitted items when no width is available', () => {
+    expect(fitSpacedWidths(0, [40, 50], 8)).toBe(0);
+  });
+});

package/src/utils/spacedWidths.ts

@@ -0,0 +1,37 @@
+export const sumSpacedWidths = (
+  widths: number[],
+  gap: number,
+  visibleCount: number = widths.length,
+): number => {
+  const boundedCount = Math.max(0, Math.min(visibleCount, widths.length));
+  if (boundedCount === 0) return 0;
+
+  let usedWidth = 0;
+  for (let index = 0; index < boundedCount; index += 1) {
+    usedWidth += widths[index] ?? 0;
+    if (index > 0) {
+      usedWidth += gap;
+    }
+  }
+
+  return usedWidth;
+};
+
+export const fitSpacedWidths = (
+  availableWidth: number,
+  widths: number[],
+  gap: number,
+): number => {
+  if (availableWidth <= 0 || widths.length === 0) return 0;
+
+  let usedWidth = 0;
+  let visibleCount = 0;
+  for (let index = 0; index < widths.length; index += 1) {
+    const requiredWidth = (widths[index] ?? 0) + (index > 0 ? gap : 0);
+    if (usedWidth + requiredWidth > availableWidth) break;
+    usedWidth += requiredWidth;
+    visibleCount += 1;
+  }
+
+  return visibleCount;
+};

package/dist/components/icoText/IcoText.d.ts

@@ -1,37 +0,0 @@
-import type { IconName } from '../icon/allowedIcons.js';
-import { Icon } from '../icon/Icon.js';
-export type IcoTextProps = {
-    children?: React.ReactNode;
-    className?: string;
-};
-export type IcoTextHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
-    children: React.ReactNode;
-};
-export type IcoTextParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
-    children: React.ReactNode;
-};
-export type IcoTextIconProps = {
-    className?: string;
-    color?: Icon.Props['color'];
-    name: IconName;
-    screenReaderText?: string;
-    size?: 12 | 16 | 24;
-};
-export declare const IcoText: {
-    ({ children, className }: IcoTextProps): React.JSX.Element;
-    displayName: string;
-} & {
-    Heading: {
-        ({ children, className, ...rest }: IcoTextHeadingProps): React.JSX.Element;
-        displayName: string;
-    };
-    Paragraph: {
-        ({ children, className, ...rest }: IcoTextParagraphProps): React.JSX.Element;
-        displayName: string;
-    };
-    Icon: {
-        ({ className, color, name, screenReaderText, size, }: IcoTextIconProps): React.JSX.Element;
-        displayName: string;
-    };
-};
-//# sourceMappingURL=IcoText.d.ts.map

package/dist/components/icoText/IcoText.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IcoText.d.ts","sourceRoot":"","sources":["../../../src/components/icoText/IcoText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CACrB,CAAC;AAgEF,eAAO,MAAM,OAAO;8BA1B0B,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAhC3E,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;2CAUvC,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;;8DAYzC,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;;CAwCrC,CAAC"}