@getmicdrop/svelte-components 2.2.0 → 2.4.0

package/dist/components/Input/Textarea.svelte

@@ -0,0 +1,160 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  // API compatible with flowbite-svelte Textarea
+  export let value = "";
+  export let placeholder = "";
+  export let rows = 4;
+  export let disabled = false;
+  export let required = false;
+  export let readonly = false;
+  export let id = "";
+  export let name = "";
+  export let label = "";
+  export let error = "";
+  export let maxlength = null;
+  export let minlength = null;
+
+  // Additional props
+  let className = "";
+  export { className as class };
+
+  function handleInput(event) {
+    value = event.target.value;
+    dispatch("input", { value });
+  }
+
+  function handleChange(event) {
+    dispatch("change", { value: event.target.value });
+  }
+
+  function handleBlur(event) {
+    dispatch("blur", event);
+  }
+
+  function handleFocus(event) {
+    dispatch("focus", event);
+  }
+</script>
+
+<div class="textarea-wrapper">
+  {#if label}
+    <label for={id || name} class="textarea-label">
+      {label}{#if required}<span class="textarea-required">*</span>{/if}
+    </label>
+  {/if}
+
+  <textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {minlength}
+    class="textarea-field {error ? 'textarea-error' : ''} {className}"
+    bind:value
+    on:input={handleInput}
+    on:change={handleChange}
+    on:blur={handleBlur}
+    on:focus={handleFocus}
+    on:keydown
+    on:keyup
+    on:keypress
+    aria-required={required}
+    aria-invalid={!!error}
+    {...$$restProps}
+  ></textarea>
+
+  {#if error}
+    <p class="textarea-error-text">{error}</p>
+  {/if}
+</div>
+
+<style>
+  .textarea-wrapper {
+    --textarea-bg: #f9fafb;
+    --textarea-text: #0d1526;
+    --textarea-text-placeholder: #6b7280;
+    --textarea-border: #e5e7eb;
+    --textarea-border-error: #ff6666;
+    --textarea-focus-ring: #3b82f6;
+    --textarea-label-text: #0d1526;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .textarea-label {
+    color: var(--textarea-label-text);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .textarea-required {
+    color: var(--textarea-border-error);
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin-left: 0.125rem;
+  }
+
+  .textarea-field {
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    background-color: var(--textarea-bg);
+    color: var(--textarea-text);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border: 1px solid var(--textarea-border);
+    border-radius: 0.5rem;
+    resize: vertical;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .textarea-field:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--textarea-focus-ring);
+    border-color: var(--textarea-focus-ring);
+  }
+
+  .textarea-field:hover:not(:focus):not(:disabled) {
+    border-color: var(--textarea-focus-ring);
+  }
+
+  .textarea-field:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .textarea-field::-moz-placeholder {
+    color: var(--textarea-text-placeholder);
+  }
+
+  .textarea-field::placeholder {
+    color: var(--textarea-text-placeholder);
+  }
+
+  .textarea-field.textarea-error {
+    border-color: var(--textarea-border-error);
+  }
+
+  .textarea-error-text {
+    margin: 0;
+    color: var(--textarea-border-error);
+    font-size: 0.875rem;
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .textarea-wrapper {
+    --textarea-bg: #111827;
+    --textarea-text: #f7f7f8;
+    --textarea-text-placeholder: #9ca3af;
+    --textarea-border: #374151;
+    --textarea-label-text: #f7f7f8;
+  }
+</style>

package/dist/components/Input/Textarea.svelte.d.ts

@@ -0,0 +1,69 @@
+export default Textarea;
+type Textarea = SvelteComponent<{
+    [x: string]: any;
+    class?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | undefined;
+    readonly?: boolean | undefined;
+    rows?: number | undefined;
+}, {
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    focus: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    class?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | undefined;
+    readonly?: boolean | undefined;
+    rows?: number | undefined;
+}, {
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    focus: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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=Textarea.svelte.d.ts.map

package/dist/components/Input/Textarea.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;;;;;;;;;;;;;;;;;;;;;;;;;mBAA0P;6CAT7M,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/Label/Label.svelte

@@ -0,0 +1,60 @@
+<script>
+  // API compatible with flowbite-svelte Label
+  export let color = "gray";
+  export let defaultClass = "text-sm rtl:text-right font-medium block";
+  export let show = true;
+
+  // Additional props for convenience
+  let className = "";
+  export { className as class };
+
+  const colorClasses = {
+    gray: "label-gray",
+    green: "label-green",
+    red: "label-red",
+    disabled: "label-disabled"
+  };
+
+  $: labelClass = `label-wrapper ${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`;
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label {...$$restProps} class={labelClass}><slot /></label>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  .label-wrapper {
+    --label-text-gray: #111827;
+    --label-text-green: #047857;
+    --label-text-red: #dc2626;
+    --label-text-disabled: #9ca3af;
+  }
+
+  .label-gray {
+    color: var(--label-text-gray);
+  }
+
+  .label-green {
+    color: var(--label-text-green);
+  }
+
+  .label-red {
+    color: var(--label-text-red);
+  }
+
+  .label-disabled {
+    color: var(--label-text-disabled);
+    filter: grayscale(1) contrast(0.5);
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .label-wrapper {
+    --label-text-gray: #d1d5db;
+    --label-text-green: #34d399;
+    --label-text-red: #f87171;
+    --label-text-disabled: #6b7280;
+  }
+</style>

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

@@ -0,0 +1,48 @@
+export default Label;
+type Label = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    color?: string | undefined;
+    show?: boolean | undefined;
+    defaultClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Label: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    color?: string | undefined;
+    show?: boolean | undefined;
+    defaultClass?: 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=Label.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Label/Label.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgDA;;;;;;;;;;;;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/Layout/Header.svelte

@@ -79,7 +79,7 @@
           class="avatar-button"
           on:click={() => showDesktopDropdown = !showDesktopDropdown}
         >
-          <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+          <Avatar src={avatar} rounded size="md" />
         </button>
 
         {#if showDesktopDropdown}
@@ -137,7 +137,7 @@
     <div class="header-avatar-wrapper">
       <!-- Mobile: triggers bottom sheet -->
       <button class="avatar-button avatar-button--mobile" on:click={() => showMobileSheet = true}>
-        <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+        <Avatar src={avatar} rounded size="md" />
       </button>
 
       <!-- Desktop: triggers dropdown -->
@@ -145,7 +145,7 @@
         class="avatar-button avatar-button--desktop"
         on:click={() => showDesktopDropdown = !showDesktopDropdown}
       >
-        <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+        <Avatar src={avatar} rounded size="md" />
       </button>
 
       <!-- Desktop dropdown -->
@@ -294,13 +294,23 @@
     margin-left: 0.25rem;
   }
 
+  /* Fix avatar image aspect ratio and border radius */
+  :global(.avatar-button img) {
+    -o-object-fit: cover !important;
+       object-fit: cover !important;
+    aspect-ratio: 1 / 1 !important;
+    border-radius: 0.5rem !important;
+  }
+
   .avatar-button {
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
-    border-radius: 9999px;
+    border-radius: 0.5rem;
     transition: opacity 0.15s;
+    min-width: 40px;
+    min-height: 40px;
   }
 
   .avatar-button:hover {

package/dist/components/Modal/ConfirmationModal.svelte

@@ -5,21 +5,68 @@
   import Modal from "./Modal.svelte";
 
   export let show = false;
+  export let size = "default"; // "small" | "default" | "large"
   export let title = "";
   export let description = "";
   export let warningText = "";
   export let actions = [];
   export let icon = null;
+  export let customIcon = null; // Alias for icon (used by some wrappers)
   export let closeBtn = false; // To show close button
 
+  // Simple props-based API (alternative to actions array)
+  export let primaryButtonText = "";
+  export let secondaryButtonText = "";
+  export let variant = "default"; // "default" | "danger"
+
+  // Loading/disabled state
+  export let loading = false;
+  export let disabled = false;
+
   const dispatch = createEventDispatcher();
 
+  // Resolve icon (support both prop names)
+  $: resolvedIcon = customIcon || icon;
+
+  // Build actions from simple props if actions array is empty
+  $: resolvedActions = actions.length > 0 ? actions : buildActionsFromProps();
+
+  function buildActionsFromProps() {
+    const result = [];
+
+    if (secondaryButtonText) {
+      result.push({
+        label: secondaryButtonText,
+        variant: "gray-outline",
+        onClick: () => dispatch("cancel")
+      });
+    }
+
+    if (primaryButtonText) {
+      result.push({
+        label: primaryButtonText,
+        variant: variant === "danger" ? "red-solid" : "blue-solid",
+        onClick: () => dispatch("confirm"),
+        primary: true
+      });
+    }
+
+    return result;
+  }
+
   const handleAction = (action) => {
-    action.onClick();
+    if (disabled || loading) return;
+    action.onClick?.();
     dispatch(action.label.toLowerCase());
     show = false;
   };
 
+  const handleClose = () => {
+    if (disabled || loading) return;
+    dispatch("close");
+    show = false;
+  };
+
   const getVariant = (action) => {
     // If variant is already specified, use it
     if (action.variant) return action.variant;
@@ -48,54 +95,59 @@
       onClick,
       beforeIcon,
       afterIcon,
+      primary,
       ...rest
     } = action;
     return rest;
   };
 </script>
 
-<Modal bind:show>
-  <div slot="header" class="flex flex-col gap-6 text-center">
+<Modal bind:show {size}>
+  <div slot="header" class="text-center">
     {#if closeBtn}
-      <div class="flex justify-end">
-        <button class="focus:outline-none" on:click={() => (show = false)}>
-          <img src={Cancel} alt="Close Icon" />
+      <div class="flex justify-end -mt-2 -mr-2 mb-2">
+        <button
+          class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+          on:click={handleClose}
+          {disabled}
+        >
+          <img src={Cancel} alt="Close" class="w-5 h-5" />
         </button>
       </div>
     {/if}
-    {#if icon}
-      <div class="flex justify-center items-center">
-        <img src={icon} alt="Icon here" />
+    {#if resolvedIcon}
+      <div class="flex justify-center mb-4">
+        <img src={resolvedIcon} alt="" class="w-12 h-12" />
       </div>
     {/if}
     {#if title}
-      <h2 class="text-xl text-Text-Primary leading-5 font-normal">{title}</h2>
+      <h2 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
     {/if}
   </div>
 
-  <div slot="body" class="flex flex-col gap-6 text-center mt-6">
+  <div slot="body" class="text-center mt-4">
     {#if description}
-      <p class="text-Text-Tartiary text-sm leading-[22px] font-normal">
+      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
         {description}
       </p>
     {/if}
     {#if warningText}
-      <p
-        class="text-accent-Danger text-center text-sm leading-[22px] font-bold"
-      >
+      <p class="mt-3 text-sm font-medium text-red-600 dark:text-red-400">
         {warningText}
       </p>
     {/if}
   </div>
 
-  <div slot="footer" class="flex justify-around gap-3 mt-6">
-    {#each actions as action}
+  <div slot="footer" class="flex gap-3">
+    {#each resolvedActions as action}
       <Button
         size="full"
         variant={getVariant(action)}
         {...cleanActionProps(action)}
         beforeIcon={action.beforeIcon}
         afterIcon={action.afterIcon}
+        disabled={disabled || action.disabled}
+        loading={action.primary && loading}
         on:click={() => handleAction(action)}
       >
         {action.label}

package/dist/components/Modal/ConfirmationModal.svelte.d.ts

@@ -1,26 +1,48 @@
 export default ConfirmationModal;
 type ConfirmationModal = SvelteComponent<{
     title?: string | undefined;
+    size?: string | undefined;
+    variant?: string | undefined;
     actions?: any[] | undefined;
     show?: boolean | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
     icon?: null | undefined;
     description?: string | undefined;
     warningText?: string | undefined;
+    customIcon?: null | undefined;
     closeBtn?: boolean | undefined;
+    primaryButtonText?: string | undefined;
+    secondaryButtonText?: string | undefined;
 }, {
+    cancel: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
 declare const ConfirmationModal: $$__sveltets_2_IsomorphicComponent<{
     title?: string | undefined;
+    size?: string | undefined;
+    variant?: string | undefined;
     actions?: any[] | undefined;
     show?: boolean | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
     icon?: null | undefined;
     description?: string | undefined;
     warningText?: string | undefined;
+    customIcon?: null | undefined;
     closeBtn?: boolean | undefined;
+    primaryButtonText?: string | undefined;
+    secondaryButtonText?: string | undefined;
 }, {
+    cancel: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 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> {

package/dist/components/Modal/ConfirmationModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAoHA;;;;;;;;;;mBAAuM;6CAT1J,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"}
+{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoKA;;;;;;;;;;;;;;;;;;;;;mBAAoS;6CATvP,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"}