kurtosis-ui-components 0.85.53 → 0.85.55

package/build/AppLayout.js

@@ -12,7 +12,7 @@ export const AppPageLayout = ({ preventPageScroll, children }) => {
     const { hasNavbar } = useContext(AppLayoutContext);
     const numberOfChildren = Array.isArray(children) ? children.length : 1;
     if (numberOfChildren === 1) {
-        return (_jsx(Box, { w: "100%", h: preventPageScroll ? `100vh` : "100%", children: _jsxs(Flex, { flexDirection: "column", flex: "1", w: "100%", h: "100%", maxWidth: MAIN_APP_MAX_WIDTH, pl: hasNavbar ? MAIN_APP_LEFT_PADDING_WITH_NAV : MAIN_APP_LEFT_PADDING_WITHOUT_NAV, pr: MAIN_APP_RIGHT_PADDING, children: [_jsx(KurtosisBreadcrumbs, {}), _jsx(Box, { w: "100%", h: "100%", minH: preventPageScroll ? "0" : undefined, pt: MAIN_APP_TOP_PADDING, pb: MAIN_APP_BOTTOM_PADDING, flexDirection: "column", flex: "1", children: children })] }) }));
+        return (_jsx(Box, { w: "100%", h: preventPageScroll ? `100vh` : "100%", flex: "1", children: _jsxs(Flex, { position: "absolute", top: "0", bottom: "0", flexDirection: "column", w: "100%", h: "100%", minH: "100%", maxWidth: MAIN_APP_MAX_WIDTH, pl: hasNavbar ? MAIN_APP_LEFT_PADDING_WITH_NAV : MAIN_APP_LEFT_PADDING_WITHOUT_NAV, pr: MAIN_APP_RIGHT_PADDING, children: [_jsx(KurtosisBreadcrumbs, {}), _jsx(Flex, { w: "100%", h: "100%", minH: preventPageScroll ? "0" : undefined, pt: MAIN_APP_TOP_PADDING, pb: MAIN_APP_BOTTOM_PADDING, flexDirection: "column", flex: "1", children: children })] }) }));
     }
     // TS cannot infer that children is an array if numberOfChildren === 2
     if (numberOfChildren === 2 && Array.isArray(children)) {

package/build/KurtosisThemeProvider.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChakraProvider, defineStyle, extendTheme, Tooltip, useColorMode, } from "@chakra-ui/react";
+import { cssVar } from "@chakra-ui/styled-system";
 import { mode } from "@chakra-ui/theme-tools";
 import { useEffect } from "react";
 import Fonts from "./theme/Fonts";
@@ -25,8 +26,7 @@ const theme = extendTheme({
     },
     colors: {
         kurtosisGreen: {
-            50: "#00371E",
-            100: "#005e11",
+            100: "#18371E",
             200: "#008c19",
             300: "#00bb22",
             400: "#00C223",
@@ -95,16 +95,13 @@ const theme = extendTheme({
                     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`,
-                    };
-                },
+                activeFilterControl: (props) => ({
+                    _hover: { borderColor: `${props.colorScheme}.200` },
+                    borderColor: `${props.colorScheme}.400`,
+                    borderWidth: "1px",
+                    bg: `${props.colorScheme}.100`,
+                    color: `${props.colorScheme}.400`,
+                }),
                 kurtosisGroupOutline: (props) => {
                     const outline = theme.components.Button.variants.outline(props);
                     return {
@@ -126,11 +123,18 @@ const theme = extendTheme({
                     };
                 },
                 solid: defineStyle((props) => ({
-                    _hover: { bg: "gray.600" },
-                    _active: { bg: "gray.600" },
-                    color: `${props.colorScheme}.400`,
-                    bg: "gray.700",
+                    color: `white`,
                 })),
+                savedSolid: (props) => {
+                    const solid = theme.components.Button.variants.solid(props);
+                    return {
+                        ...solid,
+                        _hover: { bg: "gray.600" },
+                        _active: { bg: "gray.600" },
+                        bg: "gray.700",
+                        color: `${props.colorScheme}.400`,
+                    };
+                },
                 ghost: defineStyle((props) => ({
                     _hover: { bg: "gray.650" },
                     color: props.colorScheme === "gray" ? undefined : `${props.colorScheme}.400`,
@@ -189,10 +193,17 @@ const theme = extendTheme({
             },
         },
         Card: {
+            baseStyle: {
+                container: { [cssVar("card-bg").variable]: "colors.gray.850" },
+            },
             variants: {
+                elevated: {
+                    container: {
+                        _dark: { [cssVar("card-bg").variable]: "colors.gray.850" },
+                    },
+                },
                 valueCard: {
                     container: {
-                        bg: "gray.850",
                         borderRadius: "8px",
                         padding: "16px",
                         gap: "16px",
@@ -214,6 +225,7 @@ const theme = extendTheme({
                         borderStyle: "solid",
                         borderWidth: "1px",
                         borderRadius: "6px",
+                        overflow: "hidden",
                     },
                     header: {
                         bg: "gray.850",
@@ -256,7 +268,13 @@ const theme = extendTheme({
             baseStyle: {
                 list: {
                     minW: "unset",
+                    padding: "4px",
+                    boxShadow: "0px 11.25px 30px 0px rgba(0, 0, 0, 0.40), 0px 3.75px 7.5px 0px rgba(0, 0, 0, 0.20), 0px 0px 0px 0.75px rgba(0, 0, 0, 0.10)",
+                },
+                item: {
+                    borderRadius: "6px",
                 },
+                icon: { color: "gray.400", "font-size": "18px !important" },
             },
         },
         Popover: {

package/build/PackageSourceButton.js

@@ -15,7 +15,7 @@ export const PackageSourceButton = ({ source, children, ...buttonProps }) => {
         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/", "") }) }));
+            button = (_jsx(Link, { href: url, target: "_blank", rel: "noopener noreferrer", w: buttonProps.w || buttonProps.width, children: _jsx(Button, { leftIcon: _jsx(Icon, { as: IoLogoGithub }), 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 }) }) }));

package/build/catalog/KurtosisPackageCard.js

@@ -1,18 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Flex, Icon, Image, Text } from "@chakra-ui/react";
+import { Box, Flex, Icon, Text, Tooltip } from "@chakra-ui/react";
 import { IoPlay, IoStar } from "react-icons/io5";
-import { Link, useHref } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { numberSummary } from "../utils";
 import { readablePackageName } from "./utils";
+import { PackageLogo } from "./widgets/PackageLogo";
 import { RunKurtosisPackageButton } from "./widgets/RunKurtosisPackageButton";
 import { SaveKurtosisPackageButton } from "./widgets/SaveKurtosisPackageButton";
 export const KurtosisPackageCard = ({ kurtosisPackage, onRunClick }) => {
     var _a;
-    const logoHref = useHref("/logo.png");
-    return (_jsx(Link, { to: `/catalog/${encodeURIComponent(kurtosisPackage.name)}`, children: _jsxs(Flex, { h: "168px", p: "0 24px", bg: "gray.900", borderColor: "whiteAlpha.300", borderWidth: "1px", borderStyle: "solid", borderRadius: "6px", flexDirection: "column", gap: "16px", justifyContent: "center", alignItems: "center", _hover: { bg: "gray.850", cursor: "pointer" }, children: [_jsxs(Flex, { h: "80px", gap: "16px", width: "100%", children: [_jsx(Image, { h: "80px", w: "80px", bg: kurtosisPackage.iconUrl !== "" ? "white" : "black", src: kurtosisPackage.iconUrl || logoHref, fallbackSrc: logoHref, borderRadius: "6px" }), _jsxs(Flex, { flexDirection: "column", flex: "1", justifyContent: "space-between", children: [_jsx(Text, { noOfLines: 2, fontSize: "lg", children: readablePackageName(kurtosisPackage.name) }), _jsx(Box, { flex: "1", sx: {
-                                        containerType: "size",
-                                        containerName: "details-container",
-                                        "@container details-container (min-height: 30px)": {
-                                            "> div": { flexDirection: "column", justifyContent: "flex-end", height: "100%" },
-                                        },
-                                    }, children: _jsxs(Flex, { justifyContent: "space-between", fontSize: "xs", gap: "8px", children: [_jsx(Text, { as: "span", textTransform: "capitalize", children: ((_a = kurtosisPackage.repositoryMetadata) === null || _a === void 0 ? void 0 : _a.owner.replaceAll("-", " ")) || "Unknown owner" }), _jsxs(Flex, { gap: "16px", children: [_jsxs(Flex, { gap: "4px", alignItems: "center", children: [_jsx(Icon, { color: "gray.  500", as: IoStar }), _jsx(Text, { as: "span", children: kurtosisPackage.stars.toString() })] }), _jsxs(Flex, { gap: "4px", alignItems: "center", children: [_jsx(Icon, { color: "gray.  500", as: IoPlay }), _jsx(Text, { as: "span", children: kurtosisPackage.runCount.toString() })] })] })] }) })] })] }), _jsxs(Flex, { gap: "16px", width: "100%", children: [_jsx(SaveKurtosisPackageButton, { kurtosisPackage: kurtosisPackage, flex: "1" }), _jsx(RunKurtosisPackageButton, { kurtosisPackage: kurtosisPackage, onClick: onRunClick, flex: "1" })] })] }) }));
+    return (_jsx(Link, { to: `/catalog/${encodeURIComponent(kurtosisPackage.name)}`, children: _jsxs(Flex, { position: "relative", h: "260px", w: "204px", p: "24px", bg: "gray.900", borderColor: "whiteAlpha.300", borderWidth: "1px", borderStyle: "solid", borderRadius: "6px", flexDirection: "column", gap: "16px", justifyContent: "space-between", alignItems: "center", _hover: { bg: "gray.850", cursor: "pointer" }, children: [_jsx(Box, { position: "absolute", top: "8px", right: "8px", children: _jsx(SaveKurtosisPackageButton, { isIconButton: true, "aria-label": "Toggle button save", kurtosisPackage: kurtosisPackage, flex: "1", variant: "ghost" }) }), _jsx(PackageLogo, { kurtosisPackage: kurtosisPackage, h: "80px", w: "80px" }), _jsx(Flex, { h: "80px", gap: "8px", width: "100%", children: _jsxs(Flex, { flexDirection: "column", flex: "1", justifyContent: "space-between", children: [_jsx(Text, { noOfLines: 1, fontSize: "md", fontWeight: "bold", children: readablePackageName(kurtosisPackage.name) }), _jsx(Text, { as: "span", textTransform: "capitalize", noOfLines: 1, fontSize: "xs", children: ((_a = kurtosisPackage.repositoryMetadata) === null || _a === void 0 ? void 0 : _a.owner.replaceAll("-", " ")) || "Unknown owner" }), _jsxs(Flex, { gap: "16px", color: "gray.200", fontSize: "xs", children: [_jsx(Tooltip, { label: `This package has ${kurtosisPackage.runCount} stars`, children: _jsxs(Flex, { gap: "4px", alignItems: "center", children: [_jsx(Icon, { as: IoStar }), _jsx(Text, { as: "span", children: numberSummary(Number(kurtosisPackage.stars)) })] }) }), _jsx(Tooltip, { label: `This package has been run ${kurtosisPackage.runCount} times`, children: _jsxs(Flex, { gap: "4px", alignItems: "center", children: [_jsx(Icon, { as: IoPlay }), _jsx(Text, { as: "span", children: numberSummary(kurtosisPackage.runCount) })] }) })] })] }) }), _jsx(Flex, { gap: "16px", width: "100%", children: _jsx(RunKurtosisPackageButton, { kurtosisPackage: kurtosisPackage, onClick: onRunClick, flex: "1" }) })] }) }));
 };

package/build/catalog/KurtosisPackageCardGrid.d.ts

@@ -2,8 +2,7 @@
 import { KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
 type KurtosisPackageCardGridProps = {
     packages: KurtosisPackage[];
-    onPackageClicked?: (kurtosisPackage: KurtosisPackage) => void;
     onPackageRunClicked: (kurtosisPackage: KurtosisPackage) => void;
 };
-export declare const KurtosisPackageCardGrid: import("react").MemoExoticComponent<({ packages, onPackageClicked, onPackageRunClicked }: KurtosisPackageCardGridProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const KurtosisPackageCardGrid: import("react").MemoExoticComponent<({ packages, onPackageRunClicked }: KurtosisPackageCardGridProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/build/catalog/KurtosisPackageCardGrid.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Grid, GridItem } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { memo } from "react";
 import { KurtosisPackageCard } from "./KurtosisPackageCard";
-export const KurtosisPackageCardGrid = memo(({ packages, onPackageClicked, onPackageRunClicked }) => {
-    return (_jsx(Grid, { gridTemplateColumns: "1fr 1fr 1fr", columnGap: "32px", rowGap: "32px", children: packages.map((kurtosisPackage) => (_jsx(GridItem, { onClick: onPackageClicked ? () => onPackageClicked(kurtosisPackage) : undefined, children: _jsx(KurtosisPackageCard, { kurtosisPackage: kurtosisPackage, onRunClick: () => onPackageRunClicked(kurtosisPackage) }) }, kurtosisPackage.url))) }));
+export const KurtosisPackageCardGrid = memo(({ packages, onPackageRunClicked }) => {
+    return (_jsx(Flex, { gap: "32px", rowGap: "32px", flexWrap: "wrap", justifyContent: "center", children: packages.map((kurtosisPackage) => (_jsx(KurtosisPackageCard, { kurtosisPackage: kurtosisPackage, onRunClick: () => onPackageRunClicked(kurtosisPackage) }))) }));
 });

package/build/catalog/KurtosisPackageCardRow.d.ts

@@ -0,0 +1,11 @@
+import { KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
+import { ReactElement } from "react";
+type KurtosisPackageCardRowProps = {
+    title: string;
+    icon?: ReactElement;
+    packages: KurtosisPackage[];
+    onSeeAllClicked?: () => void;
+    onPackageRunClicked: (kurtosisPackage: KurtosisPackage) => void;
+};
+export declare const KurtosisPackageCardRow: import("react").MemoExoticComponent<({ packages, onSeeAllClicked, onPackageRunClicked, title, icon }: KurtosisPackageCardRowProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/build/catalog/KurtosisPackageCardRow.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup, Flex, IconButton, Text } from "@chakra-ui/react";
+import { memo, useEffect, useRef, useState } from "react";
+import { MdArrowBackIosNew, MdArrowForwardIos } from "react-icons/md";
+import { isDefined } from "../utils";
+import { KurtosisPackageCard } from "./KurtosisPackageCard";
+export const KurtosisPackageCardRow = memo(({ packages, onSeeAllClicked, onPackageRunClicked, title, icon }) => {
+    const flexRef = useRef(null);
+    const [scrollPosition, setScrollPosition] = useState("start");
+    const handleScrollLeft = () => {
+        if (isDefined(flexRef.current)) {
+            flexRef.current.scrollBy({ left: -200, top: 0, behavior: "smooth" });
+        }
+    };
+    const handleScrollRight = () => {
+        if (isDefined(flexRef.current)) {
+            flexRef.current.scrollBy({ left: 200, top: 0, behavior: "smooth" });
+        }
+    };
+    useEffect(() => {
+        if (isDefined(flexRef.current)) {
+            const updateScrollPosition = () => {
+                if (flexRef.current) {
+                    if (flexRef.current.scrollWidth === flexRef.current.clientWidth) {
+                        setScrollPosition("not-scrollable");
+                    }
+                    else if (flexRef.current.scrollLeft <= 0) {
+                        setScrollPosition("start");
+                    }
+                    else if (flexRef.current.scrollLeft >= flexRef.current.scrollWidth - flexRef.current.clientWidth) {
+                        setScrollPosition("end");
+                    }
+                    else {
+                        setScrollPosition("mid");
+                    }
+                }
+            };
+            window.addEventListener("resize", updateScrollPosition);
+            flexRef.current.addEventListener("scroll", updateScrollPosition);
+            return () => {
+                if (isDefined(flexRef.current)) {
+                    window.removeEventListener("resize", updateScrollPosition);
+                    flexRef.current.removeEventListener("scroll", updateScrollPosition);
+                }
+            };
+        }
+    }, [flexRef.current]);
+    return (_jsxs(Flex, { flexDirection: "column", children: [_jsxs(Flex, { justifyContent: "space-between", fontSize: "lg", pb: "16px", fontWeight: "medium", children: [_jsxs(Flex, { gap: "8px", alignItems: "center", children: [icon, _jsx(Text, { as: "span", children: title })] }), _jsxs(Flex, { gap: "16px", children: [isDefined(onSeeAllClicked) && (_jsx(Button, { variant: "ghost", onClick: onSeeAllClicked, size: "xs", children: "See all" })), _jsxs(ButtonGroup, { isAttached: true, variant: "ghost", size: "xs", children: [_jsx(IconButton, { "aria-label": "Scroll left", onClick: handleScrollLeft, icon: _jsx(MdArrowBackIosNew, {}), isDisabled: scrollPosition === "start" || scrollPosition === "not-scrollable" }), _jsx(IconButton, { "aria-label": "Scroll right", onClick: handleScrollRight, icon: _jsx(MdArrowForwardIos, {}), isDisabled: scrollPosition === "end" || scrollPosition === "not-scrollable" })] })] })] }), _jsx(Flex, { ref: flexRef, gap: "32px", rowGap: "32px", overflowX: "auto", justifyContent: "flex-start", children: packages.map((kurtosisPackage) => (_jsx(KurtosisPackageCard, { kurtosisPackage: kurtosisPackage, onRunClick: () => onPackageRunClicked(kurtosisPackage) }))) })] }));
+});

package/build/catalog/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./KurtosisPackageCard";
 export * from "./KurtosisPackageCardGrid";
+export * from "./KurtosisPackageCardRow";
 export * from "./SavedPackages";
 export * from "./utils";
+export * from "./widgets/PackageLogo";
 export * from "./widgets/RunKurtosisPackageButton";
 export * from "./widgets/SaveKurtosisPackageButton";

package/build/catalog/index.js

@@ -1,6 +1,8 @@
 export * from "./KurtosisPackageCard";
 export * from "./KurtosisPackageCardGrid";
+export * from "./KurtosisPackageCardRow";
 export * from "./SavedPackages";
 export * from "./utils";
+export * from "./widgets/PackageLogo";
 export * from "./widgets/RunKurtosisPackageButton";
 export * from "./widgets/SaveKurtosisPackageButton";

package/build/catalog/widgets/PackageLogo.d.ts

@@ -0,0 +1,7 @@
+import { ImageProps } from "@chakra-ui/react";
+import { KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
+type PackageLogoProps = ImageProps & {
+    kurtosisPackage: KurtosisPackage;
+};
+export declare const PackageLogo: ({ kurtosisPackage, ...imageProps }: PackageLogoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/catalog/widgets/PackageLogo.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "@chakra-ui/react";
+import { useHref } from "react-router-dom";
+import { isDefined } from "../../utils";
+export const PackageLogo = ({ kurtosisPackage, ...imageProps }) => {
+    var _a;
+    const noLogoHref = useHref("/noLogo.png");
+    const kurtosisLogoHref = useHref("/logo.png");
+    const hasLogo = isDefined(kurtosisPackage.iconUrl) && kurtosisPackage.iconUrl !== "";
+    const isKurtosisPackage = ((_a = kurtosisPackage.repositoryMetadata) === null || _a === void 0 ? void 0 : _a.owner) === "kurtosis-tech";
+    return (_jsx(Image, { src: hasLogo ? kurtosisPackage.iconUrl : isKurtosisPackage ? kurtosisLogoHref : noLogoHref, fallbackSrc: noLogoHref, borderRadius: "6px", ...imageProps }));
+};

package/build/catalog/widgets/RunKurtosisPackageButton.js

@@ -3,7 +3,7 @@ import { Button } from "@chakra-ui/react";
 import { FiPlay } from "react-icons/fi";
 import { isDefined } from "../../utils";
 export const RunKurtosisPackageButton = ({ kurtosisPackage, ...buttonProps }) => {
-    return (_jsx(Button, { size: "xs", variant: "solidOutline", colorScheme: "kurtosisGreen", leftIcon: _jsx(FiPlay, {}), ...buttonProps, onClick: (e) => {
+    return (_jsx(Button, { size: "xs", variant: "solid", colorScheme: "kurtosisGreen", leftIcon: _jsx(FiPlay, {}), ...buttonProps, onClick: (e) => {
             e.preventDefault();
             if (isDefined(buttonProps.onClick)) {
                 buttonProps.onClick(e);

package/build/catalog/widgets/SaveKurtosisPackageButton.d.ts

@@ -1,7 +1,8 @@
-import { ButtonProps } from "@chakra-ui/react";
+import { ButtonProps, IconButtonProps } from "@chakra-ui/react";
 import { KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
-type SaveKurtosisPackageButtonProps = ButtonProps & {
+type SaveKurtosisPackageButtonProps<IsIconButton extends boolean> = (IsIconButton extends true ? IconButtonProps : ButtonProps) & {
     kurtosisPackage: KurtosisPackage;
+    isIconButton?: IsIconButton;
 };
-export declare const SaveKurtosisPackageButton: ({ kurtosisPackage, ...buttonProps }: SaveKurtosisPackageButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SaveKurtosisPackageButton: <IsIconButton extends boolean>({ kurtosisPackage, ...buttonProps }: SaveKurtosisPackageButtonProps<IsIconButton>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/build/catalog/widgets/SaveKurtosisPackageButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@chakra-ui/react";
+import { Button, IconButton } from "@chakra-ui/react";
 import { memo, useCallback, useMemo } from "react";
 import { MdBookmarkAdd } from "react-icons/md";
 import { isDefined } from "../../utils";
@@ -23,6 +23,11 @@ const SaveKurtosisPackageButtonImpl = ({ kurtosisPackage, ...buttonProps }) => {
 };
 // this is memo'd to skip unecessary renders, which effectively doubles the performance of this component (as it is
 // displayed a lot.
-const SaveKurtosisPackageButtonMemo = memo(({ isPackageSaved, onClick, ...buttonProps }) => {
-    return (_jsx(Button, { size: "xs", variant: "solid", colorScheme: isPackageSaved ? "kurtosisGreen" : "darkBlue", leftIcon: _jsx(MdBookmarkAdd, {}), onClick: onClick, bg: isPackageSaved ? "#18371E" : undefined, ...buttonProps, children: isPackageSaved ? "Saved" : "Save" }));
+const SaveKurtosisPackageButtonMemo = memo(({ isPackageSaved, onClick, isIconButton, ...buttonProps }) => {
+    if (isIconButton) {
+        return (_jsx(IconButton, { icon: _jsx(MdBookmarkAdd, {}), size: "xs", variant: "solid", colorScheme: isPackageSaved ? "kurtosisGreen" : "darkBlue", onClick: onClick, ...buttonProps, children: isPackageSaved ? "Saved" : "Save" }));
+    }
+    else {
+        return (_jsx(Button, { leftIcon: _jsx(MdBookmarkAdd, {}), size: "xs", variant: "savedSolid", colorScheme: isPackageSaved ? "kurtosisGreen" : "darkBlue", bg: isPackageSaved ? "#18371E" : undefined, onClick: onClick, ...buttonProps, children: isPackageSaved ? "Saved" : "Save" }));
+    }
 });

package/build/theme/Fonts.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Global } from "@emotion/react";
-const Fonts = () => (_jsx(Global, { styles: `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');` }));
+const Fonts = () => (_jsx(Global, { styles: `
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap');
+    ` }));
 export default Fonts;

package/build/utils/index.d.ts

@@ -11,6 +11,8 @@ export declare function isAsyncIterable<T>(input: Iterable<T> | any): input is A
 export declare function capitalize(input: string): string;
 export declare function hasAnsi(text: string): boolean;
 export declare function stripAnsi(input: string): string;
+export declare const numberSummary: (val: number) => string;
+export declare function maybeArrayToArray<T>(maybeArray: T | T[]): T[];
 export declare function range(until: number): number[];
 export declare function range(from: number, to: number): [];
 export declare function range(from: number, to: number, step: number): number[];

package/build/utils/index.js

@@ -48,6 +48,21 @@ export function stripAnsi(input) {
     }
     return input.replace(ansiRegex, "");
 }
+export const numberSummary = (val) => {
+    if (val < 1000) {
+        return `${val}`;
+    }
+    if (val < 10000) {
+        return `${(val / 1000).toFixed(1)}k`;
+    }
+    if (val < 1000000) {
+        return `${Math.round(val / 1000)}k`;
+    }
+    return `${Math.round(val / 1000000).toFixed(1)}m`;
+};
+export function maybeArrayToArray(maybeArray) {
+    return Array.isArray(maybeArray) ? maybeArray : [maybeArray];
+}
 export function range(a, b, c) {
     const start = isDefined(b) ? a : 0;
     const stop = isDefined(b) ? b : a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kurtosis-ui-components",
-  "version": "0.85.53",
+  "version": "0.85.55",
   "private": false,
   "main": "build/index",
   "description": "This repo contains components used by Kurtosis UI applications.",