@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Input/Prefix.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Box } from "../Box";
+import { Text } from "../Type";
+const Prefix = (_a) => {
+    var { prefix, prefixWidth } = _a, props = __rest(_a, ["prefix", "prefixWidth"]);
+    return prefix ? (React.createElement(Box, { width: prefixWidth, pt: "x1", pr: "x1", pb: "x1" },
+        React.createElement(Text, Object.assign({}, props), prefix))) : null;
+};
+export default Prefix;

package/dist/src/Input/Suffix.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { TextProps } from "../Type/Text";
-interface SuffixProps extends TextProps {
-    suffix?: string;
-    suffixWidth?: string;
-}
-export default function Suffix({ suffix, suffixWidth, ...props }: SuffixProps): React.JSX.Element;
-export {};
+import React from "react";
+import { TextProps } from "../Type/Text";
+interface SuffixProps extends TextProps {
+    suffix?: string;
+    suffixWidth?: string;
+}
+export default function Suffix({ suffix, suffixWidth, ...props }: SuffixProps): React.JSX.Element;
+export {};

package/dist/src/Input/Suffix.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Box } from "../Box";
+import { Text } from "../Type";
+export default function Suffix(_a) {
+    var { suffix, suffixWidth } = _a, props = __rest(_a, ["suffix", "suffixWidth"]);
+    return suffix ? (React.createElement(Box, { width: suffixWidth, pt: "x1", pb: "x1", pl: "x1" },
+        React.createElement(Text, Object.assign({}, props), suffix))) : null;
+}

package/dist/src/Input/index.d.ts

@@ -1 +1 @@
-export { default as Input } from "./Input";
+export { default as Input } from "./Input";

package/dist/src/Input/index.js

@@ -0,0 +1 @@
+export { default as Input } from "./Input";

package/dist/src/Layout/ApplicationFrame.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import { FlexProps } from "../Flex/Flex";
-type ApplicationFrameProps = FlexProps & {
-    navBar?: React.ReactNode;
-    environment?: string;
-    children?: React.ReactNode;
-};
-declare const ApplicationFrame: ({ navBar, children, environment, ...props }: ApplicationFrameProps) => React.JSX.Element;
-export default ApplicationFrame;
+import React from "react";
+import { FlexProps } from "../Flex/Flex";
+type ApplicationFrameProps = FlexProps & {
+    navBar?: React.ReactNode;
+    environment?: string;
+    children?: React.ReactNode;
+};
+declare const ApplicationFrame: ({ navBar, children, environment, ...props }: ApplicationFrameProps) => React.JSX.Element;
+export default ApplicationFrame;

package/dist/src/Layout/ApplicationFrame.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import Box from "../Box/Box";
+import Flex from "../Flex/Flex";
+import EnvironmentBanner from "../Navigation/components/EnvironmentBanner/EnvironmentBanner";
+const ApplicationFrame = (_a) => {
+    var { navBar, children, environment } = _a, props = __rest(_a, ["navBar", "children", "environment"]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "column", minHeight: "100vh" }, props),
+        React.createElement(Box, { position: "sticky", top: "0", zIndex: "navBar" },
+            environment && React.createElement(EnvironmentBanner, null, environment),
+            navBar),
+        React.createElement(Flex, { flexDirection: "column", position: "relative", flexGrow: 1 }, children)));
+};
+export default ApplicationFrame;

package/dist/src/Layout/ApplicationFrame.story.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const _ApplicationFrame: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const _ApplicationFrame: () => React.JSX.Element;

package/dist/src/Layout/ApplicationFrame.story.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { ApplicationFrame, Navigation } from "..";
+export default {
+    title: "Components/ApplicationFrame",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export const _ApplicationFrame = () => React.createElement(ApplicationFrame, { environment: "training", navBar: React.createElement(Navigation, null) });

package/dist/src/Layout/Header.d.ts

@@ -1,17 +1,17 @@
-import React from "react";
-import { BoxProps } from "../Box";
-type Breakpoint = string | number;
-type HeaderProps = BoxProps & {
-    renderBreadcrumbs?: () => React.ReactNode;
-    title?: string;
-    subtitle?: string;
-    undecorated?: boolean;
-    renderActions?: () => React.ReactNode;
-    renderSummary?: () => React.ReactNode;
-    breakpoints?: {
-        small?: Breakpoint;
-        medium?: Breakpoint;
-    };
-};
-declare const Header: React.FC<React.PropsWithChildren<HeaderProps>>;
-export default Header;
+import React from "react";
+import { BoxProps } from "../Box";
+type Breakpoint = string | number;
+type HeaderProps = BoxProps & {
+    renderBreadcrumbs?: () => React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    undecorated?: boolean;
+    renderActions?: () => React.ReactNode;
+    renderSummary?: () => React.ReactNode;
+    breakpoints?: {
+        small?: Breakpoint;
+        medium?: Breakpoint;
+    };
+};
+declare const Header: React.FC<React.PropsWithChildren<HeaderProps>>;
+export default Header;

package/dist/src/Layout/Header.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { useTheme } from "styled-components";
+import { Flex } from "../Flex";
+import { Heading1, Text } from "../Type";
+import useMediaQuery from "../hooks/useMediaQuery";
+import numberFromDimension from "../utils/numberFromDimension";
+import BackgroundTriangles from "../Decorations";
+const Header = (_a) => {
+    var _b, _c;
+    var { background, renderBreadcrumbs, title, undecorated = false, children, subtitle, breakpoints, renderActions, renderSummary } = _a, rest = __rest(_a, ["background", "renderBreadcrumbs", "title", "undecorated", "children", "subtitle", "breakpoints", "renderActions", "renderSummary"]);
+    const theme = useTheme();
+    const smallBreakpoint = numberFromDimension((_b = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small) !== null && _b !== void 0 ? _b : theme.breakpoints.small);
+    const mediumBreakpoint = numberFromDimension((_c = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium) !== null && _c !== void 0 ? _c : theme.breakpoints.medium);
+    const m = useMediaQuery(`(max-width: ${mediumBreakpoint}px)`);
+    const sm = useMediaQuery(`(max-width: ${smallBreakpoint}px)`);
+    const bg = background ? background : undecorated ? "transparent" : "whiteGrey";
+    return (React.createElement(Flex, Object.assign({ py: "x1", px: "x3", gap: "x2", position: "relative", bg: bg }, rest),
+        React.createElement(Flex, { flexGrow: 3, justifyContent: "space-between", flexDirection: m || sm ? "column" : "row", zIndex: "content" },
+            React.createElement(Flex, { flexDirection: "column" },
+                renderBreadcrumbs && renderBreadcrumbs(),
+                React.createElement(Flex, { gap: !sm ? "x2" : undefined, flexDirection: !sm ? "row" : "column", alignItems: !sm ? "center" : undefined },
+                    React.createElement(Flex, { alignItems: !sm ? "flex-end" : undefined, gap: !sm ? "x2" : undefined, flexDirection: !sm ? "row" : "column" },
+                        title && React.createElement(Heading1, { mb: "0" }, title),
+                        subtitle && (React.createElement(Text, { pl: !sm ? "x2" : undefined, borderLeft: !sm ? "1px solid" : "none", my: "half", borderColor: "grey" }, subtitle))),
+                    children && children)),
+            renderSummary && renderSummary()),
+        renderActions && (React.createElement(Flex, { display: "flex", flexGrow: 0, alignItems: "flex-start", zIndex: "content" }, renderActions())),
+        !undecorated && React.createElement(BackgroundTriangles, { zIndex: 1 })));
+};
+export default Header;

package/dist/src/Layout/Header.story.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-export declare const Default: () => React.JSX.Element;
-export declare const WithActions: () => React.JSX.Element;
-export declare const WithSubTitle: () => React.JSX.Element;
-export declare const WithContent: () => React.JSX.Element;
-export declare const WithSummary: () => React.JSX.Element;
-export declare const WithAnUndecoratedBackground: () => React.JSX.Element;
-export declare const WithCustomBackground: () => React.JSX.Element;
-export declare const WithEverything: () => React.JSX.Element;
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-        chromatic: {
-            viewports: number[];
-        };
-    };
-};
-export default _default;
+import React from "react";
+export declare const Default: () => React.JSX.Element;
+export declare const WithActions: () => React.JSX.Element;
+export declare const WithSubTitle: () => React.JSX.Element;
+export declare const WithContent: () => React.JSX.Element;
+export declare const WithSummary: () => React.JSX.Element;
+export declare const WithAnUndecoratedBackground: () => React.JSX.Element;
+export declare const WithCustomBackground: () => React.JSX.Element;
+export declare const WithEverything: () => React.JSX.Element;
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};
+export default _default;

package/dist/src/Layout/Header.story.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { Box, Breadcrumbs, Button, DropdownButton, DropdownLink, Flex, Link, PrimaryButton, StatusIndicator, Header, Text, } from "..";
+import Summary from "../Summary/Summary";
+import SummaryItem from "../Summary/SummaryItem";
+import SummaryDivider from "../Summary/SummaryDivider";
+import DropdownMenu from "../DropdownMenu/DropdownMenu";
+import numberFromDimension from "../utils/numberFromDimension";
+import { legacy as theme } from "../theme/theme";
+export const Default = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview" }));
+export const WithActions = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", renderActions: () => (React.createElement(Flex, { gap: "x1" },
+        React.createElement(PrimaryButton, { size: "small" }, " Archive"),
+        React.createElement(Button, { size: "small" }, "Delete"),
+        React.createElement(DropdownMenu, { showArrow: false, defaultOpen: false },
+            React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
+            React.createElement(DropdownButton, null, "Dropdown Button")))) }));
+export const WithSubTitle = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", subtitle: "Materials Overview" }));
+export const WithContent = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Materials"),
+        React.createElement(Text, null, "Orders"))), title: "Materials Overview", subtitle: "Materials Overview" },
+    React.createElement(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small" }, "Extra content")));
+export const WithSummary = () => (React.createElement(Header, { breakpoints: {
+        medium: 1200,
+    }, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { underline: false, href: "/" }, "Home"),
+        React.createElement(Link, { underline: false, href: "/" }, "Materials"))), title: "Page title", renderSummary: () => (React.createElement(Summary, { breakpoint: 1200 },
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }))) }));
+export const WithAnUndecoratedBackground = () => (React.createElement(Header, { undecorated: true, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview" }));
+export const WithCustomBackground = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", background: "#98FB98", undecorated: true }));
+export const WithEverything = () => (React.createElement(Header, { breakpoints: {
+        small: 768,
+        medium: 1200,
+    }, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { underline: false, href: "/" }, "Home"),
+        React.createElement(Link, { underline: false, href: "/" }, "Materials"))), title: "Page title", subtitle: "Alternative page title", renderSummary: () => (React.createElement(Summary, { breakpoint: 1200 },
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryDivider, null),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }))), renderActions: () => (React.createElement(DropdownMenu, { showArrow: false, defaultOpen: false },
+        React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
+        React.createElement(DropdownButton, null, "Dropdown Button"))) },
+    React.createElement(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small" }, "Extra content")));
+const viewports = [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension);
+export default {
+    title: "Components/Header",
+    parameters: {
+        layout: "fullscreen",
+        chromatic: { viewports },
+    },
+};

package/dist/src/Layout/Page.applicationFrame.story.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const NoPageTitle: () => React.JSX.Element;
-export declare const NoBreadcrumbs: () => React.JSX.Element;
-export declare const WithFullHeight: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const NoPageTitle: () => React.JSX.Element;
+export declare const NoBreadcrumbs: () => React.JSX.Element;
+export declare const WithFullHeight: () => React.JSX.Element;

package/dist/src/Layout/Page.applicationFrame.story.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Link } from "../Link";
+import { ApplicationFrame, Navigation, Page, Breadcrumbs, Heading2, Text } from "..";
+export default {
+    title: "Components/Page/Within an ApplicationFrame",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export const NoPageTitle = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null) },
+    React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+            React.createElement(Link, { href: "/" }, "Home"),
+            React.createElement(Link, { href: "/" }, "Materials")) },
+        React.createElement(Text, { fontFamily: "mono", fontSize: "small" }, "content"))));
+export const NoBreadcrumbs = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), height: "100vh" },
+    React.createElement(Page, { title: "Materials Overview" },
+        React.createElement(React.Fragment, null,
+            React.createElement(Heading2, null, "Overview"),
+            React.createElement(Text, null, "I am main content.")))));
+export const WithFullHeight = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null) },
+    React.createElement(Page, { title: "Materials Overview", fullHeight: true, breadcrumbs: React.createElement(Breadcrumbs, null,
+            React.createElement(Link, { href: "/" }, "Home"),
+            React.createElement(Link, { href: "/" }, "Materials")) },
+        React.createElement(Text, null, "I am main content."))));

package/dist/src/Layout/Page.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-import { FlexProps } from "../Flex/Flex";
-type PageProps = FlexProps & {
-    breadcrumbs?: React.ReactNode;
-    title?: string;
-    children?: React.ReactNode;
-    headerContent?: React.ReactNode;
-    fullHeight?: boolean;
-    renderHeader?: () => JSX.Element;
-};
-export declare const Page: React.FC<React.PropsWithChildren<PageProps>>;
-export default Page;
+import React from "react";
+import { FlexProps } from "../Flex/Flex";
+type PageProps = FlexProps & {
+    breadcrumbs?: React.ReactNode;
+    title?: string;
+    children?: React.ReactNode;
+    headerContent?: React.ReactNode;
+    fullHeight?: boolean;
+    renderHeader?: () => JSX.Element;
+};
+export declare const Page: React.FC<React.PropsWithChildren<PageProps>>;
+export default Page;

package/dist/src/Layout/Page.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import Header from "./Header";
+export const Page = (_a) => {
+    var { breadcrumbs, title, children, headerContent, fullHeight, renderHeader } = _a, rest = __rest(_a, ["breadcrumbs", "title", "children", "headerContent", "fullHeight", "renderHeader"]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "column", flexGrow: fullHeight ? 1 : 0 }, rest),
+        renderHeader
+            ? renderHeader()
+            : (breadcrumbs || title || headerContent) && (React.createElement(Header, { renderBreadcrumbs: () => breadcrumbs, title: title }, headerContent)),
+        React.createElement(Box, { p: "x3" }, children)));
+};
+export default Page;

package/dist/src/Layout/Page.story.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const _Page: () => React.JSX.Element;
-export declare const NoPageTitle: () => React.JSX.Element;
-export declare const NoBreadcrumbs: () => React.JSX.Element;
-export declare const NoBackground: () => React.JSX.Element;
-export declare const WithFullHeight: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const _Page: () => React.JSX.Element;
+export declare const NoPageTitle: () => React.JSX.Element;
+export declare const NoBreadcrumbs: () => React.JSX.Element;
+export declare const NoBackground: () => React.JSX.Element;
+export declare const WithFullHeight: () => React.JSX.Element;

package/dist/src/Layout/Page.story.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { ApplicationFrame, Breadcrumbs, Link, Heading2, Text, Page, StatusIndicator, Navigation } from "..";
+export default {
+    title: "Components/Page",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export const _Page = () => (React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview", headerContent: React.createElement(StatusIndicator, { type: "informative" }, "Beta") },
+    React.createElement(React.Fragment, null,
+        React.createElement(Text, { fontFamily: "mono", fontSize: "small" }, "content"))));
+export const NoPageTitle = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null) },
+    React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+            React.createElement(Link, { href: "/" }, "Home"),
+            React.createElement(Link, { href: "/" }, "Materials")) },
+        React.createElement(Text, { fontFamily: "mono", fontSize: "small" }, "content"))));
+export const NoBreadcrumbs = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), height: "100vh" },
+    React.createElement(Page, { title: "Materials Overview" },
+        React.createElement(React.Fragment, null,
+            React.createElement(Heading2, null, "Overview"),
+            React.createElement(Text, null, "I am main content.")))));
+export const NoBackground = () => (React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" }));
+export const WithFullHeight = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null) },
+    React.createElement(Page, { title: "Materials Overview", fullHeight: true, breadcrumbs: React.createElement(Breadcrumbs, null,
+            React.createElement(Link, { href: "/" }, "Home"),
+            React.createElement(Link, { href: "/" }, "Materials")) },
+        React.createElement(Text, null, "I am main content."))));

package/dist/src/Layout/Sidebar.d.ts

@@ -1,25 +1,25 @@
-import React, { RefObject } from "react";
-import { AnimatedBoxProps } from "../Box/Box";
-type PredefinedSidebarWidth = "xs" | "s" | "m" | "l" | "xl";
-type SidebarWidth = PredefinedSidebarWidth | (string & {});
-export type SidebarProps = Omit<AnimatedBoxProps, "width"> & {
-    children?: React.ReactNode;
-    onClose?: () => void;
-    title?: string;
-    isOpen?: boolean;
-    footer?: React.ReactNode;
-    closeButtonTestId?: string;
-    closeButtonAriaLabel?: string;
-    offset?: string;
-    triggerRef?: RefObject<HTMLInputElement | HTMLButtonElement>;
-    duration?: number;
-    closeOnOutsideClick?: boolean;
-    overlay?: boolean | "show" | "hide" | "transparent";
-    disableScroll?: boolean;
-    hideCloseButton?: boolean;
-    width?: SidebarWidth;
-    helpText?: React.ReactNode;
-    renderHelpText?: () => React.ReactNode;
-};
-declare function Sidebar({ p, width, children, onClose, title, isOpen, footer, closeButtonTestId, closeButtonAriaLabel, offset, triggerRef, duration, top, closeOnOutsideClick, overlay, disableScroll, hideCloseButton, zIndex, helpText, renderHelpText, ...props }: SidebarProps): React.JSX.Element;
-export default Sidebar;
+import React, { RefObject } from "react";
+import { AnimatedBoxProps } from "../Box/Box";
+type PredefinedSidebarWidth = "xs" | "s" | "m" | "l" | "xl";
+type SidebarWidth = PredefinedSidebarWidth | (string & {});
+export type SidebarProps = Omit<AnimatedBoxProps, "width"> & {
+    children?: React.ReactNode;
+    onClose?: () => void;
+    title?: string;
+    isOpen?: boolean;
+    footer?: React.ReactNode;
+    closeButtonTestId?: string;
+    closeButtonAriaLabel?: string;
+    offset?: string;
+    triggerRef?: RefObject<HTMLInputElement | HTMLButtonElement>;
+    duration?: number;
+    closeOnOutsideClick?: boolean;
+    overlay?: boolean | "show" | "hide" | "transparent";
+    disableScroll?: boolean;
+    hideCloseButton?: boolean;
+    width?: SidebarWidth;
+    helpText?: React.ReactNode;
+    renderHelpText?: () => React.ReactNode;
+};
+declare function Sidebar({ p, width, children, onClose, title, isOpen, footer, closeButtonTestId, closeButtonAriaLabel, offset, triggerRef, duration, top, closeOnOutsideClick, overlay, disableScroll, hideCloseButton, zIndex, helpText, renderHelpText, ...props }: SidebarProps): React.JSX.Element;
+export default Sidebar;