lutra 0.0.1

package/dist/Layout/LayoutHeader.svelte

@@ -0,0 +1,94 @@
+<script>import {} from "svelte";
+let {
+  left,
+  center,
+  right,
+  sticky,
+  skipToContentText = "Skip to content"
+} = $props();
+</script>
+
+<header class="LayoutHeader" class:sticky>
+    <a href="#skip" class="Skip">{skipToContentText}</a>
+    <ul>
+        {#if left}
+            <li class="left">
+                {@render left()}
+            </li>
+        {/if}
+        {#if center}
+            <li class="center">
+                {@render center()}
+            </li>
+        {/if}
+        {#if right}
+            <li class="right">
+                {@render right()}
+            </li>
+        {/if}
+    </ul>
+</header>
+
+<style>
+    .LayoutHeader {
+        position: relative;
+        z-index: 1;
+        padding: 0.5rem 1rem;
+        background: color-mix(in srgb, var(--bg-app) 50%, transparent 50%);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+    }
+    .LayoutHeader.sticky {
+        position: sticky;
+        top: 0;
+    }
+    .Skip {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        padding: 0.5rem;
+        background: var(--bg-app);
+        font-size: 1rem;
+        z-index: 1000;
+    }
+    .Skip:focus {
+        top: 0;
+    }
+    .right :global(a) {
+        color: var(--text);
+    }
+    .right :global(a:hover) {
+        color: var(--text-link);
+    }
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: grid;
+        grid-template-areas: "left center right";
+        grid-template-columns: 1fr auto 1fr;
+        align-items: center;
+    }
+    li {
+        padding: 0;
+        margin: 0;
+        flex-basis: 0;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 1rem;
+    }
+    li.left { grid-area: left; }
+    li.center { grid-area: center; }
+    li.right { grid-area: right; }
+    ul > :not(:first-child):not(:last-child) {
+        grid-column: center;
+    }
+    ul > :first-child:last-child {
+        grid-column: 1 / -1;
+    }
+    li.right {
+        display: flex;
+        justify-content: flex-end;
+    }
+</style>

package/dist/Layout/LayoutHeader.svelte.d.ts

@@ -0,0 +1,38 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        left?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /**
+         * The center of the header (usually a menu), search bar, etc.
+         */
+        center?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /**
+         * The right side of the header (usually user info, settings, etc.)
+         */
+        right?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /**
+         * The text to display for the skip to content link
+         */
+        skipToContentText?: string | undefined;
+        /**
+         * Whether the header should be sticky
+         */
+        sticky?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LayoutHeaderProps = typeof __propDef.props;
+export type LayoutHeaderEvents = typeof __propDef.events;
+export type LayoutHeaderSlots = typeof __propDef.slots;
+export default class LayoutHeader extends SvelteComponent<LayoutHeaderProps, LayoutHeaderEvents, LayoutHeaderSlots> {
+}
+export {};

package/dist/Layout/LayoutTypes.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Layout container types.
+ * `ui` is for UI components. It will not add margins.
+ * `page` is for page content. It will add automatic margins to typography and other page content.
+ */
+export type LayoutContainerType = 'ui' | 'page';
+export declare const BREAKPOINTS: {
+    s: number;
+    m: number;
+    l: number;
+};
+export declare const BREAKPOINT_SIZES: number[];
+export declare const SMALLEST_BREAKPOINT: number;
+export declare const LARGEST_BREAKPOINT: number;
+export declare const MIN_WIDTH = 280;

package/dist/Layout/LayoutTypes.svelte.js

@@ -0,0 +1,9 @@
+export const BREAKPOINTS = {
+    s: 320,
+    m: 672,
+    l: 1312,
+};
+export const BREAKPOINT_SIZES = Object.values(BREAKPOINTS);
+export const SMALLEST_BREAKPOINT = BREAKPOINT_SIZES[0];
+export const LARGEST_BREAKPOINT = BREAKPOINT_SIZES[BREAKPOINT_SIZES.length - 1];
+export const MIN_WIDTH = 280;

package/dist/Layout/PageContent.svelte

@@ -0,0 +1,89 @@
+<script>import { setContext } from "svelte";
+let {
+  children,
+  pad = false,
+  middle = false,
+  center = false
+} = $props();
+let style = $derived.by(() => {
+  if (typeof pad === "boolean") {
+    return `--padBlockStart: ${pad ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padBlockEnd: ${pad ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padInlineStart: ${pad ? "var(--padding, var(--padding-inline, 4rem))" : "0"}; --padInlineEnd: ${pad ? "var(--padding, var(--padding-inline, 4rem))" : "0"};`;
+  } else if (typeof pad === "string") {
+    return `--padBlockStart: ${pad}; --padBlockEnd: ${pad}; --padInlineStart: ${pad}; --padInlineEnd: ${pad};`;
+  } else if (Array.isArray(pad) && pad.length > 1 && typeof pad[0] === "string") {
+    switch (pad.length) {
+      case 2:
+        return `--padBlockStart: ${pad[0]}; --padBlockEnd: ${pad[0]}; --padInlineStart: ${pad[1]}; --padInlineEnd: ${pad[1]};`;
+      case 3:
+        return `--padBlockStart: ${pad[0]}; --padBlockEnd: ${pad[1]}; --padInlineStart: ${pad[2]}; --padInlineEnd: ${pad[2]};`;
+      case 4:
+        return `--padBlockStart: ${pad[0]}; --padBlockEnd: ${pad[1]}; --padInlineStart: ${pad[2]}; --padInlineEnd: ${pad[3]};`;
+    }
+  } else if (Array.isArray(pad) && pad.length > 1) {
+    switch (pad.length) {
+      case 2:
+        return `--padBlockStart: ${pad[0] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padBlockEnd: ${pad[0] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padInlineStart: ${pad[1] ? "var(--padding, var(--padding-inline, 4rem))" : "0"}; --padInlineEnd: ${pad[1] ? "var(--padding, var(--padding-inline, 4rem))" : "0"};`;
+      case 3:
+        return `--padBlockStart: ${pad[0] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padBlockEnd: ${pad[1] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padInlineStart: ${pad[2] ? "var(--padding, var(--padding-inline, 4rem))" : "0"}; --padInlineEnd: ${pad[2] ? "var(--padding, var(--padding-inline, 4rem))" : "0"};`;
+      case 4:
+        return `--padBlockStart: ${pad[0] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padBlockEnd: ${pad[1] ? "var(--padding, var(--padding-block, 4rem))" : "0"}; --padInlineStart: ${pad[2] ? "var(--padding, var(--padding-inline, 4rem))" : "0"}; --padInlineEnd: ${pad[3] ? "var(--padding, var(--padding-inline, 4rem))" : "0"};`;
+    }
+  }
+  return "";
+});
+</script>
+
+<article
+    class="Page"
+    class:middle
+    class:center
+    style={style}
+>
+    <div class="PaddingContainer">
+        <div class="PageContent">
+            {@render children()}
+        </div>
+    </div>
+</article>
+
+<style>
+    .Page {
+        inline-size: 100%;
+        display: grid;
+        grid-template-columns: 1fr;
+        container-type: inline-size;
+        container-name: page;
+        position: relative;
+    }
+    .PageContent {
+        max-inline-size: var(--max-inline-size, 1560px);
+        flex-grow: 1;
+        --isPage: 1;
+    }
+    .Page.center {
+        justify-content: center;
+    }
+    .Page.middle {
+        block-size: 100%;
+        align-items: center;
+    }
+    .Page .PaddingContainer {
+        padding-block-start: var(--padBlockStart);
+        padding-block-end: var(--padBlockEnd);
+        padding-inline-start: var(--padInlineStart);
+        padding-inline-end: var(--padInlineEnd);
+        display: flex;
+    }
+    .Page.center .PaddingContainer {
+        justify-content: center;
+    }
+
+    @media (max-width: 960px) {
+        .Page .PaddingContainer {
+            padding-block-start: calc(var(--padBlockStart) / 2);
+            padding-block-end: calc(var(--padBlockEnd) / 2);
+            padding-inline-start: calc(var(--padInlineStart) / 2);
+            padding-inline-end: calc(var(--padInlineEnd) / 2);
+        }
+    }
+</style>

package/dist/Layout/PageContent.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        children: Snippet;
+        /** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
+        pad?: string | boolean | [boolean, boolean] | [boolean, boolean, boolean] | [boolean, boolean, boolean, boolean] | [string, string] | [string, string, string] | [string, string, string, string] | undefined;
+        /** Center the content in the block direction. */
+        middle?: boolean | undefined;
+        /** Center the content in the inline direction. */
+        center?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PageContentProps = typeof __propDef.props;
+export type PageContentEvents = typeof __propDef.events;
+export type PageContentSlots = typeof __propDef.slots;
+export default class PageContent extends SvelteComponent<PageContentProps, PageContentEvents, PageContentSlots> {
+}
+export {};

package/dist/Layout/Theme.svelte

@@ -0,0 +1,215 @@
+<script>import { browser } from "$app/environment";
+import { getContext, setContext } from "svelte";
+let {
+  theme,
+  children
+} = $props();
+const root = getContext("theme") === void 0;
+if (theme === "invert") {
+  const previousTheme = getContext("theme") || "light";
+  theme = previousTheme === "light" ? "dark" : "light";
+} else {
+  theme = theme || (browser ? localStorage.getItem("theme") || window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
+}
+const existingTheme = getContext("theme");
+setContext("theme", theme);
+console.log("theme", theme);
+</script>
+
+<svelte:body style="background-color: var(--bg-app);" />
+
+<svelte:head>
+    {#if !existingTheme}
+        <meta name="theme-color" content="{theme === 'dark' ? '#000' : '#fff'}" />
+    {/if}
+</svelte:head>
+
+<span class="Theme {theme ? theme : ''}" class:root>
+    {@render children()}
+</span>
+
+<style>
+    .Theme {
+        display: contents;
+    }
+    .Theme.light {
+        --mix-target: var(--l-mix-target);
+        /* bg */
+        --bg-app: var(--l-bg-app);
+        --bg-subtle: var(--l-bg-subtle);
+        --bg-overlay: var(--l-bg-overlay);
+        --shadow: var(--l-shadow);
+        /* border */
+        --border-color: var(--l-border-color);
+        --border-subtle-color: var(--l-border-subtle-color);
+        --focus-color: var(--l-focus-color);
+        --border: var(--l-border);
+        --border-subtle: var(--l-border-subtle);
+        --focus-outline: var(--l-focus-outline);
+        /* text */
+        --text: var(--l-text);
+        --text-subtle: var(--l-text-subtle);
+        --text-highlight: var(--l-text-highlight);
+        --text-heading: var(--l-text-heading);
+        --text-link: var(--l-text-link);
+        --text-warn: var(--l-text-warn);
+        --text-icon: var(--l-text-icon);
+        --text-subtle-icon: var(--l-text-subtle-icon);
+        --text-warn-icon: var(--l-text-warn-icon);
+        /* fields */
+        --field-bg: var(--l-field-bg);
+        --field-border: var(--l-field-border);
+        --field-text: var(--l-field-text);
+        --field-placeholder: var(--l-field-placeholder);
+        --field-label: var(--l-field-label);
+        /* toggle */
+        --toggle-on: var(--l-toggle-on);
+        --toggle-off: var(--l-toggle-off);
+        /* buttons */
+        --button-bg: var(--l-button-bg);
+        --button-text: var(--l-button-text);
+        --button-border-color: var(--l-button-border-color);
+        --button-border: var(--l-button-border);
+        /* buttons: secondary */
+        --button-secondary-bg: var(--l-button-secondary-bg);
+        --button-secondary-text: var(--l-button-secondary-text);
+        --button-secondary-border-color: var(--l-button-secondary-border-color);
+        --button-secondary-border: var(--l-button-secondary-border);
+        /* buttons: disabled */
+        --button-disabled-bg: var(--l-button-disabled-bg);
+        --button-disabled-text: var(--l-button-disabled-text);
+        --button-disabled-border-color: var(--l-button-disabled-border-color);
+        --button-disabled-border: var(--l-button-disabled-border);
+        /* buttons: outlined */
+        --button-outlined-text: var(--l-button-outlined-text);
+        --button-outlined-border-color: var(--l-button-outlined-border-color);
+        --button-outlined-border: var(--l-button-outlined-border);
+        /* buttons: warn */
+        --button-warn-bg: var(--l-button-warn-bg);
+        --button-warn-text: var(--l-button-warn-text);
+        --button-warn-border-color: var(--l-button-warn-border-color);
+        --button-warn-border: var(--l-button-warn-border);
+        /* warn */
+        --warn-bg: var(--l-warn-bg);
+        --warn-border: var(--l-warn-border);
+        --warn-text: var(--l-warn-text);
+        /* success */
+        --success-bg: var(--l-success-bg);
+        --success-border: var(--l-success-border);
+        --success-text: var(--l-success-text);
+        /* error */
+        --error-bg: var(--l-error-bg);
+        --error-border: var(--l-error-border);
+        --error-text: var(--l-error-text);
+        /* info */
+        --info-bg: var(--l-info-bg);
+        --info-border: var(--l-info-border);
+        --info-text: var(--l-info-text);
+        /* menu */
+        --menu-bg: var(--l-menu-bg);
+        --menu-bg-active: var(--l-menu-bg-active);
+        --menu-bg-hover: var(--l-menu-bg-hover);
+        --menu-border: var(--l-menu-border);
+        --menu-link: var(--l-menu-link);
+        --menu-link-hover: var(--l-menu-link-hover);
+        --menu-link-active: var(--l-menu-link-active);
+        --menu-link-active-hover: var(--l-menu-link-active-hover);
+        /* status */
+        --status-default: var(--l-status-default);
+        --status-ok: var(--l-status-ok);
+        --status-alert: var(--l-status-alert);
+        --status-warn: var(--l-status-warn);
+        --status-info: var(--l-status-info);
+        --status-task: var(--l-status-task);
+    }
+    .Theme.dark {
+        --mix-target: var(--d-mix-target);
+        /* bg */
+        --bg-app: var(--d-bg-app);
+        --bg-subtle: var(--d-bg-subtle);
+        --bg-overlay: var(--d-bg-overlay);
+        --shadow: var(--d-shadow);
+        /* border */
+        --border-color: var(--d-border-color);
+        --border-subtle-color: var(--d-border-subtle-color);
+        --focus-color: var(--d-focus-color);
+        --border: var(--d-border);
+        --border-subtle: var(--d-border-subtle);
+        --focus-outline: var(--d-focus-outline);
+        /* text */
+        --text: var(--d-text);
+        --text-subtle: var(--d-text-subtle);
+        --text-highlight: var(--d-text-highlight);
+        --text-heading: var(--d-text-heading);
+        --text-link: var(--d-text-link);
+        --text-link-hover: var(--d-text-link-hover);
+        --text-warn: var(--d-text-warn);
+        --text-icon: var(--d-text-icon);
+        --text-subtle-icon: var(--d-text-subtle-icon);
+        --text-warn-icon: var(--d-text-warn-icon);
+        /* fields */
+        --field-bg: var(--d-field-bg);
+        --field-border: var(--d-field-border);
+        --field-text: var(--d-field-text);
+        --field-placeholder: var(--d-field-placeholder);
+        --field-label: var(--d-field-label);
+        /* toggle */
+        --toggle-on: var(--d-toggle-on);
+        --toggle-on-hover: var(--d-toggle-on-hover);
+        --toggle-off: var(--d-toggle-off);
+        --toggle-off-hover: var(--d-toggle-off-hover);
+        /* buttons */
+        --button-bg: var(--d-button-bg);
+        --button-text: var(--d-button-text);
+        --button-border-color: var(--d-button-border-color);
+        --button-border: var(--d-button-border);
+        /* buttons: secondary */
+        --button-secondary-bg: var(--d-button-secondary-bg);
+        --button-secondary-text: var(--d-button-secondary-text);
+        --button-secondary-border-color: var(--d-button-secondary-border-color);
+        --button-secondary-border: var(--d-button-secondary-border);
+        /* buttons: disabled */
+        --button-disabled-bg: var(--d-button-disabled-bg);
+        --button-disabled-text: var(--d-button-disabled-text);
+        --button-disabled-border-color: var(--d-button-disabled-border-color);
+        --button-disabled-border: var(--d-button-disabled-border);
+        /* buttons: outlined */
+        --button-outlined-text: var(--d-button-outlined-text);
+        --button-outlined-border-color: var(--d-button-outlined-border-color);
+        --button-outlined-border: var(--d-button-outlined-border);
+        /* buttons: warn */
+        --button-warn-bg: var(--d-button-warn-bg);
+        --button-warn-text: var(--d-button-warn-text);
+        --button-warn-border-color: var(--d-button-warn-border-color);
+        --button-warn-border: var(--d-button-warn-border);
+        /* warn */
+        --warn-bg: var(--d-warn-bg);
+        --warn-border: var(--d-warn-border);
+        --warn-text: var(--d-warn-text);
+        /* success */
+        --success-bg: var(--d-success-bg);
+        --success-border: var(--d-success-border);
+        --success-text: var(--d-success-text);
+        /* error */
+        --error-bg: var(--d-error-bg);
+        --error-border: var(--d-error-border);
+        --error-text: var(--d-error-text);
+        /* info */
+        --info-bg: var(--d-info-bg);
+        --info-border: var(--d-info-border);
+        --info-text: var(--d-info-text);
+        /* menu */
+        --menu-bg: var(--d-menu-bg);
+        --menu-bg-active: var(--d-menu-bg-active);
+        --menu-border: var(--d-menu-border);
+        --menu-link: var(--d-menu-link);
+        --menu-link-active: var(--d-menu-link-active);
+        /* status */
+        --status-default: var(--d-status-default);
+        --status-ok: var(--d-status-ok);
+        --status-alert: var(--d-status-alert);
+        --status-warn: var(--d-status-warn);
+        --status-info: var(--d-status-info);
+        --status-task: var(--d-status-task);
+    }
+</style>

package/dist/Layout/Theme.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        theme?: "light" | "dark" | "invert" | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeProps = typeof __propDef.props;
+export type ThemeEvents = typeof __propDef.events;
+export type ThemeSlots = typeof __propDef.slots;
+export default class Theme extends SvelteComponent<ThemeProps, ThemeEvents, ThemeSlots> {
+}
+export {};

package/dist/Layout/UIContent.svelte

@@ -0,0 +1,15 @@
+<script>let {
+  children
+} = $props();
+</script>
+
+<div class="UIContent">
+    {@render children()}
+</div>
+
+<style>
+    .UIContent {
+        display: contents;
+        --isPage: 0;
+    }
+</style>

package/dist/Layout/UIContent.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UiContentProps = typeof __propDef.props;
+export type UiContentEvents = typeof __propDef.events;
+export type UiContentSlots = typeof __propDef.slots;
+export default class UiContent extends SvelteComponent<UiContentProps, UiContentEvents, UiContentSlots> {
+}
+export {};

package/dist/Navigation/Breadcrumb.svelte

@@ -0,0 +1,82 @@
+<script>const {
+  items,
+  separator = "/",
+  contained,
+  fullWidth,
+  center
+} = $props();
+</script>
+
+<nav class:center class:contained class:fullWidth aria-label="Breadcrumb">
+    <ol>
+        {#each items as item, index}
+            <li aria-current={index === items.length - 1 ? "page" : undefined}>
+                {#if item.href && index < items.length - 1}
+                    <a href={item.href}>{item.label}</a>
+                {:else}
+                    <span>{item.label}</span>
+                {/if}
+            </li>
+            {#if index !== items.length - 1}
+                <li aria-hidden="true" class="separator">
+                    {#if typeof separator === "string"}
+                        <span>{separator}</span>
+                    {/if}
+                </li>
+            {/if}
+        {/each}
+    </ol>
+</nav>
+
+<style>
+    nav {
+        padding: 0;
+        block-size: auto;
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        font-size: var(--font-size, 1em);
+    }
+
+    nav ol {
+        display: flex;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        gap: 0.5rem;
+        border-radius: var(--border-radius);
+    }
+
+    nav ol li {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+    }
+
+    .separator span {
+        font-size: 1rem;
+        line-height: 1rem;
+        color: var(--text-subtle);
+    }
+
+    nav.contained ol {
+        padding: 0 1rem;
+        border: var(--border);
+    }
+
+    nav.contained ol li a {
+        padding: var(--padding, 0.5rem 0);
+    }
+
+    nav.center {
+        justify-content: center;
+    }
+
+    nav.fullWidth ol {
+        block-size: 100%;
+    }
+
+</style>

package/dist/Navigation/Breadcrumb.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
+import type { BreadcrumbItem } from "./MenuTypes.svelte.js";
+declare const __propDef: {
+    props: {
+        /** The items to display in the breadcrumb. */
+        items: BreadcrumbItem[];
+        /** The separator to use between breadcrumb items. */
+        separator?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | ComponentType | undefined;
+        /** Contain the element in a box. */
+        contained?: boolean | undefined;
+        /** Make the element full width. */
+        fullWidth?: boolean | undefined;
+        /** Center the items in the element. */
+        center?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};