@getmicdrop/svelte-components 1.0.2 → 1.0.4

package/dist/components/Button/Button.svelte

@@ -0,0 +1,642 @@
+<script>
+  /**
+   * Button Component with Optional Microinteractions
+   *
+   * Props:
+   * @prop {boolean} responsive - Enable lift/press microinteraction for snappy feel
+   *   Desktop: Button lifts 2px on hover, returns on press
+   *   Mobile: Button scales to 98% on tap
+   *   Recommended for: Primary actions, CTAs, important interactive buttons
+   *   Skip for: Buttons in lists, text buttons, subtle inline actions
+   */
+  import { classNames } from "../../utils/utils.js";
+
+  // New clean API
+  export let variant = "blue-solid"; // blue-solid, blue-outline, gray-outline, red-solid, red-outline, red-text, gray-text
+  export let size = ""; // full, full-md-auto, lg, md, sm, xs, nav, half
+  export let minWidth = ""; // sm (100px), action (150px), modal (130px)
+  export let disabled = false;
+  export let loading = false;
+  export let success = false;
+  export let successText = ""; // Optional text to show with checkmark when success=true
+  export let className = "";
+  export let beforeIcon = null;
+  export let afterIcon = null;
+  export let responsive = false; // Enable lift/press microinteraction
+  export let active = false; // For nav items - shows selected/current page state
+  export let href = null; // If provided, renders as <a> instead of <button>
+  export let justify = ""; // between (for list-item style with icon on right)
+
+  // Determine effective disabled state (disabled when loading or success)
+  $: effectiveDisabled = disabled || loading || success;
+
+  // Size classes
+  $: sizeClass = (() => {
+    switch (size) {
+      case "full":
+        return "w-full";
+      case "full-md-auto":
+        return "w-full md:w-auto"; // Full on mobile, auto on desktop (use with minWidth)
+      case "half":
+        return "w-[48%] md:w-auto"; // For modal button pairs
+      case "lg":
+        return "px-6 py-3 text-base";
+      case "md":
+        return "px-3 sm:px-4 py-3 sm:py-3.5 text-lg";
+      case "sm":
+        return "px-2.5 sm:px-3 py-1 min-h-[40px] leading-4 rounded-md text-xs";
+      case "xs":
+        return "px-2.5 py-1.5 text-xs rounded";
+      case "nav":
+        return "!min-h-0 !px-3 !py-2.5 w-full !justify-start !text-base";
+      default:
+        return "";
+    }
+  })();
+
+  // Min width classes
+  $: minWidthClass = (() => {
+    switch (minWidth) {
+      case "sm":
+        return "min-w-[100px]"; // Small inline buttons (Update, Set up)
+      case "action":
+        return "min-w-[150px]"; // Form action buttons (Save, Cancel)
+      case "modal":
+        return "min-w-[130px] md:min-w-[130px]"; // Modal footer buttons
+      case "modal-responsive":
+        return "min-w-[155px] md:min-w-[130px]"; // Modal buttons with mobile sizing
+      default:
+        return "";
+    }
+  })();
+
+  // Variant classes with consistent hover/active states
+  $: variantClass = (() => {
+    if (success) return "btn-success";
+
+    switch (variant) {
+      case "blue-solid":
+        return "btn-blue-solid";
+      case "blue-outline":
+        return "btn-blue-outline";
+      case "gray-outline":
+        return "btn-gray-outline";
+      case "red-solid":
+        return "btn-red-solid";
+      case "red-outline":
+        return "btn-red-outline";
+      case "red-text":
+        return "btn-red-text";
+      case "gray-text":
+        return "btn-gray-text";
+      default:
+        return "btn-blue-solid";
+    }
+  })();
+
+  // Text color class
+  $: textClass = (() => {
+    if (success) return "text-white";
+
+    switch (variant) {
+      case "blue-solid":
+      case "red-solid":
+        return "text-white";
+      case "blue-outline":
+        return "text-primary-700";
+      case "gray-outline":
+        return "text-gray-800";
+      case "red-outline":
+      case "red-text":
+        return "text-red-600";
+      case "gray-text":
+        return "text-Text-Tartiary";
+      default:
+        return "text-white";
+    }
+  })();
+
+  $: disabledClass = disabled && !loading && !success ? "btn-disabled cursor-not-allowed" : "";
+
+  // Justify class for list-item style buttons
+  $: justifyClass = justify === "between" ? "!justify-between" : "";
+
+  $: buttonClasses = classNames(
+    "cursor-pointer px-2.5 sm:px-3 py-1 min-h-[40px]",
+    "inline-flex items-center justify-center",
+    "rounded-lg",
+    "focus:outline-none focus:ring-0",
+    "font-medium text-sm leading-none",
+    "btn-transition",
+    href ? "no-underline hover:no-underline" : "",
+    sizeClass,
+    minWidthClass,
+    variantClass,
+    textClass,
+    disabledClass,
+    responsive && !disabled ? "btn-responsive" : "",
+    active ? "btn-active" : "",
+    justifyClass,
+    className
+  );
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if href}
+  <a
+    {href}
+    class={buttonClasses}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    {...$$restProps}
+  >
+    <span class="btn-inner" class:btn-inner-hidden={loading || success}>
+      {#if beforeIcon}
+        <img src={beforeIcon} alt="" class="mr-2" />
+      {/if}
+      <span class="btn-content"><slot /></span>
+      {#if afterIcon}
+        <img src={afterIcon} alt="" class="ml-2" />
+      {/if}
+    </span>
+  </a>
+{:else}
+  <button
+    class={buttonClasses}
+    disabled={effectiveDisabled}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    {...$$restProps}
+  >
+    <!-- Container maintains button width -->
+    <span class="btn-inner" class:btn-inner-hidden={loading || success}>
+      {#if beforeIcon}
+        <img src={beforeIcon} alt="" class="mr-2" />
+      {/if}
+      <span class="btn-content"><slot /></span>
+      {#if afterIcon}
+        <img src={afterIcon} alt="" class="ml-2" />
+      {/if}
+    </span>
+
+    <!-- Spinner/checkmark overlay -->
+    {#if loading}
+      <span class="btn-overlay">
+        <span class="btn-spinner"></span>
+      </span>
+    {:else if success}
+      <span class="btn-overlay">
+        <svg class="btn-checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+          <polyline class="checkmark-path" points="4 12 9 17 20 6"></polyline>
+        </svg>
+        {#if successText}
+          <span class="btn-success-text">{successText}</span>
+        {/if}
+      </span>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  /* ============================================
+     TRANSITION
+     ============================================ */
+  .btn-transition {
+    position: relative;
+    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+         user-select: none;
+    touch-action: manipulation;
+  }
+
+  /* ============================================
+     BLUE SOLID
+     Default primary button
+     ============================================ */
+  .btn-blue-solid {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
+  .btn-blue-solid:hover:not(:disabled) {
+    --tw-border-opacity: 1;
+    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
+}
+  .btn-blue-solid:active:not(:disabled) {
+    --tw-border-opacity: 1;
+    border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
+}
+
+  /* ============================================
+     BLUE OUTLINE
+     Secondary action with blue accent
+     ============================================ */
+  .btn-blue-outline {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
+    background-color: transparent;
+}
+  .btn-blue-outline:hover:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
+  .btn-blue-outline:active:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
+}
+
+  /* Dark mode overrides for blue outline button */
+  :global(.dark) .btn-blue-outline,
+  :global(.performer-portal.dark) .btn-blue-outline {
+    border-color: #3b82f6;
+    color: #3b82f6;
+  }
+  :global(.dark) .btn-blue-outline:hover,
+  :global(.performer-portal.dark) .btn-blue-outline:hover {
+    background-color: rgba(66, 133, 244, 0.15);
+  }
+  :global(.dark) .btn-blue-outline:active,
+  :global(.performer-portal.dark) .btn-blue-outline:active {
+    background-color: rgba(66, 133, 244, 0.25);
+  }
+
+  /* ============================================
+     GRAY OUTLINE
+     De-emphasized secondary action
+     ============================================ */
+  .btn-gray-outline {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+    background-color: transparent;
+}
+  .btn-gray-outline:hover:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+  .btn-gray-outline:active:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+  /* Dark mode overrides for gray outline button */
+  :global(.dark) .btn-gray-outline,
+  :global(.performer-portal.dark) .btn-gray-outline {
+    border-color: #374151;
+    color: #f7f7f8;
+  }
+  :global(.dark) .btn-gray-outline:hover,
+  :global(.performer-portal.dark) .btn-gray-outline:hover {
+    background-color: #1f2937;
+  }
+  :global(.dark) .btn-gray-outline:active,
+  :global(.performer-portal.dark) .btn-gray-outline:active {
+    background-color: #374151;
+  }
+
+  /* ============================================
+     RED SOLID
+     Destructive primary action
+     ============================================ */
+  .btn-red-solid {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
+}
+  .btn-red-solid:hover:not(:disabled) {
+    --tw-border-opacity: 1;
+    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
+}
+  .btn-red-solid:active:not(:disabled) {
+    --tw-border-opacity: 1;
+    border-color: rgb(127 29 29 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
+}
+
+  /* ============================================
+     RED OUTLINE
+     Destructive secondary action
+     ============================================ */
+  .btn-red-outline {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
+    background-color: transparent;
+}
+  .btn-red-outline:hover:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+  .btn-red-outline:active:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
+  /* Dark mode overrides for red outline button */
+  :global(.dark) .btn-red-outline,
+  :global(.performer-portal.dark) .btn-red-outline {
+    border-color: #ef4444;
+    color: #ef4444;
+  }
+  :global(.dark) .btn-red-outline:hover,
+  :global(.performer-portal.dark) .btn-red-outline:hover {
+    background-color: rgba(239, 68, 68, 0.15);
+  }
+  :global(.dark) .btn-red-outline:active,
+  :global(.performer-portal.dark) .btn-red-outline:active {
+    background-color: rgba(239, 68, 68, 0.25);
+  }
+
+  /* ============================================
+     RED TEXT
+     Subtle destructive action (sign out, remove)
+     ============================================ */
+  .btn-red-text {
+    border-color: transparent;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+  .btn-red-text:hover:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+  .btn-red-text:active:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
+  /* Dark mode overrides for red text button */
+  :global(.dark) .btn-red-text,
+  :global(.performer-portal.dark) .btn-red-text {
+    color: #ef4444;
+  }
+  :global(.dark) .btn-red-text:hover,
+  :global(.performer-portal.dark) .btn-red-text:hover {
+    background-color: rgba(239, 68, 68, 0.15);
+  }
+  :global(.dark) .btn-red-text:active,
+  :global(.performer-portal.dark) .btn-red-text:active {
+    background-color: rgba(239, 68, 68, 0.25);
+  }
+
+  /* ============================================
+     GRAY TEXT
+     Nav item style - gray text, no border
+     ============================================ */
+  .btn-gray-text {
+    border-color: transparent;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+  .btn-gray-text:hover:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(13 21 38 / var(--tw-text-opacity, 1));
+}
+  .btn-gray-text:active:not(:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
+  /* Dark mode overrides for gray text button */
+  :global(.dark) .btn-gray-text,
+  :global(.performer-portal.dark) .btn-gray-text {
+    color: #9ca3af;
+  }
+  :global(.dark) .btn-gray-text:hover,
+  :global(.performer-portal.dark) .btn-gray-text:hover {
+    background-color: #1f2937;
+    color: #f7f7f8;
+  }
+  :global(.dark) .btn-gray-text:active,
+  :global(.performer-portal.dark) .btn-gray-text:active {
+    background-color: #374151;
+  }
+
+  /* ============================================
+     ACTIVE STATE (for nav items)
+     Shows selected/current page state
+     ============================================ */
+  .btn-gray-text.btn-active {
+    background-color: hsl(var(--hover-primary));
+    --tw-text-opacity: 1;
+    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
+}
+  .btn-gray-text.btn-active:hover {
+    background-color: hsl(var(--hover-primary));
+    --tw-text-opacity: 1;
+    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
+}
+
+  /* Dark mode active state */
+  :global(.dark) .btn-gray-text.btn-active,
+  :global(.performer-portal.dark) .btn-gray-text.btn-active {
+    color: white !important;
+    background-color: rgba(17, 24, 39, 1) !important;
+  }
+  :global(.dark) .btn-gray-text.btn-active:hover,
+  :global(.performer-portal.dark) .btn-gray-text.btn-active:hover {
+    color: white !important;
+    background-color: rgba(17, 24, 39, 1) !important;
+  }
+
+  /* ============================================
+     DISABLED STATE
+     ============================================ */
+  .btn-disabled {
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+  .btn-disabled:hover,
+  .btn-disabled:active {
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
+  /* Dark mode overrides for disabled state */
+  :global(.dark) .btn-disabled,
+  :global(.performer-portal.dark) .btn-disabled {
+    --tw-border-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
+  /* ============================================
+     SUCCESS STATE
+     ============================================ */
+  .btn-success {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(5 122 85 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(5 122 85 / var(--tw-bg-opacity, 1));
+}
+  .btn-success:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(5 122 85 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(5 122 85 / var(--tw-bg-opacity, 1));
+}
+
+  /* ============================================
+     LOADING SPINNER
+     ============================================ */
+  .btn-spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.7s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* ============================================
+     SUCCESS CHECKMARK
+     ============================================ */
+  .btn-checkmark {
+    width: 20px;
+    height: 20px;
+    animation: checkmark-pop 250ms ease-out;
+  }
+
+  .checkmark-path {
+    stroke-dasharray: 30;
+    stroke-dashoffset: 30;
+    animation: checkmark-draw 350ms ease-out 50ms forwards;
+  }
+
+  @keyframes checkmark-draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes checkmark-pop {
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  /* Success text that appears alongside checkmark */
+  .btn-success-text {
+    margin-left: 0.5rem;
+    font-weight: 500;
+    animation: success-text-fade 300ms ease-out 200ms both;
+  }
+
+  @keyframes success-text-fade {
+    0% {
+      opacity: 0;
+      transform: translateX(-4px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* ============================================
+     INNER LAYOUT
+     ============================================ */
+  .btn-inner {
+    display: inline-flex;
+    align-items: center;
+    visibility: visible;
+  }
+  .btn-inner-hidden {
+    visibility: hidden;
+  }
+
+  .btn-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem; /* 6px - matches gap-1.5 */
+  }
+
+  @media (min-width: 640px) {
+    .btn-content {
+      gap: 0.5rem; /* 8px - matches gap-2 on sm+ screens */
+    }
+  }
+
+  /* Responsive microinteraction - lift and press effect */
+  .btn-responsive {
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* Desktop only - hover lift effect */
+  @media (hover: hover) and (pointer: fine) {
+    .btn-responsive:hover:not(:disabled) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
+    }
+
+    .btn-responsive:active:not(:disabled) {
+      transform: translateY(0);
+      transition-duration: 0.1s;
+    }
+  }
+
+  /* Mobile - subtle scale effect on tap */
+  @media (hover: none) {
+    .btn-responsive:active:not(:disabled) {
+      transform: scale(0.98);
+      transition-duration: 0.1s;
+    }
+  }
+</style>

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

@@ -0,0 +1,68 @@
+/** @typedef {typeof __propDef.props}  ButtonProps */
+/** @typedef {typeof __propDef.events}  ButtonEvents */
+/** @typedef {typeof __propDef.slots}  ButtonSlots */
+export default class Button extends SvelteComponent<{
+    [x: string]: any;
+    size?: string | undefined;
+    className?: string | undefined;
+    variant?: string | undefined;
+    success?: boolean | undefined;
+    minWidth?: string | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    successText?: string | undefined;
+    beforeIcon?: null | undefined;
+    afterIcon?: null | undefined;
+    responsive?: boolean | undefined;
+    active?: boolean | undefined;
+    href?: null | undefined;
+    justify?: string | undefined;
+}, {
+    click: PointerEvent;
+    mouseover: MouseEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string | undefined;
+        className?: string | undefined;
+        variant?: string | undefined;
+        success?: boolean | undefined;
+        minWidth?: string | undefined;
+        disabled?: boolean | undefined;
+        loading?: boolean | undefined;
+        successText?: string | undefined;
+        beforeIcon?: null | undefined;
+        afterIcon?: null | undefined;
+        responsive?: boolean | undefined;
+        active?: boolean | undefined;
+        href?: null | undefined;
+        justify?: string | undefined;
+    };
+    events: {
+        click: PointerEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Button.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.svelte.js"],"names":[],"mappings":"AAsMA,qDAAqD;AACrD,uDAAuD;AACvD,qDAAqD;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;CACC;0BALa,OAAO,SAAS,CAAC,KAAK;2BACtB,OAAO,SAAS,CAAC,MAAM;0BACvB,OAAO,SAAS,CAAC,KAAK;gCAxMJ,QAAQ;AAqMxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAiP"}