@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/components/Input/SelectAudit.stories.svelte

@@ -1,364 +0,0 @@
-<script context="module">
-  import Select from "./Select.svelte";
-  import MultiSelect from "./MultiSelect.svelte";
-  import { GENDER_OPTIONS, ETHNICITY_OPTIONS } from "../../constants/formOptions";
-
-  export const meta = {
-    title: "Audit/Select & Dropdown Variants",
-    component: Select,
-  };
-</script>
-
-<script>
-  import { Story } from "@storybook/addon-svelte-csf";
-
-  let singleValue = "";
-  let multiValue = [];
-  let genderValue = "";
-  let ethnicityValue = [];
-
-  const countryItems = [
-    { value: "us", name: "United States" },
-    { value: "ca", name: "Canada" },
-    { value: "uk", name: "United Kingdom" },
-    { value: "au", name: "Australia" },
-  ];
-
-  const roleItems = [
-    { value: "host", name: "Host" },
-    { value: "headliner", name: "Headliner" },
-    { value: "feature", name: "Feature" },
-    { value: "opener", name: "Opener" },
-  ];
-
-  const genreItems = [
-    { value: "standup", name: "Stand-up Comedy" },
-    { value: "improv", name: "Improv" },
-    { value: "sketch", name: "Sketch Comedy" },
-    { value: "musical", name: "Musical Comedy" },
-  ];
-</script>
-
-<Story name="All Select Variants">
-  <div class="performer-portal p-6 space-y-8 bg-BG-Primary min-h-screen">
-    <div class="max-w-2xl mx-auto">
-      <h1 class="text-2xl font-bold text-Text-Primary mb-2">Select & Dropdown Component Audit</h1>
-      <p class="text-Text-Tartiary mb-8">All dropdown/select variants across the performers portal</p>
-
-      <!-- SECTION: Base Select -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Select Component (Single Selection)
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Basic Select with label
-            </div>
-            <Select
-              bind:value={singleValue}
-              items={countryItems}
-              label="Country"
-              placeholder="Select a country"
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Required Select
-            </div>
-            <Select
-              bind:value={singleValue}
-              items={roleItems}
-              label="Role"
-              placeholder="Select your role"
-              required
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Select with error
-            </div>
-            <Select
-              bind:value={singleValue}
-              items={countryItems}
-              label="Country"
-              placeholder="Select a country"
-              error="Please select a country"
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Disabled Select
-            </div>
-            <Select
-              value="us"
-              items={countryItems}
-              label="Country"
-              disabled
-            />
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: MultiSelect -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          MultiSelect Component (Multiple Selection)
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Basic MultiSelect
-            </div>
-            <MultiSelect
-              bind:value={multiValue}
-              items={genreItems}
-              label="Genres"
-              placeholder="Select genres"
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              MultiSelect with hideClear=true
-            </div>
-            <MultiSelect
-              bind:value={multiValue}
-              items={genreItems}
-              label="Genres (No Clear Button)"
-              placeholder="Select genres"
-              hideClear
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Required MultiSelect with error
-            </div>
-            <MultiSelect
-              bind:value={multiValue}
-              items={genreItems}
-              label="Genres"
-              placeholder="Select at least one"
-              required
-              error="Please select at least one genre"
-            />
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Using Constants for Options -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Using Shared Constants for Options
-        </h2>
-        <p class="text-sm text-Text-Tartiary mb-4">
-          Instead of wrapper components, use Select/MultiSelect with constants from <code>$lib/constants/formOptions</code>.
-        </p>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Select with GENDER_OPTIONS constant
-            </div>
-            <Select
-              bind:value={genderValue}
-              items={GENDER_OPTIONS}
-              label="Gender"
-              placeholder="Select gender"
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Options:</strong> Male (1), Female (2), Non-Binary (3)
-            </div>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              MultiSelect with ETHNICITY_OPTIONS constant
-            </div>
-            <MultiSelect
-              bind:value={ethnicityValue}
-              items={ETHNICITY_OPTIONS}
-              label="Ethnicity"
-              placeholder="Select ethnicity"
-              hideClear
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Options:</strong> American Indian, Asian, Black, Hispanic, Middle Eastern, Native Hawaiian, White
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Real Usage Examples -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Real Usage Examples
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">profile-form.svelte - Gender field</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              &lt;Select items=&#123;GENDER_OPTIONS&#125; bind:value=&#123;formData.gender&#125; /&gt;
-            </div>
-            <Select
-              value=""
-              items={GENDER_OPTIONS}
-              label="Gender"
-              placeholder="Select gender"
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">profile-form.svelte - Ethnicity field</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              &lt;MultiSelect items=&#123;ETHNICITY_OPTIONS&#125; bind:value=&#123;formData.ethnicity&#125; hideClear /&gt;
-            </div>
-            <MultiSelect
-              value={[]}
-              items={ETHNICITY_OPTIONS}
-              label="Ethnicity"
-              placeholder="Select ethnicity"
-              hideClear
-            />
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Props Summary -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Props Summary
-        </h2>
-
-        <div class="bg-BG-Secondary rounded-lg p-4 text-sm mb-4">
-          <h3 class="font-semibold text-Text-Primary mb-2">Select</h3>
-          <table class="w-full text-left">
-            <thead>
-              <tr class="border-b border-stroke-Primary">
-                <th class="py-2 text-Text-Primary">Prop</th>
-                <th class="py-2 text-Text-Primary">Type</th>
-                <th class="py-2 text-Text-Primary">Description</th>
-              </tr>
-            </thead>
-            <tbody class="text-Text-Tartiary">
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">value</td>
-                <td class="py-2 text-xs">any</td>
-                <td class="py-2 text-xs">Selected value (bindable)</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">items</td>
-                <td class="py-2 text-xs">array</td>
-                <td class="py-2 text-xs">Options: &#123;value, name&#125;</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">label</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Label text above select</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">placeholder</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Placeholder text</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">required</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Shows * indicator</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">disabled</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Disables interaction</td>
-              </tr>
-              <tr>
-                <td class="py-2 font-mono text-xs">error</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Error message</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
-          <h3 class="font-semibold text-Text-Primary mb-2">MultiSelect (same as Select, plus:)</h3>
-          <table class="w-full text-left">
-            <thead>
-              <tr class="border-b border-stroke-Primary">
-                <th class="py-2 text-Text-Primary">Prop</th>
-                <th class="py-2 text-Text-Primary">Type</th>
-                <th class="py-2 text-Text-Primary">Description</th>
-              </tr>
-            </thead>
-            <tbody class="text-Text-Tartiary">
-              <tr>
-                <td class="py-2 font-mono text-xs">hideClear</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Hides the clear/X button</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- SECTION: Consolidation Status -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Consolidation Status
-        </h2>
-
-        <div class="space-y-4 text-sm text-Text-Tartiary">
-          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
-            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Completed</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li><strong>Removed GenderInput</strong> - was just wrapping Select with hardcoded items</li>
-              <li><strong>Removed EthnicityDropdown</strong> - was just wrapping MultiSelect with hardcoded items</li>
-              <li><strong>Created constants file</strong> - GENDER_OPTIONS and ETHNICITY_OPTIONS in <code>$lib/constants/formOptions.js</code></li>
-              <li><strong>Updated profile-form.svelte</strong> - now uses Select/MultiSelect directly with constants</li>
-            </ul>
-          </div>
-
-          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
-            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Current State</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li>Select and MultiSelect are the only dropdown components needed</li>
-              <li>Pass items as props - no need for wrapper components</li>
-              <li>Consistent API across both components</li>
-              <li>Error handling and label display work well</li>
-            </ul>
-          </div>
-
-          <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-            <h3 class="font-semibold text-blue-700 dark:text-blue-400 mb-2">Usage Pattern</h3>
-            <pre class="bg-gray-100 dark:bg-gray-800 p-2 rounded text-xs overflow-x-auto">
-{`import { GENDER_OPTIONS, ETHNICITY_OPTIONS } from "../../constants/formOptions";
-
-// Gender dropdown
-<Select
-  items={GENDER_OPTIONS}
-  bind:value={formData.gender}
-  label="Gender"
-  placeholder="Select gender"
-/>
-
-// Ethnicity multi-select
-<MultiSelect
-  items={ETHNICITY_OPTIONS}
-  bind:value={formData.ethnicity}
-  label="Ethnicity"
-  hideClear
-/>`}
-            </pre>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</Story>

package/dist/components/Input/SelectAudit.stories.svelte.d.ts

@@ -1,32 +0,0 @@
-export namespace meta {
-    export let title: string;
-    export { Select as component };
-}
-export default SelectAudit;
-import Select from "./Select.svelte";
-type SelectAudit = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const SelectAudit: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=SelectAudit.stories.svelte.d.ts.map

package/dist/components/Input/SelectAudit.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/SelectAudit.stories.svelte.js"],"names":[],"mappings":";;;;;mBAGqB,iBAAiB;;;;;;;;AA6TtC;;;;mBAAuH;6CAT1E,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;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;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/Input/Textarea.svelte

@@ -1,187 +0,0 @@
-<script>
-  /**
-   * @type {{
-   *   value?: string,
-   *   placeholder?: string,
-   *   rows?: number,
-   *   disabled?: boolean,
-   *   required?: boolean,
-   *   readonly?: boolean,
-   *   id?: string,
-   *   name?: string,
-   *   label?: string,
-   *   error?: string,
-   *   maxlength?: number | null,
-   *   minlength?: number | null,
-   *   class?: string,
-   *   oninput?: (data: { value: string }) => void,
-   *   onchange?: (data: { value: string }) => void,
-   *   onblur?: (e: FocusEvent) => void,
-   *   onfocus?: (e: FocusEvent) => void,
-   *   onkeydown?: (e: KeyboardEvent) => void,
-   *   onkeyup?: (e: KeyboardEvent) => void,
-   *   onkeypress?: (e: KeyboardEvent) => void,
-   *   [key: string]: unknown
-   * }}
-   */
-  let {
-    value = $bindable(""),
-    placeholder = "",
-    rows = 4,
-    disabled = false,
-    required = false,
-    readonly = false,
-    id = "",
-    name = "",
-    label = "",
-    error = "",
-    maxlength = null,
-    minlength = null,
-    class: className = "",
-    oninput,
-    onchange,
-    onblur,
-    onfocus,
-    onkeydown,
-    onkeyup,
-    onkeypress,
-    ...restProps
-  } = $props();
-
-  function handleInput(event) {
-    value = event.target.value;
-    oninput?.({ value });
-  }
-
-  function handleChange(event) {
-    onchange?.({ value: event.target.value });
-  }
-
-  function handleBlur(event) {
-    onblur?.(event);
-  }
-
-  function handleFocus(event) {
-    onfocus?.(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
-    oninput={handleInput}
-    onchange={handleChange}
-    onblur={handleBlur}
-    onfocus={handleFocus}
-    onkeydown={onkeydown}
-    onkeyup={onkeyup}
-    onkeypress={onkeypress}
-    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

@@ -1,59 +0,0 @@
-export default Textarea;
-type Textarea = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<{
-        [key: string]: unknown;
-        value?: string | undefined;
-        placeholder?: string | undefined;
-        rows?: number | undefined;
-        disabled?: boolean | undefined;
-        required?: boolean | undefined;
-        readonly?: boolean | undefined;
-        id?: string | undefined;
-        name?: string | undefined;
-        label?: string | undefined;
-        error?: string | undefined;
-        maxlength?: number | null | undefined;
-        minlength?: number | null | undefined;
-        class?: string | undefined;
-        oninput?: ((data: {
-            value: string;
-        }) => void) | undefined;
-        onchange?: ((data: {
-            value: string;
-        }) => void) | undefined;
-        onblur?: ((e: FocusEvent) => void) | undefined;
-        onfocus?: ((e: FocusEvent) => void) | undefined;
-        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-    }>): void;
-};
-declare const Textarea: import("svelte").Component<{
-    [key: string]: unknown;
-    value?: string;
-    placeholder?: string;
-    rows?: number;
-    disabled?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    id?: string;
-    name?: string;
-    label?: string;
-    error?: string;
-    maxlength?: number | null;
-    minlength?: number | null;
-    class?: string;
-    oninput?: (data: {
-        value: string;
-    }) => void;
-    onchange?: (data: {
-        value: string;
-    }) => void;
-    onblur?: (e: FocusEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
-    onkeydown?: (e: KeyboardEvent) => void;
-    onkeyup?: (e: KeyboardEvent) => void;
-    onkeypress?: (e: KeyboardEvent) => void;
-}, {}, "value">;
-//# sourceMappingURL=Textarea.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA;;YAvBe,MAAM;kBACA,MAAM;WACb,MAAM;eACF,OAAO;eACP,OAAO;eACP,OAAO;SACb,MAAM;WACJ,MAAM;YACL,MAAM;YACN,MAAM;gBACF,MAAM,GAAG,IAAI;gBACb,MAAM,GAAG,IAAI;YACjB,MAAM;cACJ,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;eAChC,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;aACnC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;cACtB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;gBACrB,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI;cAC5B,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI;iBACvB,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI;gBAIS"}