@arbor-education/design-system.components 0.4.0 → 0.4.2

package/src/components/userDropdown/assets/logos.ts

@@ -0,0 +1,13 @@
+import arborPng from './arbor.png';
+import govhubPng from './govhub.png';
+import keyPng from './key.png';
+import robinPng from './robin.png';
+import sampeoplePng from './sampeople.png';
+import timetablerPng from './timetabler.png';
+
+export const ArborLogo = arborPng;
+export const GovhubLogo = govhubPng;
+export const KeyLogo = keyPng;
+export const RobinLogo = robinPng;
+export const SampeopleLogo = sampeoplePng;
+export const TimetablerLogo = timetablerPng;

package/src/components/userDropdown/internal/UserDropdownAppItem.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { Icon } from 'Components/icon/Icon';
+import type { UserDropdownApp } from '../UserDropdown';
+
+export const UserDropdownAppItem = (props: UserDropdownApp) => {
+  const { logo, name, description, onClick } = props;
+
+  return (
+    <Dropdown.Item className="ds-user-dropdown__app-item" onClick={onClick}>
+      {logo && <div className="ds-user-dropdown__app-item-logo">{logo}</div>}
+      <div className="ds-user-dropdown__app-item-text">
+        <div className="ds-user-dropdown__app-item-name">{name}</div>
+        {description && <div className="ds-user-dropdown__app-item-description">{description}</div>}
+      </div>
+      <div className="ds-user-dropdown__app-item-arrow" aria-hidden="true">
+        <Icon name="arrow-up-right" size={16} />
+      </div>
+    </Dropdown.Item>
+  );
+};

package/src/components/userDropdown/internal/UserDropdownCollapsibleSection.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Icon } from 'Components/icon/Icon';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import type { UserDropdownApp } from '../UserDropdown';
+import { UserDropdownAppItem } from './UserDropdownAppItem';
+
+type UserDropdownCollapsibleSectionProps = {
+  label: string;
+  apps: UserDropdownApp[];
+  defaultOpen?: boolean;
+};
+
+export const UserDropdownCollapsibleSection = (props: UserDropdownCollapsibleSectionProps) => {
+  const { label, apps, defaultOpen = false } = props;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="ds-user-dropdown__collapsible-section">
+      <div
+        className="ds-user-dropdown__collapsible-section-header"
+        onClick={() => { setIsOpen(!isOpen); }}
+        role="button"
+        tabIndex={0}
+        aria-expanded={isOpen}
+      >
+        <span className="ds-user-dropdown__collapsible-section-label">{label}</span>
+        <Icon name={isOpen ? 'chevron-up' : 'chevron-down'} size={16} className="ds-user-dropdown__collapsible-section-icon" />
+      </div>
+      {isOpen && (
+        <Dropdown.Group className="ds-user-dropdown__collapsible-section-content">
+          {apps.map((app, index) => (
+            <UserDropdownAppItem key={index} {...app} />
+          ))}
+        </Dropdown.Group>
+      )}
+    </div>
+  );
+};

package/src/components/userDropdown/internal/UserDropdownSignOut.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Icon } from 'Components/icon/Icon';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+
+type UserDropdownSignOutProps = {
+  onClick: () => void;
+  label?: string;
+};
+
+export const UserDropdownSignOut = (props: UserDropdownSignOutProps) => {
+  const { onClick, label = 'Sign out' } = props;
+
+  return (
+    <Dropdown.Item className="ds-user-dropdown__sign-out" onClick={onClick}>
+      <Icon name="log-out" size={24} />
+      <span className="ds-user-dropdown__sign-out-label">{label}</span>
+    </Dropdown.Item>
+  );
+};

package/src/components/userDropdown/internal/UserDropdownTrigger.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { Avatar } from 'Components/avatar/Avatar';
+import { Button } from 'Components/button/Button';
+
+type UserDropdownTriggerProps = {
+  avatarSrc?: string;
+  avatarAlt?: string;
+  avatarInitials?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  variant?: 'dark' | 'light';
+};
+
+export const UserDropdownTrigger = (props: UserDropdownTriggerProps) => {
+  const { avatarSrc, avatarAlt, avatarInitials, logoSrc, logoAlt = 'Logo', variant = 'dark' } = props;
+
+  return (
+    <div
+      className={`ds-user-dropdown__trigger-container ds-user-dropdown__trigger-container--${variant}${
+        logoSrc ? ' ds-user-dropdown__trigger-container--with-logo' : ''
+      }`}
+    >
+      <Dropdown.Trigger>
+        <Button
+          variant="secondary"
+          borderless={true}
+          iconRightName="chevron-down"
+          className="ds-user-dropdown__trigger"
+        >
+          <Avatar size="medium" src={avatarSrc} alt={avatarAlt} initials={avatarInitials} />
+        </Button>
+      </Dropdown.Trigger>
+      {logoSrc && (
+        <>
+          <div className="ds-user-dropdown__trigger-divider" />
+          <img src={logoSrc} alt={logoAlt} className="ds-user-dropdown__trigger-logo" />
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/userDropdown/internal/UserDropdownUserInfo.tsx

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import { DropdownMenu } from 'radix-ui';
+import { Avatar } from 'Components/avatar/Avatar';
+import { Icon } from 'Components/icon/Icon';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+import type { UserDropdownUser, UserDropdownUserInfoAction } from '../UserDropdown';
+
+type UserDropdownUserInfoProps = {
+  user: UserDropdownUser;
+  action?: UserDropdownUserInfoAction;
+};
+
+export const UserDropdownUserInfo = (props: UserDropdownUserInfoProps) => {
+  const { user, action } = props;
+  const popupParentRef = useContext(PopupParentContext);
+
+  const content = (
+    <>
+      <Avatar size="medium" src={user.avatarSrc} alt={user.avatarAlt} initials={user.avatarInitials} />
+      <div className="ds-user-dropdown__user-info-text">
+        <div className="ds-user-dropdown__user-info-name">{user.name}</div>
+        {user.subtitle && <div className="ds-user-dropdown__user-info-role">{user.subtitle}</div>}
+      </div>
+      {action && <Icon name="chevron-right" size={16} className="ds-user-dropdown__user-info-chevron" />}
+    </>
+  );
+
+  if (action?.type === 'menu') {
+    return (
+      <DropdownMenu.Sub>
+        <DropdownMenu.SubTrigger className="ds-user-dropdown__user-info">
+          {content}
+        </DropdownMenu.SubTrigger>
+        <DropdownMenu.Portal container={popupParentRef.current}>
+          <DropdownMenu.SubContent className="ds-user-dropdown__sub-content">
+            {action.items.map((item, index) => (
+              <DropdownMenu.Item
+                key={index}
+                className="ds-user-dropdown__sub-item"
+                onSelect={item.onClick}
+              >
+                {item.label}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Sub>
+    );
+  }
+
+  return (
+    <Dropdown.Item
+      className="ds-user-dropdown__user-info"
+      onClick={action?.type === 'link' ? action.onClick : undefined}
+    >
+      {content}
+    </Dropdown.Item>
+  );
+};

package/src/components/userDropdown/userDropdown.scss

@@ -0,0 +1,377 @@
+// ========== Trigger Divider ==========
+.ds-user-dropdown__trigger-divider {
+  width: 1px;
+  height: 24px;
+}
+
+// ========== Trigger Container ==========
+.ds-user-dropdown__trigger-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  padding: var(--spacing-xsmall);
+  border: 1px solid;
+  border-radius: var(--border-radius-round);
+
+  &--with-logo {
+    padding-right: var(--spacing-medium);
+  }
+
+  // Dark variant (default)
+  &--dark {
+    background-color: var(--color-grey-900);
+    border-color: var(--color-grey-700);
+
+    .ds-avatar {
+      border-color: var(--color-grey-700);
+    }
+
+    .ds-user-dropdown__trigger-divider {
+      background-color: var(--color-grey-700);
+    }
+
+    .ds-user-dropdown__trigger:hover,
+    .ds-user-dropdown__trigger:focus-visible,
+    .ds-user-dropdown__trigger[data-state="open"] {
+      background-color: var(--color-grey-800);
+    }
+
+    .ds-icon {
+      color: var(--color-mono-white);
+    }
+  }
+
+  // Light variant
+  &--light {
+    background-color: var(--color-mono-white);
+    border-color: var(--color-grey-100);
+
+    .ds-avatar {
+      border-color: var(--color-grey-100);
+    }
+
+    .ds-user-dropdown__trigger-divider {
+      background-color: var(--color-grey-100);
+    }
+
+    .ds-user-dropdown__trigger:hover,
+    .ds-user-dropdown__trigger:focus-visible,
+    .ds-user-dropdown__trigger[data-state="open"] {
+      background-color: var(--color-grey-050);
+    }
+
+    .ds-icon {
+      color: var(--color-grey-700);
+    }
+  }
+}
+
+// ========== Trigger Button ==========
+// Higher specificity (0,3,0) to override Button component defaults without !important
+.ds-user-dropdown__trigger-container .ds-button.ds-user-dropdown__trigger {
+  background-color: transparent;
+  border-radius: var(--border-radius-round);
+  padding-right: var(--spacing-xsmall);
+  padding-left: 0;
+  border: none;
+
+  &:focus-visible,
+  &[data-state="open"] {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: 0;
+    border: none;
+  }
+}
+
+.ds-user-dropdown__trigger-logo {
+  max-height: 32px;
+  max-width: 54px;
+  height: auto;
+  width: auto;
+  border-radius: var(--border-radius-small);
+}
+
+// ========== Content ==========
+.ds-user-dropdown__content {
+  width: 304px;
+  padding: var(--spacing-large);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-small);
+}
+
+// ========== User Info ==========
+.ds-user-dropdown__user-info {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--color-grey-050);
+    outline: none;
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+.ds-user-dropdown__user-info-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ds-user-dropdown__user-info-name {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__user-info-role {
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__user-info-chevron {
+  color: var(--color-grey-700);
+  flex-shrink: 0;
+}
+
+// ========== User Info Sub-menu ==========
+.ds-user-dropdown__sub-content {
+  min-width: 180px;
+  padding: var(--spacing-small);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background-color: var(--color-mono-white);
+  border: 1px solid var(--color-grey-200);
+  border-radius: var(--border-radius-small);
+  box-shadow: 0 4px 12px 0 rgb(32 32 32 / 8%);
+}
+
+.ds-user-dropdown__sub-item {
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  cursor: pointer;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--color-grey-050);
+    outline: none;
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+// ========== Divider ==========
+.ds-user-dropdown__divider {
+  height: 1px;
+  flex-shrink: 0;
+  background-color: var(--color-grey-200);
+}
+
+// ========== Section ==========
+.ds-user-dropdown__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.ds-user-dropdown__section-label {
+  padding: var(--spacing-small);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+}
+
+// ========== App Item ==========
+.ds-user-dropdown__app-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--color-grey-050);
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+.ds-user-dropdown__app-item-logo {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--border-radius-xsmall);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.ds-user-dropdown__app-item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ds-user-dropdown__app-item-arrow {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--spacing-xsmall);
+  border-radius: 99px;
+  background-color: var(--color-brand-050);
+  color: var(--color-brand-500);
+
+  .ds-user-dropdown__collapsible-section-content .ds-user-dropdown__app-item:hover &,
+  .ds-user-dropdown__collapsible-section-content .ds-user-dropdown__app-item[data-highlighted] & {
+    display: flex;
+  }
+}
+
+.ds-user-dropdown__app-item-name {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__app-item-description {
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ========== Collapsible Section ==========
+.ds-user-dropdown__collapsible-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.ds-user-dropdown__collapsible-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--color-grey-050);
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+.ds-user-dropdown__collapsible-section-label {
+  flex: 1;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+}
+
+.ds-user-dropdown__collapsible-section-icon {
+  color: var(--color-grey-700);
+  flex-shrink: 0;
+}
+
+.ds-user-dropdown__collapsible-section-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+// ========== Sign Out ==========
+.ds-user-dropdown__sign-out {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--color-grey-050);
+  }
+
+  &:focus-visible:not(:hover) {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    outline-offset: -2px;
+  }
+}
+
+.ds-user-dropdown__sign-out-label {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+}

package/src/index.scss

@@ -32,4 +32,6 @@
 @use "components/editableText/editableText.scss";
 @use "components/progress/progress.scss";
 @use "components/toast/toast.scss";
+@use "components/avatar/avatar.scss";
+@use "components/userDropdown/userDropdown.scss";
 @import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

package/src/index.ts

@@ -30,3 +30,7 @@ export { Banner, type BannerProps, BANNER_LEVEL } from 'Components/banner/Banner
 export { EditableText } from 'Components/editableText/EditableText';
 export { Progress } from 'Components/progress/Progress';
 export { Toast } from 'Components/toast/Toast';
+export { Avatar } from 'Components/avatar/Avatar';
+export { UserDropdown } from 'Components/userDropdown/UserDropdown';
+export type { UserDropdownUserInfoAction } from 'Components/userDropdown/UserDropdown';
+export { ArborLogo, GovhubLogo, KeyLogo, SampeopleLogo, RobinLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';

package/tsconfig.json

@@ -48,6 +48,6 @@
       "Utils/*": ["./src/utils/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.test.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.test.tsx", "vite-env.d.ts"],
   "exclude": ["src/**/*.story.tsx"]
 }

package/vite-env.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.gif' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.webp' {
+  const value: string;
+  export default value;
+}

package/dist/components/table/cellRenderers/SelectDropdownCellEditor.d.ts

@@ -1,8 +0,0 @@
-import type { CustomCellEditorProps } from 'ag-grid-react';
-import type { SelectDropdownItemProps } from '../../formField/inputs/selectDropdown/items/item/SelectDropdownItem';
-export type SelectDropdownCellEditorParams = {
-    options: SelectDropdownItemProps[];
-    placeholder?: string;
-};
-export declare const SelectDropdownCellEditor: import("react").MemoExoticComponent<(props: CustomCellEditorProps & SelectDropdownCellEditorParams) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=SelectDropdownCellEditor.d.ts.map

package/dist/components/table/cellRenderers/SelectDropdownCellEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectDropdownCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/SelectDropdownCellEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,0EAA0E,CAAC;AAGxH,MAAM,MAAM,8BAA8B,GAAG;IAC3C,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,8CAAgB,qBAAqB,GAAG,8BAA8B,6CA6BzG,CAAC"}

package/dist/components/table/cellRenderers/SelectDropdownCellEditor.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useCallback, useRef } from 'react';
-import { SelectDropdown } from '../../formField/inputs/selectDropdown/SelectDropdown';
-import { PopupParentContext } from '../../../utils/PopupParentContext';
-export const SelectDropdownCellEditor = memo((props) => {
-    const { value, onValueChange, stopEditing } = props;
-    const options = props.options ?? [];
-    const placeholder = props.placeholder ?? 'Select';
-    const wrapperRef = useRef(null);
-    const initialSelectedValues = value != null && value !== '' ? [String(value)] : [];
-    const handleSelectionChange = useCallback((selected) => {
-        const newValue = selected.length > 0 ? selected[0] : '';
-        onValueChange(newValue);
-        stopEditing();
-    }, [onValueChange, stopEditing]);
-    return (_jsx(PopupParentContext.Provider, { value: wrapperRef, children: _jsx("div", { ref: wrapperRef, className: "ds-table__select-dropdown-editor", children: _jsx(SelectDropdown, { options: options, placeholder: placeholder, initialSelectedValues: initialSelectedValues, onSelectionChange: handleSelectionChange }) }) }));
-});
-SelectDropdownCellEditor.displayName = 'SelectDropdownCellEditor';
-//# sourceMappingURL=SelectDropdownCellEditor.js.map

package/dist/components/table/cellRenderers/SelectDropdownCellEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectDropdownCellEditor.js","sourceRoot":"","sources":["../../../../src/components/table/cellRenderers/SelectDropdownCellEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAE3F,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAO9D,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,CAAC,CAAC,KAA6D,EAAE,EAAE;IAC7G,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IACpD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,QAAQ,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,qBAAqB,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnF,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,QAAkB,EAAE,EAAE;QACrB,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACxD,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,WAAW,EAAE,CAAC;IAChB,CAAC,EACD,CAAC,aAAa,EAAE,WAAW,CAAC,CAC7B,CAAC;IAEF,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAC5C,cAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,kCAAkC,YAChE,KAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,qBAAqB,EAAE,qBAAqB,EAC5C,iBAAiB,EAAE,qBAAqB,GACxC,GACE,GACsB,CAC/B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAC"}