@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/sidebar/Sidebar.svelte

@@ -0,0 +1,570 @@
+<svelte:options
+  customElement={{
+    tag: 'm-sidebar',
+    props: {
+      expanded: { reflect: true, type: 'Boolean', attribute: 'expanded' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Cross24 } from '@mozaic-ds/icons-svelte';
+  import IconButton from '../iconbutton/IconButton.svelte';
+  import { MediaQuery } from 'svelte/reactivity';
+
+  /**
+   * A sidebar is a vertical navigation component that provides quick access to key sections and functionalities within an application or website. It contains expandable menus, and shortcuts, allowing users to navigate efficiently while keeping the main content area uncluttered. Sidebars can be collapsible or persistent, adapting to different screen sizes and user preferences. They are commonly used in dashboards, content management systems, and productivity tools.
+   * @slot header - Slot for the sidebar header. Should contain an `MSidebarHeader` component.
+   * @slot shortcuts - Slot for sidebar shortcuts. Should contain an `MSidebarShortcuts` component with one or more `MSidebarShortcutItem` components inside.
+   * @slot nav - Slot for the main navigation items. Should contain one or more `MSidebarNavItem` components.
+   * @slot footer - Slot for the sidebar footer. Should contain an `MSidebarFooter` component.
+   * @event update:expanded {CustomEvent<void>} - Emits when the sidebar state changes.
+   * @event close {CustomEvent<void>} - Emits when the sidebar is closed (mobile only).
+   */
+
+  interface Props {
+    /**
+     * Defines the sidebar state
+     */
+    expanded: boolean;
+    /**
+     * Callback to trigger when the sidebar state changes.
+     */
+    onexpanded?: (value: boolean) => void;
+    /**
+     * Callback to trigger when the close button is clicked (mobile only).
+     */
+    onclose?: () => void;
+  }
+
+  let { expanded = $bindable(true), onexpanded, onclose }: Props = $props();
+
+  let element: HTMLElement;
+
+  const isMobile = $derived(new MediaQuery('(max-width: 780px)').current);
+
+  function toggle() {
+    expanded = !expanded;
+  }
+
+  $effect(() => {
+    onexpanded?.(expanded);
+
+    element.dispatchEvent(
+      new CustomEvent('update:expanded', {
+        detail: expanded,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  });
+
+  function handleClose() {
+    onclose?.();
+    element.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+  }
+
+  function handleResize() {
+    if (isMobile) {
+      expanded = true;
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('toggle', toggle);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      document.removeEventListener('toggle', toggle);
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+</script>
+
+<aside
+  bind:this={element}
+  class={['mc-sidebar', `mc-sidebar--${expanded ? 'expanded' : 'collapsed'}`]}
+>
+  <div class="mc-sidebar__wrapper">
+    <slot name="header" />
+
+    <slot name="shortcuts" />
+
+    <section class="mc-sidebar__container">
+      <nav class="mc-sidebar__menu" aria-label="navigation items">
+        <ul class="mc-sidebar__list">
+          <slot name="nav" />
+        </ul>
+      </nav>
+    </section>
+
+    <slot name="footer" />
+  </div>
+
+  <span class="mc-sidebar__close-button">
+    <IconButton ghost aria-label="Sidebar close button" onclick={handleClose}>
+      <Cross24 slot="icon" />
+    </IconButton>
+  </span>
+</aside>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-sidebar {
+  display: flex;
+  align-items: start;
+  font-size: var(--font-size-100, 0.875rem);
+  color: var(--sidebar-color-text-default, #404040);
+  box-sizing: border-box;
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  padding-right: 4rem;
+  position: relative;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar {
+    display: inline-flex;
+    padding-right: 0;
+  }
+}
+.mc-sidebar__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 100vh;
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--sidebar-color-background-primary, #ffffff);
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__wrapper {
+    width: 17.25rem;
+  }
+}
+.mc-sidebar__close-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__close-button {
+    display: none;
+  }
+}
+.mc-sidebar__container {
+  flex-grow: 1;
+}
+.mc-sidebar__floating-item {
+  position: absolute;
+  padding-left: 1.25rem;
+  left: 3rem;
+}
+.mc-sidebar__floating-item--tooltip {
+  top: 0.25rem;
+}
+.mc-sidebar__floating-item--expanded {
+  left: 0;
+  padding: 0;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__floating-item--expanded {
+    left: 18.5rem;
+  }
+}
+.mc-sidebar__floating-item--hidden {
+  visibility: hidden;
+  overflow: hidden;
+  opacity: 0;
+  height: 0;
+  pointer-events: none;
+}
+.mc-sidebar--expanded .mc-sidebar__menu {
+  padding: 0 0.25rem;
+}
+.mc-sidebar--collapsed {
+  width: 4rem;
+}
+.mc-sidebar--collapsed .mc-sidebar__menu {
+  padding: 0;
+}
+
+.mc-sidebar__footer-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.mc-sidebar__footer-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--border-radius-full, 100%);
+}
+.mc-sidebar__footer-profile {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.5rem;
+  flex-grow: 1;
+  border-radius: var(--border-radius-s, 0.25rem);
+  background-color: var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));
+  cursor: pointer;
+  border: none;
+}
+.mc-sidebar__footer-profile:hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__footer-content {
+  display: none;
+}
+.mc-sidebar__footer-title {
+  margin: 0;
+  text-align: left;
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  font-weight: var(--font-weight-bold, 700);
+}
+.mc-sidebar__footer-subtitle {
+  margin: 0;
+  font-size: var(--font-caption, 0.75rem);
+  color: var(--sidebar-color-job-title, #666666);
+}
+.mc-sidebar__footer-expand {
+  display: none;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  transform: none;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-expand {
+    display: inline-flex;
+  }
+}
+.mc-sidebar__footer-expand--mobile {
+  position: relative;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-expand--mobile {
+    display: none;
+  }
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-container {
+  flex-direction: row;
+  justify-content: flex-end;
+  height: 3.5rem;
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-content {
+  display: block;
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-expand {
+  transform: rotate(180deg);
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-container {
+  flex-direction: column;
+  justify-content: flex-start;
+  height: auto;
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-content {
+  display: none;
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand {
+  transform: none;
+}
+.mc-sidebar__footer-menu {
+  width: 19.75rem;
+  box-sizing: border-box;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--listbox-color-background, #ffffff);
+  border: 1px solid var(--listbox-color-border, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-menu {
+    width: 18.75rem;
+  }
+}
+.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider {
+  margin: 0.5rem 0.75rem;
+}
+
+.mc-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-sidebar__header-logo {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.mc-sidebar__header-title {
+  font-size: var(--font-size-200, 1.125rem);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--sidebar-color-product-name, #000000);
+  margin: 0;
+  flex-grow: 1;
+  display: none;
+}
+.mc-sidebar__header--expanded .mc-sidebar__header-title {
+  display: block;
+}
+.mc-sidebar__header--collapsed .mc-sidebar__header-title {
+  display: none;
+}
+
+.mc-sidebar__listbox {
+  min-width: 18.75rem;
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--listbox-color-background, #ffffff);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+}
+.mc-sidebar__listbox-title {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding-bottom: 0.75rem;
+  margin: 0;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+  color: var(--sidebar-color-shortcut-item-text-default, #404040);
+}
+
+.mc-sidebar__list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mc-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  width: 100%;
+  padding-left: 0.25rem;
+  text-align: left;
+  text-decoration: none;
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.mc-sidebar__link--selected {
+  color: var(--sidebar-color-section-item-text-selected, #006902);
+  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
+}
+.mc-sidebar__link--locked {
+  pointer-events: none;
+}
+.mc-sidebar__link:not(.mc-sidebar__link--selected):hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__link-expand:open .mc-sidebar__sub {
+  transform: rotate(180deg);
+}
+.mc-sidebar__link:is(summary) .mc-sidebar__text {
+  flex-grow: 1;
+}
+
+.mc-sidebar__icon {
+  fill: currentcolor;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.mc-sidebar__indicator {
+  fill: currentcolor;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mc-sidebar__text {
+  display: block;
+}
+
+.mc-sidebar__sub {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mc-sidebar__sublist {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0 0 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mc-sidebar__item {
+  position: relative;
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.25rem;
+  padding-left: 0.5rem;
+  margin-bottom: 0.125rem;
+  height: 2rem;
+  text-decoration: none;
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text {
+  display: block;
+  font-size: var(--font-body-s, 0.875rem);
+  font-weight: var(--font-weight-regular, 400);
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected {
+  color: var(--sidebar-color-section-item-text-selected, #006902);
+  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__item--collapsed .mc-sidebar__text, .mc-sidebar__item--collapsed .mc-sidebar__sub, .mc-sidebar__item--collapsed .mc-sidebar__sublist {
+  display: none;
+}
+.mc-sidebar__item--collapsed .mc-sidebar__link {
+  padding-left: 0;
+  justify-content: center;
+}
+
+.mc-sidebar__shortcut-wrapper {
+  width: 100%;
+  display: grid;
+  justify-content: center;
+  position: relative;
+}
+
+.mc-sidebar__shortcut-list {
+  display: flex;
+  margin: 0;
+}
+.mc-sidebar__shortcut-list--grid {
+  padding: 0;
+  gap: 0.5rem;
+  align-items: center;
+}
+.mc-sidebar__shortcut-list--stacked {
+  gap: 0.25rem;
+  flex-direction: column;
+  padding: 0;
+}
+.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating) {
+  padding: 0 0 0.5rem 1rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+}
+
+.mc-sidebar__shortcut-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  list-style: none;
+  border-radius: var(--border-radius-m, 0.5rem);
+  overflow: hidden;
+}
+.mc-sidebar__shortcut-item:hover {
+  background-color: var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));
+}
+.mc-sidebar__shortcut-item:nth-child(n+5) {
+  display: none;
+}
+.mc-sidebar__shortcut-item--grid {
+  justify-content: center;
+  padding: 0 0.125rem;
+  height: 3rem;
+  width: 3.9375rem;
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link {
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.mc-sidebar__shortcut-item--stacked {
+  padding: 0.125rem 0.25rem;
+  width: 12.5rem;
+  height: 2.5rem;
+}
+.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating {
+  width: 100%;
+  padding: 0.125rem 0 0.125rem 0.25rem;
+}
+.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label {
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-body-m, 1rem);
+}
+.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link {
+  gap: 0.25rem;
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item {
+  background-color: var(--sidebar-color-shortcut-item-background-selected, #ebf5de);
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label {
+  color: var(--sidebar-color-shortcut-item-text-selected, #006902);
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon {
+  fill: var(--sidebar-color-shortcut-item-text-selected, #006902);
+}
+.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger) {
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+  border: none;
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover {
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+
+.mc-sidebar__shortcut-link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__shortcut-link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mc-sidebar__shortcut-label {
+  font-size: var(--font-size-25, 0.625rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--sidebar-color-shortcut-item-text-default, #404040);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.mc-sidebar__shortcut-icon {
+  fill: var(--sidebar-color-shortcut-item-text-default, #404040);
+  width: 1.5rem;
+  height: 1.5rem;
+}</style>

package/dist/components/sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A sidebar is a vertical navigation component that provides quick access to key sections and functionalities within an application or website. It contains expandable menus, and shortcuts, allowing users to navigate efficiently while keeping the main content area uncluttered. Sidebars can be collapsible or persistent, adapting to different screen sizes and user preferences. They are commonly used in dashboards, content management systems, and productivity tools.
+ * @slot header - Slot for the sidebar header. Should contain an `MSidebarHeader` component.
+ * @slot shortcuts - Slot for sidebar shortcuts. Should contain an `MSidebarShortcuts` component with one or more `MSidebarShortcutItem` components inside.
+ * @slot nav - Slot for the main navigation items. Should contain one or more `MSidebarNavItem` components.
+ * @slot footer - Slot for the sidebar footer. Should contain an `MSidebarFooter` component.
+ * @event update:expanded {CustomEvent<void>} - Emits when the sidebar state changes.
+ * @event close {CustomEvent<void>} - Emits when the sidebar is closed (mobile only).
+ */
+interface Props {
+    /**
+     * Defines the sidebar state
+     */
+    expanded: boolean;
+    /**
+     * Callback to trigger when the sidebar state changes.
+     */
+    onexpanded?: (value: boolean) => void;
+    /**
+     * Callback to trigger when the close button is clicked (mobile only).
+     */
+    onclose?: () => void;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    shortcuts: {};
+    nav: {};
+    footer: {};
+}, {}, "expanded">;
+type Sidebar = InstanceType<typeof Sidebar>;
+export default Sidebar;
+//# sourceMappingURL=Sidebar.svelte.d.ts.map

package/dist/components/sidebar/Sidebar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/Sidebar.svelte.ts"],"names":[],"mappings":"AASE;;;;;;;;GAQG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAuFH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,OAAO;;;;;;;kBAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}