@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Button/IconicButton.story.d.ts

@@ -1,82 +1,82 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const WithoutALabel: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithLabel: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithALongLabel: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAHiddenLabel: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACustomIconSize: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACustomColor: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithATooltipAndLabel: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAComplicatedTooltipAndLabel: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const rightAligned: {
-    (): React.JSX.Element;
-    parameters: {
-        chromatic: {
-            diffThreshold: number;
-        };
-    };
-};
-export declare const WithACustomFontSize: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithNonTextChildren: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomHoverBackgroundThemeColor: () => React.JSX.Element;
-export declare const WithCustomHoverBackgroundNonThemeColor: () => React.JSX.Element;
-export declare const WithLargerIcons: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithoutALabel: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithLabel: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithALongLabel: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToDisabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAHiddenLabel: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithACustomIconSize: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithACustomColor: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithATooltipAndLabel: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAComplicatedTooltipAndLabel: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const rightAligned: {
+    (): React.JSX.Element;
+    parameters: {
+        chromatic: {
+            diffThreshold: number;
+        };
+    };
+};
+export declare const WithACustomFontSize: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithNonTextChildren: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomHoverBackgroundThemeColor: () => React.JSX.Element;
+export declare const WithCustomHoverBackgroundNonThemeColor: () => React.JSX.Element;
+export declare const WithLargerIcons: () => React.JSX.Element;

package/dist/src/Button/IconicButton.story.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { IconicButton } from "../index";
+import { Flex } from "../Flex";
+import { StatusIndicator } from "../StatusIndicator";
+import { Box } from "../Box";
+export default {
+    title: "Components/IconicButton",
+};
+export const WithoutALabel = () => React.createElement(IconicButton, { icon: "delete" });
+WithoutALabel.story = {
+    name: "without a label",
+};
+export const WithLabel = () => React.createElement(IconicButton, { icon: "delete" }, "Delete");
+WithLabel.story = {
+    name: "with label",
+};
+export const WithALongLabel = () => (React.createElement(IconicButton, { icon: "user" }, "I am an Iconic Button with a really really really long label"));
+WithALongLabel.story = {
+    name: "with a long label",
+};
+export const SetToDisabled = () => (React.createElement(React.Fragment, null,
+    React.createElement(IconicButton, { icon: "cancel", disabled: true }, "Cancel"),
+    React.createElement(IconicButton, { icon: "lock", disabled: true }, "Lock")));
+SetToDisabled.story = {
+    name: "set to disabled",
+};
+export const WithAHiddenLabel = () => (React.createElement(IconicButton, { ml: "x6", labelHidden: true, icon: "user" }, "Hidden Label"));
+WithAHiddenLabel.story = {
+    name: "with a hidden label",
+};
+export const WithACustomIconSize = () => (React.createElement(IconicButton, { icon: "user", iconSize: "50px", labelHidden: true }, "I am an Iconic Button"));
+WithACustomIconSize.story = {
+    name: "with a custom icon size",
+};
+export const WithACustomColor = () => (React.createElement(IconicButton, { color: "red", icon: "close" }, "Close"));
+WithACustomColor.story = {
+    name: "with a custom color",
+};
+export const WithATooltipAndLabel = () => (React.createElement(IconicButton, { tooltip: "Stop job", icon: "close" }, "Stop"));
+WithATooltipAndLabel.story = {
+    name: "with a tooltip and label",
+};
+export const WithAComplicatedTooltipAndLabel = () => (React.createElement(IconicButton, { tooltip: React.createElement(Box, null, "Hello"), icon: "close" }, "Please stop"));
+WithAComplicatedTooltipAndLabel.story = {
+    name: "with a complicated tooltip and label",
+};
+export const rightAligned = () => (React.createElement(Flex, { px: "x3", height: "150px" },
+    React.createElement(Flex, { justifyContent: "flex-end", alignItems: "flex-start", width: "100%" },
+        React.createElement(IconicButton, { icon: "rightArrow", labelHidden: true }, "I am an Iconic Button"),
+        React.createElement(IconicButton, { icon: "leftArrow", labelHidden: true }, "I am an Iconic Button 2"))));
+rightAligned.parameters = {
+    chromatic: { diffThreshold: 0.3 },
+};
+export const WithACustomFontSize = () => (React.createElement(Flex, { flexDirection: "column" },
+    React.createElement(IconicButton, { fontSize: "small", tooltip: "Stop job", icon: "close" }, "This is an IconicButton with a small font size"),
+    React.createElement(IconicButton, { fontSize: "large", tooltip: "Stop job", icon: "close" }, "This is an IconicButton with a large font size"),
+    React.createElement(IconicButton, { fontSize: "48px", tooltip: "Stop job", icon: "close" }, "This is an IconicButton with 48px font size")));
+WithACustomFontSize.story = {
+    name: "with a custom font size",
+};
+export const WithNonTextChildren = () => (React.createElement(IconicButton, { fontSize: "small", "aria-label": "warnings", icon: "warning" },
+    React.createElement(Flex, null,
+        React.createElement(Box, { as: "span", pr: "x1" }, "Warnings"),
+        React.createElement(StatusIndicator, { type: "informative" }, "3"))));
+WithNonTextChildren.story = {
+    name: "with non text children",
+};
+export const WithCustomHoverBackgroundThemeColor = () => (React.createElement(IconicButton, { hoverBackgroundColor: "lightYellow", fontSize: "small", "aria-label": "warnings", icon: "warning" },
+    React.createElement(Flex, null,
+        React.createElement(Box, { as: "span", pr: "x1" }, "Warnings"))));
+export const WithCustomHoverBackgroundNonThemeColor = () => (React.createElement(IconicButton, { hoverBackgroundColor: "#FA8072", fontSize: "small", "aria-label": "warnings", icon: "warning" },
+    React.createElement(Flex, null,
+        React.createElement(Box, { as: "span", pr: "x1" }, "Warnings"))));
+export const WithLargerIcons = () => React.createElement(IconicButton, { icon: "chatBubble" }, "Add comment");

package/dist/src/Button/PrimaryButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ButtonProps } from "./Button";
-declare const PrimaryButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
-export default PrimaryButton;
+/// <reference types="react" />
+import { ButtonProps } from "./Button";
+declare const PrimaryButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export default PrimaryButton;

package/dist/src/Button/PrimaryButton.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { darken } from "polished";
+import Button from "./Button";
+const PrimaryButton = styled(Button)(({ disabled, theme }) => ({
+    color: theme.colors.white,
+    borderColor: theme.colors.blue,
+    backgroundColor: theme.colors.blue,
+    "&:hover": {
+        backgroundColor: disabled ? undefined : darken(0.1, theme.colors.blue),
+        borderColor: disabled ? undefined : darken(0.1, theme.colors.blue),
+    },
+    "&:focus": {
+        outline: "none",
+        borderColor: theme.colors.blue,
+        boxShadow: theme.shadows.focus,
+        backgroundColor: theme.colors.blue,
+        "&:hover": {
+            backgroundColor: darken(0.1, theme.colors.blue),
+        },
+    },
+}));
+export default PrimaryButton;

package/dist/src/Button/QuietButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ButtonProps } from "./Button";
-declare const QuietButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
-export default QuietButton;
+/// <reference types="react" />
+import { ButtonProps } from "./Button";
+declare const QuietButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export default QuietButton;

package/dist/src/Button/QuietButton.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import Button from "./Button";
+const QuietButton = styled(Button)(({ theme }) => ({
+    color: theme.colors.blue,
+    borderColor: "transparent",
+    backgroundColor: "transparent",
+}));
+export default QuietButton;

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

@@ -1,7 +1,7 @@
-export { default as Button } from "./Button";
-export { default as PrimaryButton } from "./PrimaryButton";
-export { default as DangerButton } from "./DangerButton";
-export { default as QuietButton } from "./QuietButton";
-export { default as IconicButton } from "./IconicButton";
-export { default as CloseButton } from "./CloseButton";
-export { default as ControlIcon } from "./ControlIcon";
+export { default as Button } from "./Button";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as DangerButton } from "./DangerButton";
+export { default as QuietButton } from "./QuietButton";
+export { default as IconicButton } from "./IconicButton";
+export { default as CloseButton } from "./CloseButton";
+export { default as ControlIcon } from "./ControlIcon";

package/dist/src/Button/index.js

@@ -0,0 +1,7 @@
+export { default as Button } from "./Button";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as DangerButton } from "./DangerButton";
+export { default as QuietButton } from "./QuietButton";
+export { default as IconicButton } from "./IconicButton";
+export { default as CloseButton } from "./CloseButton";
+export { default as ControlIcon } from "./ControlIcon";

package/dist/src/ButtonGroup/ButtonGroup.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { FlexProps } from "../Flex/Flex";
-type ButtonGroupProps = FlexProps & {
-    children?: React.ReactNode;
-    alignment?: "left" | "spaced" | "right";
-    className?: string;
-};
-declare const ButtonGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, keyof FlexProps> & FlexProps, ButtonGroupProps>> & string;
-export default ButtonGroup;
+/// <reference types="react" />
+import { FlexProps } from "../Flex/Flex";
+type ButtonGroupProps = FlexProps & {
+    children?: React.ReactNode;
+    alignment?: "left" | "spaced" | "right";
+    className?: string;
+};
+declare const ButtonGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, keyof FlexProps> & FlexProps, ButtonGroupProps>> & string;
+export default ButtonGroup;

package/dist/src/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { Flex } from "../Flex";
+const alignments = {
+    left: "flex-start",
+    spaced: "space-between",
+    right: "flex-end",
+};
+const buttonSpacings = (theme) => ({
+    left: {
+        "button:not(:last-child)": {
+            marginRight: theme.space.x1,
+        },
+    },
+    spaced: {
+        "button:not(:last-child)": {
+            marginRight: theme.space.x1,
+        },
+    },
+    right: {
+        "button:not(:first-child)": {
+            marginLeft: theme.space.x1,
+        },
+    },
+});
+const getAlignment = (alignment) => alignments[alignment] || alignments.left;
+const getButtonSpacing = (alignment, theme) => buttonSpacings(theme)[alignment] || buttonSpacings(theme).left;
+const ButtonGroup = styled(Flex)(({ alignment = "left", theme }) => (Object.assign({ flexWrap: "wrap", marginBottom: `-${theme.space.x1}`, justifyContent: getAlignment(alignment), button: {
+        marginBottom: theme.space.x1,
+    } }, getButtonSpacing(alignment, theme))));
+export default ButtonGroup;

package/dist/src/ButtonGroup/ButtonGroup.story.d.ts

@@ -1,40 +1,40 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _ButtonGroup: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAlignmentRight: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAlignmentSpaced: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const MoreButtonTypes: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WrappingButtons: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            viewport: {
-                defaultViewport: string;
-            };
-        };
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _ButtonGroup: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAlignmentRight: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAlignmentSpaced: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const MoreButtonTypes: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WrappingButtons: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            viewport: {
+                defaultViewport: string;
+            };
+        };
+    };
+};

package/dist/src/ButtonGroup/ButtonGroup.story.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { Box, ButtonGroup, Button, PrimaryButton, DangerButton, QuietButton, IconicButton } from "../index";
+export default {
+    title: "Components/ButtonGroup",
+};
+export const _ButtonGroup = () => (React.createElement(Box, { bg: "whiteGrey", p: "x2", width: "500px" },
+    React.createElement(ButtonGroup, null,
+        React.createElement(PrimaryButton, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"))));
+_ButtonGroup.story = {
+    name: "ButtonGroup",
+};
+export const WithAlignmentRight = () => (React.createElement(ButtonGroup, { alignment: "right", p: "x2", bg: "whiteGrey", width: "500px" },
+    React.createElement(PrimaryButton, null, "Button"),
+    React.createElement(Button, null, "Button"),
+    React.createElement(Button, null, "Button")));
+WithAlignmentRight.story = {
+    name: "with alignment right",
+};
+export const WithAlignmentSpaced = () => (React.createElement(ButtonGroup, { alignment: "spaced", bg: "whiteGrey", p: "x2", width: "500px" },
+    React.createElement(PrimaryButton, null, "Button"),
+    React.createElement(Button, null, "Button")));
+WithAlignmentSpaced.story = {
+    name: "with alignment spaced",
+};
+export const MoreButtonTypes = () => (React.createElement(ButtonGroup, { bg: "whiteGrey", p: "x2", width: "600px" },
+    React.createElement(PrimaryButton, null, "Button"),
+    React.createElement(DangerButton, null, "Button"),
+    React.createElement(Button, null, "Button"),
+    React.createElement(QuietButton, null, "Button"),
+    React.createElement(IconicButton, { icon: "menu" }),
+    React.createElement(IconicButton, { icon: "menu" }, "Button")));
+MoreButtonTypes.story = {
+    name: "more button types",
+};
+export const WrappingButtons = () => (React.createElement(React.Fragment, null,
+    React.createElement(ButtonGroup, { bg: "whiteGrey", p: "x2" },
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button")),
+    React.createElement(ButtonGroup, { alignment: "right", bg: "whiteGrey", p: "x2", mt: "x2" },
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"),
+        React.createElement(Button, null, "Button"))));
+WrappingButtons.story = {
+    name: "wrapping buttons",
+    parameters: { viewport: { defaultViewport: "extraSmall" } },
+};

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

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

package/dist/src/ButtonGroup/index.js

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

package/dist/src/Card/Card.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-import { BoxProps } from "../Box/Box";
-export default function Card({ borderRadius, boxShadow, py, px, position, children, ...props }: BoxProps): React.JSX.Element;
+import React from "react";
+import { BoxProps } from "../Box/Box";
+export default function Card({ borderRadius, boxShadow, py, px, position, children, ...props }: BoxProps): React.JSX.Element;

package/dist/src/Card/Card.js

@@ -0,0 +1,17 @@
+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";
+export default function Card(_a) {
+    var { borderRadius = "medium", boxShadow = "small", py = "x2", px = "x2", position = "relative", children } = _a, props = __rest(_a, ["borderRadius", "boxShadow", "py", "px", "position", "children"]);
+    return (React.createElement(Box, Object.assign({ border: "1px solid", borderColor: "lightGrey", borderRadius: borderRadius, boxShadow: boxShadow, py: py, px: px, position: position }, props), children));
+}

package/dist/src/Card/Card.story.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Card: () => React.JSX.Element;
-export declare const CustomCard: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const Cardset: () => React.JSX.Element;
-export declare const AdvancedUsage: {
-    (): React.JSX.Element;
-    parameters: {
-        layout: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Card: () => React.JSX.Element;
+export declare const CustomCard: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Cardset: () => React.JSX.Element;
+export declare const AdvancedUsage: {
+    (): React.JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};

package/dist/src/Card/Card.story.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { ApplicationFrame, Card, CardSet, DescriptionDetails, DescriptionGroup, DescriptionList, DescriptionTerm, Icon, Link, Page, StatusIndicator, Tooltip, TopBar, } from "../index";
+import { Heading4, Text } from "../Type";
+import TruncatedText from "../TruncatedText/TruncatedText";
+import { menuItems } from "../TopBar/stories/fixtures";
+export default {
+    title: "Components/Card",
+};
+export const _Card = () => React.createElement(Card, null, "I am a card.");
+export const CustomCard = () => (React.createElement(Card, { bg: "black", color: "white", borderRadius: "small", p: "x1" }, "I am a custom card."));
+CustomCard.story = {
+    name: "Custom card",
+};
+export const Cardset = () => (React.createElement(CardSet, null,
+    React.createElement(Card, null, "I am a 1st card in a cardset."),
+    React.createElement(Card, null, "I am a 2nd card in a cardset."),
+    React.createElement(Card, null, "I am a 3rd card in a cardset.")));
+function AdvancedCard() {
+    return (React.createElement(Card, null,
+        React.createElement(Heading4, null, "POLI-2304"),
+        React.createElement(DescriptionList, null,
+            React.createElement(DescriptionGroup, null,
+                React.createElement(DescriptionTerm, null, "Customer"),
+                React.createElement(DescriptionDetails, null, "Nulogy")),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(DescriptionTerm, null,
+                    React.createElement(Text, { display: "inline-flex", alignItems: "center" },
+                        "Order number",
+                        React.createElement(Tooltip, { tooltip: "The unique identifier assigned to this order when it was placed by the customer." },
+                            React.createElement(Icon, { icon: "info", size: "x3", paddingLeft: "half" })))),
+                React.createElement(DescriptionDetails, null,
+                    React.createElement(Link, { href: "/customer-details" }, "P12-90381-2039"))),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(DescriptionTerm, null, "Status"),
+                React.createElement(DescriptionDetails, null,
+                    React.createElement(StatusIndicator, { type: "success" }, "Paid"))),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(DescriptionTerm, null, "Amount"),
+                React.createElement(DescriptionDetails, null, "$202.12")),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(DescriptionTerm, null, "Notes"),
+                React.createElement(DescriptionDetails, null,
+                    React.createElement(TruncatedText, { fontSize: "small", maxCharacters: 200 }, "Due to severe weather disruptions and unforeseen logistical challenges, this shipment has been significantly delayed. The warehouse manager reported that mechanical issues with the transport vehicles coupled with a shortage of available staff, have extended processing times at the loading dock. Additionally, mandatory safety inspections and inventory verifications required extra time, further postponing the dispatch schedule. His detailed notes also mention that alternate transportation arrangements are being evaluated and urge all stakeholders to stay in close communication for updated delivery timelines."))))));
+}
+export const AdvancedUsage = () => {
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(TopBar.Root, null,
+            React.createElement(TopBar.BackLink, { href: "/cycle-counts" }, "Cycle counts"),
+            React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
+            React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
+                React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(CardSet, null, [...Array(10)].map((_, i) => (React.createElement(AdvancedCard, { key: i })))))));
+};
+AdvancedUsage.parameters = {
+    layout: "fullscreen",
+};