@getmicdrop/svelte-components 2.2.0 → 2.4.0

package/dist/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,116 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  /** @type {boolean} Whether the checkbox is checked */
+  export let checked = false;
+  /** @type {string} The value attribute */
+  export let value = "";
+  /** @type {string} Name attribute for form submission */
+  export let name = "";
+  /** @type {boolean} Whether the checkbox is disabled */
+  export let disabled = false;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    dispatch("change", { checked, value });
+  }
+</script>
+
+<label class="checkbox {className}" class:checkbox--disabled={disabled}>
+  <input
+    type="checkbox"
+    {name}
+    {value}
+    {disabled}
+    bind:checked
+    on:change={handleChange}
+    class="checkbox__input"
+  />
+  <span class="checkbox__box">
+    <svg class="checkbox__check" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 5L4.5 8.5L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </span>
+  {#if $$slots.default}
+    <span class="checkbox__label">
+      <slot />
+    </span>
+  {/if}
+</label>
+
+<style>
+  .checkbox {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+
+  .checkbox--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .checkbox__box {
+    flex-shrink: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 2px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.25rem;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    margin-top: 0.1875rem; /* Align with text baseline */
+  }
+
+  .checkbox__check {
+    width: 0.75rem;
+    height: 0.75rem;
+    color: white;
+    opacity: 0;
+    transform: scale(0.5);
+    transition: all 0.15s ease;
+  }
+
+  .checkbox__input:checked + .checkbox__box {
+    background-color: hsl(var(--Brand-Primary, 221 83% 53%));
+    border-color: hsl(var(--Brand-Primary, 221 83% 53%));
+  }
+
+  .checkbox__input:checked + .checkbox__box .checkbox__check {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .checkbox__input:focus-visible + .checkbox__box {
+    outline: 2px solid hsl(var(--Brand-Primary, 221 83% 53%));
+    outline-offset: 2px;
+  }
+
+  .checkbox__input:disabled + .checkbox__box {
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .checkbox__label {
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+</style>

package/dist/components/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,52 @@
+export default Checkbox;
+type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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;
+}
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/components/Checkbox/Checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiEA;;;;;;;;;;;;;;eAAyK;sCATnI,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,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,WAAW,OAAO,SAAS,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,eAAe,QAAQ,CAAC"}

package/dist/components/Drawer/Drawer.svelte

@@ -0,0 +1,207 @@
+<script>
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import { fly, fade } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+
+  /** @type {boolean} Whether the drawer is visible */
+  export let show = false;
+  /** @type {boolean} Flowbite-style hidden prop (inverse of show) */
+  export let hidden = true;
+  /** @type {string} Optional title for the drawer header */
+  export let title = "";
+  /** @type {'left' | 'right' | 'top' | 'bottom'} Which side the drawer slides from */
+  export let placement = "left";
+  /** @type {string} Width of the drawer (for left/right placement) */
+  export let width = "320px";
+  /** @type {string} Height of the drawer (for top/bottom placement) */
+  export let height = "auto";
+  /** @type {number} Transition duration in ms */
+  export let duration = 200;
+  /** @type {boolean} Whether clicking the backdrop closes the drawer */
+  export let closeOnBackdropClick = true;
+  /** @type {boolean} Whether pressing Escape closes the drawer */
+  export let closeOnEscape = true;
+  /** @type {string} Optional id for the drawer element */
+  export let id = "";
+  /** @type {object|undefined} Custom transition params (flowbite API) */
+  export let transitionParams = undefined;
+
+  const dispatch = createEventDispatcher();
+
+  // Support both show and hidden props (flowbite uses hidden)
+  $: isVisible = show || !hidden;
+
+  function close() {
+    hidden = true;
+    show = false;
+    dispatch("close");
+  }
+
+  function handleBackdropClick(e) {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e) {
+    if (closeOnEscape && e.key === "Escape" && isVisible) {
+      close();
+    }
+  }
+
+  // Calculate transition params based on placement (use custom if provided)
+  $: computedTransitionParams = transitionParams || (() => {
+    switch (placement) {
+      case "left":
+        return { x: -320, duration, easing: cubicOut };
+      case "right":
+        return { x: 320, duration, easing: cubicOut };
+      case "top":
+        return { y: -320, duration, easing: cubicOut };
+      case "bottom":
+        return { y: 320, duration, easing: cubicOut };
+      default:
+        return { x: -320, duration, easing: cubicOut };
+    }
+  })();
+
+  // Lock body scroll when drawer is open
+  $: if (typeof document !== "undefined") {
+    if (isVisible) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  }
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if isVisible}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="drawer-backdrop"
+    on:click={handleBackdropClick}
+    transition:fade={{ duration: 150 }}
+  >
+    <div
+      {id}
+      class="drawer drawer--{placement}"
+      style="--drawer-width: {width}; --drawer-height: {height};"
+      on:click|stopPropagation
+      transition:fly={computedTransitionParams}
+    >
+      <!-- Optional header with title -->
+      {#if title || $$slots.header}
+        <div class="drawer__header">
+          {#if $$slots.header}
+            <slot name="header" />
+          {:else}
+            <h3 class="drawer__title">{title}</h3>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Content slot -->
+      <div class="drawer__content">
+        <slot />
+      </div>
+
+      <!-- Actions slot (optional) -->
+      {#if $$slots.actions}
+        <div class="drawer__actions">
+          <slot name="actions" />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: var(--z-modal, 50);
+    display: flex;
+    touch-action: none;
+  }
+
+  .drawer {
+    position: absolute;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Placement variants */
+  .drawer--left {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--drawer-width, 320px);
+    max-width: 100vw;
+  }
+
+  .drawer--right {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--drawer-width, 320px);
+    max-width: 100vw;
+  }
+
+  .drawer--top {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--drawer-height, auto);
+    max-height: 100vh;
+  }
+
+  .drawer--bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--drawer-height, auto);
+    max-height: 100vh;
+  }
+
+  .drawer__header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    flex-shrink: 0;
+  }
+
+  .drawer__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    margin: 0;
+  }
+
+  .drawer__content {
+    flex: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .drawer__actions {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+</style>

package/dist/components/Drawer/Drawer.svelte.d.ts

@@ -0,0 +1,74 @@
+export default Drawer;
+type Drawer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    duration?: number | undefined;
+    title?: string | undefined;
+    show?: boolean | undefined;
+    hidden?: boolean | undefined;
+    placement?: "left" | "right" | "top" | "bottom" | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    closeOnBackdropClick?: boolean | undefined;
+    closeOnEscape?: boolean | undefined;
+    id?: string | undefined;
+    transitionParams?: object | undefined;
+}, {
+    header: {};
+    default: {};
+    actions: {};
+}>, {
+    click: PointerEvent;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    actions: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    duration?: number | undefined;
+    title?: string | undefined;
+    show?: boolean | undefined;
+    hidden?: boolean | undefined;
+    placement?: "left" | "right" | "top" | "bottom" | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    closeOnBackdropClick?: boolean | undefined;
+    closeOnEscape?: boolean | undefined;
+    id?: string | undefined;
+    transitionParams?: object | undefined;
+}, {
+    header: {};
+    default: {};
+    actions: {};
+}>, {
+    click: PointerEvent;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    actions: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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;
+}
+//# sourceMappingURL=Drawer.svelte.d.ts.map

package/dist/components/Drawer/Drawer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Drawer/Drawer.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJA;;;;;;;;;;;uBAfW,MAAM,GAAC,SAAS;;;;;;;;;;;;;;eAe+N;sCATpN,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,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,WAAW,OAAO,SAAS,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,eAAe,QAAQ,CAAC"}

package/dist/components/Dropdown/Dropdown.svelte

@@ -0,0 +1,129 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+
+  /** @type {boolean} Whether the dropdown is open */
+  export let open = false;
+  /** @type {string} Current active URL for highlighting (flowbite API) */
+  export let activeUrl = "";
+  /** @type {'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top'} Placement */
+  export let placement = "bottom-start";
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  let dropdownRef;
+
+  function handleClickOutside(event) {
+    if (dropdownRef && !dropdownRef.contains(event.target)) {
+      // Check if click was on the trigger button (previous sibling)
+      const parent = dropdownRef.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children);
+        const dropdownIndex = siblings.indexOf(dropdownRef);
+        if (dropdownIndex > 0) {
+          const trigger = siblings[dropdownIndex - 1];
+          if (trigger.contains(event.target)) {
+            return; // Let the trigger handle toggling
+          }
+        }
+      }
+      open = false;
+    }
+  }
+
+  function handleKeydown(event) {
+    if (event.key === "Escape" && open) {
+      open = false;
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    document.addEventListener("keydown", handleKeydown);
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("click", handleClickOutside, true);
+      document.removeEventListener("keydown", handleKeydown);
+    }
+  });
+
+  // Provide context for DropdownItem
+  import { setContext } from "svelte";
+  setContext("dropdown", {
+    activeUrl,
+    close: () => { open = false; }
+  });
+</script>
+
+{#if open}
+  <div
+    bind:this={dropdownRef}
+    class="dropdown dropdown--{placement} {className}"
+    role="menu"
+    {...$$restProps}
+  >
+    <slot />
+  </div>
+{/if}
+
+<style>
+  .dropdown {
+    position: absolute;
+    z-index: 50;
+    min-width: 10rem;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    padding: 0.25rem 0;
+    margin-top: 0.25rem;
+  }
+
+  .dropdown--bottom-start {
+    top: 100%;
+    left: 0;
+  }
+
+  .dropdown--bottom-end {
+    top: 100%;
+    right: 0;
+  }
+
+  .dropdown--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .dropdown--top-start {
+    bottom: 100%;
+    left: 0;
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  .dropdown--top-end {
+    bottom: 100%;
+    right: 0;
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  .dropdown--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  /* Dark mode */
+  :global(.dark) .dropdown {
+    background-color: hsl(var(--BG-Primary, 220 13% 15%));
+    border-color: hsl(var(--Stroke-Primary, 220 13% 30%));
+  }
+</style>

package/dist/components/Dropdown/Dropdown.svelte.d.ts

@@ -0,0 +1,48 @@
+export default Dropdown;
+type Dropdown = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    open?: boolean | undefined;
+    placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+    activeUrl?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Dropdown: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    open?: boolean | undefined;
+    placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+    activeUrl?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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;
+}
+//# sourceMappingURL=Dropdown.svelte.d.ts.map

package/dist/components/Dropdown/Dropdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgGA;;;;;;;;;;;;eAA6K;sCATvI,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,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,WAAW,OAAO,SAAS,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,eAAe,QAAQ,CAAC"}