spaper 1.4.0 → 2.0.0

package/dist/components/Toast/index.js

@@ -0,0 +1,100 @@
+import Toast from './Toast.svelte';
+import ToastContainer, { containerClass } from './ToastContainer.svelte';
+import { mount, unmount } from 'svelte';
+const instances = new Map();
+const cleanups = new Map();
+function containerSelector(position) {
+    return `.${containerClass}.${position}`;
+}
+function ensureContainer(position) {
+    const existing = document.querySelector(containerSelector(position));
+    if (existing instanceof HTMLElement)
+        return existing;
+    mount(ToastContainer, {
+        target: document.body,
+        props: { position },
+    });
+    const created = document.querySelector(containerSelector(position));
+    if (!(created instanceof HTMLElement)) {
+        throw new Error(`Missing toast container for ${position}`);
+    }
+    return created;
+}
+function removeContainerIfEmpty(position) {
+    const el = document.querySelector(containerSelector(position));
+    if (el && el.children.length === 0)
+        el.remove();
+}
+export function open(props) {
+    if (typeof props === 'string')
+        props = { message: props };
+    const position = props.position ?? 'top';
+    const userOnClose = props.onClose;
+    const target = ensureContainer(position);
+    const anchor = target.firstChild;
+    let settled = false;
+    function finish() {
+        if (settled)
+            return;
+        settled = true;
+        cleanups.delete(instance);
+        unmount(instance);
+        removeContainerIfEmpty(position);
+    }
+    const instance = mount(Toast, {
+        target,
+        anchor: anchor ?? undefined,
+        props: {
+            ...props,
+            position,
+            onClose: () => {
+                instances.delete(instance);
+                userOnClose?.();
+                // Outro is 300ms; unmount after it so the fade is not cancelled
+                setTimeout(finish, 350);
+            },
+        },
+        intro: true,
+    });
+    cleanups.set(instance, finish);
+    instances.set(instance, position);
+}
+function openType(type) {
+    return (options) => {
+        const props = {
+            type,
+            message: '',
+        };
+        if (typeof options === 'string')
+            props.message = options;
+        else
+            Object.assign(props, options);
+        open(props);
+    };
+}
+/** Dismiss active toasts immediately (optionally only one position lane). */
+export function clear(position) {
+    for (const [instance, pos] of instances) {
+        if (position && pos !== position)
+            continue;
+        instances.delete(instance);
+        cleanups.get(instance)?.();
+    }
+}
+export const info = openType('secondary');
+export const success = openType('success');
+export const warning = openType('warning');
+export const warn = warning;
+export const danger = openType('danger');
+export const error = danger;
+Object.assign(Toast, {
+    open,
+    info,
+    success,
+    warning,
+    warn,
+    error,
+    danger,
+    clear,
+});
+export default Toast;

package/dist/icons.d.ts

@@ -0,0 +1,3 @@
+/** Re-export sketchyicons (component + icon data) for spaper consumers. */
+export * from '@sketchyicons/svelte';
+export type { IconNode, IconNodeAttributes, SketchyIconProps, } from '@sketchyicons/svelte';

package/dist/icons.js

@@ -0,0 +1,2 @@
+/** Re-export sketchyicons (component + icon data) for spaper consumers. */
+export * from '@sketchyicons/svelte';

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import Button from './components/Button.svelte';
+import Alert from './components/Alert.svelte';
+import Tag from './components/Tag.svelte';
+import Breadcrumb from './components/Breadcrumb.svelte';
+import Navbar from './components/Navbar.svelte';
+import Modal from './components/Modal';
+import { Tabs, Tab } from './components/Tabs';
+import { Input, Select, Radio, Checkbox, Switch, Slider, NumberInput } from './components/Form';
+import Article from './components/Article.svelte';
+import Card from './components/Card.svelte';
+import Collapsible from './components/Collapsible.svelte';
+import Divider from './components/Divider.svelte';
+import Popover from './components/Popover.svelte';
+import Progress from './components/Progress.svelte';
+import { Table, TableColumn } from './components/Table';
+import Pagination from './components/Pagination';
+import Toast from './components/Toast';
+import CloseButton from './components/CloseButton.svelte';
+import CopyButton from './components/CopyButton.svelte';
+import Skeleton from './components/Skeleton.svelte';
+import Spinner from './components/Spinner.svelte';
+import { Avatar, AvatarGroup } from './components/Avatar';
+import { Carousel, CarouselItem } from './components/Carousel';
+import Hero from './components/Hero.svelte';
+import Icon from './components/Icon.svelte';
+import ScrollTop from './components/ScrollTop.svelte';
+export { Button, Alert, Tag, Icon, Breadcrumb, Navbar, Modal, Tabs, Tab, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Divider, Popover, Progress, Table, TableColumn, Pagination, Toast, CloseButton, CopyButton, Skeleton, Spinner, Avatar, AvatarGroup, Carousel, CarouselItem, Hero, NumberInput, ScrollTop, };
+export type { IconNode } from './icons';
+export type { StringOrSnippet, HeadingLevel, PaperColor, TableSort, } from './types';
+export type { CarouselControls } from './components/Carousel';
+export { isSnippet } from './utils';

package/{index.js → dist/index.js}

@@ -1,23 +1,28 @@
 import Button from './components/Button.svelte';
 import Alert from './components/Alert.svelte';
-import Badge from './components/Badge.svelte';
+import Tag from './components/Tag.svelte';
 import Breadcrumb from './components/Breadcrumb.svelte';
 import Navbar from './components/Navbar.svelte';
 import Modal from './components/Modal';
 import { Tabs, Tab } from './components/Tabs';
-import { Input, Select, Radio, Checkbox, Switch, Slider, Form, NumberInput, } from './components/Form';
+import { Input, Select, Radio, Checkbox, Switch, Slider, NumberInput, } from './components/Form';
 import Article from './components/Article.svelte';
 import Card from './components/Card.svelte';
 import Collapsible from './components/Collapsible.svelte';
+import Divider from './components/Divider.svelte';
 import Popover from './components/Popover.svelte';
 import Progress from './components/Progress.svelte';
-import Table from './components/Table.svelte';
+import { Table, TableColumn } from './components/Table';
 import Pagination from './components/Pagination';
 import Toast from './components/Toast';
 import CloseButton from './components/CloseButton.svelte';
 import CopyButton from './components/CopyButton.svelte';
 import Skeleton from './components/Skeleton.svelte';
+import Spinner from './components/Spinner.svelte';
+import { Avatar, AvatarGroup } from './components/Avatar';
 import { Carousel, CarouselItem } from './components/Carousel';
 import Hero from './components/Hero.svelte';
-import { Col, Row } from './components/Layout';
-export { Button, Alert, Badge, Breadcrumb, Navbar, Modal, Tabs, Tab, Form, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Popover, Progress, Table, Pagination, Toast, CloseButton, CopyButton, Skeleton, Carousel, CarouselItem, Hero, Col, Row, NumberInput, };
+import Icon from './components/Icon.svelte';
+import ScrollTop from './components/ScrollTop.svelte';
+export { Button, Alert, Tag, Icon, Breadcrumb, Navbar, Modal, Tabs, Tab, Input, Select, Radio, Checkbox, Switch, Slider, Article, Card, Collapsible, Divider, Popover, Progress, Table, TableColumn, Pagination, Toast, CloseButton, CopyButton, Skeleton, Spinner, Avatar, AvatarGroup, Carousel, CarouselItem, Hero, NumberInput, ScrollTop, };
+export { isSnippet } from './utils';

package/dist/type-icons.d.ts

@@ -0,0 +1,4 @@
+import type { PaperType } from './types';
+import { type IconNode } from './icons';
+/** Icon shown for a paper type. Info covers primary and secondary. */
+export declare const typeIcons: Record<PaperType, IconNode>;

package/dist/type-icons.js

@@ -0,0 +1,9 @@
+import { Check, CircleX, Info, TriangleAlert } from './icons';
+/** Icon shown for a paper type. Info covers primary and secondary. */
+export const typeIcons = {
+    success: Check,
+    warning: TriangleAlert,
+    danger: CircleX,
+    primary: Info,
+    secondary: Info,
+};

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+export type PaperSize = 'small' | 'default' | 'large';
+export type PaperType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export type PaperColor = PaperType | 'muted';
+export type PaperFlexPlacement = 'spaces' | 'edges' | 'right' | 'center' | 'left';
+export type PaperAlign = 'left' | 'center' | 'right';
+export type Attributes = Record<string, string | boolean>;
+export type PositionY = 'top' | 'bottom';
+export type PositionX = 'left' | 'right';
+export type Position = PositionX | PositionY;
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type StringOrSnippet = string | Snippet;
+export interface TableColumnObj {
+    field: string;
+    label?: string;
+    /** Overrides the table `sortable` prop for this column. */
+    sortable?: boolean;
+    /** @deprecated Use `<TableColumn>` to render the cell. */
+    content?: (val?: any) => string;
+    /** @deprecated Use `<TableColumn>` to render the cell. */
+    html?: boolean;
+}
+export type TableColumn = TableColumnObj | string;
+/** `order` is `1` for ascending and `-1` for descending. */
+export interface TableSort {
+    field: string;
+    order: 1 | -1;
+}
+export type Transition = 'blur' | 'fade' | 'fly' | 'slide' | 'scale' | 'draw' | 'crossfade';

package/dist/utils.d.ts

@@ -0,0 +1,16 @@
+import * as transition from 'svelte/transition';
+import type { Snippet } from 'svelte';
+import type { Attributes, StringOrSnippet } from './types';
+interface getDomAttributesParams {
+    props: Attributes;
+    classes: string;
+    toOmit?: string[];
+}
+export declare function computeClasses(elPrefix: string, props: Record<string, any>): string;
+export declare function getDomAttributes({ props, classes, toOmit, }: getDomAttributesParams): Attributes;
+export type { ComponentProps } from 'svelte';
+export declare function isSnippet(value: StringOrSnippet): value is Snippet;
+export declare function configureTransition(node: Element, { name, disabled, }: {
+    name?: keyof typeof transition | null;
+    disabled?: boolean;
+}): any;

package/dist/utils.js

@@ -0,0 +1,44 @@
+import * as transition from 'svelte/transition';
+const sizeAlias = {
+    small: 'sm',
+    large: 'lg',
+};
+const propToClass = {
+    size: (pf, val) => {
+        if (!val || val === 'default')
+            return '';
+        const mapped = sizeAlias[val] ?? val;
+        return `${pf}-${mapped}`;
+    },
+    block: (pf, _val) => `${pf}-block`,
+    type: (pf, val) => `${pf}-${val}`,
+    outline: (pf, val) => `${pf}-${val}-outline`,
+};
+function omit(obj, properties) {
+    return Object.fromEntries(Object.entries(obj).filter(([key, _val]) => !properties.includes(key)));
+}
+export function computeClasses(elPrefix, props) {
+    return Object.entries(props)
+        .filter(([_prop, val]) => val)
+        .map(([prop, val]) => propToClass[prop](elPrefix, val))
+        .filter(Boolean)
+        .join(' ');
+}
+export function getDomAttributes({ props, classes, toOmit = [], }) {
+    return {
+        ...omit(props, toOmit),
+        class: classes,
+    };
+}
+export function isSnippet(value) {
+    return typeof value === 'function';
+}
+export function configureTransition(node, { name, disabled, }) {
+    if (disabled ||
+        !name ||
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        return { duration: 0 };
+    }
+    // crossfade returns a tuple; other transitions return TransitionConfig
+    return transition[name](node);
+}

package/package.json

@@ -1,81 +1,83 @@
 {
   "name": "spaper",
-  "description": "PaperCSS components for Svelte",
-  "license": "MIT",
+  "version": "2.0.0",
+  "description": "PapierCSS components for Svelte",
   "keywords": [
+    "components",
+    "papercss",
+    "papiercss",
     "svelte",
     "sveltejs",
-    "papercss",
-    "components"
+    "tailwind"
   ],
-  "version": "1.4.0",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Oli8/spaper.git"
-  },
+  "homepage": "https://github.com/Oli8/spaper#readme",
   "bugs": {
     "url": "https://github.com/Oli8/spaper/issues"
   },
-  "homepage": "https://github.com/Oli8/spaper#readme",
-  "peerDependencies": {
-    "papercss": "^1.9.2"
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Oli8/spaper.git"
   },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*",
+    "#docs/*": "./src/docs/*"
+  },
   "exports": {
-    "./package.json": "./package.json",
-    "./components/Alert.svelte": "./components/Alert.svelte",
-    "./components/Article.svelte": "./components/Article.svelte",
-    "./components/Badge.svelte": "./components/Badge.svelte",
-    "./components/Breadcrumb.svelte": "./components/Breadcrumb.svelte",
-    "./components/Button.svelte": "./components/Button.svelte",
-    "./components/Card.svelte": "./components/Card.svelte",
-    "./components/Carousel/Carousel.svelte": "./components/Carousel/Carousel.svelte",
-    "./components/Carousel/CarouselItem.svelte": "./components/Carousel/CarouselItem.svelte",
-    "./components/Carousel": "./components/Carousel/index.js",
-    "./components/Carousel/types": "./components/Carousel/types.js",
-    "./components/CloseButton.svelte": "./components/CloseButton.svelte",
-    "./components/Collapsible.svelte": "./components/Collapsible.svelte",
-    "./components/CopyButton.svelte": "./components/CopyButton.svelte",
-    "./components/Form/Checkbox.svelte": "./components/Form/Checkbox.svelte",
-    "./components/Form/Form.svelte": "./components/Form/Form.svelte",
-    "./components/Form/Input.svelte": "./components/Form/Input.svelte",
-    "./components/Form/NumberInput/DecrementButton.svelte": "./components/Form/NumberInput/DecrementButton.svelte",
-    "./components/Form/NumberInput/IncrementButton.svelte": "./components/Form/NumberInput/IncrementButton.svelte",
-    "./components/Form/NumberInput/NumberInput.svelte": "./components/Form/NumberInput/NumberInput.svelte",
-    "./components/Form/NumberInput": "./components/Form/NumberInput/index.js",
-    "./components/Form/Radio.svelte": "./components/Form/Radio.svelte",
-    "./components/Form/Select.svelte": "./components/Form/Select.svelte",
-    "./components/Form/Slider.svelte": "./components/Form/Slider.svelte",
-    "./components/Form/Switch.svelte": "./components/Form/Switch.svelte",
-    "./components/Form": "./components/Form/index.js",
-    "./components/Form/style.scss": "./components/Form/style.scss",
-    "./components/Hero.svelte": "./components/Hero.svelte",
-    "./components/Layout/Col.svelte": "./components/Layout/Col.svelte",
-    "./components/Layout/Row.svelte": "./components/Layout/Row.svelte",
-    "./components/Layout": "./components/Layout/index.js",
-    "./components/Modal/Modal.svelte": "./components/Modal/Modal.svelte",
-    "./components/Modal": "./components/Modal/index.js",
-    "./components/Navbar.svelte": "./components/Navbar.svelte",
-    "./components/Pagination/Arrow.svelte": "./components/Pagination/Arrow.svelte",
-    "./components/Pagination/NavigationButton.svelte": "./components/Pagination/NavigationButton.svelte",
-    "./components/Pagination/Pagination.svelte": "./components/Pagination/Pagination.svelte",
-    "./components/Pagination/arrow-dimension": "./components/Pagination/arrow-dimension.js",
-    "./components/Pagination": "./components/Pagination/index.js",
-    "./components/Popover.svelte": "./components/Popover.svelte",
-    "./components/Progress.svelte": "./components/Progress.svelte",
-    "./components/Skeleton.svelte": "./components/Skeleton.svelte",
-    "./components/Table.svelte": "./components/Table.svelte",
-    "./components/Tabs/Tab.svelte": "./components/Tabs/Tab.svelte",
-    "./components/Tabs/Tabs.svelte": "./components/Tabs/Tabs.svelte",
-    "./components/Tabs": "./components/Tabs/index.js",
-    "./components/Tabs/utils": "./components/Tabs/utils.js",
-    "./components/Toast/Toast.svelte": "./components/Toast/Toast.svelte",
-    "./components/Toast/ToastContainer.svelte": "./components/Toast/ToastContainer.svelte",
-    "./components/Toast": "./components/Toast/index.js",
-    "./components/style.scss": "./components/style.scss",
-    ".": "./index.js",
-    "./types": "./types.js",
-    "./utils": "./utils.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "oxlint",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check"
+  },
+  "dependencies": {
+    "@sketchyicons/svelte": "^0.5.0"
   },
-  "svelte": "./index.js"
-}
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^4.0.0",
+    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/package": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "oxfmt": "^0.71.0",
+    "oxlint": "^1.86.0",
+    "papiercss": "^1.0.2",
+    "publint": "^0.3.0",
+    "shiki": "^4.4.3",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.5",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.12"
+  },
+  "peerDependencies": {
+    "papiercss": "^1.0.2",
+    "svelte": "^5.20.0",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/components/Alert.svelte

@@ -1,34 +0,0 @@
-<div {...$$restProps}
-     class={classes}
-     class:closed class:dismissible
-     role="alert">
-  <slot />
-  {#if dismissible}
-    <CloseButton on:click={close} />
-  {/if}
-</div>
-
-<script >var _a;
-;
-import CloseButton from './CloseButton.svelte';
-import { computeClasses } from '../utils';
-export let type = 'primary';
-export let dismissible = false;
-let closed = false;
-function close() {
-    closed = true;
-}
-$: classes = `${(_a = $$restProps.class) !== null && _a !== void 0 ? _a : ''} alert ${computeClasses('alert', { type })}`;
-</script>
-
-<style >.alert {
-  transition: all 0.25s ease-out;
-}
-.alert.closed {
-  border-width: 0;
-  margin: 0;
-  max-height: 0;
-  opacity: 0;
-  padding-bottom: 0;
-  padding-top: 0;
-}</style>

package/components/Alert.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PaperType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: PaperType;
-        dismissible?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type AlertProps = typeof __propDef.props;
-export declare type AlertEvents = typeof __propDef.events;
-export declare type AlertSlots = typeof __propDef.slots;
-export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
-}
-export {};

package/components/Article.svelte

@@ -1,39 +0,0 @@
-<article {...$$restProps}
-         class="{$$restProps.class ?? ''} article padding-small"
-         class:border>
-  <h1 class="article-title">
-    {#if $$slots.title}
-      <slot name="title" />
-    {:else}
-      {title}
-    {/if}
-  </h1>
-  <p class="article-meta">
-    {#if $$slots.meta}
-      <slot name="meta" />
-    {:else}
-      {meta}
-    {/if}
-  </p>
-  <p class="text-lead">
-    {#if $$slots.textLead}
-      <slot name="textLead" />
-    {:else}
-      {textLead}
-    {/if}
-  </p>
-
-  <p><slot /></p>
-
-  {#if $$slots.footer}
-    <footer class="row">
-      <slot name="footer" />
-    </footer>
-  {/if}
-</article>
-
-<script >export let title = '';
-export let meta = '';
-export let textLead = '';
-export let border = false;
-</script>

package/components/Article.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        title?: string;
-        meta?: string;
-        textLead?: string;
-        border?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        meta: {};
-        textLead: {};
-        default: {};
-        footer: {};
-    };
-};
-export declare type ArticleProps = typeof __propDef.props;
-export declare type ArticleEvents = typeof __propDef.events;
-export declare type ArticleSlots = typeof __propDef.slots;
-export default class Article extends SvelteComponentTyped<ArticleProps, ArticleEvents, ArticleSlots> {
-}
-export {};

package/components/Badge.svelte

@@ -1,16 +0,0 @@
-<span {...$$restProps}
-      class="{$$restProps.class ?? ''} badge {type}"
-      class:rounded>
-  <slot />
-</span>
-
-<script >;
-export let type = 'primary';
-export let rounded = false;
-</script>
-
-<style>
-.badge.rounded {
-  border-radius: 30%;
-}
-</style>

package/components/Badge.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: any;
-        rounded?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type BadgeProps = typeof __propDef.props;
-export declare type BadgeEvents = typeof __propDef.events;
-export declare type BadgeSlots = typeof __propDef.slots;
-export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
-}
-export {};

package/components/Breadcrumb.svelte

@@ -1,17 +0,0 @@
-<ul {...$$restProps}
-    class="{$$restProps.class ?? ''} breadcrumb"
-    class:border>
-  {#each items as { text, href }}
-    <li>
-      {#if href}
-        <a {href}>{text}</a>
-      {:else}
-        {text}
-      {/if}
-    </li>
-  {/each}
-</ul>
-
-<script >export let border = false;
-export let items = [];
-</script>

package/components/Breadcrumb.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        border?: boolean;
-        items?: {
-            text: string;
-            href?: string;
-        }[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type BreadcrumbProps = typeof __propDef.props;
-export declare type BreadcrumbEvents = typeof __propDef.events;
-export declare type BreadcrumbSlots = typeof __propDef.slots;
-export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
-}
-export {};