kurtosis-ui-components 0.0.1 → 0.85.49

package/build/KurtosisBreadcrumbs.js

@@ -0,0 +1,41 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Flex, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Text, } from "@chakra-ui/react";
+import { BsCaretDownFill } from "react-icons/bs";
+import { Link, useMatches } from "react-router-dom";
+import { BREADCRUMBS_HEIGHT } from "./theme/constants";
+import { isDefined } from "./utils";
+const handlerRegistry = {};
+export const registerBreadcrumbHandler = (type, render) => {
+    handlerRegistry[type] = render;
+};
+const getBreadcumbHandlerRenderer = (type) => {
+    return handlerRegistry[type] || null;
+};
+export const KurtosisBreadcrumbs = () => {
+    const matches = useMatches();
+    const handlerTypes = new Set(matches.map((match) => { var _a; return (_a = match.handle) === null || _a === void 0 ? void 0 : _a.type; }).filter(isDefined));
+    if (handlerTypes.size === 0) {
+        throw Error(`Currently routes with no breadcrumb handles are not supported`);
+    }
+    if (handlerTypes.size > 1) {
+        throw Error(`Routes with multiple breadcrumb handles are not supported.`);
+    }
+    const handleType = [...handlerTypes][0];
+    const Renderer = getBreadcumbHandlerRenderer(handleType);
+    if (isDefined(Renderer)) {
+        return _jsx(Renderer, { matches: matches });
+    }
+    throw new Error(`Unable to handle breadcrumbs of type ${handleType}`);
+};
+export const KurtosisBreadcrumbsImpl = ({ matchCrumbs, extraControls }) => {
+    return (_jsxs(Flex, { flex: "none", h: BREADCRUMBS_HEIGHT, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Flex, { children: [_jsxs(Breadcrumb, { variant: "topNavigation", separator: _jsx(Text, { as: "span", fontSize: "lg", children: "/" }), children: [_jsx(BreadcrumbItem, { children: _jsx(Text, { fontSize: "xs", fontWeight: "semibold", p: "0px 8px", children: "Kurtosis" }) }), matchCrumbs.map((crumb, i, arr) => (_jsx(BreadcrumbItem, { isCurrentPage: i === arr.length - 1, children: _createElement(KurtosisBreadcrumbItem, { ...crumb, key: i, isLastItem: i === arr.length - 1 }) }, i)))] }), "\u00A0"] }), _jsx(Flex, { children: extraControls })] }));
+};
+const KurtosisBreadcrumbItem = ({ name, destination, alternatives, isLastItem }) => {
+    const baseLink = isLastItem ? (_jsx(Text, { fontSize: "xs", fontWeight: "semibold", p: "2px 8px", borderRadius: "6px", bg: "gray.650", children: name })) : (_jsx(BreadcrumbLink, { as: Link, to: destination, children: _jsx(Button, { variant: "breadcrumb", size: "xs", children: name }) }));
+    if (isDefined(alternatives) && alternatives.length > 0) {
+        // Render with menu
+        return (_jsxs(ButtonGroup, { isAttached: true, children: [baseLink, _jsxs(Menu, { children: [_jsx(MenuButton, { as: IconButton, variant: "breadcrumb", "aria-label": "Other options", icon: _jsx(Icon, { as: BsCaretDownFill }), size: "xs" }), _jsx(MenuList, { children: alternatives.map(({ name, destination, icon }) => (_jsx(MenuItem, { as: Link, to: destination, icon: icon, children: name }, destination))) })] })] }));
+    }
+    return baseLink;
+};

package/build/KurtosisMarkdown.d.ts

@@ -0,0 +1,5 @@
+type KurtosisMarkdownProps = {
+    children?: string;
+};
+export declare const KurtosisMarkdown: ({ children }: KurtosisMarkdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/KurtosisMarkdown.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Code, Divider, Heading, Image, Link, Table, Tbody, Td, Text, Th, Thead, Tr } from "@chakra-ui/react";
+import Markdown from "react-markdown";
+const heading = (level) => ({ children }) => {
+    const sizes = ["xl", "lg", "md", "sm", "xs", "xs"];
+    return (_jsx(Heading, { my: 4, as: `h${level}`, size: sizes[`${level - 1}`], children: children }));
+};
+const componentStrategy = {
+    h1: heading(1),
+    h2: heading(2),
+    h3: heading(3),
+    h4: heading(4),
+    h5: heading(5),
+    h6: heading(6),
+    p: (props) => {
+        const { children } = props;
+        return _jsx(Text, { mb: 2, children: children });
+    },
+    em: (props) => {
+        const { children } = props;
+        return _jsx(Text, { as: "em", children: children });
+    },
+    blockquote: (props) => {
+        const { children } = props;
+        return (_jsx(Code, { as: "blockquote", p: 2, children: children }));
+    },
+    code: ({ children }) => {
+        return _jsx(Code, { children: children });
+    },
+    del: (props) => {
+        const { children } = props;
+        return _jsx(Text, { as: "del", children: children });
+    },
+    hr: (props) => {
+        return _jsx(Divider, {});
+    },
+    a: Link,
+    img: (props) => _jsx(Image, { src: props.src }),
+    text: (props) => {
+        const { children } = props;
+        return _jsx(Text, { as: "span", children: children });
+    },
+    pre: (props) => {
+        const { children } = props;
+        return (_jsx(Text, { margin: 1, as: "pre", children: children }));
+    },
+    table: Table,
+    thead: Thead,
+    tbody: Tbody,
+    tr: (props) => _jsx(Tr, { children: props.children }),
+    td: (props) => _jsx(Td, { children: props.children }),
+    th: (props) => _jsx(Th, { children: props.children }),
+};
+export const KurtosisMarkdown = ({ children }) => {
+    return (_jsx(Markdown, { components: componentStrategy, skipHtml: true, children: children }));
+};

package/build/KurtosisThemeProvider.d.ts

@@ -0,0 +1,3 @@
+import type { ChakraProviderProps } from "@chakra-ui/react/dist/chakra-provider";
+import { PropsWithChildren } from "react";
+export declare const KurtosisThemeProvider: ({ children, ...chakraProps }: PropsWithChildren<Omit<ChakraProviderProps, "theme">>) => import("react/jsx-runtime").JSX.Element;

package/build/KurtosisThemeProvider.js

@@ -0,0 +1,359 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChakraProvider, defineStyle, extendTheme, Tooltip, useColorMode, } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
+import { useEffect } from "react";
+import Fonts from "./theme/Fonts";
+import { formsTheme } from "./theme/formsTheme";
+import { tabsTheme } from "./theme/tabsTheme";
+import { tagTheme } from "./theme/tagsTheme";
+// https://github.com/chakra-ui/chakra-ui/issues/3347
+Tooltip.defaultProps = {
+    hasArrow: true,
+    openDelay: 500,
+    size: "sm",
+};
+const config = {
+    initialColorMode: "dark",
+    useSystemColorMode: false,
+    disableTransitionOnChange: false,
+};
+const theme = extendTheme({
+    config,
+    fonts: {
+        heading: `'Inter', sans-serif`,
+        body: `'Inter', sans-serif`,
+    },
+    colors: {
+        kurtosisGreen: {
+            50: "#00371E",
+            100: "#005e11",
+            200: "#008c19",
+            300: "#00bb22",
+            400: "#00C223",
+            500: "#33ee55",
+            600: "#66f27f",
+            700: "#99f7aa",
+        },
+        darkBlue: {
+            200: "#516A77",
+            400: "#516A77",
+        },
+        gray: {
+            100: "#E3E3E3",
+            150: "#A1A3A5",
+            200: "#878787",
+            250: "#7A7A7A",
+            300: "#606770",
+            400: "#5B5B5B",
+            500: "#393B3E",
+            600: "#2E2E2E",
+            650: "#292929",
+            700: "#1E1E1E",
+            800: "#1D1D1D",
+            850: "#1B1B1D",
+            900: "#111111", // ui background
+        },
+    },
+    fontSizes: {
+        xs: "12px",
+        sm: "14px",
+        md: "16px",
+        lg: "18px",
+        xl: "20px",
+        "2xl": "22px",
+    },
+    styles: {
+        global: (props) => ({
+            body: {
+                bg: mode(props.theme.semanticTokens.colors["chakra-body-bg"]._light, "gray.900")(props),
+            },
+            "nav.primaryNav": {
+                bg: mode(props.theme.semanticTokens.colors["chakra-body-bg"]._light, "black")(props),
+                zIndex: "1",
+            },
+            main: {
+                color: "gray.100",
+                fontSize: "sm",
+            },
+        }),
+    },
+    components: {
+        Badge: {
+            baseStyle: {
+                textTransform: "none",
+                color: "gray.100",
+            },
+        },
+        Button: {
+            defaultProps: {
+                variant: "outline",
+            },
+            variants: {
+                outline: (props) => ({
+                    _hover: { borderColor: `${props.colorScheme}.400`, bg: `gray.650` },
+                    _active: { bg: `gray.700` },
+                    color: `${props.colorScheme}.400`,
+                    borderColor: "gray.300",
+                }),
+                solidOutline: (props) => {
+                    const outline = theme.components.Button.variants.outline(props);
+                    return {
+                        ...outline,
+                        _hover: { bg: `${props.colorScheme}.400`, color: "gray.900" },
+                        _active: { bg: `${props.colorScheme}.400`, color: "gray.900" },
+                        color: `${props.colorScheme}.400`,
+                        borderColor: `${props.colorScheme}.400`,
+                    };
+                },
+                kurtosisGroupOutline: (props) => {
+                    const outline = theme.components.Button.variants.outline(props);
+                    return {
+                        ...outline,
+                        _hover: { ...outline._hover, bg: "gray.600" },
+                        color: `${props.colorScheme}.400`,
+                        borderColor: "gray.300",
+                    };
+                },
+                kurtosisDisabled: (props) => {
+                    const outline = theme.components.Button.variants.outline(props);
+                    return {
+                        ...outline,
+                        _hover: { ...outline._hover, bg: "gray.700", borderColor: "gray.300", cursor: "unset" },
+                        _active: { ...outline._active, bg: "gray.700", borderColor: "gray.300", cursor: "unset" },
+                        bg: "gray.700",
+                        color: `${props.colorScheme}.100`,
+                        borderColor: "gray.300",
+                    };
+                },
+                solid: defineStyle((props) => ({
+                    _hover: { bg: "gray.600" },
+                    _active: { bg: "gray.600" },
+                    color: `${props.colorScheme}.400`,
+                    bg: "gray.700",
+                })),
+                ghost: defineStyle((props) => ({
+                    _hover: { bg: "gray.650" },
+                    color: props.colorScheme === "gray" ? undefined : `${props.colorScheme}.400`,
+                })),
+                sortableHeader: (props) => {
+                    const ghost = theme.components.Button.variants.ghost(props);
+                    return {
+                        ...ghost,
+                        color: "gray.100",
+                        textTransform: "uppercase",
+                    };
+                },
+                fileTree: (props) => {
+                    const ghost = theme.components.Button.variants.ghost(props);
+                    return {
+                        ...ghost,
+                        width: "100%",
+                        fontWeight: "medium",
+                        justifyContent: "flex-start",
+                    };
+                },
+                breadcrumb: (props) => {
+                    const ghost = theme.components.Button.variants.ghost(props);
+                    return {
+                        ...ghost,
+                        color: "gray.100",
+                    };
+                },
+                nav: {
+                    _active: {
+                        bg: "gray.600",
+                        color: "kurtosisGreen.400",
+                    },
+                    _hover: {
+                        bg: "gray.600",
+                        color: "white",
+                    },
+                    color: "gray.200",
+                },
+            },
+        },
+        Breadcrumb: {
+            variants: {
+                topNavigation: {
+                    link: {
+                        "&[aria-current=page]": {
+                            color: "gray.250",
+                        },
+                        fontSize: "sm",
+                        lineHeight: "24px",
+                    },
+                    separator: {
+                        color: "gray.250",
+                    },
+                },
+            },
+        },
+        Card: {
+            variants: {
+                valueCard: {
+                    container: {
+                        bg: "gray.850",
+                        borderRadius: "8px",
+                        padding: "16px",
+                        gap: "16px",
+                    },
+                    header: {
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        padding: "0px",
+                    },
+                    body: {
+                        padding: "0px",
+                    },
+                },
+                titledCard: {
+                    container: {
+                        bgColor: "none",
+                        borderColor: "gray.500",
+                        borderStyle: "solid",
+                        borderWidth: "1px",
+                        borderRadius: "6px",
+                    },
+                    header: {
+                        bg: "gray.850",
+                        padding: "12px",
+                    },
+                    body: {
+                        padding: "6px 12px",
+                        height: "100%",
+                        width: "100%",
+                    },
+                },
+            },
+        },
+        Checkbox: {
+            defaultProps: {
+                size: "md",
+            },
+            baseStyle: defineStyle(({ colorScheme }) => ({
+                control: {
+                    borderColor: `gray.400`,
+                    _checked: {
+                        bg: `${colorScheme}.500`,
+                        borderColor: `${colorScheme}.500`,
+                        color: `white`,
+                        _hover: {
+                            bg: `${colorScheme}.500`,
+                            borderColor: `${colorScheme}.500`,
+                        },
+                    },
+                    _indeterminate: {
+                        bg: `${colorScheme}.500`,
+                        borderColor: `${colorScheme}.500`,
+                        color: `white`,
+                    },
+                },
+            })),
+        },
+        Form: formsTheme,
+        Menu: {
+            baseStyle: {
+                list: {
+                    minW: "unset",
+                },
+            },
+        },
+        Popover: {
+            baseStyle: {
+                content: {
+                    bg: "gray.500",
+                    p: "8px",
+                },
+            },
+        },
+        Switch: {
+            defaultProps: {
+                colorScheme: "green",
+            },
+            baseStyle: defineStyle((props) => ({
+                track: {
+                    _checked: {
+                        bg: `${props.colorScheme}.500`,
+                    },
+                },
+            })),
+        },
+        Table: {
+            variants: {
+                simple: {
+                    tr: {
+                        _notLast: {
+                            borderBottom: "1px solid",
+                            borderColor: "whiteAlpha.300",
+                        },
+                    },
+                    th: {
+                        color: "gray.100",
+                        backgroundColor: "gray.850",
+                        textTransform: "uppercase",
+                        borderBottom: "1px solid",
+                        borderColor: "whiteAlpha.300",
+                    },
+                    td: {
+                        borderBottom: "none",
+                    },
+                },
+            },
+        },
+        Tabs: tabsTheme,
+        Tag: tagTheme,
+        Tooltip: {
+            sizes: {
+                xs: defineStyle({
+                    fontSize: "12px",
+                    py: "2px",
+                    px: "6px",
+                    maxW: "200px",
+                }),
+                sm: defineStyle({
+                    fontSize: "sm",
+                    py: "1",
+                    px: "2",
+                    maxW: "200px",
+                }),
+                md: defineStyle({
+                    fontSize: "md",
+                    py: "2",
+                    px: "3",
+                    maxW: "300px",
+                }),
+                lg: defineStyle({
+                    fontSize: "lg",
+                    py: "2",
+                    px: "4",
+                    maxW: "350px",
+                }),
+            },
+            baseStyle: {
+                bg: "gray.500",
+                //https://github.com/chakra-ui/chakra-ui/issues/4695
+                ["--popper-arrow-bg"]: "colors.gray.500",
+                color: "gray.100",
+            },
+            defaultProps: {
+                size: "xs",
+            },
+        },
+    },
+});
+export const KurtosisThemeProvider = ({ children, ...chakraProps }) => {
+    return (_jsxs(ChakraProvider, { theme: theme, toastOptions: { defaultOptions: { position: "top" } }, ...chakraProps, children: [_jsx(ColorModeFixer, {}), _jsx(Fonts, {}), children] }));
+};
+// This component handles legacy local storage settings on browsers that used the old
+// emui, where the color mode may be set to 'light'.
+const ColorModeFixer = () => {
+    const { colorMode, toggleColorMode } = useColorMode();
+    useEffect(() => {
+        // Currently only Dark Mode is supported.
+        if (colorMode === "light") {
+            toggleColorMode();
+        }
+    }, [colorMode, toggleColorMode]);
+    return null;
+};

package/build/Navigation.d.ts

@@ -0,0 +1,10 @@
+import { IconButtonProps } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+export type NavigationProps = {};
+export declare const Navigation: ({ children }: PropsWithChildren & NavigationProps) => import("react/jsx-runtime").JSX.Element;
+type NavButtonProps = Omit<IconButtonProps, "aria-label"> & {
+    label: string;
+    Icon: React.ReactElement;
+};
+export declare const NavButton: ({ Icon, label, ...iconButtonProps }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/Navigation.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, IconButton, Image, Tooltip } from "@chakra-ui/react";
+import { useHref } from "react-router-dom";
+export const Navigation = ({ children }) => {
+    const logoHref = useHref("/logo.png");
+    return (_jsxs(Flex, { as: "nav", className: "primaryNav", flexDirection: "column", alignItems: "center", gap: "36px", position: "fixed", top: "0", h: "100vh", p: "20px 16px", children: [_jsx(Flex, { width: "40px", height: "40px", alignItems: "center", children: _jsx(Image, { src: logoHref }) }), _jsx(Flex, { flexDirection: "column", gap: "16px", children: children })] }));
+};
+export const NavButton = ({ Icon, label, ...iconButtonProps }) => {
+    return (_jsx(Tooltip, { label: label, hasArrow: true, placement: "right", openDelay: 500, children: _jsx(IconButton, { ...iconButtonProps, colorScheme: "kurtosis", "aria-label": label, variant: "nav", size: "lg", icon: Icon }) }));
+};

package/build/PackageSourceButton.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+type EnclaveSourceProps = PropsWithChildren<ButtonProps & {
+    source: "loading" | string | null;
+}>;
+export declare const PackageSourceButton: ({ source, children, ...buttonProps }: EnclaveSourceProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/PackageSourceButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, ButtonGroup, Icon, Link, Spinner, Tag, Tooltip } from "@chakra-ui/react";
+import { IoLogoGithub } from "react-icons/io";
+import { isDefined, parsePackageUrl, wrapResult } from "./utils";
+export const PackageSourceButton = ({ source, children, ...buttonProps }) => {
+    if (!isDefined(source)) {
+        return _jsx(Tag, { children: "Unknown" });
+    }
+    if (source === "loading") {
+        return _jsx(Spinner, { size: "xs" });
+    }
+    let button = (_jsx(Link, { href: `https://${source}`, target: "_blank", rel: "noopener noreferrer", w: buttonProps.w || buttonProps.width, children: _jsx(Button, { variant: "ghost", size: "xs", ...buttonProps, children: children || source }) }));
+    if (source.startsWith("github.com/")) {
+        const repositoryResult = wrapResult(() => parsePackageUrl(source));
+        if (repositoryResult.isOk) {
+            const repository = repositoryResult.value;
+            const url = `https://${repository.baseUrl}/${repository.owner}/${repository.name}${isDefined(repository.rootPath) && repository.rootPath !== "/" ? "/tree/main/" + repository.rootPath : ""}`;
+            button = (_jsx(Link, { href: url, target: "_blank", rel: "noopener noreferrer", w: buttonProps.w || buttonProps.width, children: _jsx(Button, { leftIcon: _jsx(Icon, { as: IoLogoGithub, color: "gray.400" }), variant: "ghost", size: "xs", ...buttonProps, children: children || source.replace("github.com/", "") }) }));
+        }
+        else {
+            button = (_jsx(Tooltip, { shouldWrapChildren: true, label: repositoryResult.error, children: _jsx("a", { href: `https://${source}`, target: "_blank", rel: "noopener noreferrer", children: _jsx(Button, { variant: "ghost", size: "xs", ...buttonProps, colorScheme: "red", children: children || source }) }) }));
+        }
+    }
+    return _jsx(ButtonGroup, { children: button });
+};

package/build/PageTitle.d.ts

@@ -0,0 +1,5 @@
+import { HeadingProps } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+type PageTitleProps = PropsWithChildren<HeadingProps>;
+export declare const PageTitle: ({ children, ...headingProps }: PageTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/PageTitle.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Heading } from "@chakra-ui/react";
+export const PageTitle = ({ children, ...headingProps }) => {
+    return (_jsx(Heading, { fontSize: "lg", fontWeight: "medium", pl: "8px", ...headingProps, children: children }));
+};

package/build/PasteButton.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps, IconButtonProps } from "@chakra-ui/react";
+type PasteButtonProps<IsIconButton extends boolean> = (IsIconButton extends true ? IconButtonProps : ButtonProps) & {
+    onValuePasted: (value: string) => void;
+    text?: IsIconButton extends true ? string : never;
+    isIconButton?: IsIconButton;
+};
+export declare const PasteButton: <IsIconButton extends boolean>({ onValuePasted, text, isIconButton, ...buttonProps }: PasteButtonProps<IsIconButton>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/PasteButton.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, IconButton } from "@chakra-ui/react";
+import { useState } from "react";
+import { FiClipboard } from "react-icons/fi";
+import { isDefined } from "./utils";
+export const PasteButton = ({ onValuePasted, text, isIconButton, ...buttonProps }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const handlePasteClick = async () => {
+        setIsLoading(true);
+        const value = await navigator.clipboard.readText();
+        setIsLoading(false);
+        if (isDefined(value)) {
+            onValuePasted(value);
+        }
+    };
+    // Firefox does not support programmatic clipboard.readText
+    //https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText
+    if (!isDefined(onValuePasted) || !isDefined(navigator.clipboard.readText)) {
+        return null;
+    }
+    if (isIconButton) {
+        return (_jsx(IconButton, { icon: _jsx(FiClipboard, {}), size: "xs", variant: "ghost", colorScheme: "darkBlue", onClick: handlePasteClick, isLoading: isLoading, ...buttonProps, children: text || "Paste" }));
+    }
+    else {
+        return (_jsx(Button, { leftIcon: _jsx(FiClipboard, {}), size: "xs", colorScheme: "darkBlue", onClick: handlePasteClick, isLoading: isLoading, ...buttonProps, children: text || "Paste" }));
+    }
+};

package/build/TitledBox.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+type TitledBoxProps = PropsWithChildren<{
+    title: string;
+}>;
+export declare const TitledBox: ({ title, children }: TitledBoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/TitledBox.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from "@chakra-ui/react";
+export const TitledBox = ({ title, children }) => {
+    return (_jsxs(Flex, { flexDirection: "column", alignItems: "center", gap: "16px", children: [_jsx(Flex, { justifyContent: "flex-start", width: "100%", children: _jsx(Text, { fontSize: "lg", fontWeight: "medium", children: title }) }), children] }));
+};

package/build/TitledCard.d.ts

@@ -0,0 +1,10 @@
+import { CardProps } from "@chakra-ui/react";
+import { PropsWithChildren, ReactElement } from "react";
+type TitledCardProps = CardProps & PropsWithChildren<{
+    title: string;
+    fillContainer?: boolean;
+    controls?: ReactElement;
+    rightControls?: ReactElement;
+}>;
+export declare const TitledCard: ({ title, fillContainer, controls, rightControls, children, ...cardProps }: TitledCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/TitledCard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader, Flex, Text } from "@chakra-ui/react";
+export const TitledCard = ({ title, fillContainer, controls, rightControls, children, ...cardProps }) => {
+    return (_jsxs(Card, { variant: "titledCard", overflow: fillContainer ? "clip" : undefined, ...cardProps, children: [_jsxs(CardHeader, { display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", gap: "16px", borderBottom: "1px solid", borderBottomColor: "gray.500", children: [_jsxs(Flex, { justifyContent: "flex-start", gap: "16px", alignItems: "center", children: [_jsx(Text, { as: "span", fontSize: "xs", fontWeight: "semibold", wordBreak: "break-all", children: title }), controls] }), _jsx(Flex, { children: rightControls })] }), _jsx(CardBody, { overflow: fillContainer ? "auto" : undefined, children: children })] }));
+};

package/build/Toasts.d.ts

@@ -0,0 +1,5 @@
+type ToastProps = {
+    message: string;
+};
+export declare const SuccessToast: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", ToastProps>;
+export {};

package/build/Toasts.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon } from "@chakra-ui/icons";
+import { Flex, forwardRef, Icon, Text } from "@chakra-ui/react";
+export const SuccessToast = forwardRef(({ message }, ref) => {
+    return (_jsxs(Flex, { ref: ref, bg: "rgba(0, 194, 35, 0.24)", p: "6px 16px", borderRadius: "6px", gap: "12px", children: [_jsx(Icon, { height: "24px", width: "24px", as: CheckCircleIcon, color: "kurtosisGreen.400" }), _jsx(Text, { fontWeight: "bold", fontSize: "lg", children: message })] }));
+});

package/build/ValueCard.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+type ValueCardProps = {
+    title: string;
+    value: string | ReactElement;
+    copyEnabled?: boolean;
+    copyValue?: string;
+};
+export declare const ValueCard: ({ title, value, copyEnabled, copyValue }: ValueCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/ValueCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader, Text } from "@chakra-ui/react";
+import { CopyButton } from "./CopyButton";
+import { isDefined } from "./utils";
+export const ValueCard = ({ title, value, copyEnabled, copyValue }) => {
+    return (_jsxs(Card, { variant: "valueCard", height: "100%", children: [_jsxs(CardHeader, { children: [_jsx(Text, { fontSize: "sm", fontWeight: "extrabold", textTransform: "uppercase", color: "gray.400", children: title }), copyEnabled && (_jsx(CopyButton, { isIconButton: true, "aria-label": "Copy this value", valueToCopy: isDefined(copyValue) ? copyValue : typeof value === "string" ? value : null, contentName: title, color: "gray.400", colorScheme: "gray" }))] }), _jsx(CardBody, { children: _jsx(Text, { as: "div", fontSize: "xl", children: value }) })] }));
+};

package/build/catalog/KurtosisPackageCard.d.ts

@@ -0,0 +1,7 @@
+import { KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
+type KurtosisPackageCardProps = {
+    kurtosisPackage: KurtosisPackage;
+    onRunClick: () => void;
+};
+export declare const KurtosisPackageCard: ({ kurtosisPackage, onRunClick }: KurtosisPackageCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};