sve-ui 0.1.1 → 0.2.0

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,125 @@
+<script module lang="ts">
+  import { defineVariants } from '../../internal/variants';
+
+  type Variant = 'solid' | 'outline' | 'subtle';
+  type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+  type Size = 'sm' | 'md' | 'lg';
+
+  export const badgeVariants = defineVariants({
+    base: 'sve-badge',
+    variants: {
+      variant: {
+        solid:   'sve-badge--solid',
+        outline: 'sve-badge--outline',
+        subtle:  'sve-badge--subtle',
+      },
+      color: {
+        primary:   'sve-c-primary',
+        secondary: 'sve-c-secondary',
+        success:   'sve-c-success',
+        warning:   'sve-c-warning',
+        danger:    'sve-c-danger',
+        default:   'sve-c-default',
+      },
+      size: {
+        sm: 'sve-badge--sm',
+        md: 'sve-badge--md',
+        lg: 'sve-badge--lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'subtle',
+      color:   'default',
+      size:    'md',
+    },
+  });
+
+  export type { Variant, Color, Size };
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+    variant?: Variant;
+    color?: Color;
+    size?: Size;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant,
+    color,
+    size,
+    class: cls,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    badgeVariants({ variant, color, size, class: cls })
+  );
+</script>
+
+<span class={className} {...rest}>
+  {@render children?.()}
+</span>
+
+<style>
+  .sve-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--sve-font-family-sans);
+    font-weight: var(--sve-font-weight-medium);
+    line-height: var(--sve-line-height-normal);
+    border-radius: var(--sve-radius-full);
+    border: 1px solid transparent;
+    white-space: nowrap;
+  }
+
+  /* --- Sizes --- */
+  .sve-badge--sm {
+    padding: 0 var(--sve-space-2);
+    font-size: var(--sve-font-size-sm);
+    height: 1.25rem;
+  }
+
+  .sve-badge--md {
+    padding: 0 var(--sve-space-3);
+    font-size: var(--sve-font-size-sm);
+    height: 1.5rem;
+  }
+
+  .sve-badge--lg {
+    padding: 0 var(--sve-space-4);
+    font-size: var(--sve-font-size-md);
+    height: 1.75rem;
+  }
+
+  /* --- Solid variant --- */
+  .sve-badge--solid.sve-c-primary   { background-color: var(--sve-color-primary);   color: var(--sve-color-primary-foreground);   border-color: var(--sve-color-primary); }
+  .sve-badge--solid.sve-c-secondary { background-color: var(--sve-color-secondary); color: var(--sve-color-secondary-foreground); border-color: var(--sve-color-secondary); }
+  .sve-badge--solid.sve-c-success   { background-color: var(--sve-color-success);   color: var(--sve-color-success-foreground);   border-color: var(--sve-color-success); }
+  .sve-badge--solid.sve-c-warning   { background-color: var(--sve-color-warning);   color: var(--sve-color-warning-foreground);   border-color: var(--sve-color-warning); }
+  .sve-badge--solid.sve-c-danger    { background-color: var(--sve-color-danger);    color: var(--sve-color-danger-foreground);    border-color: var(--sve-color-danger); }
+  .sve-badge--solid.sve-c-default   { background-color: var(--sve-color-default);   color: var(--sve-color-default-foreground);   border-color: var(--sve-color-default); }
+
+  /* --- Outline variant --- */
+  .sve-badge--outline.sve-c-primary   { background-color: transparent; color: var(--sve-color-primary);           border-color: var(--sve-color-primary-border); }
+  .sve-badge--outline.sve-c-secondary { background-color: transparent; color: var(--sve-color-secondary);         border-color: var(--sve-color-secondary-border); }
+  .sve-badge--outline.sve-c-success   { background-color: transparent; color: var(--sve-color-success);           border-color: var(--sve-color-success-border); }
+  .sve-badge--outline.sve-c-warning   { background-color: transparent; color: var(--sve-color-warning-foreground); border-color: var(--sve-color-warning-border); }
+  .sve-badge--outline.sve-c-danger    { background-color: transparent; color: var(--sve-color-danger);            border-color: var(--sve-color-danger-border); }
+  .sve-badge--outline.sve-c-default   { background-color: transparent; color: var(--sve-color-default-foreground); border-color: var(--sve-color-default-border); }
+
+  /* --- Subtle variant --- */
+  .sve-badge--subtle.sve-c-primary   { background-color: var(--sve-color-primary-surface);   color: var(--sve-color-primary);           border-color: transparent; }
+  .sve-badge--subtle.sve-c-secondary { background-color: var(--sve-color-secondary-surface); color: var(--sve-color-secondary);         border-color: transparent; }
+  .sve-badge--subtle.sve-c-success   { background-color: var(--sve-color-success-surface);   color: var(--sve-color-success);           border-color: transparent; }
+  .sve-badge--subtle.sve-c-warning   { background-color: var(--sve-color-warning-surface);   color: var(--sve-color-warning-foreground); border-color: transparent; }
+  .sve-badge--subtle.sve-c-danger    { background-color: var(--sve-color-danger-surface);    color: var(--sve-color-danger);            border-color: transparent; }
+  .sve-badge--subtle.sve-c-default   { background-color: var(--sve-color-default-surface);   color: var(--sve-color-default-foreground); border-color: transparent; }
+</style>

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

@@ -0,0 +1,37 @@
+type Variant = 'solid' | 'outline' | 'subtle';
+type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+type Size = 'sm' | 'md' | 'lg';
+export declare const badgeVariants: (props?: import("../../internal/variants").VariantProps<{
+    variant: {
+        solid: string;
+        outline: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        default: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}> | undefined) => string;
+export type { Variant, Color, Size };
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+    variant?: Variant;
+    color?: Color;
+    size?: Size;
+    class?: string;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAKE,KAAK,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,KAAK,KAAK,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AACpF,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;yBA2BxB,CAAC;AAEH,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8BH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/Button/Button.svelte

@@ -1,120 +1,304 @@
-<!-- TO DO
-La idea seria que reciba Padding 1, 2, 3, 4
-Y utilizar una clase css global para que se aplique el padding
-
-ej:
-.padding-style-1 {
-	padding: 2px 4px;
-}
-
--->
-
-<script>export let label = "Button";
-export let onClick = () => {
-};
-export let color = "blue";
-export let size = "md";
-export let disabled = false;
-export let style = "";
-export let bg = "";
-export let p = "3";
-let props = { ...$$restProps };
+<script module lang="ts">
+  import { defineVariants } from '../../internal/variants';
+
+  type Variant = 'solid' | 'outline' | 'ghost' | 'flat';
+  type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+  type Size = 'sm' | 'md' | 'lg';
+
+  // Defined once at module level — not recreated per instance.
+  export const buttonVariants = defineVariants({
+    base: 'sve-button',
+    variants: {
+      variant: {
+        solid:   'sve-button--solid',
+        outline: 'sve-button--outline',
+        ghost:   'sve-button--ghost',
+        flat:    'sve-button--flat',
+      },
+      color: {
+        primary:   'sve-c-primary',
+        secondary: 'sve-c-secondary',
+        success:   'sve-c-success',
+        warning:   'sve-c-warning',
+        danger:    'sve-c-danger',
+        default:   'sve-c-default',
+      },
+      size: {
+        sm: 'sve-button--sm',
+        md: 'sve-button--md',
+        lg: 'sve-button--lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'solid',
+      color:   'default',
+      size:    'md',
+    },
+  });
+
+  export type { Variant, Color, Size };
+</script>
+
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface Props extends Omit<HTMLButtonAttributes, 'class'> {
+    variant?: Variant;
+    color?: Color;
+    size?: Size;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant,
+    color,
+    size,
+    disabled = false,
+    class: cls,
+    onclick,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    buttonVariants({ variant, color, size, class: cls })
+  );
 </script>
 
 <button
-	class={`${props.class} button padding-${p} ${color} ${size} ${style}`}
-	on:click={onClick}
-	style={`background-color: ${bg}`}
-	{disabled}
+  class={className}
+  {disabled}
+  onclick={disabled ? undefined : onclick}
+  {...rest}
 >
-	<slot>{label}</slot>
+  {@render children?.()}
 </button>
 
 <style>
-	.button {
-		border: none;
-		border-radius: 4px;
-		font-size: 1rem;
-		font-weight: bold;
-		padding: 8px 16px;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.blue {
-		background-color: #007bff;
-		color: #fff;
-	}
-	.red {
-		background-color: #dc3545;
-		color: #fff;
-	}
-	.green {
-		background-color: #28a745;
-		color: #fff;
-	}
-
-	.xsm {
-		font-size: 8px;
-		padding: 2px 4px;
-	}
-
-	.sm {
-		font-size: 12px;
-		padding: 4px 8px;
-	}
-
-	.md {
-		font-size: 16px;
-		padding: 8px 16px;
-	}
-
-	.lg {
-		font-size: 24px;
-		padding: 12px 24px;
-	}
-
-	.xl {
-		font-size: 32px;
-		padding: 16px 32px;
-	}
-
-	.xxl {
-		font-size: 48px;
-		padding: 24px 48px;
-	}
-
-	.xxxl {
-		font-size: 64px;
-		padding: 32px 64px;
-	}
-
-	.button:hover {
-		opacity: 0.94;
-		transition: 0.2s ease-in-out;
-	}
-	button:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-	button:disabled:hover {
-		opacity: 0.5;
-	}
-
-	.padding-1 {
-		padding: 2px 4px;
-	}
-
-	.padding-2 {
-		padding: 4px 8px;
-	}
-
-	.padding-3 {
-		padding: 8px 16px;
-	}
-
-	.padding-4 {
-		padding: 16px 32px;
-	}
+  .sve-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sve-space-2);
+    font-family: var(--sve-font-family-sans);
+    font-weight: var(--sve-font-weight-medium);
+    line-height: var(--sve-line-height-normal);
+    border-radius: var(--sve-radius-md);
+    border: 1px solid transparent;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
+    outline-offset: 2px;
+  }
+
+  /* Focus ring for accessibility */
+  .sve-button:focus-visible {
+    outline: 2px solid var(--sve-color-primary);
+    outline-offset: 2px;
+  }
+
+  /* Disabled state */
+  .sve-button:disabled,
+  .sve-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* --- Sizes --- */
+  .sve-button--sm {
+    padding: var(--sve-space-1) var(--sve-space-3);
+    font-size: var(--sve-font-size-sm);
+  }
+
+  .sve-button--md {
+    padding: var(--sve-space-2) var(--sve-space-4);
+    font-size: var(--sve-font-size-md);
+  }
+
+  .sve-button--lg {
+    padding: var(--sve-space-3) var(--sve-space-6);
+    font-size: var(--sve-font-size-lg);
+  }
+
+  /* --- Solid variant --- */
+  .sve-button--solid.sve-c-primary {
+    background-color: var(--sve-color-primary);
+    color: var(--sve-color-primary-foreground);
+    border-color: var(--sve-color-primary);
+  }
+  .sve-button--solid.sve-c-primary:hover:not(:disabled) {
+    background-color: var(--sve-color-primary-hover);
+    border-color: var(--sve-color-primary-hover);
+  }
+  .sve-button--solid.sve-c-primary:active:not(:disabled) {
+    background-color: var(--sve-color-primary-active);
+    border-color: var(--sve-color-primary-active);
+  }
+
+  .sve-button--solid.sve-c-secondary {
+    background-color: var(--sve-color-secondary);
+    color: var(--sve-color-secondary-foreground);
+    border-color: var(--sve-color-secondary);
+  }
+  .sve-button--solid.sve-c-secondary:hover:not(:disabled) {
+    background-color: var(--sve-color-secondary-hover);
+    border-color: var(--sve-color-secondary-hover);
+  }
+
+  .sve-button--solid.sve-c-success {
+    background-color: var(--sve-color-success);
+    color: var(--sve-color-success-foreground);
+    border-color: var(--sve-color-success);
+  }
+  .sve-button--solid.sve-c-success:hover:not(:disabled) {
+    background-color: var(--sve-color-success-hover);
+    border-color: var(--sve-color-success-hover);
+  }
+
+  .sve-button--solid.sve-c-warning {
+    background-color: var(--sve-color-warning);
+    color: var(--sve-color-warning-foreground);
+    border-color: var(--sve-color-warning);
+  }
+  .sve-button--solid.sve-c-warning:hover:not(:disabled) {
+    background-color: var(--sve-color-warning-hover);
+    border-color: var(--sve-color-warning-hover);
+  }
+
+  .sve-button--solid.sve-c-danger {
+    background-color: var(--sve-color-danger);
+    color: var(--sve-color-danger-foreground);
+    border-color: var(--sve-color-danger);
+  }
+  .sve-button--solid.sve-c-danger:hover:not(:disabled) {
+    background-color: var(--sve-color-danger-hover);
+    border-color: var(--sve-color-danger-hover);
+  }
+
+  .sve-button--solid.sve-c-default {
+    background-color: var(--sve-color-default);
+    color: var(--sve-color-default-foreground);
+    border-color: var(--sve-color-default);
+  }
+  .sve-button--solid.sve-c-default:hover:not(:disabled) {
+    background-color: var(--sve-color-default-hover);
+    border-color: var(--sve-color-default-hover);
+  }
+
+  /* --- Outline variant --- */
+  .sve-button--outline.sve-c-primary {
+    background-color: transparent;
+    color: var(--sve-color-primary);
+    border-color: var(--sve-color-primary-border);
+  }
+  .sve-button--outline.sve-c-primary:hover:not(:disabled) {
+    background-color: var(--sve-color-primary-surface);
+  }
+
+  .sve-button--outline.sve-c-secondary {
+    background-color: transparent;
+    color: var(--sve-color-secondary);
+    border-color: var(--sve-color-secondary-border);
+  }
+  .sve-button--outline.sve-c-secondary:hover:not(:disabled) {
+    background-color: var(--sve-color-secondary-surface);
+  }
+
+  .sve-button--outline.sve-c-danger {
+    background-color: transparent;
+    color: var(--sve-color-danger);
+    border-color: var(--sve-color-danger-border);
+  }
+  .sve-button--outline.sve-c-danger:hover:not(:disabled) {
+    background-color: var(--sve-color-danger-surface);
+  }
+
+  .sve-button--outline.sve-c-success {
+    background-color: transparent;
+    color: var(--sve-color-success);
+    border-color: var(--sve-color-success-border);
+  }
+
+  .sve-button--outline.sve-c-warning {
+    background-color: transparent;
+    color: var(--sve-color-warning);
+    border-color: var(--sve-color-warning-border);
+  }
+
+  .sve-button--outline.sve-c-default {
+    background-color: transparent;
+    color: var(--sve-color-default-foreground);
+    border-color: var(--sve-color-default-border);
+  }
+
+  /* --- Ghost variant --- */
+  .sve-button--ghost {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .sve-button--ghost.sve-c-primary {
+    color: var(--sve-color-primary);
+  }
+  .sve-button--ghost.sve-c-primary:hover:not(:disabled) {
+    background-color: var(--sve-color-primary-surface);
+  }
+  .sve-button--ghost.sve-c-secondary {
+    color: var(--sve-color-secondary);
+  }
+  .sve-button--ghost.sve-c-secondary:hover:not(:disabled) {
+    background-color: var(--sve-color-secondary-surface);
+  }
+  .sve-button--ghost.sve-c-danger {
+    color: var(--sve-color-danger);
+  }
+  .sve-button--ghost.sve-c-danger:hover:not(:disabled) {
+    background-color: var(--sve-color-danger-surface);
+  }
+  .sve-button--ghost.sve-c-success {
+    color: var(--sve-color-success);
+  }
+  .sve-button--ghost.sve-c-warning {
+    color: var(--sve-color-warning);
+  }
+  .sve-button--ghost.sve-c-default {
+    color: var(--sve-color-default-foreground);
+  }
+  .sve-button--ghost.sve-c-default:hover:not(:disabled) {
+    background-color: var(--sve-color-default-surface);
+  }
+
+  /* --- Flat variant --- */
+  .sve-button--flat {
+    border-color: transparent;
+  }
+  .sve-button--flat.sve-c-primary {
+    background-color: var(--sve-color-primary-surface);
+    color: var(--sve-color-primary);
+  }
+  .sve-button--flat.sve-c-primary:hover:not(:disabled) {
+    background-color: var(--sve-color-primary-border);
+  }
+  .sve-button--flat.sve-c-secondary {
+    background-color: var(--sve-color-secondary-surface);
+    color: var(--sve-color-secondary);
+  }
+  .sve-button--flat.sve-c-danger {
+    background-color: var(--sve-color-danger-surface);
+    color: var(--sve-color-danger);
+  }
+  .sve-button--flat.sve-c-success {
+    background-color: var(--sve-color-success-surface);
+    color: var(--sve-color-success);
+  }
+  .sve-button--flat.sve-c-warning {
+    background-color: var(--sve-color-warning-surface);
+    color: var(--sve-color-warning);
+  }
+  .sve-button--flat.sve-c-default {
+    background-color: var(--sve-color-default-surface);
+    color: var(--sve-color-default-foreground);
+  }
 </style>

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

@@ -1,52 +1,38 @@
-import { SvelteComponentTyped } from "svelte";
-
-export type ButtonSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        
-        /**
-         * The button label o title
-         *  @default "Button"
-         */
-        label?: string | undefined;
-
-        /**
-         * The button click handler
-         */
-        onClick?: (() => void) | undefined;
-
-        /**
-         * The button color
-         */
-        color?: string | undefined;
-
-        /**
-         * The button size (xsm, sm, md, lg, xl, xxl, xxxl)
-         */
-        size?: ButtonSize | undefined;
-
-        /**
-         * The button disabled state
-         * @default false
-         */
-        disabled?: boolean | undefined;
+type Variant = 'solid' | 'outline' | 'ghost' | 'flat';
+type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+type Size = 'sm' | 'md' | 'lg';
+export declare const buttonVariants: (props?: import("../../internal/variants").VariantProps<{
+    variant: {
+        solid: string;
+        outline: string;
+        ghost: string;
+        flat: string;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        default: string;
     };
-    slots: {
-        default: {};
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
     };
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-
-/**
- * A button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
- * @see Docs https://sveui.org/components/button
- */
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}> | undefined) => string;
+export type { Variant, Color, Size };
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends Omit<HTMLButtonAttributes, 'class'> {
+    variant?: Variant;
+    color?: Color;
+    size?: Size;
+    class?: string;
+    children?: Snippet;
 }
-export { Button, ButtonProps };
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;
+//# 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.ts"],"names":[],"mappings":"AAKE,KAAK,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACtD,KAAK,KAAK,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AACpF,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAG/B,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;yBA4BzB,CAAC;AAEH,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAGvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgCH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}