@nulogy/components 14.8.2 → 15.0.1

package/dist/src/DescriptionList/DescriptionList.parts.js

@@ -0,0 +1,109 @@
+import styled from "styled-components";
+import { useDescriptionListContext } from "./DescriptionListContext";
+const gapConfig = {
+    compact: "x0_75",
+    medium: "x1_5",
+    relaxed: "x3",
+};
+export const DescriptionListContainer = styled.div({
+    containerType: "inline-size",
+    width: "100%",
+});
+export const DescriptionList = styled.dl(({ theme }) => {
+    var _a, _b;
+    const { fontSize, lineHeight, density, columns, groupMinWidth } = useDescriptionListContext();
+    return Object.assign(Object.assign(Object.assign(Object.assign({ containerType: "inline-size", width: "100%", margin: 0, display: "grid", columnGap: theme.space[gapConfig[density]], fontSize: (_a = theme.fontSizes[fontSize]) !== null && _a !== void 0 ? _a : theme.fontSizes.medium, lineHeight: (_b = theme.lineHeights[lineHeight]) !== null && _b !== void 0 ? _b : theme.lineHeights.base }, (typeof columns === "number" && {
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    })), { "a, p": {
+            fontSize: "inherit",
+            lineHeight: "inherit",
+        } }), (groupMinWidth && {
+        gridTemplateColumns: `repeat(auto-fit, minmax(${groupMinWidth}, 1fr))`,
+    })), (typeof columns === "object" && Object.assign({}, Object.fromEntries(Object.entries(columns).map(([key, value]) => [
+        `@container (min-width: ${theme.breakpoints[key]})`,
+        { gridTemplateColumns: `repeat(${value}, minmax(0, 1fr))` },
+    ])))));
+});
+export const DescriptionGroup = styled.div(({ theme, rowSpan, columnSpan }) => {
+    const { descriptionTermMaxWidth, layout, showDivider, autoLayoutBreakpoint } = useDescriptionListContext();
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: "grid", gridTemplateRows: "auto 1fr" }, (showDivider && {
+        borderBottom: `1px solid ${theme.colors.lightGrey}`,
+    })), (layout === "inline" && {
+        gridTemplateColumns: `minmax(0, ${descriptionTermMaxWidth}) 1fr`,
+    })), ((layout === "stacked" || layout === "auto") && {
+        gridTemplateColumns: "1fr",
+    })), (columnSpan && {
+        gridColumn: `span ${columnSpan} / span ${columnSpan}`,
+    })), (rowSpan && {
+        gridRow: `span ${rowSpan} / span ${rowSpan}`,
+    })), { [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign({}, (layout === "auto" && {
+            gridTemplateColumns: `minmax(0, min(50%, ${descriptionTermMaxWidth})) 1fr`,
+        })) });
+});
+export const DescriptionTerm = styled.dt(({ theme }) => {
+    const { showDivider, layout, density, autoLayoutBreakpoint } = useDescriptionListContext();
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ gridColumnStart: 1, color: theme.colors.midGrey, paddingLeft: theme.space.none, paddingRight: theme.space.none }, (layout !== "inline" && {
+        paddingBottom: theme.space.none,
+    })), (density === "compact" && Object.assign({ paddingTop: theme.space.x0_25 }, (layout === "inline" && {
+        paddingBottom: theme.space.x0_25,
+    })))), (density === "medium" && Object.assign({ paddingTop: theme.space.x0_75 }, (layout === "inline" && {
+        paddingBottom: theme.space.x0_75,
+    })))), (density === "relaxed" && Object.assign({ paddingTop: theme.space.x1_5, paddingBottom: theme.space.x0_25 }, (layout === "inline" && {
+        paddingBottom: theme.space.x1_5,
+    })))), (showDivider && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey,
+    })), { "&:first-child": {
+            border: "none",
+        }, [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign(Object.assign(Object.assign(Object.assign({}, (showDivider &&
+            layout !== "stacked" && {
+            borderTopWidth: "1px",
+            borderTopStyle: "solid",
+            borderTopColor: theme.colors.lightGrey,
+        })), (density === "compact" &&
+            layout !== "stacked" && {
+            paddingBottom: theme.space.x0_25,
+        })), (density === "medium" &&
+            layout !== "stacked" && {
+            paddingBottom: theme.space.x0_75,
+        })), (density === "relaxed" &&
+            layout !== "stacked" && {
+            paddingBottom: theme.space.x1_5,
+        })) });
+});
+export const DescriptionDetails = styled.dd(({ theme }) => {
+    const { autoLayoutBreakpoint, showDivider, density, layout } = useDescriptionListContext();
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 
+        // narrow stuff + non-auto layout
+        margin: 0, color: theme.colors.black, paddingLeft: theme.space.none, paddingRight: theme.space.none }, (layout !== "inline" && {
+        paddingTop: theme.space.none,
+    })), (density === "compact" && Object.assign({ paddingBottom: theme.space.x0_25 }, (layout === "inline" && {
+        paddingTop: theme.space.x0_25,
+    })))), (density === "medium" && Object.assign({ paddingBottom: theme.space.x0_75 }, (layout === "inline" && {
+        paddingTop: theme.space.x0_75,
+    })))), (density === "relaxed" && Object.assign({ paddingBottom: theme.space.x1_5, paddingTop: theme.space.x0_25 }, (layout === "inline" && {
+        paddingTop: theme.space.x1_5,
+    })))), (showDivider &&
+        layout === "inline" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey,
+    })), { "&:nth-child(2)": {
+            border: "none",
+        }, [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign(Object.assign(Object.assign(Object.assign({}, (showDivider &&
+            layout !== "stacked" && {
+            borderTopWidth: "1px",
+            borderTopStyle: "solid",
+            borderTopColor: theme.colors.lightGrey,
+        })), (density === "compact" &&
+            layout !== "stacked" && {
+            paddingTop: theme.space.x0_25,
+        })), (density === "medium" &&
+            layout !== "stacked" && {
+            paddingTop: theme.space.x0_75,
+        })), (density === "relaxed" &&
+            layout !== "stacked" && {
+            paddingTop: theme.space.x1_5,
+        })) });
+});

package/dist/src/DescriptionList/DescriptionListContext.d.ts

@@ -1,19 +1,19 @@
-import React, { PropsWithChildren } from "react";
-import { Breakpoints } from "../theme/theme.type";
-import { DefaultNDSThemeType } from "../theme";
-import { Density } from "./lib/types";
-import { Layout } from "./lib/types";
-interface DescriptionListContextProps {
-    descriptionTermMaxWidth: string;
-    layout: Layout;
-    autoLayoutBreakpoint: string;
-    showDivider: boolean;
-    density: Density;
-    fontSize: keyof DefaultNDSThemeType["fontSizes"];
-    lineHeight: keyof DefaultNDSThemeType["lineHeights"];
-    columns?: number | Partial<Record<keyof Breakpoints, number>>;
-    groupMinWidth?: string;
-}
-export declare const DescriptionListProvider: ({ children, ...contextProps }: PropsWithChildren<DescriptionListContextProps>) => React.JSX.Element;
-export declare const useDescriptionListContext: () => DescriptionListContextProps;
-export {};
+import React, { PropsWithChildren } from "react";
+import { Breakpoints } from "../theme/theme.type";
+import { DefaultNDSThemeType } from "../theme";
+import { Density } from "./lib/types";
+import { Layout } from "./lib/types";
+interface DescriptionListContextProps {
+    descriptionTermMaxWidth: string;
+    layout: Layout;
+    autoLayoutBreakpoint: string;
+    showDivider: boolean;
+    density: Density;
+    fontSize: keyof DefaultNDSThemeType["fontSizes"];
+    lineHeight: keyof DefaultNDSThemeType["lineHeights"];
+    columns?: number | Partial<Record<keyof Breakpoints, number>>;
+    groupMinWidth?: string;
+}
+export declare const DescriptionListProvider: ({ children, ...contextProps }: PropsWithChildren<DescriptionListContextProps>) => React.JSX.Element;
+export declare const useDescriptionListContext: () => DescriptionListContextProps;
+export {};

package/dist/src/DescriptionList/DescriptionListContext.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, { createContext, useContext } from "react";
+const DescriptionListContext = createContext(undefined);
+export const DescriptionListProvider = (_a) => {
+    var { children } = _a, contextProps = __rest(_a, ["children"]);
+    return (React.createElement(DescriptionListContext.Provider, { value: contextProps }, children));
+};
+export const useDescriptionListContext = () => {
+    const context = useContext(DescriptionListContext);
+    if (!context) {
+        throw new Error("useDescriptionListContext must be used within a DescriptionListProvider");
+    }
+    return context;
+};

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

@@ -1,5 +1,5 @@
-export type { DescriptionListProps } from "./lib/types";
-export { default as DescriptionList } from "./DescriptionList";
-export { DescriptionGroup } from "./DescriptionList.parts";
-export { DescriptionTerm } from "./DescriptionList.parts";
-export { DescriptionDetails } from "./DescriptionList.parts";
+export type { DescriptionListProps } from "./lib/types";
+export { default as DescriptionList } from "./DescriptionList";
+export { DescriptionGroup } from "./DescriptionList.parts";
+export { DescriptionTerm } from "./DescriptionList.parts";
+export { DescriptionDetails } from "./DescriptionList.parts";

package/dist/src/DescriptionList/index.js

@@ -0,0 +1,4 @@
+export { default as DescriptionList } from "./DescriptionList";
+export { DescriptionGroup } from "./DescriptionList.parts";
+export { DescriptionTerm } from "./DescriptionList.parts";
+export { DescriptionDetails } from "./DescriptionList.parts";

package/dist/src/DescriptionList/lib/types.d.ts

@@ -1,26 +1,26 @@
-import React from "react";
-import { DefaultNDSThemeType } from "../../theme";
-import { Breakpoints } from "../../theme/theme.type";
-export type Density = "medium" | "compact" | "relaxed";
-export type Layout = "stacked" | "inline" | "auto";
-export type Columns = number | Partial<Record<keyof Breakpoints, number>>;
-export type GroupMinWidth = string;
-export interface BaseDescriptionListProps {
-    descriptionTermMaxWidth?: string;
-    layout?: Layout;
-    autoLayoutBreakpoint?: string;
-    showDivider?: boolean;
-    density?: Density;
-    fontSize?: keyof DefaultNDSThemeType["fontSizes"];
-    lineHeight?: keyof DefaultNDSThemeType["lineHeights"];
-    children?: React.ReactNode;
-}
-export type DescriptionListWithColumns = BaseDescriptionListProps & {
-    columns?: Columns;
-    groupMinWidth?: never;
-};
-export type DescriptionListWithGroupMinWidth = BaseDescriptionListProps & {
-    groupMinWidth?: GroupMinWidth;
-    columns?: never;
-};
-export type DescriptionListProps = DescriptionListWithColumns | DescriptionListWithGroupMinWidth;
+import React from "react";
+import { DefaultNDSThemeType } from "../../theme";
+import { Breakpoints } from "../../theme/theme.type";
+export type Density = "medium" | "compact" | "relaxed";
+export type Layout = "stacked" | "inline" | "auto";
+export type Columns = number | Partial<Record<keyof Breakpoints, number>>;
+export type GroupMinWidth = string;
+export interface BaseDescriptionListProps {
+    descriptionTermMaxWidth?: string;
+    layout?: Layout;
+    autoLayoutBreakpoint?: string;
+    showDivider?: boolean;
+    density?: Density;
+    fontSize?: keyof DefaultNDSThemeType["fontSizes"];
+    lineHeight?: keyof DefaultNDSThemeType["lineHeights"];
+    children?: React.ReactNode;
+}
+export type DescriptionListWithColumns = BaseDescriptionListProps & {
+    columns?: Columns;
+    groupMinWidth?: never;
+};
+export type DescriptionListWithGroupMinWidth = BaseDescriptionListProps & {
+    groupMinWidth?: GroupMinWidth;
+    columns?: never;
+};
+export type DescriptionListProps = DescriptionListWithColumns | DescriptionListWithGroupMinWidth;

package/dist/src/DescriptionList/lib/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/DescriptionList/lib/utils.d.ts

@@ -1,5 +1,5 @@
-import { DescriptionListProps, Columns, GroupMinWidth } from "./types";
-export declare function validateAndExtractGridProps(props: DescriptionListProps): {
-    columns?: Columns;
-    groupMinWidth?: GroupMinWidth;
-};
+import { DescriptionListProps, Columns, GroupMinWidth } from "./types";
+export declare function validateAndExtractGridProps(props: DescriptionListProps): {
+    columns?: Columns;
+    groupMinWidth?: GroupMinWidth;
+};

package/dist/src/DescriptionList/lib/utils.js

@@ -0,0 +1,8 @@
+export function validateAndExtractGridProps(props) {
+    const columns = "columns" in props ? props.columns : undefined;
+    const groupMinWidth = "groupMinWidth" in props ? props.groupMinWidth : undefined;
+    if (columns && groupMinWidth) {
+        throw new Error("Please provide either a `columns` or `groupMinWidth` prop to the DescriptionList, not both.\n\nSee component documentation: https://github.com/nulogy/design-system/blob/master/src/DescriptionList/README.md");
+    }
+    return { columns, groupMinWidth };
+}

package/dist/src/DescriptionList/stories/DescriptionList.column.story.d.ts

@@ -1,17 +1,17 @@
-import React from "react";
-import DescriptionList from "../DescriptionList";
-declare const _default: {
-    title: string;
-    component: typeof DescriptionList;
-};
-export default _default;
-export declare const TwoColumns: () => React.JSX.Element;
-export declare const ThreeColumns: () => React.JSX.Element;
-export declare const ResponsiveColumns: {
-    (): React.JSX.Element;
-    parameters: {
-        chromatic: {
-            viewports: number[];
-        };
-    };
-};
+import React from "react";
+import DescriptionList from "../DescriptionList";
+declare const _default: {
+    title: string;
+    component: typeof DescriptionList;
+};
+export default _default;
+export declare const TwoColumns: () => React.JSX.Element;
+export declare const ThreeColumns: () => React.JSX.Element;
+export declare const ResponsiveColumns: {
+    (): React.JSX.Element;
+    parameters: {
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};

package/dist/src/DescriptionList/stories/DescriptionList.column.story.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { Checkbox } from "../../Checkbox";
+import { Flex } from "../../Flex";
+import { Heading1, Text } from "../../Type";
+import DescriptionList from "../DescriptionList";
+import { DescriptionGroup } from "../DescriptionList.parts";
+import { VerticalDivider } from "../../VerticalDivider";
+import { Resizable } from "../../utils/story/resizable";
+import { legacy } from "../../theme/theme";
+import { Link } from "../../Link";
+import { Icon } from "../../Icon";
+import { OutlinedDt, OutlinedDd } from "./fixtures";
+export default {
+    title: "Components/DescriptionList/Columns",
+    component: DescriptionList,
+};
+const ColumnDemo = ({ resizable = false, columns, title, description, info, }) => {
+    const [outlined, setOutlined] = useState(true);
+    const DescriptionListElement = (React.createElement(DescriptionList, { columns: columns }, [1, 2, 3, 4, 5, 6].map((i) => (React.createElement(DescriptionGroup, { key: i },
+        React.createElement(OutlinedDt, { "$outlined": outlined },
+            "Key ",
+            i),
+        React.createElement(OutlinedDd, { "$outlined": outlined },
+            "Value ",
+            i))))));
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
+        React.createElement(Flex, { flexDirection: "column", gap: "x1" },
+            React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
+                React.createElement(Heading1, { compact: true }, title),
+                React.createElement(VerticalDivider, null),
+                React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
+            description && React.createElement(Text, { fontSize: "sm" }, description),
+            info && (React.createElement(Flex, { alignItems: "center", gap: "half" },
+                React.createElement(Icon, { icon: "info", color: "midGrey" }),
+                typeof info === "string" ? (React.createElement(Text, { fontSize: "sm", color: "darkGrey" }, info)) : (info)))),
+        resizable ? (React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true }, DescriptionListElement)) : (DescriptionListElement)));
+};
+export const TwoColumns = () => React.createElement(ColumnDemo, { title: "Two Columns", columns: 2 });
+export const ThreeColumns = () => React.createElement(ColumnDemo, { title: "Three Columns", columns: 3 });
+export const ResponsiveColumns = () => (React.createElement(ColumnDemo, { resizable: true, title: "Responsive Columns", columns: { small: 1, medium: 3, large: 6 }, description: "Small: 1 column, Medium: 3 columns, Large: 6 columns", info: React.createElement(Text, { fontSize: "sm", color: "darkGrey" },
+        "The breakpoint is based on the container width, not the viewport width. See component",
+        " ",
+        React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/master/src/DescriptionList/README.md" }, "documentation"),
+        ".") }));
+ResponsiveColumns.parameters = {
+    chromatic: {
+        viewports: [
+            parseInt(legacy.breakpoints.small),
+            parseInt(legacy.breakpoints.medium),
+            parseInt(legacy.breakpoints.large),
+        ],
+    },
+};

package/dist/src/DescriptionList/stories/DescriptionList.group-min-width.story.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-export declare const GroupMinWidth: {
-    (): React.JSX.Element;
-    parameters: {
-        chromatic: {
-            viewports: number[];
-        };
-    };
-};
+import React from "react";
+export declare const GroupMinWidth: {
+    (): React.JSX.Element;
+    parameters: {
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};

package/dist/src/DescriptionList/stories/DescriptionList.group-min-width.story.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Flex } from "../../Flex";
+import { legacy } from "../../theme/theme";
+import { Heading1, Text } from "../../Type";
+import { Resizable } from "../../utils/story/resizable";
+import DescriptionList from "../DescriptionList";
+import { SampleContent } from "./fixtures";
+export const GroupMinWidth = () => {
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
+        React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+            React.createElement(Heading1, { compact: true }, "Group Min Width"),
+            React.createElement(Text, { fontSize: "sm", mb: "x4" }, "In this example the groupMinWidth is set to 200px, each group is given a minimum width of 200px with the remaining space distributed evenly between the groups."),
+            React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true },
+                React.createElement(DescriptionList, { groupMinWidth: "200px" },
+                    React.createElement(SampleContent, null))))));
+};
+GroupMinWidth.parameters = {
+    chromatic: {
+        viewports: [
+            parseInt(legacy.breakpoints.extraSmall),
+            parseInt(legacy.breakpoints.small),
+            parseInt(legacy.breakpoints.medium),
+            parseInt(legacy.breakpoints.large),
+        ],
+    },
+};

package/dist/src/DescriptionList/stories/DescriptionList.layout.story.d.ts

@@ -1,17 +1,17 @@
-import React from "react";
-import DescriptionList from "../DescriptionList";
-declare const _default: {
-    title: string;
-    component: typeof DescriptionList;
-};
-export default _default;
-export declare const Inline: () => React.JSX.Element;
-export declare const Stacked: () => React.JSX.Element;
-export declare const Auto: {
-    (): React.JSX.Element;
-    parameters: {
-        chromatic: {
-            viewports: number[];
-        };
-    };
-};
+import React from "react";
+import DescriptionList from "../DescriptionList";
+declare const _default: {
+    title: string;
+    component: typeof DescriptionList;
+};
+export default _default;
+export declare const Inline: () => React.JSX.Element;
+export declare const Stacked: () => React.JSX.Element;
+export declare const Auto: {
+    (): React.JSX.Element;
+    parameters: {
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};

package/dist/src/DescriptionList/stories/DescriptionList.layout.story.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { Flex } from "../../Flex";
+import { Heading1, Text } from "../../Type";
+import DescriptionList from "../DescriptionList";
+import { Code } from "../../utils/story/code";
+import { Resizable } from "../../utils/story/resizable";
+import { legacy } from "../../theme/theme";
+import { Icon } from "../../Icon";
+import { Link } from "../../Link";
+import { SampleContent } from "./fixtures";
+export default {
+    title: "Components/DescriptionList/Layout",
+    component: DescriptionList,
+};
+export const Inline = () => {
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Heading1, { compact: true }, "Inline Layout"),
+        React.createElement(DescriptionList, { layout: "inline" },
+            React.createElement(SampleContent, null))));
+};
+export const Stacked = () => {
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Heading1, { compact: true }, "Stacked Layout"),
+        React.createElement(DescriptionList, { layout: "stacked" },
+            React.createElement(SampleContent, null))));
+};
+export const Auto = () => {
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Flex, { flexDirection: "column", gap: "x1" },
+            React.createElement(Heading1, { compact: true }, "Auto Layout"),
+            React.createElement(Text, { fontSize: "sm" },
+                "Automatically switches between ",
+                React.createElement(Code, null, "stacked"),
+                " and ",
+                React.createElement(Code, null, "inline"),
+                " layouts based on the specified container width. Default breakpoint is set to ",
+                React.createElement(Code, null, "640px"),
+                "."),
+            React.createElement(Flex, { alignItems: "center", gap: "half", mb: "x2" },
+                React.createElement(Icon, { icon: "info", color: "midGrey" }),
+                React.createElement(Text, { fontSize: "sm", color: "darkGrey" },
+                    "The breakpoint is based on the container width, not the viewport width. See component",
+                    " ",
+                    React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/master/src/DescriptionList/README.md" }, "documentation"),
+                    "."))),
+        React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true },
+            React.createElement(DescriptionList, { layout: "auto", autoLayoutBreakpoint: "640px" },
+                React.createElement(SampleContent, null)))));
+};
+Auto.parameters = {
+    chromatic: {
+        viewports: [
+            parseInt(legacy.breakpoints.extraSmall),
+            parseInt(legacy.breakpoints.small),
+            parseInt(legacy.breakpoints.medium),
+        ],
+    },
+};

package/dist/src/DescriptionList/stories/DescriptionList.playground.story.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-export declare const Playground: {
-    (): React.JSX.Element;
-    parameters: {
-        chromatic: {
-            disable: boolean;
-        };
-    };
-};
+import React from "react";
+export declare const Playground: {
+    (): React.JSX.Element;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+};