@getmicdrop/svelte-components 5.1.2 → 5.2.1

package/dist/primitives/Input/Input.svelte

@@ -1,57 +1,115 @@
 <script>
+  /**
+   * Input Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   */
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
-  import { createEventDispatcher, onDestroy } from "svelte";
+  import { onDestroy } from "svelte";
   import { EyeOutline, EyeSlashOutline, CloseCircleOutline, ExclamationCircleOutline } from "../Icons";
 
-  export let required = false;
-  export let disabled = false;
-  export let optional = false;
-  export let icon = null;
-  export let buttonIcon = null;
-  export let buttonText = null;
-  export let maxlength = null;
-  export let minlength = null;
-  export let type = "text";
-  export let placeholder = "";
-  export let label = "";
-  export let id = "";
-  export let name = "";
-  export let className = "";
-  /** @type {'sm' | 'md' | 'lg'} */
-  export let size = "md";
-  export let textareaSize = "";
-  export let errorText = "";
-  export let helperText = "";
-  export let helperIcon = "";
-  export let hintText = "";
-  export let hintIcon = "";
-  export let contentFloat = "left";
-  export let readonly = false;
-  export let controlled = false;
-  export let onButtonClick = null;
-  export let value = "";
-  export let autocomplete = null;
-  export let autofocus = false;
-  export let showPasswordToggle = true;
-  export let animateFocus = true;
-  export let statusText = "";
-  export let statusType = "";
-  export let buttonDisabled = false;
-  export let inputmode = null;
-  export let showErrors = false;
-  export let disableBuiltInValidation = false;
-  export let instantSearch = false;
-  export let debounceMs = 250;
-  export let minSearchChars = 2;
-  export let showClearButton = false;
-
-  let inputValue = value;
-  let inputElement;
+  /** @type {{
+    required?: boolean,
+    disabled?: boolean,
+    optional?: boolean,
+    icon?: string | null,
+    buttonIcon?: string | null,
+    buttonText?: string | null,
+    maxlength?: number | null,
+    minlength?: number | null,
+    type?: string,
+    placeholder?: string,
+    label?: string,
+    id?: string,
+    name?: string,
+    className?: string,
+    size?: 'sm' | 'md' | 'lg',
+    textareaSize?: string,
+    errorText?: string,
+    helperText?: string,
+    helperIcon?: string,
+    hintText?: string,
+    hintIcon?: string,
+    contentFloat?: string,
+    readonly?: boolean,
+    controlled?: boolean,
+    onButtonClick?: ((value: string) => void) | null,
+    value?: string,
+    autocomplete?: string | null,
+    autofocus?: boolean,
+    showPasswordToggle?: boolean,
+    animateFocus?: boolean,
+    statusText?: string,
+    statusType?: string,
+    buttonDisabled?: boolean,
+    inputmode?: string | null,
+    showErrors?: boolean,
+    disableBuiltInValidation?: boolean,
+    instantSearch?: boolean,
+    debounceMs?: number,
+    minSearchChars?: number,
+    showClearButton?: boolean,
+    onsearch?: (detail: { query: string }) => void,
+    onfocus?: () => void,
+    onblur?: () => void,
+    oninputchange?: (value: string) => void,
+    leftIcon?: any,
+    [key: string]: any
+  }} */
+  let {
+    required = false,
+    disabled = false,
+    optional = false,
+    icon = null,
+    buttonIcon = null,
+    buttonText = null,
+    maxlength = null,
+    minlength = null,
+    type = "text",
+    placeholder = "",
+    label = "",
+    id = "",
+    name = "",
+    className = "",
+    size = "md",
+    textareaSize = "",
+    errorText = "",
+    helperText = "",
+    helperIcon = "",
+    hintText = "",
+    hintIcon = "",
+    contentFloat = "left",
+    readonly = false,
+    controlled = false,
+    onButtonClick = null,
+    value = $bindable(""),
+    autocomplete = null,
+    autofocus = false,
+    showPasswordToggle = true,
+    animateFocus = true,
+    statusText = "",
+    statusType = "",
+    buttonDisabled = false,
+    inputmode = null,
+    showErrors = false,
+    disableBuiltInValidation = false,
+    instantSearch = false,
+    debounceMs = 250,
+    minSearchChars = 2,
+    showClearButton = false,
+    onsearch,
+    onfocus,
+    onblur,
+    oninputchange,
+    leftIcon,
+    ...restProps
+  } = $props();
+
+  let inputValue = $state(value);
+  let inputElement = $state(null);
   let debounceTimer;
-  const dispatch = createEventDispatcher();
 
-  $: computedInputmode = inputmode || getInputmodeFromType(type);
+  let computedInputmode = $derived(inputmode || getInputmodeFromType(type));
 
   function getInputmodeFromType(inputType) {
     switch (inputType) {
@@ -65,9 +123,11 @@
     }
   }
 
-  $: if (value !== inputValue) {
-    inputValue = value;
-  }
+  $effect(() => {
+    if (value !== inputValue) {
+      inputValue = value;
+    }
+  });
 
   function checkForAutofill() {
     if (inputElement && inputElement.value !== inputValue) {
@@ -76,21 +136,20 @@
     }
   }
 
-  let touched = false;
-  let displayErrorText = "";
-  let isPasswordVisible = false;
+  let touched = $state(false);
+  let displayErrorText = $state("");
+  let isPasswordVisible = $state(false);
 
-  $: inputType = showPasswordToggle && isPasswordVisible ? "text" : type;
-  $: shouldAnimate = animateFocus && !disabled && !readonly;
+  let inputType = $derived(showPasswordToggle && isPasswordVisible ? "text" : type);
+  let shouldAnimate = $derived(animateFocus && !disabled && !readonly);
 
-  // Size classes matching Flowbite
   const sizeClasses = {
     sm: "py-2 px-3 text-sm h-9",
     md: "py-2.5 px-4 text-sm h-10",
     lg: "py-3 px-4 text-base h-12"
   };
 
-  $: sizeClass = sizeClasses[size] || sizeClasses.md;
+  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
 
   const togglePasswordVisibility = () => {
     isPasswordVisible = !isPasswordVisible;
@@ -156,15 +215,18 @@
 
     value = inputValue;
 
+    // Call oninputchange callback if provided
+    oninputchange?.(inputValue);
+
     if (instantSearch) {
       clearTimeout(debounceTimer);
       if (inputValue.length === 0) {
-        dispatch('search', { query: '' });
+        onsearch?.({ query: '' });
         return;
       }
       if (inputValue.length >= minSearchChars) {
         debounceTimer = setTimeout(() => {
-          dispatch('search', { query: inputValue });
+          onsearch?.({ query: inputValue });
         }, debounceMs);
       }
     }
@@ -175,7 +237,7 @@
     value = '';
     clearTimeout(debounceTimer);
     if (instantSearch) {
-      dispatch('search', { query: '' });
+      onsearch?.({ query: '' });
     }
     if (inputElement) {
       inputElement.focus();
@@ -186,7 +248,7 @@
     if (instantSearch) {
       if (event.key === 'Enter') {
         clearTimeout(debounceTimer);
-        dispatch('search', { query: inputValue });
+        onsearch?.({ query: inputValue });
       }
       if (event.key === 'Escape') {
         clearInput();
@@ -222,6 +284,7 @@
 
   const handleBlur = () => {
     touched = true;
+    onblur?.();
     if (disableBuiltInValidation) return;
     if (required && !inputValue.trim()) {
       displayErrorText = "This field is required.";
@@ -234,6 +297,10 @@
     }
   };
 
+  const handleFocus = () => {
+    onfocus?.();
+  };
+
   const isValidEmail = (email) => {
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return re.test(String(email).toLowerCase());
@@ -262,10 +329,12 @@
     }
   };
 
-  $: displayErrorText = errorText || (touched && !disableBuiltInValidation && (errorText || (required && !inputValue.trim() ? "This field is required." : "")));
+  $effect(() => {
+    displayErrorText = errorText || (touched && !disableBuiltInValidation && (errorText || (required && !inputValue.trim() ? "This field is required." : "")));
+  });
 </script>
 
-<div class="flex flex-col gap-2 {className}">
+<div class="flex flex-col gap-2 {className}" {...restProps}>
   {#if label}
     <div class="flex justify-start items-center gap-1">
       <label for={id} class="text-sm font-medium text-gray-900 dark:text-white leading-tight sm:leading-none">
@@ -286,8 +355,9 @@
         {name}
         {placeholder}
         value={inputValue}
-        on:input={handleInput}
-        on:blur={handleBlur}
+        oninput={handleInput}
+        onblur={handleBlur}
+        onfocus={handleFocus}
         {maxlength}
         {minlength}
         class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border rounded-lg text-sm font-medium text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {displayErrorText ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
@@ -306,9 +376,10 @@
           {name}
           {placeholder}
           value={inputValue}
-          on:input={handleInput}
-          on:change={checkForAutofill}
-          on:blur={handleBlur}
+          oninput={handleInput}
+          onchange={checkForAutofill}
+          onblur={handleBlur}
+          onfocus={handleFocus}
           {maxlength}
           {minlength}
           class="flex-1 w-full {sizeClass} bg-transparent border-none text-gray-900 dark:text-white font-medium text-sm placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
@@ -322,7 +393,7 @@
         />
         <button
           type="button"
-          on:click={togglePasswordVisibility}
+          onclick={togglePasswordVisibility}
           class="flex items-center justify-center px-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none"
           tabindex="-1"
           aria-label={isPasswordVisible ? "Hide password" : "Show password"}
@@ -336,9 +407,9 @@
       </div>
     {:else}
       <div class="relative flex items-center w-full">
-        {#if $$slots.leftIcon}
+        {#if leftIcon}
           <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
-            <slot name="leftIcon" />
+            {@render leftIcon()}
           </div>
         {/if}
         <input
@@ -348,13 +419,14 @@
           {name}
           {placeholder}
           value={inputValue}
-          on:input={handleInput}
-          on:change={checkForAutofill}
-          on:blur={handleBlur}
-          on:keydown={handleSearchKeyDown}
+          oninput={handleInput}
+          onchange={checkForAutofill}
+          onblur={handleBlur}
+          onfocus={handleFocus}
+          onkeydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg font-medium text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {displayErrorText ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {$$slots.leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          class="w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg font-medium text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {displayErrorText ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
           required={false}
           {disabled}
           {readonly}
@@ -366,7 +438,7 @@
         {#if showClearButton && inputValue}
           <button
             type="button"
-            on:click={clearInput}
+            onclick={clearInput}
             class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
             aria-label="Clear input"
             tabindex="-1"
@@ -376,7 +448,7 @@
         {:else if controlled && (buttonIcon || buttonText)}
           <button
             type="button"
-            on:click={handleButtonClick}
+            onclick={handleButtonClick}
             disabled={buttonDisabled}
             class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || hintText || displayErrorText ? 'mb-7' : ''}"
           >

package/dist/primitives/Input/Input.svelte.d.ts

@@ -1,113 +1,105 @@
 export default Input;
-type Input = SvelteComponent<{
-    size?: "sm" | "md" | "lg" | undefined;
-    name?: string | undefined;
-    className?: string | undefined;
-    type?: string | undefined;
-    icon?: null | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    required?: boolean | undefined;
-    optional?: boolean | undefined;
-    buttonIcon?: null | undefined;
-    buttonText?: null | undefined;
-    maxlength?: null | undefined;
-    minlength?: null | undefined;
-    placeholder?: string | undefined;
-    textareaSize?: string | undefined;
-    errorText?: string | undefined;
-    helperText?: string | undefined;
-    helperIcon?: string | undefined;
-    hintText?: string | undefined;
-    hintIcon?: string | undefined;
-    contentFloat?: string | undefined;
-    readonly?: boolean | undefined;
-    controlled?: boolean | undefined;
-    onButtonClick?: null | undefined;
-    autocomplete?: null | undefined;
-    autofocus?: boolean | undefined;
-    showPasswordToggle?: boolean | undefined;
-    animateFocus?: boolean | undefined;
-    statusText?: string | undefined;
-    statusType?: string | undefined;
-    buttonDisabled?: boolean | undefined;
-    inputmode?: null | undefined;
-    showErrors?: boolean | undefined;
-    disableBuiltInValidation?: boolean | undefined;
-    instantSearch?: boolean | undefined;
-    debounceMs?: number | undefined;
-    minSearchChars?: number | undefined;
-    showClearButton?: boolean | undefined;
-}, {
-    search: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    leftIcon: {};
-}> & {
-    $$bindings?: string | undefined;
+type Input = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        required?: boolean | undefined;
+        disabled?: boolean | undefined;
+        optional?: boolean | undefined;
+        icon?: string | null | undefined;
+        buttonIcon?: string | null | undefined;
+        buttonText?: string | null | undefined;
+        maxlength?: number | null | undefined;
+        minlength?: number | null | undefined;
+        type?: string | undefined;
+        placeholder?: string | undefined;
+        label?: string | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        className?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        textareaSize?: string | undefined;
+        errorText?: string | undefined;
+        helperText?: string | undefined;
+        helperIcon?: string | undefined;
+        hintText?: string | undefined;
+        hintIcon?: string | undefined;
+        contentFloat?: string | undefined;
+        readonly?: boolean | undefined;
+        controlled?: boolean | undefined;
+        onButtonClick?: ((value: string) => void) | null | undefined;
+        value?: string | undefined;
+        autocomplete?: string | null | undefined;
+        autofocus?: boolean | undefined;
+        showPasswordToggle?: boolean | undefined;
+        animateFocus?: boolean | undefined;
+        statusText?: string | undefined;
+        statusType?: string | undefined;
+        buttonDisabled?: boolean | undefined;
+        inputmode?: string | null | undefined;
+        showErrors?: boolean | undefined;
+        disableBuiltInValidation?: boolean | undefined;
+        instantSearch?: boolean | undefined;
+        debounceMs?: number | undefined;
+        minSearchChars?: number | undefined;
+        showClearButton?: boolean | undefined;
+        onsearch?: ((detail: {
+            query: string;
+        }) => void) | undefined;
+        onfocus?: (() => void) | undefined;
+        onblur?: (() => void) | undefined;
+        oninputchange?: ((value: string) => void) | undefined;
+        leftIcon?: any;
+    }>): void;
 };
-declare const Input: $$__sveltets_2_IsomorphicComponent<{
-    size?: "sm" | "md" | "lg" | undefined;
-    name?: string | undefined;
-    className?: string | undefined;
-    type?: string | undefined;
-    icon?: null | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    required?: boolean | undefined;
-    optional?: boolean | undefined;
-    buttonIcon?: null | undefined;
-    buttonText?: null | undefined;
-    maxlength?: null | undefined;
-    minlength?: null | undefined;
-    placeholder?: string | undefined;
-    textareaSize?: string | undefined;
-    errorText?: string | undefined;
-    helperText?: string | undefined;
-    helperIcon?: string | undefined;
-    hintText?: string | undefined;
-    hintIcon?: string | undefined;
-    contentFloat?: string | undefined;
-    readonly?: boolean | undefined;
-    controlled?: boolean | undefined;
-    onButtonClick?: null | undefined;
-    autocomplete?: null | undefined;
-    autofocus?: boolean | undefined;
-    showPasswordToggle?: boolean | undefined;
-    animateFocus?: boolean | undefined;
-    statusText?: string | undefined;
-    statusType?: string | undefined;
-    buttonDisabled?: boolean | undefined;
-    inputmode?: null | undefined;
-    showErrors?: boolean | undefined;
-    disableBuiltInValidation?: boolean | undefined;
-    instantSearch?: boolean | undefined;
-    debounceMs?: number | undefined;
-    minSearchChars?: number | undefined;
-    showClearButton?: boolean | undefined;
-}, {
-    search: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    leftIcon: {};
-}, {}, 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;
-}
+declare const Input: import("svelte").Component<{
+    [key: string]: any;
+    required?: boolean;
+    disabled?: boolean;
+    optional?: boolean;
+    icon?: string | null;
+    buttonIcon?: string | null;
+    buttonText?: string | null;
+    maxlength?: number | null;
+    minlength?: number | null;
+    type?: string;
+    placeholder?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    textareaSize?: string;
+    errorText?: string;
+    helperText?: string;
+    helperIcon?: string;
+    hintText?: string;
+    hintIcon?: string;
+    contentFloat?: string;
+    readonly?: boolean;
+    controlled?: boolean;
+    onButtonClick?: ((value: string) => void) | null;
+    value?: string;
+    autocomplete?: string | null;
+    autofocus?: boolean;
+    showPasswordToggle?: boolean;
+    animateFocus?: boolean;
+    statusText?: string;
+    statusType?: string;
+    buttonDisabled?: boolean;
+    inputmode?: string | null;
+    showErrors?: boolean;
+    disableBuiltInValidation?: boolean;
+    instantSearch?: boolean;
+    debounceMs?: number;
+    minSearchChars?: number;
+    showClearButton?: boolean;
+    onsearch?: (detail: {
+        query: string;
+    }) => void;
+    onfocus?: () => void;
+    onblur?: () => void;
+    oninputchange?: (value: string) => void;
+    leftIcon?: any;
+}, {}, "value">;
 //# sourceMappingURL=Input.svelte.d.ts.map

package/dist/primitives/Input/Input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4WA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAwnB;6CAd3kB,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":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkdA;;eA/Ce,OAAO;eACP,OAAO;eACP,OAAO;WACX,MAAM,GAAG,IAAI;iBACP,MAAM,GAAG,IAAI;iBACb,MAAM,GAAG,IAAI;gBACd,MAAM,GAAG,IAAI;gBACb,MAAM,GAAG,IAAI;WAClB,MAAM;kBACC,MAAM;YACZ,MAAM;SACT,MAAM;WACJ,MAAM;gBACD,MAAM;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;mBACV,MAAM;gBACT,MAAM;iBACL,MAAM;iBACN,MAAM;eACR,MAAM;eACN,MAAM;mBACF,MAAM;eACV,OAAO;iBACL,OAAO;oBACJ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;YACxC,MAAM;mBACC,MAAM,GAAG,IAAI;gBAChB,OAAO;yBACE,OAAO;mBACb,OAAO;iBACT,MAAM;iBACN,MAAM;qBACF,OAAO;gBACZ,MAAM,GAAG,IAAI;iBACZ,OAAO;+BACO,OAAO;oBAClB,OAAO;iBACV,MAAM;qBACF,MAAM;sBACL,OAAO;eACd,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;cACpC,MAAM,IAAI;aACX,MAAM,IAAI;oBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;eAC5B,GAAG;gBAGkC"}