@classic-homes/theme-svelte 0.1.0

package/dist/lib/components/FormField.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import Label from './Label.svelte';
+  import Input from './Input.svelte';
+  import Textarea from './Textarea.svelte';
+
+  interface Props {
+    /** Label text */
+    label: string;
+    /** Input ID for association */
+    id: string;
+    /** Input type (text, email, password, tel, url, number, textarea) */
+    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'textarea';
+    /** Field value (bindable) */
+    value?: string;
+    /** Error message */
+    error?: string;
+    /** Help text / hint */
+    hint?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Required field */
+    required?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Autocomplete attribute */
+    autocomplete?: AutoFill;
+    /** Name attribute */
+    name?: string;
+    /** Number of rows for textarea */
+    rows?: number;
+    /** Readonly state */
+    readonly?: boolean;
+    /** Additional class for container */
+    class?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Additional props */
+    [key: string]: unknown;
+  }
+
+  let {
+    label,
+    id,
+    type = 'text',
+    value = $bindable(''),
+    error,
+    hint,
+    disabled = false,
+    required = false,
+    placeholder,
+    autocomplete,
+    name,
+    rows = 3,
+    readonly = false,
+    class: className,
+    onValueChange,
+    ...restProps
+  }: Props = $props();
+
+  // Generate IDs for aria associations (derived to react to id changes)
+  const errorId = $derived(`${id}-error`);
+  const hintId = $derived(`${id}-hint`);
+
+  // Compute aria-describedby based on error/hint presence
+  // Error takes precedence over hint
+  const ariaDescribedBy = $derived.by(() => {
+    if (error) return errorId;
+    if (hint) return hintId;
+    return undefined;
+  });
+
+  // Input styling with error state
+  const inputClasses = $derived(error ? 'border-destructive focus-visible:ring-destructive' : '');
+</script>
+
+<div class={cn('space-y-2', className)}>
+  <!-- Label with required indicator -->
+  <Label for={id} {disabled}>
+    {label}
+    {#if required}
+      <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
+      <span class="sr-only">(required)</span>
+    {/if}
+  </Label>
+
+  <!-- Input or Textarea based on type -->
+  {#if type === 'textarea'}
+    <Textarea
+      {id}
+      bind:value
+      {placeholder}
+      {disabled}
+      {readonly}
+      {required}
+      {name}
+      {rows}
+      {onValueChange}
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={ariaDescribedBy}
+      class={inputClasses}
+      {...restProps}
+    />
+  {:else}
+    <Input
+      {id}
+      {type}
+      bind:value
+      {placeholder}
+      {disabled}
+      {readonly}
+      {required}
+      {name}
+      {autocomplete}
+      {onValueChange}
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={ariaDescribedBy}
+      class={inputClasses}
+      {...restProps}
+    />
+  {/if}
+
+  <!-- Error message (takes precedence over hint) -->
+  {#if error}
+    <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+      {error}
+    </p>
+  {:else if hint}
+    <!-- Hint text -->
+    <p id={hintId} class="text-sm text-muted-foreground">
+      {hint}
+    </p>
+  {/if}
+</div>

package/dist/lib/components/FormField.svelte.d.ts

@@ -0,0 +1,37 @@
+interface Props {
+    /** Label text */
+    label: string;
+    /** Input ID for association */
+    id: string;
+    /** Input type (text, email, password, tel, url, number, textarea) */
+    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'textarea';
+    /** Field value (bindable) */
+    value?: string;
+    /** Error message */
+    error?: string;
+    /** Help text / hint */
+    hint?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Required field */
+    required?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Autocomplete attribute */
+    autocomplete?: AutoFill;
+    /** Name attribute */
+    name?: string;
+    /** Number of rows for textarea */
+    rows?: number;
+    /** Readonly state */
+    readonly?: boolean;
+    /** Additional class for container */
+    class?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Additional props */
+    [key: string]: unknown;
+}
+declare const FormField: import("svelte").Component<Props, {}, "value">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/lib/components/Input.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    type?: string;
+    value?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    autocomplete?: AutoFill;
+    /** Input mode hint for mobile keyboards */
+    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    class?: string;
+    onValueChange?: (value: string) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    type = 'text',
+    value = $bindable(''),
+    placeholder,
+    disabled = false,
+    readonly = false,
+    required = false,
+    name,
+    id,
+    autocomplete,
+    inputmode,
+    class: className,
+    onValueChange,
+    ...restProps
+  }: Props = $props();
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    value = target.value;
+    onValueChange?.(target.value);
+  }
+</script>
+
+<input
+  {type}
+  {value}
+  {placeholder}
+  {disabled}
+  {readonly}
+  {required}
+  {name}
+  {id}
+  {autocomplete}
+  {inputmode}
+  class={cn(
+    'flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  oninput={handleInput}
+  {...restProps}
+/>

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

@@ -0,0 +1,19 @@
+interface Props {
+    type?: string;
+    value?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    autocomplete?: AutoFill;
+    /** Input mode hint for mobile keyboards */
+    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    class?: string;
+    onValueChange?: (value: string) => void;
+    [key: string]: unknown;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/lib/components/Label.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Label as LabelPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    for?: string;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    for: htmlFor,
+    disabled = false,
+    class: className,
+    children,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<LabelPrimitive.Root
+  for={htmlFor}
+  class={cn(
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-700 dark:text-gray-300',
+    disabled && 'opacity-50 cursor-not-allowed',
+    className
+  )}
+  {...restProps}
+>
+  {@render children()}
+</LabelPrimitive.Root>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    for?: string;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/lib/components/LoadingLogo.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Width in pixels */
+    width?: number;
+    /** Height in pixels */
+    height?: number;
+    /** Enables loading animation */
+    loading?: boolean;
+    /** Color variant for different backgrounds */
+    variant?: 'light' | 'dark';
+    /** Additional CSS classes */
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    width = 40,
+    height = 40,
+    loading = false,
+    variant = 'dark',
+    class: className,
+    ...restProps
+  }: Props = $props();
+
+  // Color definitions
+  const colors = {
+    dark: {
+      fill: '#C50F22', // Brand red
+      fillLoading: '#ffffff', // White when loading
+      stroke: '#C50F22', // Red stroke when loading
+    },
+    light: {
+      fill: '#ffffff', // White
+      fillLoading: '#C50F22', // Red when loading
+      stroke: '#ffffff', // White stroke when loading
+    },
+  };
+
+  const currentColors = $derived(colors[variant]);
+  const fillColor = $derived(loading ? currentColors.fillLoading : currentColors.fill);
+  const strokeColor = $derived(currentColors.stroke);
+
+  // SVG paths for the Classic Homes floral/rose logo
+  const logoPaths = [
+    // Left leaf/petal
+    'M9.902 16.6c.3.7 1.7.8 1-.6-.6-1.4-2.3-5.1-6.1-6.3-1.7-.5-3.7.4-4.3 1.6-.4.7-1.1 2.9.5 4.3.8.7 1.9 1.2 3.6 1 .4-.1.9-.5.6-.8-.5-.4-1.9-1.7-1.1-2.7.7-.8 1.4-.6 2-.3.4.2 2.1 1 3.7 3.6l.1.2z',
+    // Right leaf/petal
+    'M14.602 16.6c-.3.7-1.7.8-1-.6.6-1.4 2.3-5.1 6.1-6.3 1.7-.5 3.7.4 4.3 1.6.4.7 1.1 2.9-.5 4.3-.8.7-1.9 1.2-3.6 1-.4-.1-.9-.5-.6-.8.5-.4 1.9-1.7 1.1-2.7-.7-.8-1.4-.6-2-.3-.4.2-2.1 1-3.7 3.6l-.1.2z',
+    // Center stem/bud
+    'M12.202 0c.7 1.3 2.1 3.2 2.3 5.3.1 1.5-.8 8.3-2.3 11.7-1.5-3.5-2.4-10.3-2.3-11.7.2-2.1 1.6-4 2.3-5.3z',
+    // Base bar
+    'M9.002 18.1c-.8 0-.7.8-.1.8h6.7c.7 0 .7-.8-.1-.8h-6.5z',
+    // Pot/vase center
+    'M13.802 24.8c-1.1-1.1-.9-4.6-.9-4.6h-1.3s.2 3.6-.9 4.6h3.1z',
+    // Pot/vase right detail
+    'M14.202 22.5c-.1-.3-.5-1.4-.6-2.3 0-.2.6-.5.7.1.1.6.4 1.6.6 1.9.3.5-.4.9-.7.3z',
+    // Pot/vase left detail
+    'M10.302 22.5c.1-.3.5-1.4.6-2.2 0-.3-.5-.6-.7 0-.1.6-.4 1.6-.6 1.9-.3.5.4.9.7.3z',
+  ];
+</script>
+
+<div
+  class={cn('inline-flex items-center justify-center', className)}
+  style="width: {width}px; height: {height}px;"
+  role={loading ? 'status' : 'img'}
+  aria-label={loading ? 'Loading' : 'Classic Homes'}
+  {...restProps}
+>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="-1 0 26 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    class={cn(loading && 'loading-logo-animated')}
+  >
+    <!-- Main filled paths -->
+    <g fill={fillColor} class="transition-all duration-300">
+      {#each logoPaths as path}
+        <path d={path} />
+      {/each}
+    </g>
+
+    <!-- Tracing stroke overlay (only visible when loading) -->
+    {#if loading}
+      <g
+        fill="none"
+        stroke={strokeColor}
+        stroke-width="0.5"
+        stroke-dasharray="10 4"
+        class="loading-logo-trace"
+      >
+        {#each logoPaths as path}
+          <path d={path} />
+        {/each}
+      </g>
+    {/if}
+  </svg>
+
+  {#if loading}
+    <span class="sr-only">Loading</span>
+  {/if}
+</div>
+
+<style>
+  @keyframes trace {
+    to {
+      stroke-dashoffset: -14;
+    }
+  }
+
+  .loading-logo-trace {
+    animation: trace 2s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .loading-logo-trace {
+      animation: none;
+    }
+  }
+</style>

package/dist/lib/components/LoadingLogo.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /** Width in pixels */
+    width?: number;
+    /** Height in pixels */
+    height?: number;
+    /** Enables loading animation */
+    loading?: boolean;
+    /** Color variant for different backgrounds */
+    variant?: 'light' | 'dark';
+    /** Additional CSS classes */
+    class?: string;
+    [key: string]: unknown;
+}
+declare const LoadingLogo: import("svelte").Component<Props, {}, "">;
+type LoadingLogo = ReturnType<typeof LoadingLogo>;
+export default LoadingLogo;

package/dist/lib/components/LogoMain.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import Badge from './Badge.svelte';
+
+  interface Props {
+    /** Layout variant */
+    variant?: 'horizontal' | 'stacked' | 'icon';
+    /** Color mode for different backgrounds */
+    color?: 'dark' | 'light' | 'mono-dark' | 'mono-light';
+    /** Optional subtitle (e.g., "CHAPI", "MY HOME") */
+    subtitle?: string;
+    /** Environment indicator (LOCAL, DEV, DEMO) */
+    environment?: 'local' | 'dev' | 'demo';
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    class?: string;
+    /** Accessible label - set to empty string if wrapped in a link with its own label */
+    ariaLabel?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'horizontal',
+    color = 'dark',
+    subtitle,
+    environment,
+    size = 'md',
+    class: className,
+    ariaLabel = 'Classic Homes',
+    ...restProps
+  }: Props = $props();
+
+  // Size configurations
+  const sizes = {
+    sm: { icon: 24, title: '1rem', subtitle: '0.7rem', badge: '0.5rem', gap: '0.375rem' },
+    md: { icon: 32, title: '1.2rem', subtitle: '0.85rem', badge: '0.6rem', gap: '0.5rem' },
+    lg: { icon: 40, title: '1.4rem', subtitle: '1rem', badge: '0.7rem', gap: '0.5rem' },
+  };
+
+  // Environment badge configuration
+  const environmentConfig = {
+    local: { label: 'LOCAL', variant: 'info' as const },
+    dev: { label: 'DEV', variant: 'warning' as const },
+    demo: { label: 'DEMO', variant: 'secondary' as const },
+  };
+
+  const envConfig = $derived(environment ? environmentConfig[environment] : null);
+
+  const currentSize = $derived(sizes[size]);
+
+  // Color definitions based on brand guidelines
+  const colors = {
+    dark: {
+      logo: '#C50F22', // Brand red
+      title: '#000000', // Black for light backgrounds
+      subtitle: '#7a7a7a', // Gray
+    },
+    light: {
+      logo: '#ffffff',
+      title: '#ffffff',
+      subtitle: 'rgba(255, 255, 255, 0.8)',
+    },
+    'mono-dark': {
+      logo: '#002e3f', // Navy
+      title: '#002e3f',
+      subtitle: '#7a7a7a',
+    },
+    'mono-light': {
+      logo: '#ffffff',
+      title: '#ffffff',
+      subtitle: 'rgba(255, 255, 255, 0.8)',
+    },
+  };
+
+  const currentColors = $derived(colors[color]);
+
+  // SVG paths for the Classic Homes floral/rose logo
+  const logoPaths = [
+    // Left leaf/petal
+    'M9.902 16.6c.3.7 1.7.8 1-.6-.6-1.4-2.3-5.1-6.1-6.3-1.7-.5-3.7.4-4.3 1.6-.4.7-1.1 2.9.5 4.3.8.7 1.9 1.2 3.6 1 .4-.1.9-.5.6-.8-.5-.4-1.9-1.7-1.1-2.7.7-.8 1.4-.6 2-.3.4.2 2.1 1 3.7 3.6l.1.2z',
+    // Right leaf/petal
+    'M14.602 16.6c-.3.7-1.7.8-1-.6.6-1.4 2.3-5.1 6.1-6.3 1.7-.5 3.7.4 4.3 1.6.4.7 1.1 2.9-.5 4.3-.8.7-1.9 1.2-3.6 1-.4-.1-.9-.5-.6-.8.5-.4 1.9-1.7 1.1-2.7-.7-.8-1.4-.6-2-.3-.4.2-2.1 1-3.7 3.6l-.1.2z',
+    // Center stem/bud
+    'M12.202 0c.7 1.3 2.1 3.2 2.3 5.3.1 1.5-.8 8.3-2.3 11.7-1.5-3.5-2.4-10.3-2.3-11.7.2-2.1 1.6-4 2.3-5.3z',
+    // Base bar
+    'M9.002 18.1c-.8 0-.7.8-.1.8h6.7c.7 0 .7-.8-.1-.8h-6.5z',
+    // Pot/vase center
+    'M13.802 24.8c-1.1-1.1-.9-4.6-.9-4.6h-1.3s.2 3.6-.9 4.6h3.1z',
+    // Pot/vase right detail
+    'M14.202 22.5c-.1-.3-.5-1.4-.6-2.3 0-.2.6-.5.7.1.1.6.4 1.6.6 1.9.3.5-.4.9-.7.3z',
+    // Pot/vase left detail
+    'M10.302 22.5c.1-.3.5-1.4.6-2.2 0-.3-.5-.6-.7 0-.1.6-.4 1.6-.6 1.9-.3.5.4.9.7.3z',
+  ];
+</script>
+
+{#if variant === 'icon'}
+  <!-- Icon only -->
+  <div
+    class={cn('shrink-0', className)}
+    style="width: {currentSize.icon}px; height: {currentSize.icon}px;"
+    role={ariaLabel ? 'img' : undefined}
+    aria-label={ariaLabel || undefined}
+    {...restProps}
+  >
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <g fill={currentColors.logo}>
+        {#each logoPaths as path}
+          <path d={path} />
+        {/each}
+      </g>
+    </svg>
+  </div>
+{:else if variant === 'stacked'}
+  <!-- Stacked layout (icon above text) -->
+  <div
+    class={cn('flex flex-col items-center justify-start shrink-0', className)}
+    style="gap: {currentSize.gap};"
+    role={ariaLabel ? 'img' : undefined}
+    aria-label={ariaLabel || undefined}
+    {...restProps}
+  >
+    <div style="width: {currentSize.icon}px; height: {currentSize.icon}px;">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 25 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        <g fill={currentColors.logo}>
+          {#each logoPaths as path}
+            <path d={path} />
+          {/each}
+        </g>
+      </svg>
+    </div>
+    <div
+      class="flex flex-col items-center justify-start"
+      aria-hidden={ariaLabel ? 'true' : undefined}
+    >
+      <span
+        class="leading-tight font-medium m-0 p-0"
+        style="font-family: 'Figtree', system-ui, sans-serif; font-size: {currentSize.title}; color: {currentColors.title};"
+      >
+        Classic Homes
+      </span>
+      {#if subtitle || envConfig}
+        <div class="flex flex-row items-center justify-center gap-1.5">
+          {#if envConfig}
+            <Badge
+              variant={envConfig.variant}
+              class="font-bold px-1.5 py-0"
+              style="font-size: {currentSize.badge}; height: auto; line-height: 1.4;"
+            >
+              {envConfig.label}
+            </Badge>
+          {/if}
+          {#if subtitle}
+            <span
+              class="uppercase font-black leading-none m-0 p-0"
+              style="font-family: 'Figtree', system-ui, sans-serif; font-size: {currentSize.subtitle}; color: {currentColors.subtitle};"
+            >
+              {subtitle}
+            </span>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <!-- Horizontal layout (default) -->
+  <div
+    class={cn('flex flex-row items-center justify-start shrink-0', className)}
+    style="gap: {currentSize.gap};"
+    role={ariaLabel ? 'img' : undefined}
+    aria-label={ariaLabel || undefined}
+    {...restProps}
+  >
+    <div style="width: {currentSize.icon}px; height: {currentSize.icon}px;">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 25 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        <g fill={currentColors.logo}>
+          {#each logoPaths as path}
+            <path d={path} />
+          {/each}
+        </g>
+      </svg>
+    </div>
+    <div
+      class="flex flex-col items-start justify-start"
+      aria-hidden={ariaLabel ? 'true' : undefined}
+    >
+      <span
+        class="leading-tight font-medium m-0 p-0 whitespace-nowrap"
+        style="font-family: 'Figtree', system-ui, sans-serif; font-size: {currentSize.title}; color: {currentColors.title};"
+      >
+        Classic Homes
+      </span>
+      {#if subtitle || envConfig}
+        <div class="flex flex-row items-center justify-end gap-1.5 w-full">
+          {#if envConfig}
+            <Badge
+              variant={envConfig.variant}
+              class="font-bold px-1.5 py-0"
+              style="font-size: {currentSize.badge}; height: auto; line-height: 1.4;"
+            >
+              {envConfig.label}
+            </Badge>
+          {/if}
+          {#if subtitle}
+            <span
+              class="uppercase font-black leading-none m-0 p-0"
+              style="font-family: 'Figtree', system-ui, sans-serif; font-size: {currentSize.subtitle}; color: {currentColors.subtitle};"
+            >
+              {subtitle}
+            </span>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/lib/components/LogoMain.svelte.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    /** Layout variant */
+    variant?: 'horizontal' | 'stacked' | 'icon';
+    /** Color mode for different backgrounds */
+    color?: 'dark' | 'light' | 'mono-dark' | 'mono-light';
+    /** Optional subtitle (e.g., "CHAPI", "MY HOME") */
+    subtitle?: string;
+    /** Environment indicator (LOCAL, DEV, DEMO) */
+    environment?: 'local' | 'dev' | 'demo';
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    class?: string;
+    /** Accessible label - set to empty string if wrapped in a link with its own label */
+    ariaLabel?: string;
+    [key: string]: unknown;
+}
+declare const LogoMain: import("svelte").Component<Props, {}, "">;
+type LogoMain = ReturnType<typeof LogoMain>;
+export default LogoMain;