@olenbetong/appframe-ds 0.4.1 → 0.5.0

package/es/layout/AppMenuItem.css

@@ -1,97 +0,0 @@
-.AppMenuItem-root {
-	display: flex;
-	align-items: center;
-	position: relative;
-	border-radius: var(--ds-border-radius-md, 0.25rem);
-	overflow: hidden;
-	margin: 0.5rem;
-	padding: 0.5rem;
-	width: calc(100% - 1rem);
-	box-sizing: border-box;
-	text-decoration: none;
-	color: var(--ds-color-neutral-text-default, rgba(0, 0, 0, 0.87));
-	background: transparent;
-	border: none;
-	cursor: pointer;
-	font-family: inherit;
-	font-size: inherit;
-	text-align: left;
-}
-
-@media (pointer: fine) {
-	.AppMenuItem-root {
-		margin: 0.2rem 0.5rem;
-	}
-}
-
-.AppMenuItem-icon {
-	display: flex;
-	align-items: center;
-	min-width: 2.5rem;
-	color: inherit;
-	flex-shrink: 0;
-}
-
-.AppMenuItem-text {
-	flex: 1;
-	font-weight: 500;
-	color: var(--ds-color-neutral-text-default, rgba(0, 0, 0, 0.87));
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.AppMenuItem-info {
-	margin-left: auto;
-	flex-shrink: 0;
-}
-
-.AppMenuItem-root::before {
-	background-color: #000;
-	opacity: 0;
-	transition:
-		opacity 30ms linear,
-		background-color 30ms linear;
-	content: "";
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 100%;
-	pointer-events: none;
-}
-
-.AppMenuItem-root:hover,
-.AppMenuItem-root:focus,
-.AppMenuItem-root:active {
-	text-decoration: none;
-	outline: none;
-}
-
-.AppMenuItem-root:hover::before {
-	opacity: 0.04;
-}
-
-.AppMenuItem-root:active::before {
-	opacity: 0.16;
-}
-
-.AppMenuItem-root.active::before,
-.AppMenuItem-root.active:hover::before {
-	background-color: var(--ds-color-brand-base-default, var(--brand-primary, #0062ba));
-	opacity: 0.16;
-}
-
-.AppMenuItem-root.active:hover::before {
-	opacity: 0.2;
-}
-
-.AppMenuItem-root.active:active::before {
-	opacity: 0.24;
-}
-
-.AppMenuItem-root.active .AppMenuItem-text,
-.AppMenuItem-root.active .AppMenuItem-icon {
-	color: var(--ds-color-brand-base-default, var(--brand-primary, #0062ba));
-}

package/es/layout/AppMenuItem.d.ts

@@ -1,50 +0,0 @@
-import "./AppMenuItem.css";
-import type { To } from "react-router";
-import { type NavLinkProps } from "react-router";
-import type React from "react";
-export type AppMenuItemProps = Omit<NavLinkProps, "className"> & {
-    children: React.ReactNode | React.ReactNode[];
-    info?: React.ReactNode | React.ReactNode[];
-    icon?: React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-    to: To;
-    end?: boolean;
-    className?: string;
-};
-export declare const AppMenuItem: React.ForwardRefExoticComponent<Omit<NavLinkProps, "className"> & {
-    children: React.ReactNode | React.ReactNode[];
-    info?: React.ReactNode | React.ReactNode[];
-    icon?: React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-    to: To;
-    end?: boolean;
-    className?: string;
-} & React.RefAttributes<HTMLAnchorElement>>;
-export type AppMenuItemExternalLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
-    children: React.ReactNode | React.ReactNode[];
-    info?: React.ReactNode | React.ReactNode[];
-    icon?: React.ReactNode;
-    href: string;
-    target?: string;
-};
-export declare const AppMenuItemExternalLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
-    children: React.ReactNode | React.ReactNode[];
-    info?: React.ReactNode | React.ReactNode[];
-    icon?: React.ReactNode;
-    href: string;
-    target?: string;
-} & React.RefAttributes<HTMLAnchorElement>>;
-export type AppMenuItemButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
-    active?: boolean;
-    children: React.ReactNode | React.ReactNode[];
-    info?: React.ReactNode | React.ReactNode[];
-    icon?: React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-};
-export declare const AppMenuItemButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
-    active?: boolean;
-    children: React.ReactNode | React.ReactNode[];
-    info?: React.ReactNode | React.ReactNode[];
-    icon?: React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-} & React.RefAttributes<HTMLButtonElement>>;

package/es/layout/AppMenuItem.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./AppMenuItem.css";
-import clsx from "clsx";
-import { forwardRef } from "react";
-import { NavLink } from "react-router";
-export const AppMenuItem = forwardRef(function AppMenuItem({ children, className, end = true, info, to, icon, ...props }, ref) {
-    return (_jsxs(NavLink, { viewTransition: true, to: to, className: clsx("AppMenuItem-root", className), end: end, ...props, ref: ref, children: [icon && _jsx("span", { className: "AppMenuItem-icon", children: icon }), _jsx("span", { className: "AppMenuItem-text", children: children }), info && _jsx("span", { className: "AppMenuItem-info", children: info })] }));
-});
-export const AppMenuItemExternalLink = forwardRef(function AppMenuItemExternalLink({ children, className, href, info, icon, target, ...props }, ref) {
-    return (_jsxs("a", { href: href, className: clsx("AppMenuItem-root", className), target: target, ...props, ref: ref, children: [icon && _jsx("span", { className: "AppMenuItem-icon", children: icon }), _jsx("span", { className: "AppMenuItem-text", children: children }), info && _jsx("span", { className: "AppMenuItem-info", children: info })] }));
-});
-export const AppMenuItemButton = forwardRef(function AppMenuItemButton({ children, className, active = false, info, onClick, icon, ...props }, ref) {
-    return (_jsxs("button", { type: "button", onClick: onClick, className: clsx("AppMenuItem-root", className, active && "active"), ...props, ref: ref, children: [icon && _jsx("span", { className: "AppMenuItem-icon", children: icon }), _jsx("span", { className: "AppMenuItem-text", children: children }), info && _jsx("span", { className: "AppMenuItem-info", children: info })] }));
-});

package/es/layout/AppMenuSubheader.css

@@ -1,18 +0,0 @@
-.AppMenuSubheader-root {
-	font-size: var(--ds-font-size-xs, 0.75rem);
-	font-weight: 600;
-	letter-spacing: 0.08em;
-	text-transform: uppercase;
-	padding: 0.5rem 1rem;
-	color: var(--ds-color-neutral-text-subtle, #555);
-	background-color: var(--ds-color-neutral-background-default, transparent);
-	position: sticky;
-	top: 0;
-	z-index: 1;
-}
-
-@media (pointer: fine) {
-	.AppMenuSubheader-root {
-		line-height: 36px;
-	}
-}

package/es/layout/AppMenuSubheader.d.ts

@@ -1,4 +0,0 @@
-import "./AppMenuSubheader.css";
-import type React from "react";
-export type AppMenuSubheaderProps = React.HTMLAttributes<HTMLDivElement>;
-export declare function AppMenuSubheader({ children, className, ...props }: AppMenuSubheaderProps): React.JSX.Element;

package/es/layout/AppMenuSubheader.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./AppMenuSubheader.css";
-import clsx from "clsx";
-export function AppMenuSubheader({ children, className, ...props }) {
-    return (_jsx("div", { className: clsx("AppMenuSubheader-root", className), ...props, children: children }));
-}

package/es/layout/ErrorBoundary.css

@@ -1,101 +0,0 @@
-.AppErrorBoundary-root {
-	height: 100vh;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.AppErrorBoundary-inner {
-	max-width: 36rem;
-	width: 100%;
-	margin: 0 auto;
-	padding: 1rem;
-	text-align: center;
-}
-
-.AppErrorBoundary-image {
-	opacity: 0.6;
-	max-height: 30vh;
-	max-width: 50vw;
-}
-
-.AppErrorBoundary-title {
-	margin-top: var(--ds-size-6, 1.5rem);
-	font-size: var(--ds-font-size-6, 1.5rem);
-	font-weight: 700;
-}
-
-.AppErrorBoundary-alert {
-	margin-block: var(--ds-size-6, 1.5rem);
-	background: var(--ds-color-danger-surface-default, #fde8e8);
-	color: var(--ds-color-danger-text-default, #c01c2c);
-	border: 1px solid var(--ds-color-danger-border-default, #f5a6ae);
-	border-radius: var(--ds-border-radius-md, 0.25rem);
-	padding: var(--ds-size-3, 0.75rem) var(--ds-size-4, 1rem);
-	text-align: left;
-}
-
-.AppErrorBoundary-message {
-	margin-bottom: var(--ds-size-6, 1.5rem);
-}
-
-.AppErrorBoundary-reload {
-	appearance: none;
-	border: 1px solid currentColor;
-	border-radius: var(--ds-border-radius-md, 0.25rem);
-	background: transparent;
-	color: inherit;
-	cursor: pointer;
-	font: inherit;
-	font-size: var(--ds-font-size-3, 1rem);
-	padding: var(--ds-size-2, 0.5rem) var(--ds-size-4, 1rem);
-	margin-block: var(--ds-size-6, 1.5rem);
-}
-
-.AppErrorBoundary-reload:hover {
-	background: rgb(0 0 0 / 0.05);
-}
-
-.ErrorAlertFallback-root {
-	display: flex;
-	align-items: flex-start;
-	gap: var(--ds-size-2, 0.5rem);
-	background: var(--ds-color-danger-surface-default, #fde8e8);
-	color: var(--ds-color-danger-text-default, #c01c2c);
-	border: 1px solid var(--ds-color-danger-border-default, #f5a6ae);
-	border-radius: var(--ds-border-radius-md, 0.25rem);
-	padding: var(--ds-size-3, 0.75rem) var(--ds-size-4, 1rem);
-}
-
-.ErrorAlertFallback-content {
-	flex: 1;
-}
-
-.ErrorAlertFallback-title {
-	font-weight: 600;
-	margin-bottom: var(--ds-size-1, 0.25rem);
-}
-
-.ErrorAlertFallback-reload {
-	appearance: none;
-	background: transparent;
-	border: none;
-	color: inherit;
-	cursor: pointer;
-	font: inherit;
-	font-weight: 600;
-	padding: 0;
-	text-decoration: underline;
-	flex-shrink: 0;
-}
-
-.RouteErrorPage-stack {
-	background: rgb(0 0 0 / 0.07);
-	border: 2px solid rgb(0 0 0 / 0.15);
-	border-radius: var(--ds-border-radius-md, 0.25rem);
-	padding: var(--ds-size-4, 1rem);
-	overflow-x: auto;
-	white-space: pre-wrap;
-	word-break: break-all;
-	font-size: var(--ds-font-size-1, 0.75rem);
-}

package/es/layout/ErrorBoundary.d.ts

@@ -1,30 +0,0 @@
-import "./ErrorBoundary.css";
-import type { DataObject } from "@olenbetong/appframe-data";
-import { Component } from "react";
-export type AppErrorBoundaryProps = {
-    children?: React.ReactNode;
-    message?: string | ((error: unknown) => string);
-    imgSrc?: string;
-    image?: React.ReactNode;
-};
-type AppErrorBoundaryState = {
-    hasError: boolean;
-    error: unknown;
-};
-export declare class AppErrorBoundary extends Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
-    constructor(props: AppErrorBoundaryProps);
-    static getDerivedStateFromError(error: unknown): AppErrorBoundaryState;
-    componentDidCatch(error: unknown, errorInfo: unknown): void;
-    render(): React.ReactNode;
-}
-export type ErrorAlertFallbackProps = {
-    error: unknown;
-    className?: string;
-};
-export declare function ErrorAlertFallback({ error, className }: ErrorAlertFallbackProps): import("react").JSX.Element;
-export declare function RouteErrorPage(): import("react").JSX.Element;
-export declare function AsyncErrorAlert(): import("react").JSX.Element;
-export declare function DataObjectErrorAlert({ dataObject }: {
-    dataObject: DataObject<any>;
-}): import("react").JSX.Element | null;
-export {};

package/es/layout/ErrorBoundary.js

@@ -1,81 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./ErrorBoundary.css";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useError } from "@olenbetong/appframe-react";
-import { Component, useEffect } from "react";
-import { useAsyncError, useRouteError } from "react-router";
-import { PageContainer } from "./PageContainer.js";
-function parseError(error) {
-    let message = "Unspecified error";
-    let stackTrace = null;
-    let title = getLocalizedString("Unexpected application error");
-    if (typeof error === "string") {
-        message = error;
-    }
-    else if (error && typeof error === "object") {
-        const err = error;
-        if (err.status) {
-            title = `${err.status} ${err.statusText}`;
-            message = err.message ?? "";
-        }
-        else if (err.message) {
-            message = err.message;
-            if (err.type) {
-                message = `${err.type}: ${message}`;
-            }
-        }
-        else {
-            message = String(error);
-        }
-        if (err.stack || err.stackTrace) {
-            stackTrace = err.stack ?? err.stackTrace;
-        }
-    }
-    return { message, stackTrace, title };
-}
-export class AppErrorBoundary extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-    static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-    }
-    componentDidCatch(error, errorInfo) {
-        console.error(error, errorInfo);
-    }
-    render() {
-        if (this.state.hasError) {
-            const { imgSrc, message, image } = this.props;
-            const { message: errorMessage } = parseError(this.state.error);
-            const customMessage = typeof message === "function" ? message(this.state.error) : message;
-            return (_jsx("div", { className: "AppErrorBoundary-root", children: _jsxs("div", { className: "AppErrorBoundary-inner", children: [image ?? (_jsx("img", { alt: "", src: imgSrc ?? "/file/site/graphic/error-broken-robot.svg", className: "AppErrorBoundary-image" })), _jsx("h1", { className: "AppErrorBoundary-title", children: getLocalizedString("Something went terribly wrong!") }), _jsx("div", { className: "AppErrorBoundary-alert", children: errorMessage }), _jsx("p", { className: "AppErrorBoundary-message", children: customMessage ??
-                                getLocalizedString("Sometimes it is enough to simply refresh the page. If the error persists, contact the IT department.") }), _jsx("button", { type: "button", className: "AppErrorBoundary-reload", onClick: () => window.location.reload(), children: getLocalizedString("Refresh page") })] }) }));
-        }
-        return this.props.children;
-    }
-}
-export function ErrorAlertFallback({ error, className }) {
-    const message = error instanceof Error ? error.message : String(error);
-    return (_jsxs("div", { className: `ErrorAlertFallback-root${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "ErrorAlertFallback-content", children: [_jsx("p", { className: "ErrorAlertFallback-title", children: getLocalizedString("An error occured. Try refreshing the page") }), _jsx("p", { children: message })] }), _jsx("button", { type: "button", className: "ErrorAlertFallback-reload", onClick: () => window.location.reload(), children: getLocalizedString("Reload page") })] }));
-}
-// ── RouteErrorPage ────────────────────────────────────────────────────────────
-export function RouteErrorPage() {
-    const error = useRouteError();
-    const { message, stackTrace, title } = parseError(error);
-    useEffect(() => {
-        globalThis.af?.common?.logError?.(error);
-    }, [error]);
-    return (_jsxs(PageContainer, { className: "flow", children: [_jsx("h1", { children: title }), message && _jsx("p", { children: message }), stackTrace && _jsx("pre", { className: "RouteErrorPage-stack", children: stackTrace })] }));
-}
-// ── AsyncErrorAlert ───────────────────────────────────────────────────────────
-export function AsyncErrorAlert() {
-    const error = useAsyncError();
-    const message = typeof error === "string" ? error : error?.message;
-    return _jsx("div", { className: "ErrorAlertFallback-root", children: message });
-}
-// ── DataObjectErrorAlert ──────────────────────────────────────────────────────
-export function DataObjectErrorAlert({ dataObject }) {
-    const error = useError(dataObject);
-    return error ? _jsx("div", { className: "ErrorAlertFallback-root", children: error }) : null;
-}

package/es/layout/PageContainer.css

@@ -1,29 +0,0 @@
-@media screen {
-	.ObPageContainer-root {
-		max-height: 100%;
-		overflow: auto;
-		height: auto;
-	}
-
-	.ObPageContainer-root.ObPageContainer-fullHeight {
-		height: 100%;
-	}
-
-	.ObPageContainer-inner {
-		margin-left: 0;
-		height: auto;
-		padding: 1rem;
-		box-sizing: border-box;
-		max-width: 100%;
-	}
-
-	.ObPageContainer-fullHeight .ObPageContainer-inner {
-		height: 100%;
-	}
-}
-
-@media screen and (min-width: 600px) {
-	.ObPageContainer-inner {
-		padding: 1rem 1.5rem;
-	}
-}

package/es/layout/PageContainer.d.ts

@@ -1,7 +0,0 @@
-import "./PageContainer.css";
-import type React from "react";
-export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
-    fullHeight?: boolean;
-    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
-};
-export declare function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps): React.JSX.Element;

package/es/layout/PageContainer.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./PageContainer.css";
-import clsx from "clsx";
-export function PageContainer({ children, className, fullHeight, maxWidth, ...props }) {
-    return (_jsx("div", { className: clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight"), children: _jsx("div", { className: clsx("ObPageContainer-inner", className), ...props, children: children }) }));
-}

package/es/layout/PartnerToggle.d.ts

@@ -1,5 +0,0 @@
-import type React from "react";
-export declare function PartnerToggle({ onClick, open, }: {
-    open: boolean;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}): React.ReactNode;

package/es/layout/PartnerToggle.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-let toggleRoot = document.createElement("div");
-let brand = document.querySelector(".partner-nav__brand");
-toggleRoot.id = "toggle-root";
-document.querySelector(".partner-nav")?.insertBefore(toggleRoot, brand);
-export function PartnerToggle({ onClick, open, }) {
-    return createPortal(_jsx("button", { type: "button", className: "LayoutSmall-toggle", onClick: onClick, children: open ? "◀" : "☰" }), toggleRoot);
-}

package/es/layout/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const AF_MUI_PAGE_TITLE_ID = "PageTitleSmallLayout";
-export declare const AF_MUI_APPBAR_TOOLS_ID = "AppBarTools";

package/es/layout/constants.js

@@ -1,2 +0,0 @@
-export const AF_MUI_PAGE_TITLE_ID = "PageTitleSmallLayout";
-export const AF_MUI_APPBAR_TOOLS_ID = "AppBarTools";

package/es/layout/index.css

@@ -1,65 +0,0 @@
-.app-view {
-	height: 100%;
-	overflow-y: hidden;
-}
-
-.scroll-view {
-	height: 100%;
-	max-height: 100%;
-	overflow-y: auto;
-}
-
-.flow > * + * {
-	margin-top: var(--flow-spacing, 1rem) !important;
-}
-
-.flow-xs > * {
-	--flow-spacing: 0.25rem;
-}
-
-.flow-sm > * {
-	--flow-spacing: 0.5rem;
-}
-
-.flow-lg > * {
-	--flow-spacing: 1.5rem;
-}
-
-.flow-xl > * {
-	--flow-spacing: 2rem;
-}
-
-.flow-xxl > * {
-	--flow-spacing: 3rem;
-}
-
-.app-grid {
-	height: 100%;
-	overflow-y: hidden;
-	display: grid;
-	gap: 1rem;
-}
-
-.rows-af {
-	grid-template-rows: auto 1fr;
-}
-
-.rows-aaf {
-	grid-template-rows: auto auto 1fr;
-}
-
-.rows-afaf {
-	grid-template-rows: auto 1fr auto 1fr;
-}
-
-.rows-aff {
-	grid-template-rows: auto 1fr 1fr;
-}
-
-.rows-f {
-	grid-template-rows: 1fr;
-}
-
-.rows-ff {
-	grid-template-rows: 1fr 1fr;
-}

package/es/layout/index.d.ts

@@ -1,33 +0,0 @@
-import "./index.css";
-import type React from "react";
-import type { AppMenuProps } from "./AppMenu.js";
-export type AppLayoutProps = {
-    AppMenuProps?: AppMenuProps;
-    children: React.ReactNode | React.ReactNode[];
-    menu?: React.ReactNode | React.ReactNode[];
-    /**
-     * @deprecated The toolbar is now server-rendered. This prop has no effect.
-     */
-    toolbar?: React.ReactNode | React.ReactNode[];
-    /**
-     * @deprecated The title is now rendered in the server-rendered toolbar. This prop has no effect.
-     */
-    title?: React.ReactNode;
-    /**
-     * @deprecated The toolbar is now server-rendered. This prop has no effect.
-     */
-    enableMenuToggle?: boolean;
-    /**
-     * Enable partner mode (for partner.olenbetong.no applications).
-     * Adds a toggle button to the existing partner header instead of the app bar.
-     */
-    partner?: boolean;
-};
-export * from "./AppMenu.js";
-export * from "./AppMenuItem.js";
-export * from "./AppMenuSubheader.js";
-export * from "./constants.js";
-export * from "./ErrorBoundary.js";
-export * from "./PageContainer.js";
-export * from "./PartnerToggle.js";
-export declare function AppLayout(props: AppLayoutProps): React.JSX.Element;

package/es/layout/index.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./index.css";
-import { useEffect, useState } from "react";
-import { AppLayoutDesktop } from "./AppLayoutDesktop.js";
-import { AppLayoutMobile } from "./AppLayoutMobile.js";
-function useIsMobile() {
-    let [isMobile, setIsMobile] = useState(() => {
-        if (typeof window === "undefined")
-            return false;
-        return window.matchMedia("(max-width: 1199px)").matches;
-    });
-    useEffect(() => {
-        let mq = window.matchMedia("(max-width: 1199px)");
-        let handler = (e) => setIsMobile(e.matches);
-        mq.addEventListener("change", handler);
-        return () => mq.removeEventListener("change", handler);
-    }, []);
-    return isMobile;
-}
-export * from "./AppMenu.js";
-export * from "./AppMenuItem.js";
-export * from "./AppMenuSubheader.js";
-export * from "./constants.js";
-export * from "./ErrorBoundary.js";
-export * from "./PageContainer.js";
-export * from "./PartnerToggle.js";
-export function AppLayout(props) {
-    let isSmall = useIsMobile();
-    let Component = isSmall ? AppLayoutMobile : AppLayoutDesktop;
-    return _jsx(Component, { ...props });
-}